山田祥寛/著
SBクリエイティブ株式会社/発行
定価 3,718円
B5変版・ 468ページ・ 2色
ISBN 978-4-8156-0182-9
発刊日： 2019年8月22日

■導入編

Chapter1 イントロダクション

1-1 JavaScript の歴史
　1-1-1 初期の盛り上がりから「不遇の時代」へ
　1-1-2 Ajax によるJavaScript の復権
　1-1-3 HTML5 の時代へ
1-2 jQuery からJavaScript フレームワークへ
　1-2-1 jQuery の時代
　1-2-2 jQuery の限界とJavaScript フレームワーク
1-3 主なJavaScript フレームワークとVue.js
　1-3-1 フレームワークとは？
　1-3-2 主なJavaScript フレームワーク
　　補足：ライブラリとフレームワーク
　1-3-3 Vue.js の特徴
　　導入ハードル、学習コストが低い
　　アプリの段階的（Progressive）な成長に対応できる
　　コンポーネント指向である
　　ドキュメントやライブラリが充実している
　＜COLUMN＞ ECMAScript とは？

Chapter2 Vue.js の基本

2-1 Vue.js を利用するための準備
　2-1-1 Vue.js アプリの実行
　　補足：オフライン環境で Vue.js を実行する
2-2 Vue.js 理解のための3つの柱
　2-2-1 ディレクティブ
　　文字列をテンプレートに埋め込む～v-text
　　{{ }}構文を無効化する～v-pre
　　属性値にJavaScript式を埋め込む～v-bind
　2-2-2 算出プロパティ
　　算出プロパティの基本
　　メソッドによるロジックの切り出し
　　算出プロパティとメソッドの相違点
　2-2-3 ライフサイクルフック
　　ライフサイクルフックの具体的な例
2-3 リアクティブデータ
　2-3-1 リアクティブシステムの例
　2-3-2 リアクティブシステムの制約
　2-3-3 ビューの非同期更新を理解する
　2-3-4 ウォッチャーによる明示的な監視
　　ウォッチャーの具体的な例
　　補足：ウォッチャーのさまざまな定義方法
　　＜COLUMN＞ 識別子の記法

■基本編

Chapter3 ディレクティブ

3-1 イベント関連のディレクティブ
　3-1-1 イベントの基本
　　別解：イベント処理の記法
　3-1-2 Vue.js で利用できる主なイベント
　　マウスの出入りに応じて画像を切り替える
　　補足：mouseenter／mouseleaveとmouseover ／ mouseout の相違点
　　画像が読み込めない場合にダミー画像を表示する
　3-1-3 イベントオブジェクト
　　例：イベント発生時のマウス情報を取得したい
　　イベントハンドラーに任意の引数を渡す
3-2 フォーム関連のディレクティブ
　3-2-1 双方向データバインディング
　3-2-2 ラジオボタン
　3-2-3 チェックボックス（単一）
　3-2-4 チェックボックス（複数）
　3-2-5 選択ボックス
　　補足：オブジェクトをバインドする
　3-2-6 ファイル入力ボックス
　3-2-7 バインドの動作オプションを設定する
　　入力値を数値としてバインドする～.number修飾子
　　入力値の前後の空白を除去する～.trim修飾子
　3-2-8 バインドのタイミングを遅延させる～ .lazy 修飾子
　3-2-9 双方向データバインドのカスタマイズ
3-3 制御関連のディレクティブ
　3-3-1 式の真偽に応じて表示と非表示を切り替える～ v-if
　　式がfalseの場合の表示を定義する
　　複数の分岐を表現する
　　注意：要素の再利用による問題
　3-3-2 式の真偽に応じて表示／非表示を切り替える～ v-show
　3-3-3 配列やオブジェクトを繰り返し処理する～ v-for
　　配列から要素を順に取得する
　　インデックス番号を取得する
　　オブジェクトのプロパティを順に処理する
　　数値を列挙したい場合
　3-3-4 v-for によるループ処理の注意点
　　配列の絞り込みには算出プロパティを利用する
　　異なる要素のセットを繰り返し出力する～<template>要素
　3-3-5 配列の変更を反映する～変更メソッド
　3-3-6 配列要素の追加／削除を効率的に行う
3-4 データバインディング関連のディレクティブ
　3-4-1 属性に値をバインドする～ v-bind
　　複数の属性をまとめて指定する
　　要素オブジェクトのプロパティを設定する
　　JavaScript式から属性値を決定する
　3-4-2 文字列をHTMLとして埋め込む～ v-html
　3-4-3 値を一度だけバインドする～ v-once
　3-4-4 要素にスタイルプロパティを設定する～ v-bind:style
　　複数のスタイル情報を適用する
　　ベンダープレフィックスを自動補完する
　3-4-5 要素にスタイルクラスを設定する～ v-bind:class
　　v-bind:classのさまざまな記法
　3-4-6 {{ }} 構文による画面のチラツキを防ぐ～ v-cloak
3-5 より高度なイベント処理
　3-5-1 定型的なイベント処理を宣言的に指定する～イベント修飾子
　3-5-2 イベントの既定の動作をキャンセルする
　　補足：イベントの既定の動作をキャンセルする（修飾子を利用しない例）
　3-5-3 一度だけしか実行されないハンドラーを登録する
　3-5-4 イベントの伝播を抑制する
　3-5-5 キーイベントでのキーを識別する～キー修飾子
　3-5-6 システムキーとの組み合わせを検知する
　3-5-7 マウスの特定のボタンを検知する～マウス修飾子
　　＜COLUMN＞ Vue.js アプリ開発を支援するブラウザー拡張「Vue.js devtools」

Chapter4 コンポーネント（基本）

4-1 コンポーネントの基本
　4-1-1 コンポーネントの定義
　4-1-2 コンポーネントの呼び出し
　4-1-3 グローバル登録とローカル登録
4-2 コンポーネント間の通信
　4-2-1 コンポーネントのスコープ
　4-2-2 親コンポーネント　子コンポーネントの伝達～ props オプション
　　例：プロパティで受け取った値を更新する
　　補足：props定義されていない属性が渡された場合
　4-2-3 プロパティ値の型を制限する
　　検証ルールのさまざまな表現方法
　4-2-4 子コンポーネント　親コンポーネントの伝達～ $emit メソッド
　　カスタムイベントの例
　　補足：ブラウザーネイティブなイベントを監視する
　4-2-5 propsや$emitを利用しない親子間通信
4-3 コンポーネント配下のコンテンツをテンプレートに反映させる～スロット
　4-3-1 スロットのスコープ
　4-3-2 複数のスロットを利用する
　　補足：v-slotのさまざまな構文
　4-3-3 スロットから子コンポーネントの情報を引用する～スコープ付きスロット
　　defaultスロットの省略構文
　　＜COLUMN＞ Vue.js をより深く学ぶための参考書籍

Chapter5 コンポーネント（応用）

5-1 動的コンポーネント
　5-1-1 動的コンポーネントの基本
　5-1-2 タブパネルを生成する
　　補足：要素の属性
5-2 v-model による双方向データバインディング
　5-2-1 コンポーネントでのv-model の利用例
　　別解：算出プロパティによる出し入れ
　5-2-2 v-model の紐付け先を変更する～ model オプション
　5-2-3 複数のプロパティを双方向バインディングする～ .sync 修飾子
5-3 アニメーション機能
　5-3-1 アニメーションの基本
　　例：フェードイン／フェードアウトの実装
　5-3-2 キーフレームによるアニメーション制御
　5-3-3 アニメーションの制御
　　初回表示でのアニメーション
　　複数の要素を排他的に表示する
　　key属性をトリガーとしたアニメーション
　　Enter、Leaveのタイミングを制御する
　　複数のアニメーションを同居させる
　　トランジションクラスを置き換える
　　JavaScript によるアニメーションの制御
　5-3-4 リストトランジション
　　項目移動時のアニメーションを実装する
　　v-moveによるソート時のアニメーション
5-4 コンポーネントのその他の話題
　5-4-1 テンプレートの記法
　　x-template
　　インラインテンプレート
　　renderオプション
　5-4-2 関数型コンポーネント～ functional オプション

Chapter6 部品化技術

6-1 ディレクティブの自作
　6-1-1 ディレクティブの基本
　6-1-2 属性値の変化を検出する
　　補足：bindとupdateをまとめて定義する
　　値の変化をより厳密に検知する
　6-1-3 修飾子付きのディレクティブを定義する
　6-1-4 引数付きのディレクティブを定義する
　　補足：属性値、引数、修飾子の使い分け
　6-1-5 イベント処理を伴うディレクティブ
　6-1-6 markedライブラリをラップする
6-2 フィルターの自作
　6-2-1 フィルターの基本
　　例：改行文字を <br> 要素に変換する
　6-2-2 パラメーター付きのフィルターを定義する
　6-2-3 複数のフィルターを連結する
6-3 プラグインの利用と自作
　6-3-1 検証プラグインの利用～ VeeValidate
　　補足：VeeValidate のカスタマイズ
　6-3-2 典型的なUI を実装する～ Element
　6-3-3 プラグインの自作
6-4 ミックスイン
　6-4-1 ミックスインの基本
　6-4-2 マージのルール
　6-4-3 グローバルミックスイン

■応用編

Chapter7 Vue CLI

7-1 Vue CLI の基本
　7-1-1 Vue CLI のインストール
　7-1-2 プロジェクトの自動生成
　　補足：プロジェクトをビルドする
　7-1-3 Vue CLI の主なサブコマンド
　　プラグインを追加する～vue addコマンド
　　.vueファイルを素早く実行する～vue serveコマンド
　　Vue CLIプロジェクトをGUI管理する～vue uiコマンド
7-2 単一ファイルコンポーネント
　7-2-1 単一ファイルコンポーネントの基本
　　テンプレートの定義～<template>要素
　　コンポーネントの定義～<script>要素
　　スタイルの定義～<style>要素
　7-2-2 ES20XX のモジュール
　　モジュールの定義
　　モジュールの利用
　　App.vue、HelloWorld.vueを読み解く
　7-2-3 コンポーネントのローカルスタイル～ Scoped CSS
　　Scoped CSSの基本
　7-2-4 main.js を読み解く
7-3 TypeScript
　7-3-1 TypeScript の導入
　7-3-2 TypeScript プロジェクトのフォルダー構造
　7-3-3 TypeScript 形式のコンポーネント
　7-3-4 コンポーネントの主な構成要素
　　メソッド（methodsオプション）
　　算出プロパティ（computedオプション）
　　カスタムイベント
　　ディレクティブ、フィルターなど
　　ウォッチャー

Chapter8 ルーティング

8-1 ルーティングとは？
　8-1-1 Vue Router の準備
　8-2 ルーティングの基本
　8-2-1 ルーティング情報の定義
　　補足：コンポーネントの非同期ロード
　　ルートの有効化
　8-2-2 メインコンポーネント（App.vue）
　　補足：プログラムからページ遷移
8-3 ルーター経由で情報を渡す手法
　8-3-1 パスの一部をパラメーターとして引き渡す～ルートパラメーター
　　補足：$routeオブジェクトで取得できる情報
　8-3-2 ルートパラメーターのさまざまな表現
　　任意のパラメーター
　　可変長のパラメーター
　　値の形式をチェック
　8-3-3 ルートパラメーターをプロパティとして受け渡す
　　補足：パラメーターの型変換
8-4 マルチビュー、入れ子のビュー、ガードなど
　8-4-1 複数のビュー領域を設置する
　8-4-2 入れ子のビューを設置する
　8-4-3 ルート遷移時に処理を差し挟む ～ ナビゲーションガード
　8-4-4 ルーターによるリンクの制御
　　active-class属性
　　exact属性
　　replace属性
　　append属性
　　tag属性
　　event属性
　8-4-5 ルーティングにかかわるその他のテクニック
　　ルートパラメーター変化にかかわる注意点
　　ルーティング時にアニメーションを適用する
　　ルーティング時のスクロールを制御する
　　ルート単位の認証

Chapter9 Vuex

9-1 Vuex とは？
　9-1-1 Vuex の準備
9-2 Vuex の基本
　9-2-1 Vuex を利用したカウンターアプリ
　　補足：mapStateヘルパー
9-3 Vuex ストアを構成する要素
　9-3-1 ステートの内容を加工＆取得する～ゲッター
　　コンポーネントからゲッターを参照する
　　補足：ゲッターのキャッシュルール
　9-3-2 ストアの状態を操作する～ミューテーション
　　呼び出し時に引数を渡す
　　オブジェクト形式でのcommitメソッド呼び出し
　　Vuexストアでの双方向バインディング
　　ミューテーション型を定数化する
　　ミューテーションの呼び出しを簡単化する
　9-3-3 非同期処理を実装する～アクション
　　コンポーネントからアクションを呼び出す
9-4 巨大なストアを分割管理する～モジュール
　9-4-1 モジュールの定義
　9-4-2 モジュールへのアクセス
　9-4-3 名前空間を分離する
　9-4-4 名前空間付きモジュールから他のモジュールへアクセスする
　9-4-5 mapXxxxx 関数によるストアのマッピング

Chapter10 テスト

10-1 単体テスト
　10-1-1 単体テストの準備
　10-1-2 テストスクリプトの基本
　10-1-3 コンポーネントのテスト
　　setPropsメソッド
　10-1-4 shallowMount メソッドとmount メソッド
　　補足：独自のスタブで置き換える
　10-1-5 算出プロパティのテスト
　10-1-6 イベントを伴うテスト
　10-1-7 カスタムイベントを伴うテスト
10-2 E2E テスト
　10-2-1 E2E テストの準備
　10-2-2 テストコードの基本
　10-2-3 E2E テストの実行
　10-2-4 expect アサーション

Chapter11 応用アプリ

11-1 アプリの構造を概観する
　11-1-1 ファイル関係図
　11-1-2 利用しているサービス、ライブラリ
　　Google Books API
　　Element
　　vuex-persistedstate
11-2 アプリの共通機能を読み解く
　11-2-1 起動スクリプト
　　補足：Vueメンバー追加の際の注意点
　11-2-2 ルーティングの定義
　11-2-3 Vuex ストアの定義
11-3 アプリの実装を理解する
　11-3-1 メインメニュー（メインコンポーネント）
　11-3-2 書籍情報の表示
　11-3-3 レビュー情報の一覧表示
　11-3-4 Google ブックス経由での書籍検索
　　補足：非同期通信のテスト
11-3-5 レビュー登録フォーム