試験公開中

このエントリーをはてなブックマークに追加

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

インプレス

3,800円+税

第一線の開発者陣による執筆! バージョン5&4に対応―本書では、高速化とスケーラビリティを高めた新世代Angularによる開発に必要な知識と活用術を網羅するように心がけました。新世代Angularを理解して活用しようと考えるWeb開発者に格好の一冊です。

【注意】本書のEPUB版は固定レイアウト型になっております。文字の大きさの変更や検索、引用などはお使いいただけません。画面の大きい端末でご利用ください。

関連サイト

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

内容紹介

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

書誌情報

  • 著者: 宇野陽太, 奥野賢太郎, 金井健一, 林優一, 吉田徹生(著), 稲富駿(監修)
  • 発行日: (紙書籍版発行日: 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

謝辞

著者プロフィール

Home 書籍一覧 Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク ▲ ページトップへ戻る