Angularフロントエンド開発講座

レッスン 1 • Angularモジュールとアプリケーションのブートストラップ

NgModule、ルートAppModule、そしてAngularがアプリケーションをブートストラップする仕組みについて解説します。コンポーネントを構築する前に必要な構造的なコンテキストを提供します。

レッスン 2 • AngularのためのTypeScriptの基礎

Angularのコードを自信を持って書くために必要なTypeScriptの型、インターフェース、デコレーターを紹介します。JavaScriptの知識をAngularの型付きエコシステムに橋渡しします。

レッスン 3 • Angularフレームワークの紹介

現代のフロントエンド開発におけるAngularの役割と、MVCに着想を得たアーキテクチャを扱います。以降のすべてのフレームワークトピックの概念的基盤を設定します。

レッスン 4 • 開発環境のセットアップ

Node.js、npm、Angular CLIのインストールと設定を行います。すべての受講者が一貫性のある再現可能なローカルワークスペースを持てるようにします。

レッスン 1 • 組み込み構造ディレクティブ

*ngIf、*ngFor、*ngSwitchを適用してDOM構造を動的に制御します。ディレクティブがテンプレートの表現力を拡張する方法を示します。

レッスン 2 • プロパティバインディングとイベントバインディング

プロパティバインディングによる単方向データフローと、イベントバインディングによるユーザーイベント処理を教えます。コンポーネントロジックをDOM要素およびユーザーインタラクションに結び付けます。

レッスン 3 • テンプレート構文と式

Angularのテンプレート式言語、セーフナビゲーション、テンプレート参照変数を扱います。コンポーネントビュー内での動的なコンテンツレンダリングを可能にします。

レッスン 4 • コンポーネントのライフサイクルフック

ngOnInitからngOnDestroyまでの全ライフサイクルフックのシーケンスを探求します。初期化とクリーンアップのために各フックをいつ、なぜ使うべきかを教えます。

レッスン 1 • ViewChildとContentChildクエリ

クエリを使用して子コンポーネントインスタンスと投影コンテンツにプログラムからアクセスします。テンプレートバインディングを超えた高度なコンポーネント連携を可能にします。

レッスン 2 • @Inputによる親から子への通信

@Inputを使用してコンポーネントツリーをデータが下っていき、セッターで入力を検証します。Angularにおける主要な下方向データフローパターンを確立します。

レッスン 3 • カスタム構造ディレクティブの構築

TemplateRefとViewContainerRefを使用して構造ディレクティブを実装し、DOMを操作します。再利用可能なレイアウトロジックを作成する受講者の能力を拡張します。

レッスン 4 • カスタム属性ディレクティブの構築

DOM構造を変更せずにホスト要素の外観や動作を変更するディレクティブを作成します。第２章で紹介したディレクティブパターンを強化します。

レッスン 1 • Angularサービスの作成と提供

CLIでサービスを生成し、モジュール、コンポーネント、ルートスコープに登録します。共有ロジックの本拠地としてサービス層を確立します。

レッスン 2 • HTTPクライアントとREST API統合

HttpClientModuleを設定し、GET、POST、PUT、DELETEリクエストを実行します。サービス層を実際のバックエンドデータソースに接続します。

レッスン 3 • エラーハンドリングとHTTPインターセプター

catchErrorを使用したグローバルエラーハンドリングと、インターセプターを使用したリクエスト/レスポンス変換を実装します。本番環境に対応したHTTP通信パターンを生み出します。

レッスン 4 • 依存性の注入の深掘り

DI階層、インジェクショントークン、プロバイダータイプを探求します。アプリ全体での依存関係の解決方法を細かく制御できるようにします。

レッスン 1 • ルートガードとアクセス制御

CanActivate、CanDeactivate、CanLoadガードを実装してルートを保護します。認証と認可をナビゲーション層に統合します。

レッスン 2 • 遅延ロードとルートリゾルバー

アプリケーションをオンデマンドでロードされるフィーチャーモジュールに分割し、リゾルバーでデータを事前取得します。初期ロードのパフォーマンスとユーザーエクスペリエンスを向上させます。

レッスン 3 • ネストされたルートと名前付きアウトレット

親ルートの下に子ルートを構造化し、補助ビューに名前付きアウトレットを使用します。大規模アプリケーションにおける複雑なレイアウト要件をサポートします。

レッスン 4 • ルーターのセットアップと基本ナビゲーション

ルート定義でRouterModuleを設定し、router-outletとrouterLinkを追加します。すべてのナビゲーション機能の基盤を確立します。

レッスン 1 • FormArrayによる動的フォーム

FormArrayを使用して、可変長データのために実行時にフォームコントロールを追加・削除します。繰り返し明細項目などの実際のシナリオを処理します。

レッスン 2 • バリデーターとカスタムバリデーション

同期・非同期バリデーターを適用し、再利用可能なカスタムバリデーター関数を作成します。送信前のデータ整合性を保証します。

レッスン 3 • フォーム送信と状態管理

フォームの送信、リセット、dirty/touched状態を処理して、洗練されたユーザーエクスペリエンスを提供します。フォームデータを第４章で紹介したサービスの呼び出しに接続します。

レッスン 4 • テンプレート駆動フォーム

ngForm、ngModel、組み込みバリデーターを使用して、テンプレート内で宣言的にフォームを構築します。最小限のTypeScriptオーバーヘッドでフォームの概念を紹介します。

レッスン 1 • NgRx EntityとDevTools

NgRx Entityでコレクション管理を簡素化し、Redux DevToolsで状態を検査します。ストア中心の機能の開発とデバッグを加速します。

レッスン 2 • NgRx Storeの紹介

NgRxをインストールし、特定の機能スライスのためのアクション、リデューサー、ストアを定義します。Angularエコシステム内にReduxパターンを確立します。

レッスン 3 • BehaviorSubjectを使用したサービスベースの状態管理

サービス内のBehaviorSubjectを使用して、コンポーネント間で状態を保存・共有します。NgRxを導入する前の軽量な状態ソリューションを提供します。

レッスン 4 • 副作用のためのNgRx Effects

NgRx Effectsを使用して、リデューサーの外部でHTTP呼び出しなどの非同期操作を処理します。リデューサーをピュアに保ち、副作用ロジックを集中化します。

レッスン 1 • デプロイメント戦略とCI/CD統合

Angularビルドを静的ホスティングにデプロイし、継続的デリバリーのための自動化パイプラインを統合します。コードから本番環境までの開発ライフサイクルを完結させます。

レッスン 2 • コンポーネントとサービスのユニットテスト

JasmineとTestBedを使用して、コンポーネント、サービス、パイプのユニットテストを作成します。統合前に個々のユニットを分離して検証します。

レッスン 3 • バンドル最適化とビルド設定

最適なバンドルサイズのために、本番ビルド、ツリーシェイキング、差動ローディングを設定します。実際のデプロイメント制約に備えてアプリケーションを準備します。

レッスン 4 • Cypressを使用したエンドツーエンドテスト

Cypressを使用してユーザーフローテストを自動化し、完全なアプリケーションの動作を検証します。ユニットテストを、実際のブラウザベースのシナリオで補完します。