【レビュー】Angular2によるモダン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アプリへの組み込み

索引

　Angular2はGoogleが開発を主導するWebアプリ開発フレームワークです。130万人のユーザーを抱えるAngularJSと後継バージョンとしてリリースされました。従来のWebアプリ開発フレームワークがWebサーバーで動作するのに対し、Angular2はWebブラウザ上で動作する、いわゆるモダンWeb向けの開発ツールで、待ちのない画面表示やオフライン動作、容量無制限のデータ表示など、Webの常識をくつがえす操作性と機能を実現できます。開発言語にはTypeScriptが推奨され、コンポーネント指向、モジュール指向、双方向データバインディングなど新技術を積極的に取り入れています。
　このように実行環境や機能、開発手法が大きく変わるため、Angular2での開発には新たな知識の習得が必須となります。本書は、このAngular2開発環境を使いこなせることを目的とした解説書で、以下の内容で構成しています。
・第1章：基本アーキテクチャ変更に伴うWebアプリ開発の変化の解説
・第2章：開発言語として使用するTypeScriptとJava/JavaScriptとの違いの説明
・第3章：最新の開発環境の準備と使用方法の説明
・第4章：Angular2独自の実装技術の解説
・第5章：開発手順確認のためのアプリ作成のチュートリアル
・第6章：基本機能理解のためのアプリ作成のチュートリアル
・付録A：有用なデバッグツール/テストツールの紹介とAngularのコマンドラインオプションなどの説明

　・Angularのapp.module.tsとは[2017-10-28に投稿]