経験談に基づく主観的Vue.js学習ロードマップ

はじめに

おはようございますhiroです。
Vueを学習するにあたり、初学者向けのロードマップがあればと思っていたため本記事を書きました ✏️
タイトルにもありますが、本記事は私の経験に基づくかなり主観的なものとなっていますので予めご了承ください。「これからVueをどのように学習しよう？」そう悩んでいる方の参考になれば幸いです！

対象読者

本記事はVueをこれから学習しようとしている初学者の方を対象としています。具体的に以下のような悩みを持った方を想定しています。

• JavaScriptをざっと学びこれからVueをどのように学習しようか悩んでいる方
• どのような教材を使用すれば良いか悩んでいる方
• 公式ドキュメントを読めと言われて「読めれば苦労しないよ！」と悶々としている方

本記事では、教材の紹介からその教材をどう使用していくかなどを具体的に記載しております。

ゴール

本記事のゴールとして、Vueを用いて簡単なSPAアプリケーションを不自由なく構築できる状態を目指します。その先のステップアップ方法についても章を設けていますが、こちらは自身が絶賛修行中のため参考程度にとどめておいてください。

Vueの基本を学習する

それではVueを学習していきましょう！
まず最初に使用する教材はこちらです。
https://gihyo.jp/book/2022/978-4-297-13072-5

現在Vueはバージョン3となっており、どの教材を使用するにしてもVue3を題材としているものを選びましょう。
本教材について簡単に説明します。こちらの書籍はVueの主要機能を各章で体系的に学ぶことができ、かつ説明が大変分かりやすいです。動作に必要なコードも全て記載されているため、初学者には大変学習しやすいものとなっています。

学習方法

基本的には書籍をはじめから順に学習しましょう。ここで学習する範囲としては、第10章のVue RouterまででOKです。理由として、以降の章はやや応用的なものであり、後回しにしても問題ないからです。もちろんこの段階で学習することを拒みませんが、挫折して嫌になりかけたらそっと本を閉じましょう。
さて、学習にあたって以下のポイントを意識してみましょう！

• 各章ごとにブランチを切って進めましょう。これは書籍内で使い回すコードが多く、一度書いたコードを何回も書く効果は薄いという判断です。
• コードは全て書いて理解しましょう。書き間違い（typo）を減らす努力をしたり、書くことで気づけること（ex:エディタの補完機能など）がたくさんあります。
• コードを全て正確に書く必要はありません。記法は正確に書く必要がありますが、template部分のマークアップやスタイルなどはアレンジを加えてしまって（楽をしても）OKです！
• 完全に理解できなくても次に進みましょう。ここではVueの雰囲気がつかめればOKです！
• TypeScript未修でも不明点を随時調べながら進めましょう。書籍で難しいTypeScriptの構文は出てきませんのでご安心を。
• 学習項目の公式ドキュメントを読んでみましょう。新たな発見や公式ドキュメントに慣れるという意味でも大切なことです！ https://ja.vuejs.org/api/

この書籍を終えるとVueの基本はある程度理解できていると思います。調べながらならある程度Vueのコードが読めるくらいが理想です！

Vueの基礎を強固にする

次はVueの基礎力を伸ばしていきましょう！
使用する教材はこちらです。
https://ja.vuejs.org/tutorial/#step-1

そうですチュートリアルです。現状ある程度の基礎力はついているはずなので、今なら公式が提供するものでも抵抗なく読めると思います。

学習方法

ここでの学習ポイントは以下のとおりです！

• リンクになっているページを積極的に読んでみましょう。根本理解につながります！
• 理解に時間をかけましょう。ChatGPTや二次情報（記事など）を利用してもOKです！
• とにかく理解に努めましょう！

やってみると「あれ、意外といけるかも？」となったのではないでしょうか？
チュートリアルの説明も分かりやすかったと思います。Vueは公式が提供してくれているものの説明が非常にわかりやすいです。公式ドキュメントに対する抵抗もかなり減ったのではないでしょうか？書籍で一度学習している内容なので復習にもなったかと思います！この段階で基本的な文法には自信がついていると理想です！

Vueの実装力を伸ばす

基礎が固まってきたところで実装力を身につけていきましょう！
使用する教材はこちらです。
https://ja.vuejs.org/examples/#hello-world

またまた公式が提供してくれているものです。こちらはこの機能をVueで書くとこんな感じだよというような実装例集のようなものです。

学習方法

画面右が実装による出力結果となっており、画面左がその実装コードとなっています。なのでコードを見ずに出力結果と同じものを自分で実装してみるというのが今回の学習方法です。学習ポイントは以下のとおりです！

• 自分で環境構築をしてコードを書きましょう。ここでも各章ごとにブランチを切って進めると作業しやすいと思います。自分のエディタでコードを書く回数を増やすことは大切です！
• 次の記事で実装例の難易度がわかります https://zenn.dev/comm_vue_nuxt/articles/start-to-learn-vue-2024#【３】-実装例-(公式ドキュメント) こちらの難易度が簡単なものから進めていきましょう！
• 公式ドキュメントや書籍、二次情報などフル活用でOKです！とにかく目標の動作が実現できるように頑張りましょう！
• これまでの学習と違う点として、答えを自力で捻出する必要があります。これは今回身につけるものなのでできなくて当然です。正解がわからなくても気にする必要はありません！実装ストックを蓄えていく感じでポジティブに進めていきましょう！

こちらが終わると「Vueちょっとワカル」状態になっているかと思います！あと一息でロードマップ完走です！

Vueの応用に踏み込む

ここまでである程度Vueに慣れてきたことかと思います。ここではVueというよりもフロントエンド開発のステップアップとしてやや応用的な学習に入っていきましょう！使用する教材はこちらです。
https://gihyo.jp/book/2022/978-4-297-13072-5

最初に使用した教材ですね！ここでは最初に飛ばした第11章以降を学習していきます。学習項目としては

• Piniaを利用したステート管理
• 非同期処理

になります。最初に本範囲の章をスキップしたのは、こちらはある程度Vueの基礎が固まってからの方が学習しやすいと思ったからです。というのも、Piniaについてはpropsの概念や流れがイメージできている状態の方が理解しやすく、またなぜPiniaが必要なのかがわかりやすいです。非同期処理についてはVueそのものではなく、フロントエンド開発で必ず必要になってくるものであり、Vueの学習とはまた範疇が異なります。Vueを用いて非同期処理をどう書いていくかの話であるため、最初の学習でスキップした次第になります。

学習方法

基本的には以前と同じになりますが、以下の注意点があるので学習ポイントとして記します。

• 書籍で使用しているPiniaのバージョンがやや古いため、最新版をインストールすると書き方が異なります。書籍と同じバージョンでインストールして学習を進めた方が、概念の理解がスムーズになります。学習後、最新版で書き方がどう違うのか確認する程度でOKです！
• 第13章のユニットテストを私は学習していません。学習した方がベターではありますが、ゴール到達にあたっては必須でないのでスキップしてもOKです！（私もいずれ学習します）

これでVueの基本と周辺ライブラリについては網羅できました！お疲れ様です！

まとめ

初学者にとって公式ドキュメントから入るというのはなかなかハードルが高いものだと思い、本記事では書籍から公式ドキュメントという流れで学習を行うように配慮しました。それでもVueの公式ドキュメントは分かりやすく、初学者でも読み進められることを体感して頂けたのではないでしょうか？今後も是非公式ドキュメントを活用して学習を進めてください！
以降の章は、私が現在取り組んでいるステップアップ内容になりますので、本記事の内容としてはここまでとなります。ここまで読んで頂きありがとうございました。誤りや質問があればコメントやXに遠慮なくご連絡頂ければと思います！

ひとりごと

完全にひとりごとです。Vue周辺に関する機能の紹介記事はあっても、学習方法に関する記事が少ないです。もっとあってもいいのではと思っています。何かを学習するにあたり、最初は皆初学者です。「こういう教材をここに注意しながら学習した」という情報が、初学者にはありがたいものです。「公式ドキュメントのここが分かりづらかったから、それはこれを参考した」など、公式ドキュメントの利用方法に関する記事があっても良いかもしれません。ちょっとしたことでも記事に書いて頂けると大変ありがたく思います！

【番外編】ステップアップ方法

ここからはステップアップとしておすすめの学習方法になります。

VueUseの読解

https://vueuse.org/

VueUseは便利な関数集みたいなもので、Vueで書かれています。何かを実装しようと思った時、VueUseにその機能がないか覗いてみましょう。機能があれば、その内部実装を見て参考にするというものです。以下具体例です。

1. マウスの座標を取得したい
2. それっぽいのあった https://vueuse.org/core/useMouseInElement/
3. リポジトリで該当のディレクトリを探す https://github.com/vueuse/vueuse/tree/main/packages/core/useMouseInElement
4. 実装のコアになっているファイルを探す https://github.com/vueuse/vueuse/blob/main/packages/core/useMouseInElement/index.ts
5. APIの使い方、TypeScriptでの実装を参考にする

chibivueに挑戦

https://ubugeeei.github.io/chibivue/

chibivueはVueの基本的な機能を自分で実装することで、Vueについての理解を深め、vuejs/coreのソースコードが読めるようになることを目的とされている本です。内容は難しいですが、Vueそのものについての理解が深まるので、興味があれば挑戦してみてください！chibivueにはDiscordのサーバーがあり、不明点があればそちらで質問することができます。サーバーではVueの話題のみならず、様々な話題で賑わっています。参加しているだけでも学べることが多いので是非参加してみてください！