コードレベルで比べるReact Angular Vue.js フレームワークの選択で後悔しないために

書籍情報

発売日 : 2022/10/22

著者/編集 : 末次 章

出版社 : 日経BP

発行形態 : 単行本

ページ数 : 280p

書籍説明

内容紹介

 本書は、フロントエンド向けアプリケーションフレームワークの選択に悩んでいる人向けの本です。ネットでもフレームワークの違いについての情報は入手できますが、フレームワーク未経験者にとって、「どれが自分に最適なのか?」は、なかなか解決できません。免許とりたてで運転経験の少ない人が、カタログとクチコミを見て、自分に最適な車を選ぶようなものです。かなり無理があります。最終的には、乗り比べてみないと自分にとっての違いはわかりません。
 フレームワークも同じです。使ってみないと違いはよくわかりません。本書では、前提知識を身につけた後、同じ機能を持つ実装コードをフレームワークごとに比較します。未経験者でもコードレベルの比較ができるように、詳しくコメントを付けていますので、違いをしっかりと把握して、納得のいく選択ができます。

目次

第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 まとめ

索引

著者情報

末次 章