WINGSプロジェクト 齊藤 新三/著
山田祥寛/監修
株式会社 技術評論社/発行
定価 3,960円
B5変版・ 432ページ・ 1色
ISBN 978-4-297-13072-5
発刊日： 2022年9月28日

第1章　フロントエンド開発の潮流とVue

1.1 JavaScriptの変遷とフロントエンド開発の登場
　1.1.1 JavaScript の登場と不遇の時代
　1.1.2 JavaScript の復活と Web2.0
　1.1.3 jQuery の登場とフロントエンド開発
　1.1.4 ECMAScript への準拠による JavaScript の飛躍
　1.1.5 HTML5 の登場
　1.1.6 JavaScript の書き方を変えた ES2015 の登場
　1.1.7 JavaScript の実行環境をブラウザから切り離した Node.js
　1.1.8 時代の寵児となった JavaScript
　1.1.9 TypeScript の登場
1.2 フロントエンドフレームワークとVue
　1.2.1 ライブラリの限界とフレームワークの登場
　1.2.2 Vue の登場とその特徴
　1.2.3 プログレッシブフレームワークとしての Vue
　1.2.4 Vue 3 のリリース

第2章　ViteとVueプロジェクト

2.1 Vueプロジェクト作成の準備
　2.1.1 Vue プログラミングに必要なツール
　2.1.2 Visual Studio Code のインストール
　2.1.3 Vue 用の拡張機能のインストール
　2.1.4 Node.js のインストール
2.2 Vueプロジェクトの作成と実行
　2.2.1 Vue プロジェクトの作成の手順
　2.2.2 Vue プロジェクトの作成コマンド
　2.2.3 Vue プロジェクトへの依存ライブラリの追加コマンド
　2.2.4 Vue プロジェクトの実行コマンド
2.3 Vueプロジェクト作成の質問とVite
　2.3.1 Vue プロジェクト作成時の質問
　2.3.2 ESLint と Prettier
　2.3.3 新しい Vue プロジェクト実行環境

第3章　Vueプログラミングの基本

3.1 Vueのコンポーネントと基本構文
　3.1.1 コンポーネントとは
　3.1.2 単一コンポーネントファイルとは
　3.1.3 単一コンポーネントファイル記述の基本
　3.1.4 データを表示するマスタッシュ構文
　3.1.5 テンプレートに表示させる変数を定義する ref()
3.2 リアクティブシステム
　3.2.1 ref() の働き
　3.2.2 リアクティブ変数の値の変更方法
3.3 リアクティブデータ用意のバリエーション
　3.3.1 計算結果をリアクティブにする computed()
　3.3.2 オブジェクトをまとめてリアクティブにする reactive()
3.4 Vueプロジェクトの構成と動作原理
　3.4.1 Vue プロジェクトのファイル構成
　3.4.2 デプロイ用ファイル一式が格納された dist フォルダ
　3.4.3 public フォルダと index.html
　3.4.4 Vue プロジェクトの動作原理

第4章　データとイベントのディレクティブ

4.1 データバインディングのディレクティブ
　4.1.1 ディレクティブとは
　4.1.2 属性にデータバインドする v-bind
　4.1.3 属性値のない属性へのバインド
　4.1.4 バインドする属性をテンプレート変数として指定
　4.1.5 複数の属性にまとめてバインドする方法
　4.1.6 style 属性へのバインディング
　4.1.7 class 属性へのバインディング
4.2 イベントのディレクティブ
　4.2.1 イベントリスナを設定するディレクティブ v-on
　4.2.2 v-on のイベント
　4.2.3 メソッドの引数としてイベントオブジェクトを受け取る
　4.2.4 イベントオブジェクト以外を引数とするイベントハンドラメソッド
　4.2.5 イベントオブジェクトとその他の引数を併用するイベントハンドラメソッド
　4.2.6 v-on の修飾子
　4.2.7 クリックイベントとキーイベントの修飾子

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

5.1 双方向データバインディング
　5.1.1 双方向データバインディングを実現する v-model
　5.1.2 片方向のデータバインディング
　5.1.3 v-bind と v-on:input の組み合わせ
　5.1.4 文字列入力以外のコントロールでの v-model
　5.1.5 v-model の修飾子
5.2 その他のデータバインディングのディレクティブ
　5.2.1 HTML 文字列をそのまま表示する v-html
　5.2.2 静的コンテンツとして表示させる v-pre
　5.2.3 データバインドを一度だけ行う v-once
　5.2.4 レンダリング終了までマスタッシュ構文を非表示にする v-cloak

第6章　制御のディレクティブ

6.1 条件分岐のディレクティブ
　6.1.1 条件分岐ディレクティブの基本 v-if
　6.1.2 条件分岐ディレクティブをフルセットで利用した場合
　6.1.3 ディレクティブ記述のためのタグ template
　6.1.4 v-if と似て非なる v-show
6.2 ループのディレクティブ
　6.2.1 ループのディレクティブである v-for
　6.2.2 連想配列のループ
　6.2.3 Map のループ
　6.2.4 オブジェクトのループ
　6.2.5 オブジェクトの配列のループ
　6.2.6 Map とオブジェクトの組み合わせのループ
　6.2.7 カウンタ変数を利用したループ
6.3 リスト操作
　6.3.1 ループ対象データの絞り込み
　6.3.2 配列のデータ操作
　6.3.3 Map のデータ操作
　6.3.4 オブジェクト内のデータ変更
　6.3.5 リストデータ内のオブジェクトの変更

第7章　スクリプトブロックのバリエーション

7.1 ウォッチャー
　7.1.1 算出プロパティの役割
　7.1.2 リアクティブ変数の変化を監視する watchEffect()
　7.1.3 監視対象を明示する watch()
　7.1.4 即時実行の watch()
　7.1.5 watch() における変更前後の値の利用
7.2 ライフサイクルフック
　7.2.1 ライフサイクルとは
　7.2.2 ライフサイクルフックの具体例
　7.2.3 Vue のライフサイクル
　7.2.4 Vue のライフサイクルフック
　7.2.5 デバッグ用のライフサイクルフック
　7.2.6 ライフサイクルフックのまとめ
7.3 script setupの本当の姿
　7.3.1 defineComponent と setup
　7.3.2 setup と reactive と toRefs
7.4 Options API
　7.4.1 Options API とは
　7.4.2 Options API の基本構文
　7.4.3 Options API でのライフサイクルフック
　7.4.4 Options API でのウォッチャー
　7.4.5 Composition API の利点

第8章　コンポーネント間連携

8.1 子コンポーネントの利用
　8.1.1 再度、コンポーネントとは
　8.1.2 コンポーネントの作り方
　8.1.3 子コンポーネントの利用方法
8.2 コンポーネントの独立性とCSSの扱い
　8.2.1 処理が含まれたコンポーネントを埋め込む
　8.2.2 コンポーネント内の処理はコンポーネント内で完結
　8.2.3 スタイルブロックを独立させる scoped 属性
　8.2.4 Scoped CSS のカラクリ
8.3 親から子へのコンポーネント間通信
　8.3.1 親からデータをもらう Props
　8.3.2 親から Props にデータを渡す方法
　8.3.3 親のテンプレート変数を Props に渡す方法
　8.3.4 v-for と Props との組み合わせ
8.4 Props の応用
　8.4.1 スクリプトブロックでの Props の値の利用
　8.4.2 Props の値の利用の注意点
　8.4.3 Props のデフォルト値
8.5 子から親へのコンポーネント間通信
　8.5.1 子から親への通信はイベント処理
　8.5.2 親コンポーネントにデータを渡す方法
　8.5.3 v-model による子から親への通信
8.6 ProvideとInject
　8.6.1 コンポーネント間通信のまとめと問題提起
　8.6.2 サンプルプロジェクトの作成
　8.6.3 Provide の利用方法
　8.6.4 Inject の利用方法
　8.6.5 孫コンポーネントでも Inject は同様

第9章　子コンポーネント利用のバリエーション

9.1 子コンポーネントをカスタマイズするSlot
　9.1.1 Slot とは
　9.1.2 Slot の基本的な記述方法
　9.1.3 Slot のフォールバックコンテンツ
　9.1.4 テンプレート変数の所属先
　9.1.5 親でのレンダリング結果の Slot
9.2 複数のSlotを実現する名前付きSlot
　9.2.1 slot タグの追加
　9.2.2 名前付き Slot
　9.2.3 名前付き Slot に HTML 要素を渡す v-slot
9.3 データの受け渡しを逆転させるスコープ付きSlot
　9.3.1 スコープ付き Slot とは
　9.3.2 子から親へデータを渡す Slot Props
　9.3.3 Slot Props の受け取り方法
9.4 動的コンポーネント
　9.4.1 動的コンポーネントとは
　9.4.2 component タグと v-bind:is
　9.4.3 KeepAlive の役割
　9.4.4 コンポーネントの待機

第10章　Vue Router

10.1 シングルページアプリケーション
　10.1.1 ルーティングとは
　10.1.2 サーバサイド Web アプリケーションでの処理の流れ
　10.1.3 シングルページアプリケーションとは
10.2 Vue Router の基本
　10.2.1 Vue Router のプロジェクト
　10.2.2 画面用コンポーネントを入れる views フォルダ
　10.2.3 ルーティング表示領域の設定
　10.2.4 ルーティング設定の基本構文
　10.2.5 コンポーネントの動的インポート設定
　10.2.6 ルーティングリンクの設定
10.3 ルートパラメータ
　10.3.1 ルートパラメータの設定
　10.3.2 ルートパラメータの埋め込み
　10.3.3 ルートパラメータを Props として取得
10.4 スクリプトブロックでのルーティング制御
　10.4.1 会員情報追加画面の作成
　10.4.2 ルーティングを制御する Router オブジェクト
　10.4.3 Router オブジェクトの他のメソッド
10.5 Vue Routerのその他の機能
　10.5.1 スクリプトブロックでのルーティング情報の取得
　10.5.2 さまざまなルートパラメータ
　10.5.3 ネストされたルーティング
　10.5.4 マルチビュー
　10.5.5 ナビゲーションガード
　10.5.6 リダイレクト

第11章　Pinia

11.1 Piniaの基本
　11.1.1 Provide/Inject の問題点と Pinia
　11.1.2 Pinia プロジェクトの作成
　11.1.3 ストアファイル内記述の基本構造
　11.1.4 ステートとそのインターフェース
　11.1.5 ゲッタとアクション
　11.1.6 コンポーネントからのストア利用
　11.1.7 コンポーネントからのステートとゲッタの利用
　11.1.8 コンポーネントからのアクションの利用
11.2 引数を使う一歩進んだPiniaの利用方法
　11.2.1 プロジェクトの作成とファイルの複製
　11.2.2 Provide の代わりの初期リストの用意
　11.2.3 Inject の代わりにリストデータをストアから取得
　11.2.4 引数付きのゲッタの利用
　11.2.5 引数付きのゲッタの定義
　11.2.6 引数付きのアクションの利用
11.3 アクションの応用
　11.3.1 外部連携もアクションの役割
　11.3.2 セッションストレージからデータの取得
　11.3.3 セッションストレージを操作する sessionStorage オブジェクト
　11.3.4 MemberList.vue の変更
　11.3.5 Map オブジェクトをセッションストレージに格納する方法

第12章　非同期処理

12.1 非同期処理の基本
　12.1.1 IndexedDB と非同期処理
　12.1.2 同期処理と非同期処理の基本
　12.1.3 非同期処理の基本となる async と Promise
　12.1.4 async 関数で Promise を new してリターンする構文
12.2 IndexedDB
　12.2.1 IndexedDB を利用したプロジェクトの準備
　12.2.2 データベースオブジェクト取得処理
　12.2.3 オブジェクトストアの生成処理
　12.2.4 onupgradeneeded プロパティの役割
　12.2.5 データベースオブジェクトの再利用
　12.2.6 「データ取得中」表示の追加
　12.2.7 非同期処理を同期処理のように扱える await
　12.2.8 IndexedDB からデータを取得する処理
　12.2.9 IndexedDB へのデータ登録処理
　12.2.10 async アクション関数のコンポーネントでの利用
12.3 Webアクセス
　12.3.1 サンプルプロジェクトの概要と Web API の準備
　12.3.2 Current Weather Data の利用方法
　12.3.3 プロジェクトと第 1 画面の作成
　12.3.4 Web アクセス以外のコードの作成
　12.3.5 Web アクセスコードの記述
　12.3.6 Web アクセスの基本は fetch() 関数
　12.3.7 fetch() 関数は async 関数
　12.3.8 レスポンスデータの取得は Response のメソッドを利用
　12.3.9 fetch() を使いやすくしたライブラリの Axios

第13章　ユニットテスト

13.1 ユニットテストとVitest
　13.1.1 ユニットテストとは
　13.1.2 ユニットテスト対応プロジェクトの作成と Vitest
　13.1.3 ユニットテストの作成と実行
　13.1.4 テストスイートとテストケースの定義
　13.1.5 テスト可否の基本は入出力の一致
　13.1.6 テストを継続実行できるコマンド
　13.1.7 テストケースの追加
13.2 コンポーネントのテストの基本
　13.2.1 コンポーネントテスト専用ライブラリ
　13.2.2 コンポーネントテストの入出力
　13.2.3 コンポーネントテストはマウントから
　13.2.4 Vitest のオプション設定
　13.2.5 VueWrapper のメソッド
13.3 コンポーネントのテストの応用
　13.3.1 要素取得のための属性
　13.3.2 入力値の変更
　13.3.3 要素が存在するかどうかのテスト
　13.3.4 イベントの発生
13.4 コンポーネント間通信のテスト
　13.4.1 コンポーネント間通信テストの例
　13.4.2 Props を渡す方法
　13.4.3 Emit 実行の検証
　13.4.4 子コンポーネントのスタブ利用
　13.4.5 子コンポーネントからの Emit のテスト