コードレベルで比べるReact Angular Vue.js フレームワークの選択で後悔しないために
書籍情報
発売日 : 2022年10月22日
著者／編集 : 末次 章
出版社 : 日経BP
発行形態 : 単行本
書籍説明
内容紹介
本書は、フロントエンド向けアプリケーションフレームワークの選択に悩んでいる人向けの本です。
目次
第1章フレームワーク比較のための基礎知識
1-1 フレームワークの選択肢
1-1-1 絞り込みの条件
1-1-2 絞り込みの結果
1-2 共通の用語
1-2-1 用語一覧
1-2-2 データバインド
1-2-3 仮想DOM
1-2-4 コンポーネント
1-2-5 状態管理ライブラリ
1-2-6 ルーター
1-2-7 ビルド
1-3 実装パターン
1-3-1 概要
1-3-2 ページ埋め込み
1-3-3 シンプルなSPA
1-3-4 複雑なSPA
第2章フレームワークの特徴と機能の比較
2-1 Reactの特徴
2-1-1 生い立ち（React）
2-1-2 設計方針（React）
2-1-3 JSXとは
2-1-4 記述スタイル（React）
2-1-5 実装パターンごとの対応（React）
2-1-6 導入後のメンテナンス（React）
2-2 Angularの特徴
2-2-1 生い立ち（Angular）
2-2-2 設計方針（Angular）
2-2-3 コンポーネント作成例（Angular）
2-2-4 記述スタイル（Angular）
2-2-5 実装パターンごとの対応（Angular）
2-2-6 導入後のメンテナンス（Angular）
2-3 Vue.jsの特徴
2-3-1 生い立ち（Vue.js）
2-3-2 設計方針（Vue.js）
2-3-3 コンポーネント作成例（Vue.js）
2-3-4 記述スタイル（Vue.js）
2-3-5 実装パターンごとの対応（Vue.js）
2-3-6 導入後のメンテナンス（Vue.js）
2-4 特徴の比較
2-4-1 比較表
2-4-2 項目ごとの比較
第3章開発環境を体験して比較
3-1 Reactの開発環境
3-1-1 CDNを利用した開発環境（React）
3-1-2 CDNを利用した開発を体験（React）
3-1-3 ツールチェーンを利用した開発（React）
3-1-4 Create React Appを体験
3-1-5 テストページのコード確認（React）
3-2 Angularの開発環境
3-2-1 CDNを利用した開発環境（Angular）
3-2-2 ツールチェーンを利用した開発（Angular）
3-2-3 Angular CLIを体験
3-2-4 テストページのコード確認（Angular）
3-3 Vue.jsの開発環境
3-3-1 CDNを利用した開発環境（Vue.js）
3-3-2 CDNを利用した開発を体験（Vue.js）
3-3-3 ツールチェーンを利用した開発（Vue.js）
3-3-4 create-vueを体験
3-3-5 テストページのコード確認（Vue.js）
3-4 開発環境のまとめ
3-4-1 CDNを利用した開発のメリット（共通）
3-4-2 ツールチェーンを利用した開発のメリット（共通）
3-4-3 開発環境のフレームワーク比較
第4章機能ごとのサンプルコード比較
4-1 準備
4-1-1 サンプルコードの取得
4-1-2 サンプルコードの構造
4-1-3 サンプルコードの動作確認
4-1-4 複数の記述方法
4-2 サンプルコード比較
4-2-1 HTML出力（サンプル＃1）
4-2-2 データバインド（サンプル＃2）
4-2-3 プロパティバインド（サンプル＃3）
4-2-4 イベント処理（サンプル＃4）
4-2-5 表示・非表示切り替え（サンプル＃5）
4-2-6 繰り返し表示（サンプル＃6）
4-2-7 フォーム入力取得（サンプル＃7）
4-2-8 変更検知と再レンダリング（サンプル＃8）
4-2-9 子コンポーネントへデータ渡し（サンプル＃9）
第5章同じアプリの実装コード比較
5-1 to-doリストアプリの概要
5-1-1 動作概要
5-1-2 機能と制限
5-1-3 画面フロー（登録）
5-1-4 画面フロー（編集）
5-2 to-doリストアプリのインストール
5-2-1 アプリの取得
5-2-2 アプリのフォルダ構造
5-2-3 アプリの動作確認
5-3 to-doリストアプリの内部構造
5-3-1 コンポーネントの構成
5-3-2 コンポーネントごとの役割分担
5-3-3 状態変数の構造
5-3-4 処理フロー概要
5-3-5 コンポーネント連携（親から子へのデータ渡し）
5-3-6 コンポーネント連携（イベント処理）
5-3-7 to-doリストアプリ内部構造のまとめ
5-4 to-doリストアプリのコード比較
5-4-1 コンポーネント連携のコード（React）
5-4-2 ルートコンポーネントのコード（React）
5-4-3 Listコンポーネントのコード（React）
5-4-4 Dialogコンポーネントのコード（React）
5-4-5 コンポーネント連携のコード（Angular）
5-4-6 ルートコンポーネントのコード（Angular）
5-4-7 Listコンポーネントのコード（Angular）
5-4-8 Dialogコンポーネントのコード（Angular）
5-4-9 コンポーネント連携のコード（Vue.js）
5-4-10 ルートコンポーネントのコード（Vue.js）
5-4-11 Listコンポーネントのコード（Vue.js）
5-4-12 Vue.js のDialogコンポーネントのコード
5-4-13 まとめ
第6章フレームワーク選択の考え方
6-1 選択のための視点
6-1-1 DOM操作の構文（JSXとテンプレート）
6-1-2 アプリ実装パターン
6-1-3 開発体制
6-1-4 学習目的
6-1-5 その他
6-2 導入例
6-2-1 大規模ECサイト（React）
6-2-2 損害保険代理店システム（Angular）
6-2-3 特定業種向け取引システム（Vue.js）
6-3 Yes/Noチャートによる選択
6-3-1 Yes/Noチャート
6-3-2 選択結果の解説
6-4 まとめ
索引
1-1 フレームワークの選択肢
1-1-1 絞り込みの条件
1-1-2 絞り込みの結果
1-2 共通の用語
1-2-1 用語一覧
1-2-2 データバインド
1-2-3 仮想DOM
1-2-4 コンポーネント
1-2-5 状態管理ライブラリ
1-2-6 ルーター
1-2-7 ビルド
1-3 実装パターン
1-3-1 概要
1-3-2 ページ埋め込み
1-3-3 シンプルなSPA
1-3-4 複雑なSPA
第2章フレームワークの特徴と機能の比較
2-1 Reactの特徴
2-1-1 生い立ち（React）
2-1-2 設計方針（React）
2-1-3 JSXとは
2-1-4 記述スタイル（React）
2-1-5 実装パターンごとの対応（React）
2-1-6 導入後のメンテナンス（React）
2-2 Angularの特徴
2-2-1 生い立ち（Angular）
2-2-2 設計方針（Angular）
2-2-3 コンポーネント作成例（Angular）
2-2-4 記述スタイル（Angular）
2-2-5 実装パターンごとの対応（Angular）
2-2-6 導入後のメンテナンス（Angular）
2-3 Vue.jsの特徴
2-3-1 生い立ち（Vue.js）
2-3-2 設計方針（Vue.js）
2-3-3 コンポーネント作成例（Vue.js）
2-3-4 記述スタイル（Vue.js）
2-3-5 実装パターンごとの対応（Vue.js）
2-3-6 導入後のメンテナンス（Vue.js）
2-4 特徴の比較
2-4-1 比較表
2-4-2 項目ごとの比較
第3章開発環境を体験して比較
3-1 Reactの開発環境
3-1-1 CDNを利用した開発環境（React）
3-1-2 CDNを利用した開発を体験（React）
3-1-3 ツールチェーンを利用した開発（React）
3-1-4 Create React Appを体験
3-1-5 テストページのコード確認（React）
3-2 Angularの開発環境
3-2-1 CDNを利用した開発環境（Angular）
3-2-2 ツールチェーンを利用した開発（Angular）
3-2-3 Angular CLIを体験
3-2-4 テストページのコード確認（Angular）
3-3 Vue.jsの開発環境
3-3-1 CDNを利用した開発環境（Vue.js）
3-3-2 CDNを利用した開発を体験（Vue.js）
3-3-3 ツールチェーンを利用した開発（Vue.js）
3-3-4 create-vueを体験
3-3-5 テストページのコード確認（Vue.js）
3-4 開発環境のまとめ
3-4-1 CDNを利用した開発のメリット（共通）
3-4-2 ツールチェーンを利用した開発のメリット（共通）
3-4-3 開発環境のフレームワーク比較
第4章機能ごとのサンプルコード比較
4-1 準備
4-1-1 サンプルコードの取得
4-1-2 サンプルコードの構造
4-1-3 サンプルコードの動作確認
4-1-4 複数の記述方法
4-2 サンプルコード比較
4-2-1 HTML出力（サンプル＃1）
4-2-2 データバインド（サンプル＃2）
4-2-3 プロパティバインド（サンプル＃3）
4-2-4 イベント処理（サンプル＃4）
4-2-5 表示・非表示切り替え（サンプル＃5）
4-2-6 繰り返し表示（サンプル＃6）
4-2-7 フォーム入力取得（サンプル＃7）
4-2-8 変更検知と再レンダリング（サンプル＃8）
4-2-9 子コンポーネントへデータ渡し（サンプル＃9）
第5章同じアプリの実装コード比較
5-1 to-doリストアプリの概要
5-1-1 動作概要
5-1-2 機能と制限
5-1-3 画面フロー（登録）
5-1-4 画面フロー（編集）
5-2 to-doリストアプリのインストール
5-2-1 アプリの取得
5-2-2 アプリのフォルダ構造
5-2-3 アプリの動作確認
5-3 to-doリストアプリの内部構造
5-3-1 コンポーネントの構成
5-3-2 コンポーネントごとの役割分担
5-3-3 状態変数の構造
5-3-4 処理フロー概要
5-3-5 コンポーネント連携（親から子へのデータ渡し）
5-3-6 コンポーネント連携（イベント処理）
5-3-7 to-doリストアプリ内部構造のまとめ
5-4 to-doリストアプリのコード比較
5-4-1 コンポーネント連携のコード（React）
5-4-2 ルートコンポーネントのコード（React）
5-4-3 Listコンポーネントのコード（React）
5-4-4 Dialogコンポーネントのコード（React）
5-4-5 コンポーネント連携のコード（Angular）
5-4-6 ルートコンポーネントのコード（Angular）
5-4-7 Listコンポーネントのコード（Angular）
5-4-8 Dialogコンポーネントのコード（Angular）
5-4-9 コンポーネント連携のコード（Vue.js）
5-4-10 ルートコンポーネントのコード（Vue.js）
5-4-11 Listコンポーネントのコード（Vue.js）
5-4-12 Vue.js のDialogコンポーネントのコード
5-4-13 まとめ
第6章フレームワーク選択の考え方
6-1 選択のための視点
6-1-1 DOM操作の構文（JSXとテンプレート）
6-1-2 アプリ実装パターン
6-1-3 開発体制
6-1-4 学習目的
6-1-5 その他
6-2 導入例
6-2-1 大規模ECサイト（React）
6-2-2 損害保険代理店システム（Angular）
6-2-3 特定業種向け取引システム（Vue.js）
6-3 Yes/Noチャートによる選択
6-3-1 Yes/Noチャート
6-3-2 選択結果の解説
6-4 まとめ
索引
著者情報
末次 章
末次, 章
