この記事はこれからVue.jsに入門したい方に向けて、私が実践した学習方法についてご紹介します。
業務でVue.jsを使う機会ができ、淡々と学習を進めて最近ようやく入門レベルを卒業できたのでまとめてみました。
これからVue.jsに入門したい方は是非ご参考ください。
Vue.jsの学習方法
0.HTML・CSS・JavaScriptを入門していない方向け
Vue.jsを入門するためにはHTML・CSS・JavaScriptの知識が最低限必要です。
まだ入門できていない方は以下の記事を参考に学習してから挑戦しましょう!
1.公式ドキュメントで勉強
Vue.jsはありがたいことに日本語の公式ドキュメントがあります！
これだけでも十分入門レベルを卒業できるのでまずはこちらを見つつ、実際にソースを書いてみることをお勧めします。
【Vue.js(ver3)の公式ドキュメント(日本語版)】
ちなみに業務でVue.jsを扱う場合はバージョンを必ず確認しましょう。
私の場合Vue.jsのver2を業務で扱うので以下の公式ドキュメントから学習を進めました。
【Vue.js(ver2)の公式ドキュメント(日本語版)】
既にフロントエンドについて基礎的な知識のある方は公式ドキュメントで十分かもしれません。（結局私はこのあとUdemyを利用しました。）
2.実際にアプリケーションを作ってみる。(途中で挫折)
公式ドキュメントの内容を見つつ実際に見たものの思うように手が動かず、結局勉強不足でもう少し作業ベースで基礎的な知見を貯める必要があります。
公式ドキュメントは日本語で書かれていますが、それなりにフロントエンドを経験した方向けに書かれているドキュメントでした。
私はそもそもバックエンド開発とスマホアプリ開発をしていたのでフロントエンドに関する基礎的も一緒に学習する必要がありました。
3.とほほのVue.js入門で再学習
何がわかっていて、何がわかっていないのかを明確にするために「とほほのVue.js入門」で今まで学習した内容を再学習することにしました。
これにより最低限抑えていけないVue.jsの知識はついたと思います。ただこの時点ではまだプロダクト開発するまでに至りませんでした。
4.UdemyでVue.jsの基礎学習
「フロントエンドの基礎とVue.jsの知識を両方効率的に学びたい！」そんなわがままな私のニーズを満たす2つのUdemy教材がたまたまあったのでこちらで学習を進めることにしました。
もともとYouTubeで講師の方が動画を出していてそちらをきっかけにこの教材をしりました。
この教材であればHTMLとCSSの基礎をわかっている方であれば、Vue.jsを理解することが可能です！
Vue2とVue3は書き方が多少変わります。
Vue3についても抑えてきたかったので念の為購入して学習しました。
正直、Vue2を抑えていればあとはググりながらでどうにかなるのでこの教材自体は買っても買わなくても変わらなかったかも…。
5.Vue.jsのフレームワークであるnuxt.jsを学習
次にVue.jsのフレームワークであるnuxt.jsを学習しました。
こちらもUdemyを購入して学習しました。が、正直公式見ればなんとかなったかも。
ちなみにこちらの教材にあるFirebaseとの連携の講座はやってないので実質8割だけ受講しました。
それだけnuxt.js自体はとてもシンプルでわかりやすいので学習コストがそこまでかかりませんでした。
6.Vue.jsのUIライブラリであるVuetifyを学習
Vue.jsのUIライブラリであるVuetifyを学習しました。
これが分かればCSSをよく知らなくてもいい感じのUIでページを構成することができます。
こちらは公式ドキュメントが充実していたのでそこまで苦労しませんでした。
( ※日本語版もあります！)
7.プロダクト開発(再挑戦)
ようやく基礎がわかってきたので実際にポートフォリオページをNuxt.js(Vue.js)で作ってみることにしました。
ようやくできたページがこちら。
ダークモードとレスポンシブに対応しています。
あと興味本位でVueglというCGのコンポーネントを入れてみました。
まだまだVue.jsの利点を活かしきれてないポートフォリオですが、ソースコートがこちらで公開しています。
まとめ
Vue.jsは日本語の情報が豊富で入門しやすいと思います。
ちなみにここまでの学習コストは毎日1時間やって大体１ヶ月ぐらいでした。(30時間くらい)
これからVue.jsに入門する方の参考になったら嬉しいです！
