Angularアプリケーションプログラミング
技術評論社
著者:山田祥寛
はじめに
本書の読み方
目次
導入編
第1章 イントロダクション
1.1 JavaScriptの歴史
1.1.1 不遇の時代を経てきたJavaScript
1.1.2 復権のきっかけはAjax、そしてHTML5の時代へ
1.1.3 JavaScriptライブラリからJavaScriptフレームワークへ
1.2 フレームワークとは?
1.2.1 フレームワークの本質
1.2.2 フレームワーク導入の利点
1.2.3 JavaScriptで利用可能なフレームワーク
1.3 Angularの特徴
1.3.1 Angularのバージョン
第2章 Angularの基本
2.1 Angularを利用するための準備
2.1.1 Angularアプリの基本構造
2.2 サンプルアプリの内容を確認する
2.2.1 Angularアプリの構成部品を束ねる ― モジュール
2.2.2 ページを構成するUI部品を定義する ― コンポーネント
2.2.3 Angularアプリを起動するためのスタートアップコード ― main.ts
2.2.4 メインページの準備 ― index.html
2.3 基本ライブラリの挙動を宣言する ― 設定ファイル
2.3.1 アプリで利用するライブラリ情報を管理する ― package.json
2.3.2 TypeScript コンパイラーの挙動を設定する ― tsconfig.json
2.3.3 SystemJS の挙動を宣言する ― systemjs.config.js.
2.4 学習を進める前に
2.4.1 サンプルファイルの入手
2.4.2 サンプルアプリの利用方法
第3章 データバインディング
3.1 データバインディングの基本
3.1.1 4種類のバインディング構文
3.2 Interpolation(補間)構文
3.2.1 Interpolationの基本ルール
3.2.2 {{…}}式の注意点
3.2.3 安全にプロパティ/メソッドにアクセスする ―「?.」演算子
3.3 プロパティバインディング
3.3.1 補足:プロパティバインディングの別構文
3.3.2 要素にHTML文字列をバインドする
3.3.3 補足:
基本編
第4章 標準パイプ/ディレクティブ
4.1 パイプ
4.1.1 パイプの基本
4.1.2 文字列を大文字/小文字に整形する ― lowercase/uppercase/titlecase
4.1.3 オブジェクトをJSON形式に変換する ― json
4.1.4 文字列から特定範囲の部分文字列を切り出す ― slice(1)
4.1.5 配列から特定範囲の要素を取り出す ― slice(2)
4.1.6 数値を桁区切り文字で整形して出力する ― number
4.1.7 数値を通貨形式に整形する ― currency
4.1.8 数値をパーセント形式に整形する ― percent
4.1.9 日付/時刻を整形する ― date
4.1.10 数値によって表示文字列を変化させる ― i18nPlural
4.1.11 文字列に応じて出力を切り替える ― i18nSelect
4.2 ディレクティブ
4.2.1 式の真偽によって表示/非表示を切り替える ― ngIf
4.2.2 条件式を満たさない場合の出力を指定する ― ngIf(else)
4.2.3 式の値によって表示を切り替える ― ngSwitch
4.2.4 配列をループ処理する ― ngFor
4.2.5 要素にスタイルプロパティを付与する ― ngStyle
4.2.6 スタイルクラスを着脱する ― ngClass
4.2.7 数値に応じて出力を切り替える ― ngPlural
4.2.8 用意されたテンプレートの内容をインポートする ― ngTemplateOutlet
4.2.9 コンポーネントを動的にインポートする ― ngComponentOutlet
第5章 フォーム開発
5.1 フォーム開発の基本
5.1.1 基本的なフォーム
5.2 フォームの構成要素
5.2.1 フォームの状態を検知する
5.2.2 ラジオボタンを設置する
5.2.3 チェックボックスを設置する
5.2.4 選択ボックスを設置する
5.3 フォーム開発に役立つミニサンプル集
5.3.1 文字数カウント機能付きのテキストエリアを設置する
5.3.2 テキストボックスの内容を区切り文字で分割する
5.3.3 ファイルをアップロードする
5.4 モデル駆動型のフォーム
5.4.1 ReactiveFormsModuleモジュールの有効化
5.4.2 モデル駆動型フォームの基本
5.4.3 補足:groupメソッドとプロパティ定義は両方必要?
第6章 コンポーネント開発
6.1 複数コンポーネントの連携
6.1.1 コンポーネントを入れ子に配置する ― @Inputデコレーター
6.1.2 子コンポーネントからイベントを受け取る ― @Outputデコレーター
6.1.3 補足:テンプレート参照変数による子コンポーネントの参照
6.1.4 モジュールの分離
6.2 コンポーネントのライフサイクル
6.2.1 ライフサイクルメソッドの確認
6.2.2 ページの初期化/終了処理を実施する ― ngOnInit/ngOnDestroy
6.2.3 入力プロパティの変更を検知する ― ngOnChanges
6.2.4 ビューの初期化/変更時の処理を実装する ― ngAfterViewInit/ngAfterViewChecked
6.2.5 コンポーネント配下のコンテンツをテンプレートに反映させる ―
6.2.6 外部コンテンツの初期化/変更時の処理を実装する ― ngAfterContentInit/ngAfterContentChecked
6.3 コンポーネントのスタイル定義
6.3.1 コンポーネントスタイルの定義
6.3.2 補足:スタイルカプセル化のしくみ
6.3.3 コンポーネントスタイルを定義する方法
6.3.4 コンポーネントスタイルで利用できる特殊セレクター
6.3.5 カプセル化の挙動を変更する ― encapsulationパラメータ
6.4 アニメーション機能
6.4.1 アニメーション機能を利用するための準備
6.4.2 アニメーションの基本
6.4.3 状態/遷移のさまざまな設定方法
6.4.4 アニメーションの前後で任意の処理を実行する ― アニメーションコールバック
6.5 コンポーネントのその他の話題
6.5.1 テンプレートの外部ファイル化 ― templateUrlパラメーター
6.5.2 テンプレート構文の制約
6.5.3 コンポーネント要素の操作 ― hostパラメーター
第7章 サービス開発
7.1 サービスの基本
7.1.1 コンポーネント/サービスの連携
7.1.2 依存性注入
7.1.3 依存性注入の基本
7.2 依存性注入のしくみ
7.2.1 providers パラメーターの記法
7.2.2 サービス生成のアプローチ ― useXxxxxプロパティ
7.2.3 依存性注入のためのトークンを宣言する ― provideプロパティ
7.2.4 単一のトークンに複数のサービスを紐付ける ― multiプロパティ
7.3 依存性注入の高度な話題
7.3.1 インジェクターの階層構造
7.3.2 任意のサービスを宣言する ― @Optionalデコレーター
7.3.3 外部コンテンツからアクセスできないサービスを登録する ― viewProvidersパラメータ
7.3.4 インジェクターを手動で呼び出す ― injectメソッド
7.4 非同期通信の実行 ― Http/Jsonpサービス
7.4.1 SPAとXMLHttpRequestオブジェクト
7.4.2 Httpサービスの基本
7.4.3 HTTP POSTによる非同期通信
7.4.4 JSON形式のWeb APIにアクセスする
7.4.5 例:非同期通信処理をサービスに分離する
7.4.6 ローカル環境で Web APIをエミュレートする ― angular-in-memory-web-api
7.4.7 Observable/Promise経由で渡された値を取得する ― asyncパイプ
7.4.8 標準のリクエストオプションを上書きする
7.4.9 Http サービスでのセキュリティ対策
応用編
第8章 ルーティング
8.1 ルーティングとは?
8.2 ルーティングの基本
8.2.1 基底パスの設定 ― メインページ
8.2.2 ルートの定義
8.2.3 ルート対応のリンク/表示領域の準備 ― ルートコンポーネント
8.2.4 ルーター対応コンポーネントの作成
8.2.5 別のルートにリダイレクトする
8.3 ルーター経由で情報を渡す手法
8.3.1 パスの一部としてパラメーターを引き渡す ― ルートパラメーター
8.3.2 ハイパーリンクにクエリ情報/フラグメントを引き渡す ― queryParams/fragment属性
8.3.3 ルーティング情報に任意のデータを指定する ― dataプロパティ
8.3.4 可変長のパラメーターを引き渡す
8.3.5 ルーティング情報に任意のデータを指定する(非同期データ)
8.4 マルチビュー/入れ子のビュー/ガード
8.4.1 テンプレートに複数のビュー領域を設置する
8.4.2 入れ子のビューを設置する
8.4.3 補足:ルーターのマッチング戦略(prefixとfull)
8.4.4 ルート遷移の可否を判定する ― ガード
第9章 パイプ/ディレクティブの自作
9.1 パイプの自作
9.1.1 パイプの基本
9.1.2 例:改行文字を
要素に変換するnl2brパイプ
9.1.3 パラメーター付きのパイプを定義する
9.1.4 例:配列の内容を任意の条件でフィルターする
9.1.5 pure なパイプとimpureなパイプ
9.2 属性ディレクティブの自作
9.2.1 属性ディレクティブの基本
9.2.2 パラメーター付きのディレクティブを定義する
9.2.3 イベント処理を伴うディレクティブ
9.2.4 例:検証ディレクティブを準備する
9.3 構造ディレクティブの自作
9.3.1 構造ディレクティブとは?
9.3.2 構造ディレクティブの実装
第10章 テスト
10.1 テストの基本
10.2 ユニットテスト(基本)
10.2.1 ユニットテストのためのツール
10.2.2 ユニットテストの準備
10.2.3 テストの基本
10.3 ユニットテスト(Angularアプリ)
10.3.1 パイプのテスト
10.3.2 サービスのテスト
10.3.3 コンポーネントのテスト(基本)
10.3.4 外部テンプレート付きコンポーネントのテスト
10.3.5 入出力を伴うコンポーネントのテスト
10.3.6 サービスに依存したコンポーネントのテスト
10.3.7 サービスに依存したコンポーネントのテスト(スパイ)
10.3.8 サービスに依存したコンポーネントのテスト(非同期版)
10.3.9 「浅い」コンポーネントのテスト ― NO_ERRORS_SCHEMA
10.3.10 ディレクティブのテスト ― ホストコンポーネント
10.3.11 Http/Jsonpを利用したサービスのテスト
10.4 E2E(End to End)テスト
10.4.1 E2Eテストの準備
10.4.2 E2Eテストの基本
第11章 関連ライブラリ/ツール
11.1 Angularで利用できる関連ライブラリ
11.1.1 BootstrapをAngular アプリで活用する ― ngx-bootstrap
11.1.2 標準の検証ルールを拡張する ― ng2-validation
11.1.3 国際化対応ページを実装する ― ng-xi18n
11.2 開発に役立つソフトウェア/ツール
11.2.1 アプリの雛形を自動生成する ― Angular CLI
11.2.2 Angularアプリの構造を視覚化する ― Augury
11.2.3 アプリを事前コンパイルする ― AoTコンパイル
Appendix TypeScript簡易リファレンス
A.1 TypeScript Playground
A.2 変数
A.3 定数
A.4 型アサーション
A.5 関数
A.6 アロー関数
A.7 関数のオーバーロード
A.8 共用型
A.9 クラス
A.10 get/setアクセサー
A.11 継承
A.12 インターフェイス
A.13 ジェネリック
索引
Column
ブラウザー標準の開発者ツール(1)― 起動方法
関連書籍『速習 TypeScript』(Amazon Kindle)
AngularJS 1.xとAngular 2以降との構文比較
開発モードと本番モード
利用している Angular のバージョンを確認する
Angular開発に役立つコードエディターVisual Studio Code
ブラウザー標準の開発者ツール(2)―[Elements]タブ
ブラウザー標準の開発者ツール(3)―[Network]タブ
ブラウザー標準の開発者ツール(4)―[Source]タブ(ブレイクポイント)
ページのメタ情報を操作する ― Meta サービス
ブラウザー標準の開発者ツール(5)―[Source]タブ(Pretty Print)
ブラウザー標準の開発者ツール(6)―[Elements]タブ(DOM Breakpoints)
関連サイト「Angular TIPS」
きれいなコードを書いていますか? ― スタイルガイド
「べからず」なコードを検出する静的解析ツール「TSLint」
Angularの変更検知テストダブルの分類