初心者向け Vue.js 学習ロードマップ Vue.js初心者の方や、普段あまりJavaScriptに触る機会がない方が、なる早でVue.jsを好きになるには

##突然ですが、Vue.js は好きですか？

私は今でこそVue.jsが好きですが、途中、まったく触らない時期も含め、好きになるまで１年近く（10ヶ月くらい）かかりました。
当然ですが、早い段階で好きになってしまった方が、学習効率は良いものです。
うんうんと思った方と、何言ってんだ、好きとかどうでもよくない？ ドキュメント読んで書くだけでしょ。という方がおられるかと思います。後者の方にはちょっと意味不明かもしませんが、ここでは、好きになった方が自然と考える回数が増えて良いサイクルが廻りやすいとでも言っておきます。

さて、この投稿は、表題にありますように、Vue.js初心者の方や、普段あまりJavaScriptに触る機会がない方が、なる早でVue.jsを好きになるにはどうしたら良いか、ということを私の体験を交えて書いているものです。

私のスキル自体は全然大したことはありませんが、これからVue.jsを学んでいきたいという方に向けての、学習のロードマップ的なものを書いておこうと思います。
尚、本稿で取り上げております、学習教材や書籍に関しましては、私と販売元とは一切関係がございません。

それでは始めます。

Vue.js をいきなり始めてみよう！

最近は、オンラインの学習教材が豊富ですね。僕自身は学習の基本には常に本だったのですが、最初の取っ掛かりとしましては、近年は動画の方が多くなってきたかなと思います。

今年になって、数ある英語・日本語含めたオンライン教材の中でも、僕の中で鉄板の教材と言いますか、これが一番ポイントを抑えていて且つ、初心者の方にもわかりやすいだろうというものが出てきたのでご紹介いたします。それが下記のものです。

この教材の良いところは、Vue Router, Vuex, VueCLIの操作方法, Netlifyへのデプロイ関連、といった気になるトピックに関する内容はもちろんですが、この動画教材を順番に学習していくだけで、公式ドキュメントの内容も把握できるような構成になっていることと、何より、仮装DOMやVue.jsのアーキテクチャそのものへの解説から、コンポーネント設計に関する内容がたくさん書かれている点、そして、初心者の方が疑問に思ったり、曖昧な理解になりがちなところを、丁寧に解説しつつ、本やドキュメントを読んだだけではわからないtipsまでふんだんに収録している点です。

JavaScript にあまり慣れていない方や、Vue.js について全く触れたことがない方は、順番に始めてみると良いと思います。また、多少触ったことがある方につきましては、最初のところを一旦後回しにして、コンポーネントのセクションから始めてみても良いかと思います。面白そうなところから手を出すのがポイントです。

この動画を半分程度消化できてくるころには、もう Vue.js を好きになっていることでしょう。どんどん理解のスピードが上がってきているのが自分でもわかるはずです。

Vue.js スタイルガイドにも目を通しておこう

コンポーネントの件で、気になることをここで少し、既に他の方が書いている内容ですが、結構無視しているコードも世の中にはあります故、今後のことを踏まえて、混乱しないためにも、一度ここでスタイルガイドを読んでおきましょう。
動画教材の中でもしつこいくらい触れられているので覚えている方もいるとは思いますが笑

https://jp.vuejs.org/v2/style-guide/index.html
https://qiita.com/_upto_me_/items/58642612b0106b193c82

##慣れてきたら、次はこれ！
https://www.sbcr.jp/product/4815601829/

JavaScriptの著作でも有名な山田さんの河童のイラストが書かれた本です。この本には、猫の本にはない、単体テストやE2Eテスト、TypeScriptの導入まで含まれています。
もし、この本の内容が難しいと感じる場合には、猫の本を。
余力がある人は、猫の本も並行して進めると良いかもしれません。猫の本には、現場で使うことになるであろうtipsがいっぱいで、ライフサイクルの解説もわかりやすいです。著者の mioさん の解説サイトも大変秀逸ですので必ず見てみましょう。
http://www.c-r.com/book/detail/1230
https://cr-vue.mio3io.com/

もし、JavaScriptそのものの理解が足りないと感じた方は、下記の同じく 山田さん のJavaScript本や、下記の動画教材（ES2015の学習）で学習してみることをおすすめします。その他にも、オライリーのサイ本が分厚くて苦手な方も、フクロウ本、チョウ本は、やっておいて損はないはずです（山田さんの本で難易度的にも問題なければ、フクロウも問題ないはずですが、チョウやフクロウは内容が少し旧い部分がありますので、混乱しそうという方は、山田さんの改訂版の JavaScript本でも十分かと思います。）。私自身は、プロトタイプの理解等々、山田さんの本とフクロウ本で深まりました。

https://gihyo.jp/book/2016/978-4-7741-8411-1#toc

https://www.oreilly.co.jp/books/9784873113913/

https://www.udemy.com/javascriptes6/?couponCode=

##英語が問題ない方はこちら
https://www.udemy.com/vuejs-2-the-complete-guide/

##Nuxt.js が気になる方はこちら

https://www.shuwasystem.co.jp/book/9784798056593.html
ビギナーに優しい掌田津耶乃さんの書かれた本です。この本から始めてみても良いかとは思いますが、本稿では、一通りドキュメントをおさらいしつつ、隙間時間に眺めるだけでも学習できる動画教材から勧めています。
この本では、VueCLIについて、初心者に優しく、丁寧な解説が載っており、Vue.js に関する解説から始まり、Nuxt.jsについてまで広く扱っています。最初にご紹介した動画教材にはない、axiosによる非同期処理について、解説が掲載されています（最初に紹介した動画教材にも追加で収録予定とのこと）。後ろの方に JavaScriptの基本をおさらいできるセクションがありますので、最初にご紹介した動画教材の後や、並行して始めてみても良いと思います。

##Nuxt.js 英語
英語の教材も積極的に活用しましょう。
ある程度慣れてきたら、周囲には英語の教材を勧めています。私自身も、英語は苦手ですが、コードをおっかけていけば、多くの場合、何とかなります。google翻訳のお世話になりましょう。当然コードは全世界共通ですので、慣れの問題かと思います。

VueSchool, VueMastery等もありますが、まずは udemy で問題ないかと思います。

##参考文献
学習を加速させるインデックス読書術
https://qiita.com/dkatsura/items/3364b293ed1451a66a8a