目次

1. プログレッシブフレームワークVue.js

• 1.1 現代のWebフロントエンド開発の複雑化
  • 1.1.1 Webの誕生とWebベースシステムへの発展
  • 1.1.2 Ajaxの登場
  • 1.1.3 HTML5、Node.js、ES2015、React以降の世界
  • Column AltJSの登場
  • 1.1.4 現在の課題とVue.js
• 1.2 Vue.jsの特徴
  • 1.2.1 学習コストが低い
  • 1.2.2 コンポーネント指向によるUIの構造化
  • 1.2.3 リアクティブなデータバインディング
• 1.3 Vue.jsの設計思想
  • 1.3.1 フレームワークの複雑性
  • 1.3.2 要求の変化に追随できるフレームワーク
• 1.4 プログレッシブフレームワークの解決する段階的な領域
  • 1.4.1 宣言的レンダリング（Declarative Rendering）
  • 1.4.2 コンポーネントシステム（Component System）
  • 1.4.3 クライアントサイドルーティング（Client-side Routing）
  • 1.4.4 大規模向け状態管理（Large-scale State Management）
  • 1.4.5 ビルドシステム（Build System）
  • 1.4.6 クライアントサーバーデータ永続化（Client-server Data Persistence）
• 1.5 Vue.jsを支える技術
  • 1.5.1 コンポーネントシステム
  • 1.5.2 リアクティブシステム
  • Column リアクティブシステムの内側
  • 1.5.3 レンダリングシステム
  • Column Vue.jsの仮想DOMの処理の流れ
• 1.6 Vue.jsのエコシステム
• 1.7 Vue.jsのはじめの一歩
  • Column JSFiddleで実践
  • Column Vue.jsのドキュメンテーション
  • Column Vue.jsコミュニティ
  • Column Vue.jsの対応ブラウザ

2. Vue.jsの基本

• 2.1 Vue.jsでUIを構築する際の考え方
  • 2.1.1 旧来のUI構築の問題点
  • 2.1.2 Vue.jsのUI構築
• 2.2 Vue.jsの導入
  • Column Vue.jsの高度な環境構築
• 2.3 Vueオブジェクト
  • 2.3.1 コンストラクタ
  • Column MVVMパターン
  • 2.3.2 コンポーネント
• 2.4 Vueインスタンスのマウント
  • 2.4.1 Vueインスタンスの適用（el）
  • 2.4.2 メソッドによるマウント（$mountメソッド）
  • Column Vue.jsを既存アプリケーションに導入する
• 2.5 UIのデータ定義 (data)
  • 2.5.1 Vueインスタンスの確認
  • 2.5.2 データの変更を検知する
• 2.6 テンプレート構文
  • 2.6.1 テキストへの展開
  • 2.6.2 属性値の展開
  • 2.6.3 JavaScript式の展開
• 2.7 フィルタ（filters）
  • Column フィルタの連結
• 2.8 算出プロパティ（computed）
  • 2.8.1 thisによる参照
  • 2.8.2 サンプルアプリケーションでの実装
• 2.9 ディレクティブ
  • 2.9.1 条件付きレンダリング（v-if/v-show）
  • 2.9.2 クラスとスタイルのバインディング
  • 2.9.3 リストレンダリング（v-for）
  • Column リストレンダリングパフォーマンス
  • 2.9.4 イベントハンドリング（v-on）
  • 2.9.5 フォーム入力バインディング（v-model）
  • Column 修飾子による動作の変更
• 2.10 ライフサイクルフック
  • 2.10.1 ライフサイクルフック一覧とフロー
  • 2.10.2 createdフック
  • 2.10.3 mountedフック
  • 2.10.4 beforeDestroyフック
• 2.11 メソッド（methods）
  • 2.11.1 イベントオブジェクト
  • Column 算出プロパティのキャッシュ機構
  • 2.11.2 サンプルでのメソッドの呼び出し

3. コンポーネントの基礎

• 3.1 コンポーネントとは何か
  • 3.1.1 全てはUIコンポーネントから構成される
  • 3.1.2 コンポーネント化のメリットと注意点
  • 3.1.3 Vue.jsのコンポーネントシステム
  • Column Vue.jsのコンポーネントとWeb Components
• 3.2 Vueコンポーネントの定義
  • 3.2.1 グローバルコンポーネントの定義
  • 3.2.2 コンストラクタベースの定義
  • Column ReactのRender Props
  • 3.2.3 ローカルコンポーネントの定義
  • 3.2.4 テンプレートを構築するその他の手段
  • Column コンポーネントの命名規則について
  • 3.2.5 コンポーネントのライフサイクル
  • 3.2.6 コンポーネントのデータ
  • Column オブジェクトを指定した場合の警告
• 3.3 コンポーネント間の通信
  • 3.3.1 親コンポーネントから子コンポーネントへデータの伝播
  • 3.3.2 子コンポーネントから親コンポーネントへの通信
  • Column propsとイベントを用いない親子間のやりとり
  • Column 親子以外のコンポーネントでデータをやりとりする
  • Column 子から親のネイティブDOMイベントを取得したい場合 ― .native修飾子
  • Column propsの値に関して双方向バインディングを実現したい場合 ― .sync修飾子
• 3.4 コンポーネントの設計
  • 3.4.1 コンポーネントの分割方針
  • 3.4.2 コンポーネント自体の設計
  • Column Atomic Design
  • 3.4.3 スロットコンテンツを活かしたヘッダーコンポーネントの作成
  • 3.4.4 ログインフォームコンポーネントの作成
  • Column コンポーネント単位のテスト

4. Vue Routerを活用したアプリケーション開発

• 4.1 Vue Routerによるシングルページアプリケーション
  • 4.1.1 シングルページアプリケーションとルーティング
  • 4.1.2 Vue Routerとは
• 4.2 ルーティングの基礎
  • 4.2.1 ルーターのインストール
  • 4.2.2 ルーティング設計
• 4.3 実践的なルーティングのための機能
  • 4.3.1 URLパラメーターの扱いとパターンマッチング
  • 4.3.2 名前付きルート
  • 4.3.3 router.pushを使った遷移
  • 4.3.4 フック関数
• 4.4 サンプルアプリケーションの実装
  • 4.4.1 リストページの実装
  • 4.4.2 APIによるデータ通信
  • 4.4.3 詳細ページの実装
  • 4.4.4 ユーザー登録ページの実装
  • 4.4.5 ログイン・ログアウトの実装
  • 4.4.6 サンプルアプリケーションの全体像
• 4.5 Vue Routerの高度な機能
  • 4.5.1 RouterインスタンスとRouteオブジェクト
  • 4.5.2 ネストしたルーティング
  • 4.5.3 リダイレクト・エイリアス
  • 4.5.4 履歴の管理
  • Column Vue Routerを使った大規模なアプリケーションの実装
  • Column Vue RouterとReact Router

5. Vue.jsの高度な機能

• 5.1 トランジションアニメーション
  • 5.1.1 transitionラッパーコンポーネント
  • 5.1.2 トランジションクラス
  • 5.1.3 fadeトランジションの実装
  • Column Vue Routerのトランジション
  • Column カスタムトランジションクラス
  • 5.1.4 JavaScriptフック
• 5.2 スロット
  • 5.2.1 単一スロット
  • 5.2.2 名前付きスロット
  • 5.2.3 スロットのスコープ
• 5.3 カスタムディレクティブ
  • Column コンポーネントやミックスインとの違い
  • 5.3.1 作成するカスタムディレクティブの定義
  • 5.3.2 ディレクティブ定義オブジェクト
  • 5.3.3 フック関数の引数
  • 5.3.4 image-fallbackディレクティブの機能追加
  • Column DOM操作を行うライブラリをラップする
• 5.4 描画関数
  • 5.4.1 描画関数を用いないと書きづらい例
  • 5.4.2 描画関数による効率化
  • 5.4.3 createElement関数
  • Column h関数
  • Column JSX
• 5.5 ミックスイン
  • 5.5.1 ミックスインで機能を再利用する
  • 5.5.2 グローバルミックスイン
  • Column ミックスインの命名規則

6. 単一ファイルコンポーネントによる開発

• 6.1 ツールのインストール
  • 6.1.1 Vue CLI
• 6.2 単一ファイルコンポーネントとは
• 6.3 単一ファイルコンポーネントの仕様
  • 6.3.1 <template>ブロック
  • 6.3.2 <script>ブロック
  • 6.3.3 <style>ブロック
• 6.4 単一ファイルコンポーネントのビルド
• 6.5 単一ファイルコンポーネントの動作を体験する
  • 6.5.1 動作を押さえる
• 6.6 単一ファイルコンポーネントの機能
  • 6.6.1 外部ファイルのインポート
  • 6.6.2 スコープ付きCSS
  • Column スコープ付きCSSのメリット
  • 6.6.3 CSSモジュール
  • 6.6.4 他言語実装のサポート
  • Column カスタムブロック
  • Column カスタムブロックの定義

7. Vuexによるデータフローの設計・状態管理

• 7.1 複雑な状態管理
• 7.2 データフローの設計
  • 7.2.1 信頼できる唯一の情報源（Single Source of Truth）
  • 7.2.2 「状態の取得・更新」のカプセル化
  • 7.2.3 単方向データフロー
• 7.3 Vuexによる状態管理
  • 7.3.1 Vuexのインストール
• 7.4 Vuexのコンセプト
  • 7.4.1 ストア
  • 7.4.2 ステート
  • 7.4.3 ゲッター
  • 7.4.4 ミューテーション
  • 7.4.5 アクション
• 7.5 タスク管理アプリケーションの状態管理
  • 7.5.1 アプリケーションの仕様と準備
  • 7.5.2 タスクの一覧表示
  • 7.5.3 タスクの新規作成と完了
  • 7.5.4 ラベル機能の実装
  • 7.5.5 ラベルのフィルタリング
  • 7.5.6 ローカルストレージへの保存と復元
  • 7.5.7 Vuexによるアプリケーションの考察
• 7.6 ストアのモジュール分割
  • 7.6.1 namespacedオプションによる名前空間
• 7.7 VuexストアとVueコンポーネント間の通信
  • 7.7.1 コンポーネントからストアにアクセスする
  • 7.7.2 ストアにアクセスするコンポーネントを必要最小限にする
• 7.8 VuexとVue Routerの連携

8. 中規模・大規模向けのアプリケーション開発① 開発環境のセットアップ

• 8.1 Vue.jsのプロジェクト構築の特徴
  • 8.1.1 Vue.jsで本格的な開発をするための心構え
• 8.2 本章で作成するアプリケーション
  • 8.2.1 アプリケーション仕様概要
  • 8.2.2 アプリケーションアーキテクチャ
  • Column バックエンドの設計
• 8.3 アプリケーションの開発環境構築
  • 8.3.1 開発環境構築をサポートするVue CLI
  • 8.3.2 JavaScriptの環境構築とVue CLI
  • Column vue init について
• 8.4 Vue CLIによる開発環境の構築
  • 8.4.1 アプリケーションプロジェクトの作成
  • 8.4.2 プロジェクト構造
  • 8.4.3 タスクコマンド
  • 8.4.4 アプリケーションの起動確認
  • 8.4.5 アプリケーションの環境変数
• 8.5 アプリケーションのビルド
  • 8.5.1 アセット処理
  • 8.5.2 リントツール
• 8.6 テスト環境
  • 8.6.1 単体テスト
  • 8.6.2 E2Eテスト
• 8.7 フロントエンド・バックエンド連携
  • 8.7.1 APIのプロキシ
  • 8.7.2 バックエンドとのインテグレーション
• 8.8 さらなる開発環境の強化
  • 8.8.1 Vue.jsコーディング環境の構築
  • 8.8.2 Vue.js公式ESLintプラグインの導入
  • 8.8.3 デバッグとプロファイリングの環境構築
  • 8.8.4 バックエンドAPIサーバーの環境構築
  • 8.8.5 状態管理ライブラリの導入
  • 8.8.6 HTTPクライアントライブラリの導入
  • 8.8.7 単体テストユーティリティの導入
  • 8.8.8 E2Eテストのコマンド登録

9. 中規模・大規模向けのアプリケーション開発② 設計

• 9.1 コンポーネント設計
  • 9.1.1 Atomic Designによるコンポーネントの抽出
  • 9.1.2 Atoms
  • 9.1.3 Molecules
  • 9.1.4 Organisms
  • 9.1.5 Templates
• 9.2 単一ファイルコンポーネント化
  • 9.2.1 ディレクトリの構造化と各ファイルの配置
  • 9.2.2 コンポーネントのAPI
  • 9.2.3 KbnButtonコンポーネントのAPI
• 9.3 状態モデリングとデータフローの設計
  • 9.3.1 状態モデリング
  • 9.3.2 データフロー
  • 9.3.3 データフロー周りの雛形コードのセットアップ
  • 9.3.4 アクションの雛形
• 9.4 ルーティング設計
  • 9.4.1 ルートフロー
  • 9.4.2 ルート定義

10. 中規模・大規模向けのアプリケーション開発③ 実装

• 10.1 開発方針の整理
  • 10.1.1 アプリケーションの実装に入る前に
• 10.2 コンポーネントの実装
  • 10.2.1 KbnButtonコンポーネント
  • 10.2.2 KbnLoginFormコンポーネント
  • 10.2.3 KbnLoginViewコンポーネント
• 10.3 データフローの実装
  • 10.3.1 loginアクションハンドラ
  • 10.3.2 AUTH_LOGINミューテーションハンドラ
  • 10.3.3 Auth APIモジュール
• 10.4 ルーティングの実装
  • 10.4.1 beforeEachガードフックを活用したナビゲーションガード
• 10.5 開発サーバーとデバッグ
  • 10.5.1 開発サーバーによる開発
  • 10.5.2 Vue DevToolsによるデバッグ
• 10.6 E2Eテスト
  • 10.6.1 E2Eテストの実装
  • 10.6.2 テストの実行
• 10.7 アプリケーションのエラーハンドリング
  • 10.7.1 子コンポーネントのエラーハンドリング
  • 10.7.2 グローバルなエラーハンドリング
• 10.8 ビルドとデプロイ
  • 10.8.1 アプリケーションのビルド
  • 10.8.2 アプリケーションのデプロイ
  • Column Vue.jsのバックエンド
• 10.9 パフォーマンス測定・改善
  • 10.9.1 パフォーマンス測定の設定方法
  • 10.9.2 測定できる処理
  • 10.9.3 レンダリングパフォーマンスの向上
  • Column Vue CLIの対話的な選択時の注意点
  • Column テンプレートコンパイラのオプションを利用する

Appendix A　jQueryからの移行

• A.1 移行の判断
• A.2 jQueryで実装していた機能のVue.jsによる実装
  • A.2.1 イベントリスナー
  • A.2.2 表示の切り替え
  • A.2.3 要素の挿入・削除
  • A.2.4 属性値の変更
  • A.2.5 クラスの変更
  • A.2.6 スタイルの変更
  • A.2.7 フォーム（ユーザー入力）

Appendix B　開発ツール

• B.1 Storybook
  • B.1.1 開発プロジェクトに導入する
  • B.1.2 Storybookを動作させる
  • B.1.3 ストーリーを実装する
  • B.1.4 Storybookを公開する
• B.2 静的型付き言語
  • B.2.1 TypeScript
  • B.2.2 TypeScriptの記述例
  • B.2.3 セットアップ
  • Column TypeScriptコンパイラ
  • B.2.4 コンポーネントの実装
  • Column 単一ファイルコンポーネント用の設定
  • B.2.5 エディタ
  • B.2.6 ライブラリの型定義
  • Column TypeScriptの型定義がないとき
  • Column Vue.jsとFlow

Appendix C　Nuxt.js

• C.1 Nuxt.jsとは
• C.2 Nuxt.jsの特徴
  • C.2.1 サーバーサイドレンダリングのサポート
  • Column サーバーサイドレンダリング環境の構築
  • Column サーバーサイドレンダリングの必要性
  • C.2.2 すぐに開発着手できる開発環境と拡張性の提供
  • C.2.3 静的なHTMLファイル生成のサポート
• C.3 Nuxt.jsをはじめる
• C.4 Nuxt.jsで静的サイトを作成する
  • C.4.1 画面仕様
  • C.4.2 ルーティングを追加する
  • C.4.3 グローバルナビゲーションのコンポーネントを追加する
  • C.4.4 レイアウトにグローバルナビゲーションを追加する
  • C.4.5 開発サーバーで動作確認する
  • C.4.6 静的なHTMLファイルにビルドする
  • Column Nuxt.jsにおけるサーバーサイドレンダリング