Vue 3 フロントエンド開発の教科書

人気の Web フロントエンドフレームワーク「Vue.js」がバージョンアップして「Vue 3」となり、TypeScript の標準採用、新機能 Composition API、Vite、Pinia の搭載など、大幅に機能が更新・強化されました。それに伴い、Vue 3 では、従来の Options API を利用したコンポーネント開発とは異なる開発手法が必要となります。本書では、Composition API によるコンポーネント開発や Pinia による状態管理、Vue Router による SPA 開発、非同期処理やユニットテストなどを新機能を駆使して解説しており、Vue 3 によるフロントエンド開発手法が 1 冊ですべて身に付く内容になっています。
■導入編
●第 1 章 フロントエンド開発の潮流と Vue
1.1 JavaScript の変遷とフロントエンド開発の登場
1.2 フロントエンドフレームワークと Vue

●第 2 章 Vite と Vue プロジェクト
2.1 Vue プロジェクト作成の準備
2.2 Vue プロジェクトの作成と実行
2.3 Vue プロジェクト作成の質問と Vite

●第 3 章 Vue プログラミングの基本
3.1 Vue のコンポーネントと基本構文
3.2 リアクティブシステム
3.3 リアクティブデータ用意のバリエーション
3.4 Vue プロジェクトの構成と動作原理

■基本編
●第 4 章 データとイベントのディレクティブ
4.1 データバインディングのディレクティブ
4.2 イベントのディレクティブ

●第 5 章 双方向データバインディングとその他のディレクティブ
5.1 双方向データバインディング
5.2 その他のデータバインディングのディレクティブ

●第 6 章 制御のディレクティブ
6.1 条件分岐のディレクティブ
6.2 ループのディレクティブ
6.3 リスト操作

●第 7 章 スクリプトブロックのバリエーション
7.1 ウォッチャー
7.2 ライフサイクルフック
7.3 script setup の本当の姿
7.4 Options API

●第 8 章 コンポーネント間連携
8.1 子コンポーネントの利用
8.2 コンポーネントの独立性と CSS の扱い
8.3 親から子へのコンポーネント間通信
8.4 Props の応用
8.5 子から親へのコンポーネント間通信
8.6 Provide と Inject

●第 9 章 子コンポーネント利用のバリエーション
9.1 子コンポーネントをカスタマイズする Slot
9.2 複数の Slot を実現する名前付き Slot
9.3 データの受け渡しを逆転させるスコープ付き Slot
9.4 動的コンポーネント

●第 10 章 Vue Router
10.1 シングルページアプリケーション
10.2 Vue Router の基本
10.3 ルートパラメータ
10.4 スクリプトブロックでのルーティング制御
10.5 Vue Router のその他の機能

●第 11 章 Pinia
11.1 Pinia の基本
11.2 引数を使う一歩進んだ Pinia の利用方法
11.3 アクションの応用

■応用編
●第 12 章 非同期処理
12.1 非同期処理の基本
12.2 IndexedDB
12.3 Web アクセス

●第 13 章 ユニットテスト
13.1 ユニットテストと Vitest
13.2 コンポーネントのテストの基本
13.3 コンポーネントのテストの応用
13.4 コンポーネント間通信のテスト

『Vue 3 フロントエンド開発の教科書』 (WINGS プロジェクト 齊藤 新三 著、山田 祥寛 監修、技術評論社、2022 年 9 月発売) は、Composition API を軸に Vue 3 でのフロントエンド開発を学ぶための解説書です。版元の紹介文は、Vue 3 では TypeScript の標準採用、Composition API、Vite、Pinia の搭載など機能が大きく更新され、従来の Options API を使ったコンポーネント開発とは異なる開発手法が必要になったと説明しています。本書はその手法を、コンポーネント開発から Pinia による状態の管理、Vue Router による画面遷移、非同期処理、ユニットテストまで 1 冊で扱います。版元が挙げるおすすめの読者は、Composition API による Vue 3 の開発方法を学びたい人です。

導入編、基本編、応用編の 3 編 13 章で進む構成

構成は導入編、基本編、応用編の 3 編、全 13 章です。導入編の第 1 章から第 3 章では、JavaScript の変遷とフロントエンド開発の登場、フロントエンドフレームワークの中での Vue の位置づけを押さえたあと、Vite で Vue プロジェクトを作成して実行し、コンポーネントの基本構文とリアクティブシステム、プロジェクトの構成と動作原理を学びます。基本編の第 4 章から第 11 章は、データとイベント、双方向データバインディング、条件分岐とループのディレクティブ、ウォッチャーとライフサイクルフック、script setup と Options API、コンポーネント間連携、Slot と動的コンポーネント、Vue Router、Pinia と、日常の開発で使う機能を順に積み上げます。応用編は第 12 章「非同期処理」で IndexedDB と Web アクセスを、第 13 章「ユニットテスト」で Vitest によるコンポーネントのテストとコンポーネント間通信のテストを扱います。

Composition API とリアクティブシステムを学ぶ意味

Options API では、1 つのコンポーネントの中身を data、methods、computed、watch といった種類ごとの欄に書き分けます。小さな部品なら見通しが良い反面、部品が育つと 1 つの機能に関わるコードが複数の欄に散らばり、機能単位で切り出して再利用するのが難しくなります。Composition API は、リアクティブな値とそれを扱う処理を関数の中にまとめて書く方式で、関連するコードを機能ごとに寄せたり、別のファイルへ切り出して複数のコンポーネントで共有したりしやすくなります。値が変わったことを Vue が検知して画面を更新する仕組みがリアクティブシステムで、Vue はその更新を 仮想 DOM の差分として実際の画面へ反映します。本書は第 3 章でリアクティブシステムを、第 7 章で script setup の仕組みと Options API を取り上げるので、新旧の書き方の関係を整理しながら Composition API での書き方に慣れていけます。

Pinia と Vue Router で SPA を組み立てる後半

画面の数が増えると、ページ全体を読み込み直さずに表示を切り替える SPA の設計と、多くのコンポーネントが同じデータを参照する場面への対処が避けられなくなります。親から子へ Props で値を渡し、子から親へイベントで知らせる受け渡しは、階層が深くなるほど中継のためだけのコードが増えていきます。そこで、コンポーネントの外に状態を置いてどこからでも同じ値を読み書きできるようにするのが 状態管理 のライブラリで、Pinia はストアを定義してその役割を担います。本書は第 8 章のコンポーネント間通信と Provide / Inject を経て、第 10 章の Vue Router、第 11 章の Pinia へ進む順序なので、受け渡しの手段を一通り知ったうえで、どの場面でストアに切り替えるかを判断する材料が揃います。

Vue 3 で新しく書き始める人や、Options API で書かれた Vue 2 時代のコードから Composition API へ移りたい人に向いた構成です。目次は JavaScript の変遷から始まりますが、JavaScript の文法そのものを教える章は無いため、関数やオブジェクト、非同期処理の基本を一度は書いたことがある状態で読むと無理がありません。Nuxt などのフレームワークやサーバーサイドレンダリングは目次に含まれていないので、それらを目的にする場合は別の本と組み合わせる必要があります。本書は 2022 年 9 月時点の Vue 3 と Vite、Pinia、Vitest を前提にしており、手元の版と違いが出たときは版元のサポートページで正誤表やダウンロードを確かめながら進めると安心です。

Composition API の書き方を、コンポーネントの基本からルーティング、状態の管理、テストまで同じ流れの中で身につけたい人にとって、本書は Vue 3 の開発を体系立てて学ぶための手堅い 1 冊です。