React Angular Vueをスムーズに修得するための最新フロントエンド技術入門
書籍情報
発売日 : 2021年12月17日
著者／編集 : 末次 章
出版社 : 日経BP
発行形態 : 単行本
書籍説明
内容紹介
フレームワークの学習に必要なフロントエンド技術の基礎を体系的に解説
目次
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仕様一覧
第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仕様一覧
著者情報
末次 章
末次, 章
