この記事では Vue.js を学習する初心者の方のために、Vue.js のおすすめの勉強方法や書籍を紹介します。
私も Amazon で一通り Vue.js 関連の本を買いましたが、Vue.js 関連の本はハズレが多いので注意が必要です。 記事ではハズレ本についても本音で紹介するので、ぜひこの記事を参考に地雷を避けてください。
3 分でこの記事を読めば、5000 円分くらいは節約できるでしょう。裏を返せば私がそれ以上に無駄な金を費やしたということでもありますが。
さて、Vue.js を学習したい方はまず、公式チュートリアルを眺めてみてください。
React などの経験があって、公式チュートリアルの内容を理解できる方は、みんなの Vue.js 以外の市販の本を買う必要はないです。 Vue の勉強というよりは、Simplifying JavaScriptなどを読んで、関数型で JavaScript を書く練習をしてください。
次に Nuxt.js です。Nuxt.js は Vue.js で静的 Web サイトの生成などの機能を使いやすくした「メタフレームワーク」です。
Vue を使いやすく便利にしたイメージですが、ベースは Vue.js なので、使いこなすためには Vue.js の知識が必須です。
「プロジェクトで Nuxt を使う」という人はまず、Vue から勉強してください。 Vue がわからないと、Nuxt も全く理解できません。
Nuxt.js の勉強法ですが、こちらも公式がバイブルとなります。
2023 年から Nuxt を始める場合は、「Nuxt3」を勉強してください。 Nuxt2 の勉強しても無駄になります。
さて、Vue.js や Nuxt.js の公式を眺めてみて「意味がわからんなぁ」と感じる人もいるでしょう。安心してください。私もさっぱりでした。
そういう方は、JavaScript や TypeScript の基礎知識が不足している可能性があります。
全くの初心者の場合は、JavaScript 本格入門を読んで、JavaScript の基礎を学んでください。
次に、JavaScript Primerを写経します。「写経」とは、本を読みながら実際に自分で動かしてみる勉強法のことです。
JavaScript の基礎を身につける上で、JavaScript Primer までは必須です。
JavaScript の基礎を学んだ後で、TypeScript の勉強もします。 TypeScript は JavaScript を拡張し、型を付けられるようにしたものです。
「型って何？」と疑問を抱く方もいるかもしれませんが、大丈夫です。
プロを目指す人のための TypeScript 入門 安全なコードの書き方から高度な型の使い方までを読みましょう。
現代の Vue や Nuxt の開発で、TypeScript を使わないプロジェクトはほぼありません。あったとしたら、避けた方がいいです。TypeScript は常識なのです。
JavaScript と TypeScript の基礎を押さえた後で、書籍で Vue を学んでいきます。本を使って勉強したとしても、実際に開発するときには公式ガイドを参照することになるので、いついかなる時も、公式ガイドの存在を忘れずにいてください。
ちなみに JavaScript 関連のおすすめ書籍はReact を勉強するためにおすすめの書籍一覧｜初心者・未経験からポートフォリオを作るレベルまで にも書きました。 こちらも本音のレビューがあるので、気になる方は覗いてみてください。
なお、近年の顕著な傾向として、新しいフレームワークについての学習教材は動画で提供される、というのがあります。
Vue3 や Nuxt の書籍は Amazon 上では数は多くありませんが、Udemy にはたくさんあります。 日本語で学ぶ場合は以下の動画などが非常に役に立ちます。
はじめての Vue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ
もちろん、動画で学ぶスタイルが合わない人もいるとは思いますが、特に動画でも問題ない方は、Udemy の利用を積極的に考えても良いでしょう。
同じ動画でも、YouTube はまとまりがない場合が多い上に誘惑もあるので、学習には不向きです。時間の無駄になるのでやめましょう。タダほど高いものはありません。
以下で Vue.js のおすすめの書籍を紹介していきます。
Vue.js 入門 基礎から実践アプリケーション開発まで
『Vue.js 入門 基礎から実践アプリケーション開発まで』は 2022 年時点では Vue の入門書としては一番完成度が高いです。
Vue.js のコントリビューターが執筆しているので、詳しいのも当たり前なのですが、Vue の機能を一通り押さえてくれます。
何やら中級者向けにも見えますが、初学者でも十分理解できます。 逆に理解できないなら、JavaScript の知識が足りません。
『Vue.js 入門 基礎から実践アプリケーション開発まで』の欠点は、出版が 2019 年でちょっと古いところです。 最新の Vue には対応していません。
ただ、最新に対応している現場は少ないので、むしろ現場に持っていける一冊になる可能性は高いです。 また、歴史はつながっているので、『Vue.js 入門 基礎から実践アプリケーション開発まで』で学んだ知識は今後の Vue を学ぶ上でも無駄にはなりません。
Option API で書かれた Vue を基礎からじっくり勉強したい人におすすめの本です。
Amazon→Vue.js 入門 基礎から実践アプリケーション開発まで
みんなの Vue.js
『みんなの Vue.js』は中級者向けです。初心者のうちに読んでも捨ててしまいたくなるでしょう。
現場で Vue を使いはじめてしばらく経って、色々とビジネス的な要望を叶えていこうとなった段階で読むと、目から鱗が落ちるような記述がたくさん目につくようになる不思議な本です。
年収が高くて有名なスタートアップである、プレイドの有名エンジニアの方々が書いています。
それゆえに本のレベルも高めです。現場でパフォーマンスに悩んだり、状態管理やテストについてのベストプラクティスについて知りたくなったときに読む本です。
実践向けの本です。
Amazon→みんなの Vue.js
おすすめできる本は『Vue.js 入門 基礎から実践アプリケーション開発まで』と『みんなの Vue.js』の 2 冊くらいです。
書籍派にとって、Vue は本当に勉強しづらいライブラリです。良書がほとんどないです。
海外では書籍として情報を出すよりも Udemy で発信するのが流行っているらしく、良い情報は Udemy で取得することになります。
Vue - The Complete Guide (incl. Router & Composition API)
Composition API をちゃんと勉強したい人は『Vue - The Complete Guide』で勉強しましょう。
小さなサンプルからエンタープライズレベルのアプリまで作っていきます。 Composition API を含む、Vue3 の内容まで踏み込んで解説してくれるので、モダンな現場に配属される前に必ず見ておくべき講義です。
Udemy→Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)
ここまでやっておけば、あとはチュートリアルを見ながら手を動かして Vue に慣れていくのが良いです。
Vue の基礎を身に着けたらどうする？
実務で経験値を上げていくのが一番です。 結局、実務経験が一番成長します。
現場で課題を解決しながら、レベルアップしていきましょう。
「これ、どうやって作ればいいんだろう？」
と調べる際に、色々なサイトを検索しまくります。 ググっている過程で一番成長できます。
まずは現場に出てください。完璧に勉強して、完璧に基礎固めしてから応募する...みたいなことをやっていると、何も進められません。何も得られません。
とにかく行動しましょう。「お勉強」という安住の地から抜け出せない人は本当に多いです。落とされるリスクを取って、応募することで、人生が変わります。
どんどん現場に出ていきましょう。
Vue.js の勉強でハズレだった本
まずはハズレだった本から紹介します。 というのも、Vue はとにかく大ハズレ本が多いからです。
この記事でハズレ本をよく読んで、余計な出費は避けてください。
まず絶対に避けなければいけないのが掌田津耶乃 さんの本です。
掌田津耶乃 さんの本に良書なし
掌田津耶乃 さんは広く浅く、ありとあらゆる流行り物のプログラミング言語の技術書を書いて、荒稼ぎしている方です。 「掌田津耶乃 の本に当たりなし」と言われています。2000 年代からずっと本を出しまくっていますが、全部の本がハズレです。
「掌田津耶乃 の本に当たりなし」はエンジニアをやるなら忘れないでください。公式チュートリアルの劣化コピーを量産しているだけです。
とにかく掌田津耶乃 さんの本は全部ハズレです。露骨に初心者狩りしていて、個人的には非常に印象悪いです。私も初心者時代、少なくとも 3 万円分くらいはお布施したはずです。 とにかく内容が薄く、何の役にも立ちませんでした。
掌田津耶乃 さんの本を読むならネットで勉強した方がいいです。
掌田津耶乃 さんは 10 年前から全くコードが上達していないし、上達する気もないでしょう。
変数名などもアンチパターンの宝庫で、現場で Pull Request を出されると迷惑なレベルのサンプルばかりです。 見ると下手になるので、なるべく目に入れないようにした方がいいと思います。
Amazon だけでジャケ買いすると、サンプルコードのひどさもわからないと思います。 技術書はなんとなくジャケ買いしてしまいがちですが、評価の低いレビューを見ておいてください。
ただ、掌田津耶乃に関しては、思考停止で「掌田津耶乃の本は買わない」と決めておくのがよいです。
WINGS プロジェクト系の本
WINGS プロジェクトにも当たりがほぼ出ないです。
内容がとにかく薄く、公式チュートリアルを読んだ方がずっと良いような本がたくさんあります。
1+1 = 1、3×4 = 12、みたいな単純な計算をずっと繰り返していくような、 あるいは大学受験で英語文法の 1 問 1 答の問題集をひたすらこなしていくような、なんともいえない退屈な構成です。
WINGS プロジェクトというか、WINGS プロジェクトを率いる山田祥寛さんは昔はけっこう良い本を書いていたのですが、手下の本はダメです。
これからはじめる Vue.js 実践入門などはたしかにわかりやすいのですが、文字が大きくスカスカでした。
あと、サンプルが「もろサンプル」という感じで、非常に退屈です。
「こんな機能がありまっせ」と公式チュートリアルを薄めたような内容を淡々と紹介しているだけで、現場で使えるレベルにはならないでしょう。
WINGS プロジェクトの本も買ってはいけません。
21Step で体得 Vue.js ハンズオン
『21Step で体得 Vue.js ハンズオン』はわけがわからない本でした。 この本を読んで Vue.js が理解できる人はいません。ハンズオンと書かれていながら、コードの動かし方もよくわかりません。
というか、Vue を使いこなしている人が読んでも本の構成が意味不明なので、理解できないでしょう。 何かの暗号に見えました。
著者の脳内では何か整合性が取れているのかもしれませんが、読者は完全に置いてきぼりになっています。
ちなみに本の紹介で「Vue の最新機能である CompositionAPI に対応している」とされている点で期待して買ったのですが、『21Step で体得 Vue.js ハンズオン』を読んでも CompositionAPI で書けるようにはなりません。 というか、どこで CompositionAPI に触れたのかよくわからないくらい読みづらいです。
どこに何を書いているのかがわかりません。何を伝えたいのかもわかりません。
さすがに編集者の方の怠慢なのではないでしょうか。
Amazon→21Step で体得 Vue.js ハンズオン
「21Step で体得 Vue.js ハンズオン」も購入する必要はないです。