書籍詳細（Angularアプリケーションプログラミング）

Angularアプリケーションプログラミング 書影

ISBN: 978-4-7741-9130-0

Angularアプリケーションプログラミング

angular javascript typescript フレームワーク java
著者山田祥寛
出版社技術評論社
価格3,700円（税別）
判型B5変判・1色
ページ数512ページ
発売日2017年8月4日
シリーズ アプリケーションプログラミング
対象レベル中級
Amazonで購入
B!

定番JavaScriptフレームワークを学ぶ

データバインディング、コンポーネント、依存性注入などの基本から、ディレクティブ／パイプ／サービスの自作やテスト、さらに、Angular CLIやngx-bootstrapなど関連ツール、ライブラリといった応用分野まで網羅します。
最新Angular 4に対応し、今後のアップグレードにも留意した解説を行っています。
Angularによる動的Webアプリ開発に必要な知識が、この1冊で身に付きます。
Angularアプリケーションプログラミング ロゴ

更新履歴

  • FAQ情報：2022年6月13日 更新
  • 正誤訂正：2018年11月27日 更新

目次

  • 第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 補足：<iframe> 要素に外部リソースをバインドする
  • 3.4 属性／クラス／スタイルバインディング
  • 3.4.1 HTML 属性に値をバインドする — 属性バインディング
  • 3.4.2 スタイルクラスを着脱する — クラスバインディング
  • 3.4.3 スタイルプロパティを設定する — スタイルバインディング
  • 3.5 イベントバインディング
  • 3.5.1 イベントバインディングの基本
  • 3.5.2 イベント情報を取得する — $event
  • 3.5.3 テンプレート参照変数による入力値の取得
  • 3.5.4 キーイベントのフィルタリング — keyup.enter イベント
  • 3.6 双方向バインディング
  • 3.6.1 双方向バインディングの基本
  • 3.6.2 双方向バインディングのしくみ
  • 3.6.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.4 マルチビュー／入れ子のビュー／ガード
  • 8.4.1 テンプレートに複数のビュー領域を設置する
  • 8.4.2 入れ子のビューを設置する
  • 8.4.3 補足：ルーターのマッチング戦略（prefix とfull）
  • 8.4.4 ルート遷移の可否を判定する — ガード
  • 第9章　パイプ／ディレクティブの自作
  • 9.1 パイプの自作
  • 9.1.1 パイプの基本
  • 9.1.2 例：改行文字を <br> 要素に変換する 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 ジェネリック

正誤表

該当頁 該当箇所 修正刷
訂正箇所 訂正事項 更新日
p.123 リスト4-23 3刷
this.start = this.len * page; 該当の行に引き出し線（3）を追加 2018/01/26
p.287 リスト 7-45　http/src/app/app.component.ts 3刷
this.http.post('app/http.php', params, { this.http.post('app/http.php', ps, { 2018/10/02
p.355 リスト9-4　pipe-html/src/app/nl2br.pipe.ts 下から3行目 3刷
return value.replace(/\t?\n/g, '<br />'); return value.replace(/\r?\n/g, '<br />'); 2018/11/27

FAQ

発刊から年数が経過しており、TypeScriptなどのバージョンが古くなっているのが原因のようです。

エラーが出るものについて、package.jsonに記載のバージョン番号を以下のように新しいバージョンに変更してお試しください。


＜修正例＞
"typescript": "~2.1.0", → "typescript": "~4.0.0",

"rxjs": "5.0.1", → "rxjs": "5.5.12",

更新日: 2022.06.13

お問い合わせ

書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。

Powered by メールフォーム 『オレンジフォーム』