angular-best-practices-legacy

Angular のベストプラクティス（レガシー：v12-16）

NgModule ベースのアーキテクチャと RxJS 中心のパターンを使用する Angular 12-16 アプリケーション向けの、包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 30 以上のルールが含まれており、自動リファクタリングやコード生成を支援するため、影響度順に優先順位が付けられています。

適用する場面

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

• Angular 12-16 のコードベースを保守している
• NgModule ベースのアーキテクチャを使用している
• *ngIf、*ngFor ディレクティブを使用している
• 状態管理に RxJS を使用している
• クラスベースの HTTP インターセプターを使用している
• パフォーマンス上の問題についてコードをレビューしている

主なパターン（v12-16）

• NgModules - 機能モジュールでコードを整理します
• BehaviorSubject - リアクティブな状態管理
• Subject + takeUntil - サブスクリプションをクリーンアップするパターン
• クラスベースのインターセプター - implements HttpInterceptor を使用した HTTP 処理
• **ngFor / ngIf - trackBy を使用する構造ディレクティブ
• loadChildren - モジュールベースの遅延読み込み

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

優先度	カテゴリ	影響度	プレフィックス
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	perf-

クイックリファレンス

1. 変更検知（CRITICAL）

• change-rxjs-state - BehaviorSubject と OnPush を使用してリアクティブな状態を管理します
• change-onpush - OnPush の変更検知戦略を使用します
• change-detach-reattach - 負荷の高い処理では変更検知器を切り離します
• change-run-outside-zone - UI に関係しないコードを NgZone の外で実行します

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

• bundle-ngmodule - コードを機能別の NgModules に整理します
• bundle-scam - Single Component Angular Modules パターンを使用します
• bundle-lazy-routes - loadChildren でルートを遅延読み込みします
• bundle-preload - 体感速度を高めるためにルートをプリロードします
• bundle-no-barrel-imports - バレルファイルを避け、直接インポートします

3. RxJS の最適化（HIGH）

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

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

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

5. 依存性注入（MEDIUM-HIGH）

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

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

• http-interceptors - 横断的関心事にはクラスベースのインターセプターを使用します
• http-transfer-state - SSR のハイドレーションには TransferState を使用します

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

• forms-reactive - テンプレート駆動フォームではなくリアクティブフォームを使用します
• forms-typed - 型安全性を確保するために型付き FormGroup を使用します

8. 一般的なパフォーマンス（LOW-MEDIUM）

• perf-memory-leaks - メモリーリークを防ぎます（タイマー、リスナー、サブスクリプション）
• perf-web-workers - 負荷の高い計算を Web Workers に委譲します
• arch-smart-dumb-components - Smart/Dumb コンポーネントパターンを使用します

使用方法

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

rules/change-rxjs-state.md
rules/bundle-ngmodule.md
rules/rxjs-takeuntil.md

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

• 重要である理由の簡単な説明
• 説明付きの誤ったコード例
• 説明付きの正しいコード例
• 追加の背景情報と参考資料

完全版ドキュメント

すべてのルールを詳しくまとめたガイドは、AGENTS.md をご覧ください。