Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク

関連サイト

本書の関連ページが用意されています。

• Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク | インプレス

内容紹介

第一線の開発者陣による執筆！ バージョン5＆4に対応―Angularは、定番のWebフロントエンド開発用フレームワーク。本書では、高速化とスケーラビリティを高めた新世代Angularによる開発に必要な知識と活用術を網羅するように心がけました。まずAngularの全体像を説明した後、モジュール、コンポーネント、サービス、DI、パイプなど、さまざまな機能を解説。さらに、アプリケーションの構築手法やテストにまで言及。新世代Angularを理解して活用しようと考えるWeb開発者に格好の一冊です。

書誌情報

• 著者: 宇野陽太, 奥野賢太郎, 金井健一, 林優一, 吉田徹生(è‘—), 稲富駿(監修)
• 発行日: 2017-12-15 (紙書籍版発行日: 2017-12-15)
• 最終更新日: 2017-12-15
• バージョン: 1.0.0
• ページ数: 472ページ(PDF版換算)
• 対応フォーマット: PDF, EPUB
• 出版社: インプレス

対象読者

Web開発者

著者について

宇野陽太

株式会社ピクセルグリッド所属。デザイナー、マークアップ・エンジニア、フロントエンド・エンジニアとして、主にスマートフォン向けゲームの開発に携わる。2015年以降は現職にて大規模アプリケーションの設計や実装に従事。

奥野賢太郎

株式会社ピクセルグリッド所属、ng-kyoto代表、Angular Japan User Groupスタッフ。音楽業界を経た後にエンジニアに転職、大規模アプリケーションの設計・実装に携わる。現在はコミュニティ運営やセミナー講師としても活躍中。

金井健一

SIerやWeb制作会社を経て現在はフリーランスとして活動。Angular Japan User Groupスタッフやhtml5j Web先端技術味見部部長を務め、多彩な勉強会やイベントなどの主催、セミナー講師や各種メディアへの寄稿なども多数。

林優一

ソーシャルゲーム開発やWeb制作会社でエンジニア・マネージャー・CTOを歴任。現在はフリーランスと会社員の兼業で、プロダクトマネージャーや技術顧問、エンジニアとして上流から下流まで幅広く担当。

吉田徹生

録音を学びテレビ局に勤務後、JavaScriptの可能性に目覚めてWeb業界に転職。現在は株式会社トレタでWebクライアントの開発に従事。Angular Japan User Groupやhtml5jなどのコミュニティに参加。

稲富駿

フロントエンドエンジニアとして株式会社Kaizen Platformに所属。Angularコントリビューター兼Angular Japan User Group代表として活躍。イベントの主催やドキュメントの翻訳なども担当。

目次

ソースコード/正誤表/商標について

はじめに

目次

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 providers
• 3-1-3 declarations
• 3-1-4 imports
• 3-1-5 exports
• 3-1-6 entryComponents
• 3-1-7 bootstrap
• 3-1-8 schemas
• 3-1-9 id
• 3-1-10 Root ModuleとFeature Module
• 3-2 Angular Standard Modules
• 3-2-1 CommonModule
• 3-2-2 FormsModules
• 3-2-3 ReactiveFormsModule
• 3-2-4 HttpClientModule
• 3-2-5 JsonpModule
• 3-2-6 RouterModule
• 3-2-7 BrowserModule
• 3-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 moduleId
• 4-2-7 providers
• 4-2-8 viewProviders
• 4-2-9 changeDetection
• 4-2-10 queries
• 4-2-11 template／templateUrl
• 4-2-12 styles／styleUrls
• 4-2-13 animations
• 4-2-14 encapsulation
• 4-2-15 interpolation
• 4-2-16 entryComponents
• 4-3 Input／Output
• 4-4 HostListener／HostBinding
• 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 Child／Content Child
• 4-6-1 ViewChild／ViewChildren
• 4-6-2 ContentChild／ContentChildren
• 4-7 Scoped Style
• 4-7-1 ViewEncapsulation.Emulated
• 4-7-2 ViewEncapsulation.Native
• 4-7-3 ViewEncapsulation.None
• 4-8 Shadow DOM Selectors
• 4-8-1 :host
• 4-8-2 :host-context

Chapter 05 サービス・DI

• 5-1 DI
• 5-1-1 プロバイダ
• 5-1-2 インジェクタ
• 5-2 RxJS
• 5-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 lowercase／uppercase
• 6-1-4 date
• 6-1-5 percent
• 6-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 Guard
• 7-9-1 CanActivate
• 7-9-2 処理結果によっては別ページにリダイレクト
• 7-9-3 CanActivateChild
• 7-9-4 CanDeactivate
• 7-10 Data／Resolve
• 7-10-1 Data
• 7-10-2 Resolve
• 7-11 Lazy Loading／Preloading
• 7-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 Karma
• 10-2-1 Karmaの仕組み
• 10-2-2 Karmaのインストール
• 10-2-3 設定ファイルの生成
• 10-2-4 設定項目
• 10-3 Jasmine
• 10-3-1 単体テストの記述
• 10-3-2 単体テストの実施
• 10-3-3 Karma実行時のデバッグ
• 10-4 Protractor
• 10-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_SCHEMA
• 10-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 get／ng set
• 11-5-9 ng eject

INDEX

謝辞

著者プロフィール