山田祥寛/著
WINGSプロジェクト/発行
定価 700円
Kindle版・ 271ページ・ 4色
発刊日： 2022年4月27日

はじめに

対象読者
動作確認環境について

Part 1：イントロダクション

1.1 JavaScriptフレームワークとは？
1.2 jQueryの問題点とJavaScriptフレームワーク
1.3 主なJavaScriptフレームワーク

Part 2：はじめてのVue.js

2.1 Vue.jsのインストール方法
　　2.1.1 create-vueの準備とアプリの作成
2.2 サンプルアプリの内容を確認する
　　2.2.1 トップページの準備 - index.html
　　2.2.2 アプリを起動するためのエントリーポイント - main.js
　　2.2.3 アプリを構成するコンポーネント - App.vue
　　2.2.4 .vueファイルの構文
2.3 学習を進める前に
　　2.3.1 サンプルファイルの入手方法
　　2.3.2 サンプルファイルの利用方法
　　2.3.3 補足：学習／開発に便利なツール

Part 3：Vueアプリの基本ルール

3.1 Vueアプリで「Hello, World」
3.2 リアクティブシステム
　　3.2.1 リアクティブシステムの例
　　3.2.2 複数値のリアクティブ化
3.3 算出プロパティとメソッド
　　3.3.1 算出プロパティ
　　3.3.2 メソッド
　　3.3.3 算出プロパティとメソッドの違い

Part 4：ディレクティブとデータバインディング

4.1 ディレクティブによるデータアクセス - v-text
4.2 {{…}}式を無効化する - v-pre
4.3 文字列をHTMLとして埋め込む - v-html
4.4 属性値にJavaScript式を埋め込む - v-bind
　　4.4.1 属性操作の基本
　　4.4.2 複数の属性をまとめて指定する
　　4.4.3 JavaScriptの式から属性名を決定する
4.5 値を一度だけバインドする - v-once
4.6 要素にスタイルプロパティを設定する - v-bind:style
　　4.6.1 スタイルバインディングの基本
　　4.6.2 複数のスタイル情報を適用する
　　4.6.3 ベンダープレフィックスを自動補完する
4.7 要素にスタイルクラスを設定する - v-bind:class
　　4.7.1 クラスバインディングの基本
　　4.7.2 v-bind:classのさまざまな設定方法
4.8 {{…}}式による画面のチラツキを防ぐ - v-cloak

Part 5：イベント処理

5.1 イベントの基本
5.2 イベントオブジェクトを参照する
　　5.2.1 イベントオブジェクトの基本
　　5.2.2 イベントハンドラーに引数を渡す場合
5.3 定型的なイベント処理を宣言的に指定する - イベント修飾子
　　5.3.1 イベント修飾子の基本
　　5.3.2 イベント修飾子を利用する場合の注意点
5.4 キーボードからの入力を識別する - キー修飾子
　　5.4.1 キー修飾子の基本
　　5.4.2 システムキーとの組み合わせを検知する
5.5 マウスの特定のボタンを検知する - マウス修飾子

Part 6：フォーム開発

6.1 フォーム開発の基本
6.2 さまざまなフォーム要素の例
　　6.2.1 ラジオボタン
　　6.2.2 チェックボックス（単一）
　　6.2.3 チェックボックス（複数）
　　6.2.4 選択ボックス
　　6.2.5 補足：オブジェクトをバインドする
　　6.2.6 ファイル入力ボックス
6.3 バインドの動作オプションを設定する - 修飾子
　　6.3.1 入力値を数値としてバインドする - number修飾子
　　6.3.2 入力値の前後の空白を除去する - trim修飾子
　　6.3.3 バインドのタイミングを遅延させる - lazy修飾子
6.4 双方向データバインディングのカスタマイズ

Part 7：条件分岐とループ

7.1 式の真偽に応じて表示／非表示を切り替える - v-if
　　7.1.1 v-ifの基本
　　7.1.2 式がfalseの場合の表示を定義する - v-else
　　7.1.3 複数の分岐を表現する - v-else-if
7.2 式の真偽に応じて表示／非表示を切り替える - v-show
7.3 配列／オブジェクトを繰り返し処理する - v-for
　　7.3.1 配列から要素を順に取得する
　　7.3.2 インデックス番号を取得する
　　7.3.3 オブジェクトのプロパティを順に処理する
　　7.3.4 数値を列挙したい場合
7.4 v-forによるループ処理の注意点
　　7.4.1 配列の絞り込みには算出プロパティを利用する
　　7.4.2 異なる要素のセットを繰り返し出力する - <template>要素

Part 8：コンポーネント連携

8.1 コンポーネント連携の種類
8.2 コンポーネントへのパラメーターの引き渡し - プロパティ
　　8.2.1 プロパティの基本
　　8.2.2 プロパティ値の型を制限する
　　8.2.3 検証ルールのさまざまな表現方法
　　8.2.4 プロパティ利用の注意点
8.3 子コンポーネントから親コンポーネントへの伝達 - カスタムイベント
　　8.3.1 カウンターアプリの例
　　8.3.2 incrementイベントの実装
　　8.3.3 カスタムイベントの監視
　　8.3.4 カスタムイベントの検証
8.4 コンポーネント配下のコンテンツをテンプレートに反映させる - スロット
　　8.4.1 スロットの基本
　　8.4.2 複数のスロットを利用する
8.5 子孫コンポーネントへの値の引き渡し - Provide／Inject
　　8.5.1 値をProvideする
　　8.5.2 値をInjectする
　　8.5.3 Provide値の操作
　　8.5.4 補足：共通コードの分離

Part 9：組み込みコンポーネント

9.1 コンポーネントを動的に切り替える - <component>要素
　　9.1.1 動的コンポーネントの基本
　　9.1.2 コンポーネントの状態を維持する - <KeepAlive>要素
9.2 アニメーション機能を実装する - <Transition>要素
　　9.2.1 アニメーションの基本
　　9.2.2 <transition>要素の主な属性
　　9.2.3 複数要素を対象とするアニメーション
9.3 テンプレート配下のコンテンツを任意の場所に反映させる - <Teleport>要素
9.4 非同期処理の待ちメッセージを表示する - <Suspense>要素

Part 10：ディレクティブ／プラグイン

10.1 ディレクティブの自作
　　10.1.1 ディレクティブの基本
　　10.1.2 親コンポーネントの監視
　　10.1.3 引数付きのディレクティブ
　　10.1.4 イベント処理を伴うディレクティブ
10.2 プラグイン
　　10.2.1 プラグインの基本
　　10.2.2 動作オプションの追加

Part 11：ルーティング

11.1 ルーターの基本
　　11.1.1 ルーティング情報の定義
　　11.1.2 ルーターの有効化
　　11.1.3 トップページのテンプレート
　　11.1.4 補足：プログラムからページ遷移
11.2 パスの一部をパラメータ―として引き渡す - ルートパラメーター
　　11.2.1 ルートパラメーターの基本
　　11.2.2 ルートの優先順位
　　11.2.3 ルートパラメーターの記法
11.3 複数のビュー領域を設置する
11.4 入れ子のビューを設置する

Part 12：Pinia

12.1 Piniaの組み込み
12.2 Piniaによるカウンターアプリ
12.3 Piniaストアの活用
　　12.3.1 ステート値を加工／演算する - ゲッター
　　12.3.2 アクションによる操作を監視する - アクションサブスクリプション
　　12.3.3 Piniaストアを拡張する - プラグイン
　　12.3.4 補足：アクションサブスクリプションのプラグイン化

Part 13：ユニットテスト

13.1 ユニットテストの基本
　　13.1.1 テストコードを確認する
　　13.1.2 テストを実行する
　　13.1.3 テスト共通のコードを切り出す
13.2 ユニットテストのさまざまな手法
　　13.2.1 プロパティのテスト
　　13.2.2 入れ子になったコンポーネントのテスト
　　13.2.3 イベントのテスト
　　13.2.4 カスタムイベントのテスト
　　13.2.5 Provide／Injectのテスト