目次

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

1.1　現代のWebフロントエンド開発の複雑化

1.1.1　Webの誕生とWebベースシステムへの発展

1.1.2　Ajaxの登場

1.1.3　HTML5、Node.js、ES2015、React以降の世界

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　宣言的レンダリング

1.4.2　コンポーネントシステム

1.4.3　クライアントサイドルーティング

1.4.4　大規模向け状態管理

1.4.5　ビルドシステム

1.4.6　クライアントサーバデータ永続化

1.5　Vue.jsを支える技術

1.5.1　コンポーネントシステム

1.5.2　リアクティブシステム

1.5.3　レンダリングシステム

1.6　Vue.jsのエコシステム

1.7　Vue.jsのはじめの一歩

 

2.　Vue.jsの基本

2.1　Vue.jsでUIを構築する際の考え方

2.1.1　旧来のUI構築の問題点

2.1.2　Vue.jsのUI構築

2.2　Vue.jsの導入

2.3　Vueオブジェクト

2.3.1　コンストラクタ

2.3.2　コンポーネント

2.4　Vueインスタンスのマウント

2.4.1　Vueインスタンスの適用

2.4.2　メソッドによるマウント

2.5　UIのデータ定義

2.5.1　Vueインスタンスの確認

2.5.2　データの変更を検知する

2.6　テンプレート構文

2.6.1　テキストへの展開

2.6.2　属性値の展開

2.6.3　JavaScript式の展開

2.7　フィルタ

2.8　算出プロパティ

2.8.1　thisによる参照

2.8.2　サンプルアプリケーションでの実装

2.9　ディレクティブ

2.9.1　条件付きレンダリング

2.9.2　クラスとスタイルのバインディング

2.9.3　リストレンダリング

2.9.4　イベントハンドリング

2.9.5　フォーム入力バインディング

2.10　ライフサイクルフック

2.10.1　ライフサイクルフック一覧とフロー

2.10.2　createdフック

2.10.3　mountedフック

2.10.4　beforeDestroyフック

2.11　メソッド

2.11.1　イベントオブジェクト

2.11.2　サンプルでのメソッドの呼び出し

 

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

3.1　コンポーネントとは何か

3.1.1　すべてはUIコンポーネントから構成される

3.1.2　コンポーネント化のメリットと注意点

3.1.3　Vue.jsのコンポーネントシステム

3.2　Vueコンポーネントの定義

3.2.1　グローバルコンポーネントの定義

3.2.2　コンストラクタベースの定義

3.2.3　ローカルコンポーネントの定義

3.2.4　テンプレートを構築するその他の手段

3.2.5　コンポーネントのライフサイクル

3.2.6　コンポーネントのデータ

3.3　コンポーネント間の通信

3.3.1　親コンポーネントから子コンポーネントへデータの伝播

3.3.2　子コンポーネントから親コンポーネントへの通信

3.4　コンポーネントの設計

3.4.1　コンポーネントの分割方針

3.4.2　コンポーネント自体の設計

3.4.3　スロットコンテンツを活かしたヘッダーコンポーネントの作成

3.4.4　ログインフォームコンポーネントの作成

 

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

4.1　VueRouterによるシングルページアプリケーション

4.1.1　シングルページアプリケーションとルーティング

4.1.2　VueRouterとは

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　VueRouterの高度な機能

4.5.1　RouterインスタンスとRouteオブジェクト

4.5.2　ネストしたルーティング

4.5.3　リダイレクト・エイリアス

4.5.4　履歴の管理

 

5.　Vue.jsの高度な機能

5.1　トランジションアニメーション

5.1.1　transitionラッパーコンポーネント

5.1.2　トランジションクラス

5.1.3　fadeトランジションの実装

5.1.4　JavaScriptフック

5.2　スロット

5.2.1　単一スロット

5.2.2　名前付きスロット

5.2.3　スロットのスコープ

5.3　カスタムディレクティブ

5.3.1　作成するカスタムディレクティブの定義

5.3.2　ディレクティブ定義オブジェクト

5.3.3　ブック関数フック関数の引数

5.3.4　image-fallbackディレクティブの機能追加

5.4　描画関数

5.4.1　描画関数を用いないと書きづらい例

5.4.2　描画関数による効率化

5.4.3　createdElement関数

5.5　ミックスイン

5.5.1　ミックスインで機能を再利用する

5.5.2　グローバルミックスイン

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

6.6.3　CSSモジュール

6.6.4　他言語実装のサポート

 

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

7.1　複雑な状態管理

7.2　データフローの設計

7.2.1　信頼できる唯一の情報源

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とVueRouterの連携

 

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

8.1　Vue.jsのプロジェクト構築の特徴

8.1.1　Vue.jsで本格的な開発をするための心構え

8.2　本章で作成するアプリケーション

8.2.1　アプリケーション仕様概要

8.2.2　アプリケーションアーキテクチャ

8.3　アプリケーションの開発環境構築

8.3.7　開発環境構築をサポートするVueCLI

8.3.2　JavaScriptの環境構築とVueCLI

8.4　VueCLIによる開発環境の構築

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.1　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　AtomicDesignによるコンポーネントの抽出

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　アプリケーションのデプロイ

10.9　パフォーマンス測定・改善

10.9.1　パフォーマンス測定の設定方法

10.9.2　測定できる処理

10.9.3　レンダリングパフォーマンスの向上

 

Appendix　jQueryからの移行／開発ツール／Nuxt.js

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　セットアップ

B.2.4　コンポーネントの実装

B.2.5　エディタ

B.2.6　ライブラリの型定義

 

Appendix C　Nuxt.js

C.1　Nuxt.jsとは

C.2　Nuxt.jsの特徴

C.2.1　サーバーサイドレンダリングのサポート

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ファイルにビルドする