Help us understand the problem. What is going on with this article?

これからVueを勉強しようと思っている人への道しるべ(勉強方法)を書く

More than 1 year has passed since last update.

フロントエンドに興味があって、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

Vue.js入門

自分は新しい言語、技術を勉強するとき、学習本を2冊読むことが多いです。
そして2冊目におすすめなのがこちらのVue.js入門。上記の基礎から学ぶVue.jsに比べるとかなり分厚い(2倍くらい?)ですが、ソースコードが多く記載されており、また違った角度から勉強できます。

ただ、途中からは完全に入門レベルではなくなるので、正面から向き合うのはかなりシンドイです。ザーッと進めて、基礎から学ぶVue.jsになかった内容をつまみ喰いするのがいいと思います(Atomic Designにも触れていたはず)。Jestを使ったテストが書かれているのもありがたいです。

Vue.js入門

自作アプリを作ってみる

ここまで勉強すれば、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はとっても楽しいので、ぜひモダンフロントエンドのとっかかりとして始めてみてください!

akashixi
29歳未経験からWeb系エンジニアとして働き始めました。拙いながらも積極的にアウトプットしていこうと思います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした