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

はじめに

対象読者
サンプルプログラムについて
動作確認環境について

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

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

Part 2：Vue.jsの基本

2.1 Vue.jsのインストール方法
2.2 Vue.jsアプリの基本
2.3 ディレクティブによるデータアクセス - v-text
2.4 {{...}}式を無効化する - v-pre
2.5 文字列をHTMLとして埋め込む - v-html
2.6 属性値にJavaScript式を埋め込む - v-bind
2.7 プロパティ値をアプリ独自のルールで加工する - 算出プロパティ
　　2.7.1 別解：メソッドによるロジックの切り出し

Part 3：イベント処理

3.1 イベントの基本
3.2 イベントオブジェクトを参照する
　　3.2.1 イベントハンドラーに引数を渡す場合
3.3 定型的なイベント処理を宣言的に指定する - イベント修飾子
　　3.3.1 イベント修飾子を利用する場合の注意点
3.4 キーボードからの入力を識別する - キー修飾子
　　3.4.1 システムキーとの組み合わせを検知する
3.5 マウスの特定のボタンを検知する - マウス修飾子

Part 4：フォーム開発

4.1 さまざまなフォーム要素の例
　　4.1.1 ラジオボタン
　　4.1.2 チェックボックス（単一）
　　4.1.3 チェックボックス（複数）
　　4.1.4 選択ボックス
　　4.1.5 補足：オブジェクトをバインドする
　　4.1.6 ファイル入力ボックス
4.2 バインドの動作オプションを設定する - 修飾子
　　4.2.1 入力値を数値としてバインドする - number修飾子
　　4.2.2 入力値の前後の空白を除去する - trim修飾子
　　4.2.3 バインドのタイミングを遅延させる - lazy修飾子
4.3 双方向データバインドのカスタマイズ

Part 5：条件分岐とループ

5.1 式の真偽に応じて表示／非表示を切り替える - v-if
　　5.1.1 式がfalseの場合の表示を定義する - v-else
　　5.1.2 複数の分岐を表現する - v-else-if
5.2 式の真偽に応じて表示／非表示を切り替える - v-show
5.3 配列／オブジェクトを繰り返し処理する - v-for
　　5.3.1 配列から要素を順に取得する
　　5.3.2 インデックス番号を取得する
　　5.3.3 オブジェクトのプロパティを順に処理する
　　5.3.4 数値を列挙したい場合
5.4 v-forによるループ処理の注意点
　　5.4.1 配列の絞り込みには算出プロパティを利用する
　　5.4.2 異なる要素のセットを繰り返し出力する - template要素
　　5.4.3 配列の変更を反映する - 変更メソッド

Part 6：もっとデータバインディング

6.1 属性に値をバインドする - v-bind
　　6.1.1 複数の属性をまとめて指定する
　　6.1.2 要素オブジェクトのプロパティを設定する
6.2 値を一度だけバインドする - v-once
6.3 要素にスタイルプロパティを設定する - v-bind:style
　　6.3.1 複数のスタイル情報を適用する
　　6.3.2 ベンダープレフィックスを自動補完する
6.4 要素にスタイルクラスを設定する - v-bind:class
　　6.4.1 v-bind:classのさまざまな設定方法
6.5 {{...}}式による画面のチラツキを防ぐ - v-cloak

Part 7：コンポーネント

7.1 コンポーネントの基本
　　7.1.1 コンポーネントの定義
　　7.1.2 コンポーネントの呼び出し
　　7.1.3 テンプレートの制約［3］
　　7.1.4 グローバル登録とローカル登録
7.2 コンポーネントへのパラメーターの引き渡し
　　7.2.1 プロパティ値の型を制限する
　　7.2.2 検証ルールのさまざまな表現方法
7.3 子コンポーネントから親コンポーネントへの伝達 - カスタムイベント
　　7.3.1 カウンターアプリの例
　　7.3.2 incrementイベントの実装
　　7.3.3 カスタムイベントの監視
　　7.3.4 カスタムイベントの検証
7.4 コンポーネント配下のコンテンツをテンプレートに反映させる - スロット
　　7.4.1 複数のスロットを利用する

Part 8：もっとコンポーネント

8.1 大規模なコンポーネントを開発しやすく - Composition API［3］
　　8.1.1 Composition APIの基本
　　8.1.2 refによるデータ定義
　　8.1.3 コードの共通化
8.2 テンプレート配下のコンテンツを任意の場所に反映させる - Teleport［3］
8.3 非同期処理の待ちメッセージを表示する - Suspense［3］

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

9.1 ディレクティブの自作
　　9.1.1 ディレクティブの基本
　　9.1.2 親コンポーネントの監視
　　9.1.3 イベント処理を伴うディレクティブ
9.2 プラグイン
　　9.2.1 動作オプションの追加

Part 10：コマンドラインツールVue CLI

10.1 Vue CLIのインストール
10.2 プロジェクトの自動生成
　　10.2.1 補足：アプリのビルド
10.3 単一ファイルコンポーネント
　　10.3.1 コンポーネントの定義 - <script>要素
　　10.3.2 コンポーネント独自のスタイル - <style>要素
　　10.3.3 補足：Veturプラグイン

Part 11：ルーティング

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

Part 12：Vuex

12.1 Vuexの組み込み
12.2 Vuexによるカウンターアプリ
12.3 Vuexストアの構成要素
　　12.3.1 ステート値を加工／演算する - ゲッター
　　12.3.2 ステート値を更新する - ミューテーション
　　12.3.3 非同期処理を実装する - アクション
　　12.3.4 補足：Vuexストアの構成要素

Appendix Vue.js 3での変更点

Vueクラスの初期化
dataオプションの記述
Global APIの変更
キー修飾子（キーコード）の廃止
フィルターの廃止
その他の追加／変更点