川口和也氏の著書「Vue.js入門 基礎から実践アプリケーション開発まで」がとても参考になってのでメモしておきます
1 プログレッシブフレームワーク
- 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のはじめの一歩
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 メソッド（methids）
- 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 コンストラクタベースの定義
- 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インスタンスとRouterオブジェクト
- 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 スロットのスコープ
- Column ReactのRender Props
- 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 中規模・大規模向けのアプリケーション開発2 設計
- 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 中規模・大規模向けのアプリケーション開発3 実装
- 10.1 開発方針の整理
- 10.1.1 アプリケーションの実装に入る前に
- 10.2 コンポーネントの実装
- 10.2.1 KbnButtonコンポーネント
- 10.2.2 KbnLoginFormeコンポーネント
- 10.2.3 KbnLoginViewコンポーネント
- 10.3 データフローの実装
- 10.3.1 loginアクションハンドラ
- 10.3.2 AUTH＿LOGINミューテーションハンドラ
- 10.3.3 AuthAPIモジュール
- 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 storubook
- 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 Nuxr.jsで静的サイトを作成する
- C.4.1 画面仕様
- C.4.2 ルーティングを追加する
- C.4.3 グローバルナビゲーションのコンポーネントを追加する
- C.4.4 レイアウトにグローバルナビゲーションを追加する
- C.4.5 開発サーバーで動作確認する
- C.4.6 静的なHTMLファイルにビルドする
- Column Nuxt.jsにおけるサーバーサイドレンダリング
参考：