React Angular Vueをスムーズに修得するための最新フロントエンド技術入門

フレームワークの学習に必要なフロントエンド技術の基礎を体系的に解説

　フロントエンド向けアプリケーションフレームワーク（ React、Angular、Vue）の学習には、従来のWeb開発にはなかった「フレームワークごとの違い」、「未知の用語や概念」、「進化したJavaScript開発環境」など、最新のフロントエンド技術の知識が求められます。これらを、その都度調べていては効率が悪いだけでなく、知識が断片的になってしまいます。本書は、フレームワークの学習に必要なフロントエンド技術の基礎を体系的に解説し、この課題を解決します。
　なお、本書ではフレームワーク共通で必要な基礎知識と、フレームワークごとの主な違いを説明しており、React、Angular、Vueのどの学習にも役立ちます。一方、フレームワークごとのコード作成の詳細については説明していないので、各フレームワークの公式サイトや関連書籍などを参照してください。

Part01　フロントエンド技術の動向
第1章　従来型WebからモダンWebへ
　1-1 概要
　　1-1-1 最新フロントエンド技術の魅力
　　1-1-2 従来型Webとその課題
　　1-1-3 モダンWebとは
　　1-1-4 モダンWebの価値
　1-2 最新フロントエンドの仕組み
　　1-2-1 フロントエンドの内部処理
　　1-2-2 サンプルアプリで動作確認
　　1-2-3 複利計算アプリの画面フロー
　1-3 待ちなしでバックエンドと連携
　　1-3-1 バックエンドからダウンロード
　　1-3-2 バックエンドへアップロード
　　1-3-3 バックエンドと連携のまとめ
　1-4 1章まとめ
第2章　最新フロントエンド技術のデモ
　2-1 Google画像検索の無限スクロール
　　2-1-1 無限スクロールの操作デモ
　　2-1-2 無限スクロールの内部処理
　　2-1-3 Google検索がページ送りの理由
　2-2 待ち時間ゼロのデータ検索
　　2-2-1 データ検索アプリの紹介
　　2-2-2 条件による絞り込みデモ
　　2-2-3 絞り込み件数表示の仕組み
　　2-2-4 検索結果の一覧表示デモ
　　2-2-5 一覧表示の仕組み
　　2-2-6 詳細情報の表示デモ
　　2-2-7 詳細情報表示の仕組み
　2-3 画面の復元
　　2-3-1 画面復元対応アプリの紹介
　　2-3-2 画面表示の復元デモ
　　2-3-3 入力途中の復元デモ
　　2-3-4 画面復元の仕組み
　　2-3-5 画面保存の仕組み
　　2-3-6 画面復元の応用（Amazon商品検索）
　　2-3-7 画面復元の応用（バックエンドと連携）
　2-4 Webサイトのオフライン化
　　2-4-1 オフライン対応サイトの紹介
　　2-4-2 オフライン閲覧のデモ
　　2-4-3 オフライン送信のデモ
　　2-4-4 オフライン対応の仕組み
　　2-4-5 オフライン閲覧の内部処理
　　2-4-6 オフライン送信の内部処理
　2-5 2章まとめ
Part02　フロントエンド開発の基礎知識
第3章　JavaScript開発環境
　3-1 別世界になったJavaScript
　　3-1-1 モダンWeb開発の出だしでつまずく要因
　　3-1-2 JavaScriptのバージョン
　　3-1-3 TypeScript概要
　3-2 TypeScriptの体験
　　3-2-1 プレイグラウンド概要
　　3-2-2 コード作成
　　3-2-3 JavaScriptへ変換
　　3-2-4 型チェック
　3-3 JavaScript実行環境node.js
　　3-3-1 node.js概要
　　3-3-2 node.jsの使い方
　　3-3-3 npm概要
　3-4 npmの体験
　　3-4-1 npmレポジトリ
　　3-4-2 npmプロジェクト作成
　　3-4-3 npmパッケージインストール
　　3-4-4 npm runスクリプトで実行
　3-5 3章まとめ
第4章　最新Webブラウザの機能
　4-1 大幅に機能拡張したブラウザAPI
　　4-1-1 API全体像
　　4-1-2 ブラウザAPIの概要
　　4-1-3 ブラウザAPIの仕様
　　4-1-4 ブラウザAPIのインターフェイス
　　4-1-5 ブラウザAPIのサポート状況
　4-2 JavaScriptライブラリの利用
　　4-2-1 JavaScriptライブラリの概要
　　4-2-2 UIライブラリ
　　4-2-3 グラフィックライブラリ
　　4-2-4 データストアライブラリ
　4-3 4章まとめ
第5章　アプリケーションフレームワーク
　5-1 フレームワーク概要
　　5-1-1 フレームワークの学習でつまずく要因
　　5-1-2 仮想DOM
　　5-1-3 データバインド
　　5-1-4 コンポーネント
　　5-1-5 状態管理ライブラリ
　　5-1-6 ルーター
　　5-1-7 ビルド
　5-2 個性をもつフレームワーク
　　5-2-1 フレームワークごとの特徴
　　5-2-2 フレームワーク選択の考え方
　　5-2-3 新規プロジェクトの作成（React）
　　5-2-4 フレームワーク独自の記述（React）
　　5-2-5 新規プロジェクトの作成（Angular）
　　5-2-6 フレームワーク独自の記述（Angular）
　　5-2-7 新規プロジェクトの作成（Vue）
　　5-2-8 フレームワーク独自の記述（Vue）
　5-3 5章まとめ
第6章　ネットワーク経由のAP（I Web API）
　6-1 Web API概要
　　6-1-1 Web APIの位置づけ
　　6-1-2 Web APIの仕組み
　6-2 Web APIを体験
　　6-2-1 WordPressのWeb API
　　6-2-2 デモサイトで動作確認
　6-3 Web APIのプログラミング
　　6-3-1 Web APIの呼び出し
　　6-3-2 非同期処理
　　6-3-3 認証
　　6-3-4 クロスドメインの制約
　6-4 6章まとめ
Part03　フロントエンド技術の導入
第7章　導入のポイント
　7-1 実践的開発スキルの導入
　　7-1-1 スキル導入時の課題
　　7-1-2 効果的なスキル導入
　7-2 安定した開発環境の導入
　　7-2-1 バージョン管理の必要性
　　7-2-2 node.jsインストールのバージョン指定
　　7-2-3 npmインストールのバージョン指定
　7-3 7章まとめ
第8章　お役立ち情報
　8-1 よくあるトラブルと解決策
　　8-1-1 技術情報をうまく検索できない
　　8-1-2 コンポーネント分割の単位に悩む
　　8-1-3 iPhoneだけアプリが動作しない
　　8-1-4 モバイルデバイスで動作に問題がある
　　8-1-5 データアップロードで重複登録が発生
　　8-1-6 ログイン前にプログラムがロードされる
　8-2 フレームワーク可視化ツール
　　8-2-1 コンポーネント可視化ツールの概要
　　8-2-2 コンポーネントの可視化を体験（React）
　　8-2-3 コンポーネントの可視化を体験（Angular）
　　8-2-4 コンポーネントの可視化を体験（Vue）
　8-3 8章まとめ
クロージング
付録1 ブラウザAPI仕様一覧