angular-best-practices-v20

Angular のベストプラクティス（v20+）

Signals、httpResource、シグナル入出力、@defer ブロック、ネイティブの制御フロー構文などの最新機能を備えた Angular 20+ アプリケーション向けの包括的なパフォーマンス最適化ガイドです。自動リファクタリングやコード生成に役立つよう、影響度に基づいて優先順位を付けた 8 つのカテゴリにわたる 35 以上のルールを掲載しています。

適用するタイミング

以下の場合に、これらのガイドラインを参照してください。

• 新しい Angular 20+ コンポーネントを作成するとき
• リアクティブな状態管理に Signals（signal、computed、linkedSignal、effect）を使用するとき
• データ取得に httpResource/resource を使用するとき
• デコレーターの代わりにシグナル入力／出力を使用するとき
• 遅延読み込みに @defer を実装するとき
• ネイティブの制御フロー（@if、@for、@switch）を使用するとき
• インクリメンタルハイドレーションを使った SSR を実装するとき
• パフォーマンス上の問題がないかコードをレビューするとき

主な機能（v20+）

• Signals - きめ細かなリアクティビティ（signal、computed、linkedSignal、effect）
• httpResource - 読み込み状態を自動管理するシグナルベースの HTTP
• シグナル入出力 - input()、output() によりデコレーターを置き換えます
• @defer - ハイドレーショントリガーに対応したテンプレートレベルの遅延読み込み
• @for / @if - 必須の track を備えたネイティブの制御フロー
• デフォルトでスタンドアロン - standalone: true は不要です
• ホストバインディング - @HostBinding デコレーターの代わりに host オブジェクトを使用します
• 関数型インターセプター - よりシンプルな HTTP インターセプター
• takeUntilDestroyed - サブスクリプションのクリーンアップ機能を標準搭載
• インクリメンタルハイドレーション - SSR 用の @defer (hydrate on ...)

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	変更検知	CRITICAL	change-
2	バンドルと遅延読み込み	CRITICAL	bundle-
3	RxJS の最適化	HIGH	rxjs-
4	テンプレートのパフォーマンス	HIGH	template-
5	依存性注入	MEDIUM-HIGH	di-
6	HTTP とキャッシュ	MEDIUM	http-
7	フォームの最適化	MEDIUM	forms-
8	全般的なパフォーマンス	LOW-MEDIUM	ssr-

クイックリファレンス

1. 変更検知（CRITICAL）

• change-signals - リアクティブな状態管理には BehaviorSubject の代わりに Signals を使用します
• change-onpush - OnPush 変更検知戦略を使用します
• change-detach-reattach - 負荷の高い処理では変更検知器を切り離します
• change-run-outside-zone - UI に関係しないコードを NgZone の外で実行します
• component-signal-io - @Input/@Output デコレーターの代わりにシグナル入出力を使用します
• signal-computed-pure - computed() を純粋に保ち、副作用を発生させないようにします
• signal-effect-patterns - effect() を正しく使用し、アンチパターンを避けます
• signal-linkedsignal - 派生状態と書き込み可能な状態には linkedSignal を使用します

2. バンドルと遅延読み込み（CRITICAL）

• bundle-standalone - スタンドアロンコンポーネントを使用します（v20+ ではデフォルト）
• bundle-lazy-routes - loadComponent/loadChildren を使ってルートを遅延読み込みします
• bundle-defer - 負荷の高いコンポーネントには @defer ブロックを使用します
• bundle-preload - 体感速度を高めるため、ホバー／フォーカス時にルートを事前読み込みします
• bundle-no-barrel-imports - バレルファイルを避け、直接インポートします

3. RxJS の最適化（HIGH）

• rxjs-async-pipe - 手動のサブスクリプションではなく async パイプを使用します
• rxjs-takeuntil - 自動クリーンアップには takeUntilDestroyed を使用します
• rxjs-share-replay - リクエストの重複を避けるため、Observable を共有します
• rxjs-operators - 効率的な RxJS オペレーターを使用します
• rxjs-mapping-operators - 適切なマッピングオペレーター（switchMap と exhaustMap の使い分け）を使用します
• rxjs-no-nested-subscribe - サブスクリプションのネストを避けます

4. テンプレートのパフォーマンス（HIGH）

• template-trackby - @for ループでは track 関数を使用します（v20+ では必須）
• template-pure-pipes - 負荷の高い変換処理には純粋パイプを使用します
• template-ng-optimized-image - 画像を最適化するには NgOptimizedImage を使用します
• template-no-function-calls - テンプレート内での関数呼び出しを避けます
• template-virtual-scroll - 大規模なリストには仮想スクロールを使用します

5. 依存性注入（中～高）

• di-provided-in-root - シングルトンサービスには providedIn: 'root' を使用します
• di-injection-token - クラス以外の依存関係には InjectionToken を使用します
• di-factory-providers - 複雑な初期化にはファクトリープロバイダーを使用します
• directive-host-composition - コンポジションには hostDirectives を使用します

6. HTTP とキャッシュ（中）

• http-resource - シグナルベースのデータ取得には httpResource/resource を使用します
• http-interceptors - 横断的な関心事には関数型インターセプターを使用します
• http-transfer-state - SSR のハイドレーションには TransferState を使用します
• routing-signal-inputs - シグナルベースのルート入力を使用します

7. フォームの最適化（中）

• forms-reactive - 型付きの FormGroup を使用したリアクティブフォームを使用します

8. 全般的なパフォーマンス（低～中）

• ssr-hydration - @defer による段階的なハイドレーションを使用します（...でハイドレーション）
• perf-memory-leaks - メモリーリークを防ぎます（タイマー、リスナー、サブスクリプション）
• perf-web-workers - 負荷の高い計算を Web Workers にオフロードします
• arch-smart-dumb-components - Smart/Dumb コンポーネントパターンを使用します

使用方法

詳しい説明とコード例については、各ルールファイルを参照してください。

rules/change-signals.md
rules/bundle-defer.md
rules/http-resource.md

各ルールファイルには、以下の内容が含まれています。

• 重要な理由の簡単な説明
• 説明付きの誤ったコード例
• 説明付きの正しいコード例
• 追加のコンテキストと参考資料

完全版ドキュメント

すべてのルールを詳しく説明した完全なガイドについては、AGENTS.md を参照してください。