インプレス[コンピュータ・IT]ムック Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク
インプレス / 2017年12月15日 / 全471ページ
第一線の開発者陣による執筆! バージョン5&4に対応―Angularは、定番のWebフロントエンド開発用フレームワーク。本書では、高速化とスケーラビリティを高めた新世代Angularによる開発に必要な知識と活用術を網羅するように心がけました。まずAngularの全体像を説明した後、モジュール、コンポーネント、サービス、DI、パイプなど、さまざまな機能を解説。さらに、アプリケーションの構築手法やテストにまで言及。新世代Angularを理解して活用しようと考えるWeb開発者に格好の一冊です。
目次
- ソースコード/正誤表/商標について
- はじめに
- 目次
- Chapter 01 Angularの概要
- 1-1 コンポーネント指向1-1-1 Angularの特徴
- 1-2 TypeScript の採用
- 1-3 バージョニングとリリースサイクル1-3-1 Semverの採用
- 1-3-2 リリースサイクル
- 1-3-3 破壊的変更があるAPIの取り扱い
- 1-4 開発環境の構築
- 1-4-1 Node.jsのインストール
- 1-4-2 Angular CLIのインストール1-4-3 Hello Angular
- Chapter 02 基本機能
- 2-1 テンプレート構文2-1-1 補完文字列(Interpolation)と式(Expressions)
- 2-1-2 イベントバインディング
- 2-1-3 プロパティバインディング
- 2-1-4 属性バインディング
- 2-1-5 プロパティバインディングと属性バインディング2-1-6 クラスバインディング
- 2-1-7 スタイルバインディング
- 2-1-8 双方向データバインディング
- ソースコード/正誤表/商標について
- はじめに
- 目次
- Chapter 01 Angularの概要
- 1-1 コンポーネント指向1-1-1 Angularの特徴
- 1-2 TypeScript の採用
- 1-3 バージョニングとリリースサイクル1-3-1 Semverの採用
- 1-3-2 リリースサイクル
- 1-3-3 破壊的変更があるAPIの取り扱い
- 1-4 開発環境の構築
- 1-4-1 Node.jsのインストール
- 1-4-2 Angular CLIのインストール1-4-3 Hello Angular
- Chapter 02 基本機能
- 2-1 テンプレート構文2-1-1 補完文字列(Interpolation)と式(Expressions)
- 2-1-2 イベントバインディング
- 2-1-3 プロパティバインディング
- 2-1-4 属性バインディング
- 2-1-5 プロパティバインディングと属性バインディング2-1-6 クラスバインディング
- 2-1-7 スタイルバインディング
- 2-1-8 双方向データバインディング
- 2-2 コンポーネントとディレクティブ2-2-1 コンポーネント
- 2-2-2 ディレクティブ
- 2-2-3 サービス
- 2-2-4 Angularモジュール2-2-5 親子コンポーネント間のデータ受け渡し
- 2-3 ビルトインディレクティブ2-3-1 ngClassディレクティブ
- 2-3-2 ngStyleディレクティブ
- 2-3-3 ngForディレクティブ
- 2-3-4 ngIfディレクティブ
- 2-3-5 ngSwitchディレクティブ
- 2-4 パイプ
- Chapter 03 モジュール
- 3-1 モジュールの定義
- 3-1-1 モジュールクラスの定義
- 3-1-2 providers3-1-3 declarations
- 3-1-4 imports
- 3-1-5 exports
- 3-1-6 entryComponents3-1-7 bootstrap
- 3-1-8 schemas
- 3-1-9 id3-1-10 Root ModuleとFeature Module
- 3-2 Angular Standard Modules3-2-1 CommonModule3-2-2 FormsModules
- 3-2-3 ReactiveFormsModule3-2-4 HttpClientModule3-2-5 JsonpModule
- 3-2-6 RouterModule3-2-7 BrowserModule3-2-8 ServerModule
- 3-2-9 WorkerAppModule
- Chapter 04 コンポーネント
- 4-1 コンポーネントとディレクティブ4-1-1 コンポーネントの作成
- 4-1-2 ディレクティブの作成
- 4-1-3 ディレクティブ・コンポーネントの使用
- 4-1-4 コンポーネントのライフサイクル
- 4-2 メタデータ
- 4-2-1 selector
- 4-2-2 inputs
- 4-2-3 outputs
- 4-2-4 host
- 4-2-5 exportAs
- 4-2-6 moduleId4-2-7 providers
- 4-2-8 viewProviders
- 4-2-9 changeDetection
- 4-2-10 queries
- 4-2-11 templatetemplateUrl
- 4-2-12 stylesstyleUrls
- 4-2-13 animations
- 4-2-14 encapsulation4-2-15 interpolation
- 4-2-16 entryComponents
- 4-3 InputOutput
- 4-4 HostListenerHostBinding
- 4-5 アニメーション4-5-1 アニメーションの利用
- 4-5-2 トリガーの宣言とアニメーションの定義
- 4-5-3 アニメーション関数
- 4-5-4 trigger
- 4-5-5 state
- 4-5-6 transition
- 4-5-7 style
- 4-5-8 animate
- 4-5-9 keyframes
- 4-5-10 group
- 4-5-11 sequence
- 4-5-12 query
- 4-5-13 stagger
- 4-5-14 animateChild
- 4-5-15 useAnimation
- 4-6 View ChildContent Child4-6-1 ViewChildViewChildren
- 4-6-2 ContentChildContentChildren
- 4-7 Scoped Style4-7-1 ViewEncapsulation.Emulated
- 4-7-2 ViewEncapsulation.Native
- 4-7-3 ViewEncapsulation.None
- 4-8 Shadow DOM Selectors4-8-1 :host
- 4-8-2 :host-context
- Chapter 05 サービス・DI
- 5-1 DI
- 5-1-1 プロバイダ
- 5-1-2 インジェクタ
- 5-2 RxJS5-2-1 RxJSとは
- 5-2-2 ObserverパターンとIteratorパターン
- 5-2-3 RxJSでの実装例
- 5-2-4 PromiseとRxJSの併用
- 5-3 サーバー通信5-3-1 XMLHttpRequest
- 5-3-2 JSONP
- 5-3-3 HTTP通信
- Chapter 06 パイプ・フォーム
- 6-1 パイプ6-1-1 number
- 6-1-2 currency
- 6-1-3 lowercaseuppercase
- 6-1-4 date
- 6-1-5 percent6-1-6 json
- 6-1-7 slice
- 6-1-8 async
- 6-1-9 i18n
- 6-1-10 パイプの複数利用
- 6-1-11 パイプの作成
- 6-2 フォーム6-2-1 フォームとは
- 6-2-2 フォームの作成
- 6-2-3 格納モデルの作成
- 6-2-4 表示コンポーネントの作成
- 6-2-5 テンプレート駆動フォームの組み立て
- 6-2-6 フォームの準備
- 6-2-7 双方向データバインディング
- 6-2-8 フォームの状態監視
- 6-2-9 バリデーション
- 6-2-10 リアクティブフォーム6-2-11 リアクティブフォームの組み立て
- Chapter 07 ルーティング
- 7-1 ルーティング機能7-1-1 Angular CLIでのプロジェクト作成7-1-2 ルート設定
- 7-1-3 RouterOutlet
- 7-1-4 ルートの追加
- 7-1-5 RouterLink
- 7-1-6 RouterLinkへのバインド7-1-7 RouterLinkActive
- 7-2 階層構造
- 7-3 リダイレクト7-3-1 redirectTo
- 7-3-2 pathMatchルート
- 7-4 パラメータの取得
- 7-4-1 ActivatedRouteSnapshot
- 7-5 クエリパラメータの取得
- 7-5-1 クエリパラメータをrouterLink経由で渡す
- 7-6 フラグメントの取得
- 7-6-1 フラグメントをrouterLink経由で渡す
- 7-7 URL の変更
- 7-8 Secondary Route
- 7-9 Guard7-9-1 CanActivate
- 7-9-2 処理結果によっては別ページにリダイレクト
- 7-9-3 CanActivateChild
- 7-9-4 CanDeactivate
- 7-10 DataResolve7-10-1 Data
- 7-10-2 Resolve
- 7-11 Lazy LoadingPreloading7-11-1 Lazy Loading
- 7-11-2 canLoad
- 7-11-3 Preloading
- 7-11-4 Preloadingのコントロール
- 7-11-5 ルーティングイベント
- Chapter 08 アーキテクチャ
- 8-1 Angularモジュール8-1-1 ルートモジュール
- 8-1-2 複数のAngularパッケージ
- 8-2 コンポーネント
- 8-3 テンプレート8-3-1 データバインディング
- 8-3-2 双方向データバインディング
- 8-4 ディレクティブ8-4-1 構造ディレクティブ
- 8-4-2 属性ディレクティブ
- 8-5 サービス8-5-1 サービスとコンポーネント
- 8-5-2 依存性の注入
- 8-6 変更検知8-6-1 データ値の変更
- 8-6-2 変更の検知
- 8-7 ライフサイクル8-7-1 ライフサイクルフック
- 8-7-2 ライフサイクルフックの一覧
- Chapter 09 アプリケーションの構築
- 9-1 サンプルでの学習項目9-1-1 ソースコードのダウンロード
- 9-2 環境準備とプロジェクト作成9-2-1 Angular Materialのインストール
- 9-2-2 スタイルシートの設定
- 9-2-3 コンポーネント作成とルーティング設定
- 9-2-4 ナビゲーションの設置
- 9-2-5 ページの設定
- 9-3 OpenWeatherMap
- 9-4 サービスの作成
- 9-5 データの画面表示9-5-1 パラメータを利用したリクエスト送信
- 9-5-2 Asyncパイプでの取得データの画面表示
- 9-5-3 カスタムパイプによる日時形式の変換
- 9-5-4 リスト表示
- 9-6 ローディングバーの表示9-6-1 LoadingService
- 9-6-2 HttpInterceptor
- 9-7 データの管理・編集・削除9-7-1 エリア管理サービスの作成
- 9-7-2 エリア情報の取得
- 9-7-3 編集削除追加
- 9-8 アニメーションの実装9-8-1 アニメーション用ファイルの作成
- 9-8-2 アニメーションの適用(エリア編集)
- 9-8-3 アニメーションに使える関数
- 9-8-4 アニメーションの適用(リスト表示)
- 9-9 グラフ表示9-9-1 Chart.jsとng-charts
- 9-9-2 AoTコンパイル(Ahead of Time)
- Chapter 10 テスト
- 10-1 テストの種類とテストツール10-1-1 テストの種類
- 10-1-2 テストツール
- 10-2 Karma10-2-1 Karmaの仕組み
- 10-2-2 Karmaのインストール
- 10-2-3 設定ファイルの生成
- 10-2-4 設定項目
- 10-3 Jasmine10-3-1 単体テストの記述
- 10-3-2 単体テストの実施
- 10-3-3 Karma実行時のデバッグ
- 10-4 Protractor10-4-1 Protractorのインストール
- 10-4-2 Protractorの準備
- 10-4-3 Protractorを使ったE2Eテスト
- 10-5 テストの基礎10-5-1 分離されたテストとAngularに依存したテスト
- 10-5-2 テストの練習
- 10-5-3 サービスに依存したコンポーネントのテスト
- 10-5-4 NO_ERRORS_SCHEMA10-5-5 分離された単体テスト
- 10-5-6 属性ディレクティブのテスト
- 10-5-7 サービスのテスト
- 10-6 Angular CLI によるテスト10-6-1 Component
- 10-6-2 Pipe
- 10-6-3 Service
- 10-6-4 Directive
- Chapter 11 周辺環境
- 11-1 セキュリティ11-1-1 XSS(クロスサイトスクリプティング)
- 11-1-2 CSRF/XSRF(クロスサイトリクエストフォージェリ)
- 11-2 サーバーサイドレンダリング11-2-1 SPAとサーバーサイドレンダリングの関係
- 11-2-2 アプリケーションの準備
- 11-2-3 ソースの準備11-2-4 TypeScriptコンパイル設定
- 11-2-5 ビルド設定の追加
- 11-2-6 クライアントサイドの確認
- 11-2-7 サーバーサイドレンダリングの確認
- 11-2-8 Metaサービス(ビルトイン)
- 11-3 国際化対応11-3-1 ngx-translateのインストール
- 11-3-2 言語ファイルの準備
- 11-3-3 言語の設定11-3-4 translateパイプを使った翻訳
- 11-3-5 TranslateServiceを使った翻訳
- 11-3-6 値の挿入
- 11-4 Angular CLI
- 11-4-1 Angular CLIのインストール
- 11-4-2 Angular CLIの設定
- 11-5 Angular CLIサブコマンド11-5-1 ng new
- 11-5-2 ng generate
- 11-5-3 ng serve
- 11-5-4 ng build
- 11-5-5 ng test
- 11-5-6 ng lint
- 11-5-7 ng e2e
- 11-5-8 ng getng set
- 11-5-9 ng eject
- INDEX
- 謝辞
- 著者プロフィール
- 奥付
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。