angular-modernization

Angular のモダナイズ

2段階のアプローチで、レガシーな Angular コンポーネントをモダンなアーキテクチャに変換します。

1. 自動マイグレーション - standalone、制御フロー、シグナルに対応する Angular CLI のスケマティクス
2. Bitwarden のパターン - ADR への準拠、OnPush による変更検知、適切な可視性、薄いコンポーネント

ワークフロー

ステップ 1：Angular CLI のマイグレーションを実行する

⚠️ 重要：利用可能な場合は、必ず Angular CLI のマイグレーションを使用してください。CLI スケマティクスがある機能を手動でマイグレーションしないでください。

Angular には、エッジケースへの対応、テストの更新、正確性の確保を行う自動スケマティクスがあります。手動でのマイグレーションは、CLI ツールでカバーされていないパターンに限って使用してください。

重要：

• コマンドは必ず npx ng を使用して実行してください。
• すべてのコマンドはファイルではなくディレクトリに対して実行する必要があります。ディレクトリを指定するには --path オプションを使用してください。
• マイグレーションは順番に実行してください（後続のマイグレーションが先行するものに依存している場合があります）。

1. Standalone コンポーネント

npx ng generate @angular/core:standalone --path=<directory> --mode=convert-to-standalone

NgModule ベースから standalone アーキテクチャへ

2. 制御フロー構文

npx ng generate @angular/core:control-flow

*ngIf、*ngFor、*ngSwitch から @if、@for、@switch へ

3. シグナル入力

npx ng generate @angular/core:signal-input-migration

@Input() からシグナル入力へ

4. シグナル出力

npx ng generate @angular/core:output-migration

@Output() からシグナル出力へ

5. シグナルクエリ

npx ng generate @angular/core:signal-queries-migration

@ViewChild、@ContentChild などからシグナルクエリへ

6. inject() 関数

npx ng generate @angular/core:inject-migration

コンストラクターインジェクションから inject() 関数へ

7. 自己終了タグ

npx ng generate @angular/core:self-closing-tag

テンプレートを自己終了構文に更新します

8. 未使用のインポート

npx ng generate @angular/core:unused-imports

未使用のインポートを削除します

ステップ 2：Bitwarden のパターンを適用する

詳しい例については、migration-patterns.md を参照してください。

1. OnPush による変更検知を追加する
2. 可視性修飾子を適用する（テンプレートからアクセスするメンバーには protected、内部用には private）
3. コンポーネントのローカル状態をシグナルに変換する
4. サービスの Observable は維持する（シグナルに変換しない）
5. ビジネスロジックをサービスに抽出する
6. クラスメンバーを適切に整理する
7. standalone に合わせてテストを更新する

ステップ 3：検証する

• npm run lint:fix を使用して、Lint とフォーマットの問題を修正する
• npm run test を使用してテストを実行する

エラーが発生した場合は、適宜修正してください。

主な判断基準

シグナルと Observable の使い分け

• シグナル - コンポーネントのローカル状態のみ（ADR-0027）
• Observable - サービスの状態およびコンポーネント間の通信（ADR-0003）
• toSignal() を使用して、Observable をシグナルベースのコンポーネントに橋渡しする

可視性

• protected - テンプレートからアクセス可能なメンバー
• private - 内部実装

その他のルール

• 必ず OnPush による変更検知を追加する
• TypeScript の enum は使用しない（ADR-0025 に従い、型エイリアスを付けた const オブジェクトを使用する）
• コード領域は使用しない（代わりにリファクタリングする）
• コンポーネントは薄く保つ（ビジネスロジックはサービスに置く）

検証チェックリスト

マイグレーションを完了する前に、次の項目を確認してください。

• OnPush による変更検知を追加した
• 可視性修飾子を適用した（protected／private）
• コンポーネントの状態にはシグナル、サービスの状態には Observable を使用している
• クラスメンバーを整理した（migration-patterns.md を参照）
• テストを更新し、すべて成功する
• 新しい TypeScript の enum がない
• コード領域がない

参考資料

Bitwarden ADR

• ADR-0003：Observable データサービス
• ADR-0025：TypeScript の enum を使用しない
• ADR-0027：Angular シグナル
• Bitwarden Angular スタイルガイド

Angular のリソース

• Angular スタイルガイド
• Angular のマイグレーション
• Angular CLI スケマティクス