ISBN 9784297130725
Vue 3 フロントエンド開発の教科書
概要
Vue 3 を Composition API と TypeScript 前提で体系的に習得する教科書
この本で身につくこと
<script setup>と Composition API を用いたコンポーネント設計の基本パターンを身につけられるrefとreactiveの違いを踏まえて、状態をどの粒度で持つか判断できる- Vue Router による SPA ルーティングと、ナビゲーションガードを組み合わせた画面遷移を実装できる
- Pinia を用いた状態管理で、コンポーネント間のデータ共有とストア設計を進められる
- Vite + Vitest の開発環境でユニットテストを書き、コンポーネントの振る舞いを保証できる
provide/injectやスコープ付きスロットなど、再利用性を高めるパターンを使い分けられる
想定読者
HTML/CSS/JavaScript の基礎があり、Vue 3 を Composition API と TypeScript の組み合わせで実務水準まで習得したいフロントエンドエンジニア
外部の評価
- 公式ドキュメントで散在していた情報(Vite / Pinia / Vitest / Vue Router)を一冊に統合している点が評価されている
- コード例が最新スタック(
<script setup>+ TypeScript)で書かれており、そのまま現場の雛形に使いやすいという書評が複数ある - 一方で、Pinia の Setup Stores 構文や
storeToRefsなど公式で推奨される一部 API は本書では深く扱われていないとの指摘もあるため、公式ドキュメントとの併読が前提になる
学習のヒント
- Composition API の章は
ref/reactive/computedの違いを手を動かして確認しないと定着しにくい。章末サンプルは写経ではなく自分で型を付け直して動かすと効果が高い - Pinia の章を読む際は、本書のオプションストア記法と、公式が推奨する Setup Stores 記法の違いを公式ドキュメントで補完しておくと、実プロジェクトへの転用がスムーズになる
- Vitest の章は一度通読した後、自分が書いた小さなコンポーネントに対してテストを書いてみる順序が良い。本のコードをなぞるだけだとテスト設計の勘が育ちにくい
- 432 ページとボリュームが大きいため、全章を頭から読むより、SPA の一般的な構造(コンポーネント → ルーティング → 状態管理 → テスト)の順に横断的に拾い読みしても機能する
読む前の前提
- HTML / CSS と、ES2015+ の JavaScript(アロー関数・分割代入・モジュール・Promise)の基本操作
- TypeScript の基本的な型注釈・型推論・ジェネリクスの読み書き(本書はコード例が TypeScript 前提)
- npm / Node.js を使った開発環境の構築経験
- SPA / コンポーネント指向フレームワークに関する最低限のイメージ(React や Vue 2 の経験があれば十分)
次のステップ
- Nuxt 3 フロントエンド開発の教科書: 同じ著者グループによる続編的な位置づけ。本書で学んだ Vue 3 + Composition API を、SSR/SSG を含む Nuxt 3 のフルスタック構成に発展させる自然な次の一冊
- Vue.js 公式ドキュメント(ja.vuejs.org) / Pinia 公式ドキュメント: 本書刊行以降の API 変更(特に Pinia の Setup Stores や Vue Router の型定義変更)を追うための一次資料
- フロントエンドテストの実践書(Testing Library / Playwright 系): Vitest でユニットテストの基礎を掴んだ後、コンポーネントテスト・E2E テストへ領域を広げるための学習経路
関連記事・言及記事
- Qiita: Vue3 フロントエンド開発の教科書を読んだ — Rails + Vue 3 + TypeScript プロジェクトでの実務投入視点での書評。イベントハンドラの型キャストや
provide/injectの型安全性など、実装時につまずく具体論に触れている
編集: book-enricher agent / sources: gihyo.jp 書誌ページ / Qiita 書評 1 本 / 外部書評ブログ 1 本
出版社による内容紹介
人気の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 コンポーネント間通信のテスト
この本がどの学習段階で役立つかは、 関連する ロードマップ から確認できます。