コーダーの私が0から始めた誰でも真似できるVue.jsの勉強方法
1328 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
この記事はかなり前に書いたのですがありがたいことに現在検索順位が2.9位で毎日多くの人に見てもらえています。
だから内容をちゃんとした物にしないといけないと思い2022年の5月に編集しています。
Vue.jsの勉強方法ですがネットにあまりない印象です。
実務経験がかなりある人なら今までの経験でどう勉強すればいいかが分かると思いますがそうではない人(特に初めてプログラミングをする人)はどうすればいいか分からないはずです。
普段の実務はコーダーをしていてプログラミングに無縁の私がどういう勉強をしているかについて解説します。
私はプログラミングについては実務未経験の人と変わらないと思うのでそんな人の参考になると思います。
Vue.jsはJavaScriptの文法を使うのでJavaScriptを万が一勉強していない場合は全く理解できないので勉強しましょう。
Progateで必要な内容を学ぶことができコース3まで勉強すれば恐らく大丈夫だと思います。
ちなみに参考書は一切使っていません、理由は参考書の評価が微妙なのとある参考書でいいと言う人と悪いと言う人がいてどれを使えばいいかが全く分からなかったからです。
それでは説明します。
目次
初めてプログラミングを勉強してどの言語を勉強すればいいかわからない人
これはプログラミングを始めたての私にも言いたいです。
はっきり言いますがVue.js単体での仕事はそうないです。（私は大阪在住ですが求人で見た事がないです）
だからVue.jsから入るのは絶対やめた方がよくWEB制作でVue.jsはまず使わないはずです。（私は一度も使った事がないです）
初めての言語でどれをやればいいか迷っていてWEB開発をしたいなら今トレンドのReact.jsやVue.jsではなくバックエンドのPHPがいいです。
Progateで勉強を始めると入りやすいと思います。
Rubyはネットでその内なくなると言われていますが私も周りから聞いています。
だからPHPから勉強を始めましょう。
そしてフレームワークに大人気のLaravelがありますがそれを使う時にVue.jsを合わせて使う事が多いのでその時にVue.jsを勉強すればいいと思います。
求人を見るとLaravelにVue.jsを併せて使う仕事を結構見ます。
プログラミング初心者でJavaScriptを勉強していてVue.jsも併せて勉強しようとしている人
はっきり言えますがJavaScriptを強くしましょう。
Vue.jsは学習コストが低いと言われますがそれはJavaScriptがちゃんと使える人にとってです。
一見すると簡単に見えますが使い込むと難しくなりJavaScriptが甘いと訳がわからなくなるので私はJavaScriptを強くすることを強く勧めます。
それとPHP、Ruby、Pythonとかの生言語はフレームワークではなくJavaScriptを併せるのでそれを勉強した方が色んな場面で役立つと思います。
ここからはそうではない人向けの解説です。
レファレンスは本当に困った時にしか使わない
公式のレファレンスは日本語になっているので使いやすいですが「何を伝えたいんだろう？」と思う時がよくあります。
例が色々と載っていますが分かったような分からないような感じです。
だからまず個人のブログの記事を読んで「どうしても理解できない、、」という時になったらしょうがなくレファレンスを読んで「何となくこう言いたいのかな？」という感じで使っています。
まずはこれから始めるとVue.jsは入りが楽
YouTubeでおすすめの動画で「ともすたチャンネル」というのがあります。
HTMLファイルでVue.jsのプログラミングを解説していますが分かりやすい解説とお手軽にVue.jsの導入ができてお勧めです。
私はまずこの動画で勉強しましたが「Vue.jsはそんなに難しくないな〜」と思いました。
Vue.js入門 #05：ボタンクリックで現在時刻を表示する – v-onディレクティブ
この動画がお勧めですが全部見る必要はないです、私はアプリを作ってとにかくVue.jsに慣れようと思っていたので「TODOアプリを作る」動画まで見て返金しました。
あくまで私が思ったことですがUdemyは評価が高いから取ったけど「微妙だな〜」と思う講座が多すぎるのでお勧めしません。
Vue.jsにちょっと慣れた状態になったらQiitaで情報あさり
とにかくアプリを作ってプログラミングに慣れようと思ったのでQiitaでアプリを作っている記事を探しこれを再現しました。
記事の中にはエラーが出て途中で挫折した物が結構ありますがエラーが出ずに動いた記事のみ載せます。
難しい記事もあるので全部実装せずに実装できる部分までやってもいいと思います。
私が探した時に3つ見つけましたが上から順に難易度が上がっていきます。
自分でコードを書けるようになるために必要なこと
vue.jsで作るマルバツゲームで勉強しているときに強烈に思ったのですが「この部分を実装したい」時にどうしても分からない時があったらコードを見て(時間がかかっても)理解できると思います。
そして「見たら分かるけどこんなコード自分から思いつかないよ」となることがよくあったのでそういう場合は理解して覚えた方がいいです。
恐らくですがプログラミングの経験が長い人ほど実装方法が頭に入っているから違う言語でもどう書けばいいかが分かって定着が早いんだと思います。
なぜそう思えるかですが私は本職が大学受験の数学の講師で大学受験の数学の問題を解く際に知識が全くない状態では解くことができないからです。
プログラミングの勉強を始めてから「プログラミングと大学受験の勉強って似てるな」と思いました。
だから実装方法が分からない部分に関しては理解して覚えることにしています。
Techpitで勉強しているけど気をつけないといけないこと
Qiitaのアプリ作りの記事でアプリを作ってからTechpitでアプリ作りをしています。
買い切り型か月額2980円の学び放題コースかで勉強することになるのですがまともな教材がほとんどないです。
Vue.jsを勉強したいのに他の言語が混ざっていたり、エラーが出るのに講師が質問に答えなかったり、、
初心者が純粋にVue.jsを勉強できて質問が返ってくる教材は1つだけです、、
だから買い切り型がいいと思います。
他の言語も一緒に勉強したいなら学び放題コースです。
↓ですが難易度が程よく記事の内容に間違いがなく質問すれば今の所返事が返ってきます。
Vue.js/Vuexを使ってTrello風アプリを作成しよう！
↓の教材もエラーはないですが質問しても返事がないので評価が悪いです。
Vue.js & FirebaseでTwitterライクなSNSアプリを作ってみよう！
私はReactも勉強しているので学び放題コースにしましたがあまりに酷い教材が多いので1ヶ月だけ使って教材のスクショを撮って復習するつもりです。
Vue.jsをコーディングに使いたいならこれ
すばりv-forディレクティブでがコーディングだけにVue.jsを使うならv-forディレクティブさえできれば何とかなる印象です。
WEBアプリの作り方の解説の記事
Vue.jsをある程度勉強してアプリの作り方の解説の記事を書いたので良かったら使って下さい。
