【2021年】Angular本「人気10冊と高評価のおすすめ5冊」

導入編（イントロダクション
Ａｎｇｕｌａｒの基本
データバインディング）
基本編（標準パイプ
ディレクティブ
フォーム開発
コンポーネント開発
サービス開発）
応用編（ルーティング
パイプ
ディレクティブの自作
テスト
開発ライブラリ
ツール）
Ａｐｐｅｎｄｉｘ　ＴｙｐｅＳｃｒｉｐｔ簡易リファレンス

山田祥寛（ヤマダヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、ＮＥＣにてシステム企画業務に携わるが、２００３年４月に念願かなってフリーライターに転身。Ｍｉｃｒｏｓｏｆｔ　ＭＶＰ　ｆｏｒ　Ｖｉｓｕａｌ　Ｓｔｕｄｉｏ　ａｎｄ　Ｄｅｖｅｌｏｐｍｅｎｔ　Ｔｅｃｈｎｏｌｏｇｉｅｓ。執筆コミュニティ「ＷＩＮＧＳプロジェクト」の代表でもある（本データはこの書籍が刊行された当時に掲載されていたものです）

■Part 1 導入編　なぜ使うかを知る
●Chapter 1 フロントエンドエンジニアの歴史
1-1　Web の始まりと HTML
1-2　Web と HTML で何ができるようになったのか
1-3　ブラウザ戦争と標準化
1-4　ブログの流行とインターネットインフラ
1-5　静的な UI から動的な UI へ
1-6　「フロントエンドエンジニア」という専門職
1-7　Node.js による開発基盤の構築
1-8　ECMAScript 規格更新に伴う周辺事情の活性化
1-9　止まらないフロントエンド
●Chapter 2 フロントエンドエンジニアに求められるスキル
2-1　「フロントエンドエンジニア」が取り組む実務
　　想定される実務例
2-2　JavaScript の成長と要求の変化
2-3　変容する中で維持すべき開発者の姿勢
　　「Web は止まらない、求められる技術要素も止まらない」
　　パブリックな存在として
2-4　本書におけるフロントエンドエンジニア像
●Chapter 3 フロントエンドにおける一般的なツール群
3-1　Node.js とその周辺のエコシステム
　　パッケージマネージャー
　　Node.js がもたらす恩恵
3-2　コンパイラ・モジュールバンドラー
　　コンパイラ：Babel
　　モジュールバンドラー：webpack
　　Babel, webpack が解決すること
3-3　JavaScript 代替言語：TypeScript
　　TypeScript の特徴
　　コンパイラとしての TypeScript
　　TypeScript によって解決できること
3-4　フレームワーク・ビューライブラリ：Vue.js, Angular, React
　　Vue.js
　　Angular
　　React
　　コンポーネント指向のフレームワーク・ライブラリであること
3-5　状態管理・データレイヤ：Redux
　　ブラウザにおける状態管理は煩雑である
　　クライアント MVC
　　簡易的なクライアント MVC
　　フロントエンドで抽象化されるモデル、扱ううえでの課題とは
　　役割があいまいになる Controller
　　Flux というアプリケーションアーキテクチャパターン
　　Redux：データの一極管理
　　Redux が解決できること
3-6　CSS：CSSメタ言語、設計手法、CSS-in-JS
　　CSS を取り巻く現状
　　各ブラウザの対応状況について
　　CSS の表現力を高めた Sass、CSS メタ言語
　　JavaScript で作成された PostCSS
　　CSS 設計手法
　　CSS を弱点を補うためには
3-7　静的解析ツール：Prettier, ESLint
　　Prettier
　　ESLint
　　ほかのリンターやチェッカーについて
　　静的解析ツールが可能にすること
3-8　ユニットテスト：Mocha, Jest, Karma
　　ユニットテストとフロントエンド開発
　　Mocha Jest Karma それぞれどういった特性があるのか
　　ユニットテストやテストフレームワークが解決できること
●Chapter 4 開発の現場における仕事の進め方
4-1　アジャイルといった考え方
4-2　スクラムという開発手法
4-3　個人との対話と他者との協調
　　プロダクトオーナー
　　スクラムマスター
　　デザイナー
　　サーバサイドエンジニア
　　テストエンジニア・テスター
　　コミュニケーションハブとして
4-4　変化に対応しながら提供するサイクルを上げる
■Part 2 実践編　どう使うかを学ぶ
●Chapter 5 開発環境
5-1　既存アプリケーションの開発環境構築
　　Docker のインストール
　　Node.js のインストール
　　Yarn のインストール
　　API サーバの起動
　　クライアントの起動
5-2　既存機能の把握
　　どんなアプリケーションなのかを知る
　　アプリケーションが抱える課題を探る
●Chapter 6 設計と実装
6-1　フロントエンド環境の構築
　　Yarn の利用準備
　　webpack のインストール
　　Babel のインストール
6-2　TypeScript の導入
　　TypeScript のインストール
　　Babel 経由で TypeScript のコンパイルを行う
　　既存コードを TypeScript で書き換える
　　コンパイルエラーを解消する
6-3　コードの分割
　　処理を別ファイルに切り出す
6-4　Jest を利用したユニットテスト
　　Jest のインストール
　　jest.config.js の設定
　　描画された DOM の検査
6-5　React の導入
　　React のインストール
　　JSX のためのコンパイル設定
　　JSX で要素を表示する
　　webpack-dev-server のインストールと設定
　　jQuery で書いたコードを React に書き換える
　　イベントハンドラの記述
6-6　Enzyme を使ったコンポーネントのテスト
　　Enzyme のインストール
　　Jest の設定
　　React Component をテストする
6-7　styled-components の導入
　　styled-components のインストール
　　CSS から styled-components への移行
●Chapter 7 CI/CD によって受けられるメリット
7-1　CI/CD によって受けられるメリット
　　CI/CD について
　　GitHub Actions を始める
　　ESLint を導入し動作させる
　　CI で自動化するメリット
7-2　パフォーマンスと改善
　　パフォーマンスの問題とは
　　基礎的なパフォーマンス知識：クリティカルレンダリングパス
　　Lighthouse を利用した定期的なパフォーマンス計測
　　強力な武器はない、ひとにはひとのパフォーマンス
■Part 3 応用編　より深く学ぶために知る
●Chapter 8 解析とモニタリング
8-1　サービスの成長とともに開発する
　　仮説検証、AB テストの目的
　　ツールの導入： Google アナリティクス
　　ツールの導入： Google オプティマイズ
　　プロダクトコードに組み合わせる
　　サードパーティスクリプトとの兼ね合い
8-2　ユーザーモニタリング・エラーイベント監視
　　ユーザーを取り巻く環境を知る
　　ブラウザで起きるエラーイベントなどからユーザーを知る
　　エラーイベント検知のため Sentry を導入する
　　Sentry の動作とコードへの組み込み
　　React Error Boundary を利用する
　　収集したエラーイベントを役立てる
●Chapter 9 チーム開発と Web への貢献
9-1　チームで働く
　　あらためてスクラムという開発手法について
　　スクラムを採用したチームに入ったら
　　ストーリー：スプリントプランニング
　　タイムボックスという考え方
　　ストーリー：スプリントが開始する
　　デイリースクラム
　　ストーリー：スプリントの終わり
　　振り返り
　　チーム開発とはテクニカルスキルではない
9-2　コミュニティへの貢献活動
　　OSS への貢献はコードコミットだけではない
　　できることから OSS へコミットする
　　寄付する、翻訳するといった違ったアプローチ
　　Web というプラットフォームに貢献する
9-3　Web プラットフォームに関わるフロントエンド開発者として
　　仕様を知るには
　　ライトにキャッチアップする
　　フロントエンド技術を楽しむために

１　Ｗｅｂ　Ｎａｔｉｖｅ開発フレームワーク「Ｉｏｎｉｃ」
２　Ｉｏｎｉｃの始め方と便利な機能
３　Ｉｏｎｉｃの基本とはじめての開発
４　外部リソースを使ってアプリを便利にしよう
５　きれいなコードで明日の自分を助けよう
６　モバイルアプリ開発実践
７　本気で取り組むチャットアプリ
８　実践Ｔｉｐｓ

はじめに
本書を読む前に
第1章　Angular2を知る
　1.1 Angular2とモダンWeb
1.1.1　Angular2とは
1.1.2　モダンWebとは
1.1.3　モダンWebのメリット
1.1.4　モダンWeb開発のハードル
1.1.5　Angular2によるハードルの解消
　1.2 Angular2の特長
1.2.1　コンポーネント
1.2.2　DI（依存性の注入）
1.2.3　データバインド
1.2.4　開発ツールの統合
1.2.5　テスト作業の自動化
　1.3 Angular2の稼働環境
1.3.1　対応Web ブラウザ
1.3.2　Web ブラウザのバージョン
1.3.3　前提ソフトウェア
1.3.4　開発言語
1.3.5　Angular2バージョンアップのガイドライン
　1.4 Angular2を支える技術
1.4.1　分散処理の基盤
1.4.2　UI（ユーザーインタフェース）
　1.5 分散処理への対応
1.5.1　データ保存
1.5.2　通信処理
1.5.3　Ajaxの活用
1.5.4　セキュリティ
1.5.5　テスト
1.5.6　開発体制
1.5.7　モダンWeb導入のアプローチ
第2章 TypeScriptを知る
　2.1 TypeScriptの概要
2.1.1　TypeScriptとは
2.1.2　TypeScriptの機能
2.1.3　TypeScriptの利用
2.1.4　静的型付けについて
2.1.5　クラス構文
2.1.6　tsconfig.json
　2.2 JavaScript資産の活用
2.2.1　JavaScriptソースコードの利用
2.2.2　JavaScriptライブラリの利用
2.2.3　型定義ファイルの取得方法
2.2.4　型チェックの強制
2.2.5　JavaScriptライブラリの利用例
第3章 開発環境の準備
　3.1 大きく変わるJavaScript開発環境
3.1.1　パッケージ管理
3.1.2　ビルド処理
3.1.2.1　Angular CLI
　3.2 ソフトウェアのインストール
3.2.1　Google Chromeブラウザ
3.2.2　Node.js
3.2.3　Git for Windows
3.2.4　Angular CLI
3.2.5　WebStorm
　3.3 開発ツールの操作
3.3.1　基本操作
　3.4 コマンドラインツール
3.4.1　注意点
3.4.2　開発時に知っておくと便利なコマンド（npm）
3.4.3　開発時に知っておくと便利なコマンド（ng）
3.4.4　デバッグ操作
第4章 内部のしくみ
　4.1 プロジェクトファイルの構成
4.1.1　プロジェクト全体の構成
4.1.2　ビルド出力
4.1.3　ソースコード
　4.2 テンプレートシンタックス
4.2.1　テンプレートシンタックスの基本
4.2.2　テンプレートシンタックスの構文
　4.3 Angular2 アプリの構成要素
4.3.1　全体構成
4.3.2　構成要素の登録
4.3.3　コンポーネントの実装
4.3.4　複数コンポーネントの連携
4.3.5　HTML 出力の内容を見る
4.3.6　サービスの実装
4.3.7　ルーターの実装
4.3.8　内部の動きを見る
第5章 スタンドアロンアプリを作る
　5.1 複利計算アプリ
5.1.1　アプリの概要
　5.2 アプリ作成の準備
　5.3 基本機能（双方向データバインド）
5.3.1　コードの作成
5.3.2　アプリの実行
5.3.3　アプリの解説
　5.4 機能拡張
5.4.1　表示機能
5.4.2　データの保存と復元
5.4.3　オフライン動作
第6章 クラウド連携アプリを作る
　6.1 海外ツアー検索アプリ
6.1.1　アプリの概要
　6.2 アプリ作成の準備
6.2.1　クラウドサービスとの接続
6.2.2　プロジェクトの作成
6.3.1　クロスドメイン制約
　6.3 通信機能
6.3.1　クロスドメイン制約
6.3.2　サービスの実装
　6.4 基本機能
6.4.1　ツアー順位表コンポーネントの作成
6.4.2　動作確認
6.4.3　実装のポイント
　6.5 拡張機能
6.5.1　ツアー明細ダイアログ
6.5.2　動作確認
6.5.3　実装のポイント
　6.6 モバイル対応
6.6.1　モバイル対応のしくみ
6.6.2　実装
付録A お役立ち情報
　A.1 コンポーネントの見える化
A.1.1　Auguryとは
A.1.2　Auguryのインストール
A.1.3　Auguryの使い方
　A.2 高速開発を支えるテストツール
A.2.1　テストツール概要
A.2.2　単体テストツールKarma
A.2.3　E2EテストツールProtractor
　A.3 Angular CLIを使いこなす
A.3.1　コマンドオプション概要
A.3.2　コマンドオプションの利用
A.3.3　スクリプトと連携
A.3.4　npm によるスクリプト管理と実行
　A.4 アプリサイズの軽量化
A.4.1　ビルドオプションと出力サイズ
A.4.2　AoT ビルド
　A.5 アプリ起動中のWaitアイコン作成
A.5.1　Angular2アプリ起動中の表示
A.5.2　CSSアニメーション
A.5.3　Angular2アプリへの組み込み
索引