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

書籍情報

発売日 : 2021/12/17

著者/編集 : 末次 章

出版社 : 日経BP

発行形態 : 単行本

ページ数 : 284p

書籍説明

内容紹介

 フロントエンド向けアプリケーションフレームワーク( 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仕様一覧

著者情報

末次 章