More than 1 year has passed since last update.

Vue 3から始める人のための学習ロードマップ

Last updated at 2022-10-14Posted at 2022-07-29

仕事で 1 年目の新人トレーナーをやることになり、 Vue 3 に挑戦することになったのでその際の学習のためのメモです。
筆者は Vue 2 + Vuetify での SPA 構築経験（趣味）があるのみで、お仕事はバックエンド側なので、もっといいアドバイスなどありましたら教えていただけると助かります！

~~まだ進行中なので進捗に応じて更新するかもです。~~

更新 2022-09-15
トレーニング期間が終わったので、振り返りを後ろのほうに書いてみました。

対象読者

Web アプリを構築したい
JavaScript は触ったことある
TypeScript はわからない
React とか Vue.js とかのフレームワークも何もわからん
小規模 & 開発スピード優先で Vue 3 を選択
- 新参なので Vue 2 との違いを解説されてもわからないよ！

な人です。

まずはそれぞれの役割を知ろう

JavaScript

ここはまぁ大丈夫だと思います。 DOM 操作をしたりして HTML を書き換えたりできます。元々はブラウザで動くプログラミング言語として開発されましたが、今や Node.js などサーバー用途でも使われています。

TypeScript

JavaScript は動的型付け言語ですが、広く使われるようになるにつれ、保守性や可読性の観点から型を追加したい需要が出てきました。そこで JavaScript を改善する目的で TypeScript が開発されました。 TypeScript で書かれたコードはブラウザ上でそのまま動かないため、リリース時に JavaScript にコンパイルされます。

TypeScript について学びたい方は TypeScript Deep Dive 日本語版がおすすめです。

Vue.js

React や Vue.js, Angular や Svelte といった Web アプリを開発するためのフレームワークやライブラリが多くあります。どれが最適かは開発の規模やメンバーの好みなどによって変わりますので、この記事のスコープ外とします。

これらを使うと開発者は DOM を直接触ることなく（docuement.getElementById するとかなしで） HTML を書き換えたり、コンポーネントに分けて再利用したり、状態を持ったデータを効率的に管理したりすることができるようになります。

筆者らは今回 Vue.js を選択しました。理由はざっくりと以下の通りです。

とにかく期間が短いので学習コストを抑えたい
バックエンドの運用の補助に使うツールであるため保守性などはあまり問題にならない

Vue.js はバージョンにより仕様が大きく異なっていることに注意が必要です。広く使われていた v2 と、破壊的な変更があった v3 に分けられます。これらのバージョン間には互換性がないため、これから Vue.js の学習を始める方には v3 がおすすめです。

v3 では Composition API というものが導入されました。また .vue ファイルでは、<script setup> と呼ばれる記法ができるようになりました。経緯を知らない方にとっては「なんのこっちゃ？」だと思うので、「へぇ～そうなんだ～」くらいに思っておけばよいと思います。

Vue.js の学習には公式ドキュメントがおすすめです。

Nuxt.js

Nuxt.js は Vue.js のためのフレームワークです。これがなくても Vue.js を使った Web アプリの開発は可能です（私も以前は使わずに開発していました）が、 Nuxt.js を導入することにより、ディレクトリ構成やルーティング（ページ移動）などの面でサポートが受けられるため、より迷わずにコーディングを進めていける利点があると思います。

2022 年 7 月現在 Vue 3 の対応版である Nuxt 3 はリリース候補版です。 Nuxt.js についても公式ドキュメントを参考にすると良いです（まだ足りないところもあります）。

Vite

Vite はフロントエンドの開発環境を構築するためのツールです。サーバーが高速に起動することが大きな特徴です。 Nuxt.js は Vite を使っているため、 Nuxt.js でプロジェクトを開始すると Vite で開発サーバーが立ち上がる設定になっています。

UI ライブラリ

Vuetify や Quasar, Element UI などの UI ライブラリは、なくても Web アプリを作ることは可能ですが、使うことでより簡単にリッチな UI を実現させることが可能です。
ボタンやモーダル、クリック時の波状のアニメーションなど、自分で開発するのが大変なリッチな UI コンポーネントが手軽に利用できるため、ロジックの開発に集中できるようになります。

Vue 2 時代に人気だった Vuetify は 2022 年 7 月現在でまだ beta 版なので、使用する際は注意が必要です。今回筆者らは正式リリース済みの Quasar を選択しました。

Volar

Volar は Vue.js 公式の VSCode 拡張機能です。型のサポートなどをしてくれるので、入れておくと便利です。

Web アプリのリリース方法

環境構築を始める前に Web アプリのリリース方法について頭に入れておきましょう。なぜなら、リリース方法によって環境構築の設定内容が変わってくるからです。

Web アプリの提供形態には大きく 2 種類あります。

SPA

SPA (Single Page Application) は、現在、一般的な Web アプリの提供形態です。

リリース時に開発環境でコンパイルを行い、生成されたファイル群（HTML, CSS, JS, 画像など）を、 nginx などの Web サーバーや AWS CloudFront などのクラウドサービスを使って配信します。

従来型の Web サイトでは新しい情報を表示するにはページ遷移を行い、サーバーから HTML をダウンロードする必要がありました。 SPA では、ユーザーのブラウザで動く JS が API サーバーと通信して取得してダウンロードしたデータ（JSON 形式であることが多い）を HTML にレンダリングして表示します。ページ遷移が必要なく、 1 ページの中で表示内容を切り替える（そして JS がアドレスバーの表示を疑似的にページが移動したように見せる）ので、ユーザーは快適に利用できます。

こうしたメリットがある一方で、 SPA は初回のアクセス時にすべてのファイルをダウンロードする必要があるので、どうしても最初の読み込みには時間がかかってしまいます。また、 HTML を JS でレンダリングするため、 SEO 対策の観点からは不利になります（ Google などのクローラーは配信された HTML しか見ないため）。

SSR

こうした SPA の課題を解決するために生まれたのが SSR (Server Side Rendering) で、文字通りサーバー側で HTML をレンダリングする技術です。

筆者自身まだ使ったことがないので詳しい解説はできませんが、 SPA を使うか SSR を使うかによって、環境構築の際に考慮すべき制限がありますので注意してください。

どうやってプロジェクトを開始するか

それぞれの大まかな役割や経緯、 Web アプリのリリース方法を知ったところで、実際に触っていきましょう。

以下の手順には Node.js が必要です。 Node.js はホストに直接インストールしても良いですし、 Docker で環境を用意してディレクトリをマウントしても良いです。
Node.js のパッケージ管理に使うコマンドには npm や yarn, pnpm があります。お好みのものをご使用ください。

ブートストラップの方法は、構成によって異なります。以下はそのパターンのすべてを網羅しているわけではないので、始める際には各フレームワークのドキュメントを参照してください。

A. Vue.js だけでいく

Vue CLI や Vite を使った方法が利用可能です。詳しくは公式ドキュメントのインストールページを確認しましょう。

B. Nuxt.js を使う

今回筆者らが採用した方法です。公式ドキュメントのクイックスタートを参考に以下のような感じで環境と開発サーバーを立ち上げます。

npx nuxi init nuxt-app
cd nuxt-app
yarn install
yarn dev -o

よくある質問攻めに遭うことなく、コマンドを実行したらすぐに完了するのも好きです。

Vuetify や Quasar などの UI ライブラリを追加するには plugins ディレクトリに設定ファイルを作ります。詳しい手順は以下の記事に譲ります。

C. Nuxt.js を使わず UI ライブラリのみを使う

Nuxt.js は使わずに Vuetify や Quasar といった UI ライブラリを導入する場合は、各 UI ライブラリのドキュメントを参照します。 Quasar は上述のプラグインとして使う方法と、以下の Quasar CLI を使う方法とで利用できる機能が異なるため、そこもチェックしましょう。

以下は公式の Quasar CLI の手順です。

npm i -g @quasar/cli
npm init quasar

いろいろ質問されるので答えていき、完了したら生成されたディレクトリに移動します。 yarn quasar dev で開発サーバーを起動できます。

UI ライブラリ公式の方法で始めるメリットは、その UI ライブラリの使い方が分かりやすい && マージンなどがすでにいい感じになっているのですぐに使い始められるところですね。

作りこむ

プロジェクトのブートストラップが完了したら、さっそく作り始めていきましょう。

v-if や v-for など Vue.js の構文を学習しつつ、 UI コンポーネントを追加したり、ページを追加してルーティングがうまくいくかなどを試してみましょう。

最初はどのように組み立てていけばよいかわからない場合は Web 上のレイアウトサンプルを探してみると良いでしょう。 Quasar の場合は Layout Gallery や Layout Builder が非常に役に立ちます。

おわりに

フロントエンドのフレームワークは移り変わりが激しいです。そのため、新規に学習を始める人にとってはどこから取っつけばいいのか分からない場面もしばしばあると思います。

React の圧倒的な人気を陰に、劣勢の Vue.js （特に v3）ですが、今後いよいよ Nuxt 3 や Vuetify 3 の正式リリースがされるでしょうし、また盛り上がってくると面白いなーと思っています。この記事が皆さんのお役に立つことを祈ります！

追記：実際にやってみての感想

1か月半ほどのトレーニング期間で新人さんに実際に Vue 3 + Nuxt 3 + Quasar を使って Web アプリを作ってもらいました。その際の感想をざっくりとまとめてみます。

開発者体験としてはそこそこ
- React と比べてハードルが低いのは間違いない
- Svelte よりは周辺環境が成熟していると思う
<script setup> 記法いいね
- より直感的に書ける気がします
- これは前からかもですが SFC (Single File Components) のドキュメントどこにあるか分かりにくい
  - API リファレンスだけじゃなくてガイドもこっちの書き方に統一してくれ
UI ライブラリという点では Quasar で基本的に不自由することはなかった
- ドキュメントも例が豊富に載っているので、新人さん自身でドキュメントを見ながら作れていました
Nuxt 3 は便利だがドキュメントが弱い
- 正式リリースされていないので仕方ないのですが、ドキュメント化されている内容が少ないです
- 自動インポートや動的なルーティングは便利
- nuxi generate で SPA として書き出すと各ページから index に対して 304 リダイレクトするファイルを書き出してくれるのも親切
  - nginx 側で 404 時に index.html を出す……みたいな設定は不要
  - nginx に関して言うと nginx は .mjs の MIME タイプを application/octet-stream にしてしまうので注意（application/javascript にしてあげる必要がある）
世の中のブログには Vue 3 と言いながら Vue 2 の書き方をしている場合がある
ちょっとハマったところ
- QTable のセルに Array を持ってくるとうまく動作しないということはありました（nuxi generate 後に激重になる）
- <NuxtPage> の中に来る各ページの <template> はシングルルートエレメントじゃないとページが真っ白になる（せっかく Vue 3 なのに）。

参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up