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 コンポーネント間通信のテスト