コーダーの私が0から始めた誰でも真似できるVue.jsの勉強方法
5451 回閲覧されました
みなさんこんにちは、jonioです。
Vue.jsの勉強方法ですがネットにあまりない印象です。
実務経験がかなりある人なら今までの経験でどう勉強すればいいかが分かると思いますがそうではない人(特に初めてプログラミングをする人)はどうすればいいか分からないはずです。
普段の実務はコーダーをしていてプログラミングに無縁の私がどういう勉強をしているかについて解説します。
私はプログラミングについては実務未経験の人と変わらないと思うのでそんな人の参考になると思います。
目次
この記事を書いた目的
どういう手順で勉強すればVue.jsを使えるようになるかを解説している情報がないからです。
対象となる人
実務未経験でこれからVue.jsを勉強する人です。
Vue.jsを学ぶ前に勉強した方がいい内容
Vue.jsはJavaScriptの文法を使うのでJavaScriptを万が一勉強していない場合は全く理解できないので勉強しましょう。
Progateで必要な内容を学ぶことができコース3まで勉強すれば恐らく大丈夫だと思います。
ちなみに参考書は一切使っていません。
理由は参考書の評価が微妙なの1つの参考書についていいと言う人と悪いと言う人がいてどれを使えばいいかが全く分からなかったからです。
初めてのプログラミングでどの言語を勉強すればいいかわからない人
はっきり言いますがVue.js単体での仕事はないです。（私は大阪在住ですが求人で見た事がないです）
だからVue.jsから入るのは絶対やめた方いいです。（この記事の目的とは矛盾していますが）
初めての言語でどれをやればいいか迷っていてWEB開発をしたいなら今トレンドのReact.jsやVue.jsではなくバックエンドのLaravelがいいです。
理由は求人数が多いからです。
SNSのXでReact.jsを勉強している人が多くいますがそれしかできないと実は仕事がないです。
Laravelのフロントの部分にVue.jsを合わせて使えばVue.jsのスキルアップもできます。
実務をすると分かるのですがフロントエンドはバックエンドの処理と一緒に使う場合が多くてフロントエンド単体で使うのってそんなにないんです。
求人を見るとLaravelにVue.jsを併せて使う仕事を結構見ます。
プログラミング初心者でJavaScriptとVue.jsを一緒に勉強している人
JavaScriptは上の解説で説明している部分ができればとりあえず大丈夫だと思います。
JavaScriptとVue.jsの両方を勉強すると学習時間がかかり過ぎるので2つを同時に勉強するのはおすすめできません。
リファレンスよりもAIがいい
公式のリファレンスは日本語になっているので使いやすいですが「何を伝えたいんだろう？」と思う時がよくあります。
例が色々と載っていますが分かったような分からないような感じです。
だからまず個人のブログの記事を読んで「どうしても理解できない、、」という時になったらしょうがなくレファレンスを読んで「何となくこう言いたいのかな？」という感じで使っています。
現在2024年ですがAIが大活躍しているじゃないですか？
私はChatGTPに分からない部分を質問していますがこれをやった方が理解がしやすいと思います。
YouTubeでおすすめの動画
YouTubeでおすすめの動画で「ともすたチャンネル」というのがあります。
HTMLファイルでVue.jsのプログラミングを解説していますが分かりやすい解説とお手軽にVue.jsの導入ができてお勧めです。
私はまずこの動画で勉強しましたが「Vue.jsはそんなに難しくないな〜」と思いました。
1つ目の動画のリンクを掲載しますが全部で8個あります。
Udemy
YouTubeの動画を見終わったら次はUdemyです。
この動画がお勧めですが全部見る必要はないです。
私はアプリを作ってとにかくVue.jsに慣れようと思っていたので「TODOアプリを作る」動画まで見て返金しました。
参考書
そして下記の参考書で勉強をしました。
Vue.jsがどんな物火を知るにはいいと思います。
Vue.jsにちょっと慣れた状態になったらQiitaで情報あさり
とにかくアプリを作ってプログラミングに慣れようと思ったのでQiitaでアプリを作っている記事を探しこれを再現しました。
記事の中にはエラーが出て途中で挫折した物が結構ありますがエラーが出ずに動いた記事のみ載せます。
難しい記事もあるので全部実装せずに実装できる部分までやってもいいと思います。
私が探した時に3つ見つけましたが上から順に難易度が上がっていきます。
コードを書けるようになるには理解をする
vue.jsで作るマルバツゲームで勉強しているときに強烈に思ったのですが「この部分を実装したい」時にどうしても分からない時があったらコードを見て(時間がかかっても)理解できると思います。
そして「見たら分かるけどこんなコード自分から思いつかないよ」となることがよくあったのでそういう場合は理解した方がいいです。
恐らくですがプログラミングの経験が長い人ほど実装方法が頭に入っているから違う言語でもどう書けばいいかが分かって定着が早いんだと思います。
なぜそう思えるかですが私は本職が大学受験の数学の講師で大学受験の数学の問題を解く際に知識が全くない状態では解くことができないからです。
こういう時はこう考えるっていうのが必要なんです。
プログラミングの勉強を始めてから「プログラミングと大学受験の勉強って似てるな」と思いました。
だから実装方法が分からない部分に関しては理解して覚えることにしています。
Techpitは注意が必要
Qiitaのアプリ作りの記事でアプリを作ってからTechpitでアプリ作りをしています。
買い切り型か月額2980円の学び放題コースかで勉強することになるのですがまともな教材がほとんどないです。
Vue.jsを勉強したいのに他の言語が混ざっていたり、エラーが出るのに講師が質問に答えなかったり、、
初心者が純粋にVue.jsを勉強できて質問が返ってくる教材は1つだけです、、
だから買い切り型がいいと思います。
↓ですが難易度が程よく記事の内容に間違いがなく質問すれば今の所返事が返ってきます。
Vue.js/Vuexを使ってTrello風アプリを作成しよう！
↓の教材もエラーはないですが質問しても返事がないのであえて使うなら分からない部分をAIに質問して使うしかないです。
Vue.js & FirebaseでTwitterライクなSNSアプリを作ってみよう！
WEBアプリの作り方の解説の記事
Vue.jsをある程度勉強してアプリの作り方の解説の記事を書いたので良かったら使って下さい。
