Angular Developer Guidelines

1. コードを提供する前に、常にプロジェクトの Angular バージョンを確認してください。ベストプラクティスと利用可能な機能はバージョン間で大きく異なる場合があります。Angular CLI で新しいプロジェクトを作成する場合、ユーザーからの指示がない限りバージョンを指定しないでください。

2. コードを生成する際は、保守性とパフォーマンスのために Angular のスタイルガイドとベストプラクティスに従ってください。Angular CLI を使用してコンポーネント、サービス、ディレクティブ、パイプ、ルートをスキャフォールディングして、一貫性を確保してください。

3. コード生成が完了したら、ng build を実行してビルドエラーがないことを確認してください。エラーがある場合は、エラーメッセージを分析して修正してから進めてください。生成されたコードが正しく機能することを保証するため、このステップをスキップしないでください。

新規プロジェクトの作成

ユーザーからガイドラインが提供されない場合、新しい Angular プロジェクトを作成する際に従うべきデフォルトルールをいくつか紹介します：

1. ユーザーが明示的に指定しない限り、最新の安定バージョンの Angular を使用してください。
2. 新規プロジェクトではフォーム管理に Signal Forms を使用してください（Angular v21 以降で利用可能）詳細を確認

ng new の実行ルール： 新しい Angular プロジェクトの作成を依頼されたら、以下の厳密なステップに従って正しい実行コマンドを決定する必要があります：

ステップ 1：明示的なユーザー版を確認します。

• もしユーザーが特定のバージョンを指定した場合（例：Angular 15）、ローカルインストールをバイパスして npx を厳密に使用してください。
• コマンド：npx @angular/cli@<requested_version> new <project-name>

ステップ 2：既存の Angular インストールをチェックします。

• もし特定のバージョンが要求されない場合、ターミナルで ng version を実行して、Angular CLI がシステムにすでにインストールされているかを確認してください。
• もしコマンドが成功してインストール済みバージョンが返される場合、ローカル/グローバルインストールを直接使用してください。
• コマンド：ng new <project-name>

ステップ 3：最新版へのフォールバック。

• もし特定のバージョンが要求されず、かつ ng version コマンドが失敗した場合（Angular インストールが存在しないことを示す）、npx を使用して最新バージョンを取得する必要があります。
• コマンド：npx @angular/cli@latest new <project-name>

コンポーネント

Angular コンポーネントを使用する際は、タスクに基づいて以下のリファレンスを参照してください：

• 基礎知識：構造、メタデータ、コアコンセプト、テンプレート制御フロー（@if、@for、@switch）。components.md を参照
• 入力：Signal ベースの入力、変換、モデル入力。inputs.md を参照
• 出力：Signal ベースの出力とカスタムイベントのベストプラクティス。outputs.md を参照
• ホスト要素：ホストバインディングと属性インジェクション。host-elements.md を参照

上記のリファレンスにない詳細なドキュメントが必要な場合は、https://angular.dev/guide/components のドキュメントをご覧ください。

リアクティビティとデータ管理

状態とデータリアクティビティを管理する場合、Angular Signals を使用して以下のリファレンスを参照してください：

• Signals 概要：コア Signal コンセプト（signal、computed）、リアクティブコンテキスト、untracked。signals-overview.md を参照
• 従属状態（linkedSignal）：ソース Signal にリンクされた書き込み可能な状態の作成。linked-signal.md を参照
• 非同期リアクティビティ（resource）：非同期データを Signal 状態に直接フェッチ。resource.md を参照
• 副作用（effect）：ロギング、サードパーティ DOM 操作（afterRenderEffect）、effect を使用すべきでない場合。effects.md を参照

フォーム

ほとんどの新規アプリケーションでは、Signal Forms を優先してください。フォーム決定を下す場合は、プロジェクトを分析して以下のガイドラインを検討してください：

• アプリケーションが v21 以降を使用していて、これが新規フォームの場合、Signal Forms を優先してください。

  • 古いアプリケーションまたは既存フォームを使用している場合、アプリケーションの現在のフォーム戦略に合致する適切なフォームタイプを使用してください。

• Signal Forms：フォーム状態管理に Signal を使用します。signal-forms.md を参照

• Template-driven forms：シンプルなフォームに使用します。template-driven-forms.md を参照

• Reactive forms：複雑なフォームに使用します。reactive-forms.md を参照

依存性インジェクション

Angular に依存性インジェクションを実装する場合、以下のガイドラインに従ってください：

• 基礎知識：依存性インジェクション、サービス、inject() 関数の概要。di-fundamentals.md を参照
• サービスの作成と使用：サービスの作成、providedIn: 'root' オプション、コンポーネントまたは他のサービスへのインジェクション。creating-services.md を参照
• 依存性プロバイダーの定義：自動 vs 手動プロビジョニング、InjectionToken、useClass、useValue、useFactory、スコープ。defining-providers.md を参照
• インジェクションコンテキスト：inject() が許可される場所、runInInjectionContext、assertInInjectionContext。injection-context.md を参照
• 階層的インジェクター：EnvironmentInjector vs ElementInjector、解決ルール、修飾子（optional、skipSelf）、providers vs viewProviders。hierarchical-injectors.md を参照

Angular Aria

Accordion、Listbox、Combobox、Menu、Tabs、Toolbar、Tree、Grid のいずれかのパターン用にアクセシブルなカスタムコンポーネントを構築する場合は、以下のリファレンスを参照してください：

• Angular Aria Components：ヘッドレス、アクセシブルなコンポーネント（Accordion、Listbox、Combobox、Menu、Tabs、Toolbar、Tree、Grid）の構築と ARIA 属性のスタイリング。angular-aria.md を参照

ルーティング

Angular でナビゲーションを実装する場合は、以下のリファレンスを参照してください：

• ルートの定義：URL パス、静的 vs 動的セグメント、ワイルドカード、リダイレクト。define-routes.md を参照
• ルート読み込み戦略：Eager vs lazy loading、コンテキスト認識読み込み。loading-strategies.md を参照
• アウトレットでルートを表示：<router-outlet> の使用、ネストされたアウトレット、名前付きアウトレット。show-routes-with-outlets.md を参照
• ルートへのナビゲーション：RouterLink による宣言的ナビゲーションと Router によるプログラムナビゲーション。navigate-to-routes.md を参照
• ガードでルートアクセスを制御：セキュリティのための CanActivate、CanMatch および他のガードの実装。route-guards.md を参照
• データリゾルバー：ResolveFn でルート有効化前のデータプリフェッチ。data-resolvers.md を参照
• ルーターのライフサイクルとイベント：ナビゲーションイベントの時系列順序とデバッグ。router-lifecycle.md を参照
• レンダリング戦略：CSR、SSG（プリレンダリング）、ハイドレーション付き SSR。rendering-strategies.md を参照
• ルート遷移アニメーション：View Transitions API の有効化とカスタマイズ。route-animations.md を参照

より深いドキュメントまたはより多くのコンテキストが必要な場合は、公式 Angular ルーティングガイド をご覧ください。

スタイリングとアニメーション

Angular にスタイリングとアニメーションを実装する場合は、以下のリファレンスを参照してください：

• Angular での Tailwind CSS の使用：Tailwind CSS を Angular プロジェクトに統合します。tailwind-css.md を参照
• Angular アニメーション：ネイティブ CSS（推奨）またはレガシー DSL を使用した動的エフェクト。angular-animations.md を参照
• コンポーネントのスタイリング：コンポーネントスタイルとカプセル化のベストプラクティス。component-styling.md を参照

テスト

テストを書くまたは更新する際は、タスクに基づいて以下のリファレンスを参照してください：

• 基礎知識：ユニットテスト（Vitest）、非同期パターン、TestBed のベストプラクティス。testing-fundamentals.md を参照
• コンポーネントハーネス：堅牢なコンポーネント相互作用のための標準パターン。component-harnesses.md を参照
• ルーターテスト：信頼性の高いナビゲーションテストのための RouterTestingHarness の使用。router-testing.md を参照
• エンドツーエンド（E2E）テスト：Cypress を使用した E2E テストのベストプラクティス。e2e-testing.md を参照

ツーリング

Angular ツーリングを使用する場合は、以下のリファレンスを参照してください：

• Angular CLI：アプリケーションの作成、コード生成（コンポーネント、ルート、サービス）、サーブ、ビルド。cli.md を参照
• コード モダナイゼーション：マイグレーションを使用して最新の標準に自動的にリファクタリング。migrations.md を参照
• Angular MCP Server：利用可能なツール、設定、実験的機能。mcp.md を参照