フロントエンドに興味があって、Vueをやってみたい...!という人、きっと多いかと思います。（きっと、きっとね）
ただ、どうやってVueを勉強し始めればいいのかわからない、という人もまた多いはず。Javascript自体あんまり触ったことないし...って人もいると思います。
そこで、これからVueを新たに勉強する人向けに、何を、どの順番で勉強すればいいのかの道しるべ的なものを書いていきます。
対象読者はこんな感じ。
・RubyやPHPはよく書くけど、Javascriptあんまよくわからない
・jQueryチョット書ける
ぜひ参考にしてもらえると幸いです。
※もちろん、以下に書く方法が最良というわけではないので、参考程度に考えてくださいね。
ES6の記法を知る
PHPやRubyを書けるなら、Javascript自体の勉強はそんなに大変ではありません。一部の独特の挙動を除けば、すんなり理解できるはず。
少し大変なのは、ES6の記法を理解し、使えるようになること。（ES6自体についての説明は省略します）
アロー関数や、スプレッド演算子など、他の言語では見ない記法がいくつか登場します。VueやReactをES6以前の記法で書くことはほぼないので、Vueの勉強を始める前にES6の記法をざっと見ておきましょう。
ただ、このステップで時間をかけすぎる必要はありません。Vueの勉強を始めると嫌でも大量に書くことになるので、記法を眺めて、「へー、こんな書き方があるのね」くらいで十分です。
※Javascript全く知らん！って人は、Progateでサクッと勉強しておくといいかも。
あとjQueryについては、別に勉強しなくても大丈夫かと思います。
Vueの勉強方法
Vueは公式ドキュメントが非常に充実しており、かつ日本語訳もされています。
とはいえ、いきなり公式ドキュメントを読み始めるのはシンドイというか、体系的に学ぶにはあまりおすすめではないです。
そこで登場するのがプログラミング学習本。Vueの本はいくつか出版されていますが、以下で自分のおすすめを2冊紹介します。
基礎から学ぶVue.js
1ミリもVueを知らなくても読み進められる構成になっており、実際に手を動かしながら学べるのも嬉しい&大事なポイント。自分もこれで学習しましたし、いくつか購入したVue本の中でも一番おすすめだと感じています。
ES6で書かれているので、アロー関数やらが実際にどう使われるのかもまとめて理解できます。表紙のねこの絵がチャーミング。
Vue.js入門
自分は新しい言語、技術を勉強するとき、学習本を2冊読むことが多いです。
そして2冊目におすすめなのがこちらのVue.js入門。上記の基礎から学ぶVue.jsに比べるとかなり分厚い（2倍くらい？）ですが、ソースコードが多く記載されており、また違った角度から勉強できます。
ただ、途中からは完全に入門レベルではなくなるので、正面から向き合うのはかなりシンドイです。ザーッと進めて、基礎から学ぶVue.jsになかった内容をつまみ喰いするのがいいと思います（Atomic Designにも触れていたはず）。Jestを使ったテストが書かれているのもありがたいです。
自作アプリを作ってみる
ここまで勉強すれば、Vueでアプリを作るだけの知識は十分身につきます。ただ、やっぱり自分で考えて、悩みながら手を動かさないと理解できないのがプログラミング。ちょうどこのへんが、Vue完全に理解したわ...ってなってるタイミングです笑
小規模でいいので、自作アプリを作ってみましょう。できればVuex、Vue-routerといった有名&必須ライブラリを使って作るのがおすすめです。あれ、これどうやるんだっけ...？ってなったときは公式ドキュメントにだいたい答えが書いてあるので読みましょう。
なーんもアイディア浮かばんわ！という人は、ポートフォリオサイト作るのがおすすめです。自分もVue、Reactそれぞれでポートフォリオサイトを作りました。めっちゃシンプルなやつです。
余裕があればNuxt.jsまでやるといいかも
NuxtはVueのフレームワークです。（この表現あってるかな）
フレームワークと聞くと、学習コストがそこそこ高いイメージがありますが、Nuxtに関してはその限りではありません。
ほぼVueと同じルールのもとで、よりシンプルにアプリの作成が可能です。SSRも可能で、これからフロントエンドをVueを使って独立したアプリで作るなら、Nuxtを使うのがベストプラクティスな気がしています。
Nuxt案件も増えているとも聞くので、やって損はありません。
Nuxtの学習本はまだまだ少ないイメージですが、Nuxt.jsビギナーズガイドがおすすめです。これ1冊やればNuxtをある程度使えるようになるはず。
まとめ
VueとReact、どっちにしようかな・・・？と悩んでいる人で、Javascriptの経験があまりない人は、Vueがおすすめです（個人的に）
理由は、Vueのシングルファイルコンポーネントの概念は直感的に理解しやすいためです。Reactは関数型な記述方法と、jsxの見た目、書き方が最初は辛いと感じる人がいると思います。（自分がそうだった）
Vueはとっても楽しいので、ぜひモダンフロントエンドのとっかかりとして始めてみてください！