104 lines
7.1 KiB
Markdown
104 lines
7.1 KiB
Markdown
---
|
||
description: 'Angular固有のコーディング標準とベストプラクティス'
|
||
applyTo: '**/*.ts, **/*.html, **/*.scss, **/*.css'
|
||
---
|
||
|
||
# Angular開発指針
|
||
|
||
Angular Signalsを状態管理に使用し、https://angular.dev で説明されているAngularベストプラクティスに従って、TypeScriptによる高品質なAngularアプリケーションを生成するための指針。
|
||
|
||
## プロジェクトコンテキスト
|
||
- 最新のAngularバージョン（デフォルトでスタンドアロンコンポーネントを使用）
|
||
- 型安全性のためのTypeScript
|
||
- プロジェクトセットアップと足場構築のためのAngular CLI
|
||
- Angularスタイルガイド（https://angular.dev/style-guide）に従う
|
||
- 一貫したスタイリングのためAngular Materialまたは他のモダンUIライブラリを使用（指定された場合）
|
||
|
||
## 開発標準
|
||
|
||
### アーキテクチャ
|
||
- モジュールが明示的に必要でない限りスタンドアロンコンポーネントを使用
|
||
- スケーラビリティのため機能モジュールまたはドメインでコードを整理
|
||
- パフォーマンスを最適化するため機能モジュールの遅延読み込みを実装
|
||
- Angularの組み込み依存性注入システムを効果的に使用
|
||
- 関心の明確な分離（スマート vs プレゼンテーション コンポーネント）でコンポーネントを構造化
|
||
|
||
### TypeScript
|
||
- 型安全性のため`tsconfig.json`でストリクトモードを有効化
|
||
- コンポーネント、サービス、モデルの明確なインターフェースと型を定義
|
||
- 堅牢な型チェックのため型ガードとユニオン型を使用
|
||
- RxJS演算子（例：`catchError`）で適切なエラーハンドリングを実装
|
||
- リアクティブフォームには型付きフォーム（例：`FormGroup`、`FormControl`）を使用
|
||
|
||
### コンポーネント設計
|
||
- Angularのコンポーネントライフサイクルフックのベストプラクティスに従う
|
||
- Angular >= 19を使用する場合、デコレーターの代わりに`input()`、`output()`、`viewChild()`、`viewChildren()`、`contentChild()`、`viewChildren()`関数を使用；それ以外はデコレーターを使用
|
||
- Angularの変更検出戦略（デフォルトまたはパフォーマンスのための`OnPush`）を活用
|
||
- テンプレートをクリーンに保ち、ロジックはコンポーネントクラスまたはサービスに配置
|
||
- 再利用可能な機能にはAngularディレクティブとパイプを使用
|
||
|
||
### スタイリング
|
||
- Angularのコンポーネントレベル CSS カプセル化を使用（デフォルト：ViewEncapsulation.Emulated）
|
||
- 一貫したテーマでスタイリングにSCSSを優先
|
||
- CSS Grid、Flexbox、またはAngular CDK Layoutユーティリティを使用してレスポンシブデザインを実装
|
||
- 使用する場合はAngular Materialのテーマガイドラインに従う
|
||
- ARIA属性とセマンティックHTMLでアクセシビリティ（a11y）を維持
|
||
|
||
### 状態管理
|
||
- コンポーネントとサービスでリアクティブ状態管理にAngular Signalsを使用
|
||
- リアクティブな状態更新のため`signal()`、`computed()`、`effect()`を活用
|
||
- 可変状態には書き込み可能なシグナル、派生状態には計算されたシグナルを使用
|
||
- シグナルと適切なUIフィードバックでローディング状態とエラー状態を処理
|
||
- シグナルとRxJSを組み合わせる場合、テンプレートでObservableを処理するためAngularの`AsyncPipe`を使用
|
||
|
||
### データフェッチング
|
||
- 適切な型付けでAPI呼び出しにAngularの`HttpClient`を使用
|
||
- データ変換とエラーハンドリングにRxJS演算子を実装
|
||
- スタンドアロンコンポーネントでの依存性注入にAngularの`inject()`関数を使用
|
||
- キャッシュ戦略を実装（例：Observableの`shareReplay`）
|
||
- リアクティブ更新のためAPIレスポンスデータをシグナルに保存
|
||
- 一貫したエラーハンドリングのためグローバルインターセプターでAPIエラーを処理
|
||
|
||
### セキュリティ
|
||
- Angularの組み込みサニタイゼーションを使用してユーザー入力をサニタイズ
|
||
- 認証と認可のためルートガードを実装
|
||
- CSRF保護とAPI認証ヘッダーのためAngularの`HttpInterceptor`を使用
|
||
- Angularのリアクティブフォームとカスタムバリデーターでフォーム入力を検証
|
||
- Angularのセキュリティベストプラクティスに従う（例：直接DOM操作を避ける）
|
||
|
||
### パフォーマンス
|
||
- 最適化のため`ng build --prod`で本番ビルドを有効化
|
||
- 初期バンドルサイズを削減するためルートの遅延読み込みを使用
|
||
- `OnPush`戦略とシグナルを使って変更検出を最適化し、きめ細かいリアクティビティを実現
|
||
- レンダリングパフォーマンスを向上させるため`ngFor`ループでtrackByを使用
|
||
- サーバーサイドレンダリング（SSR）またはAngular Universalでの静的サイト生成（SSG）を実装（指定された場合）
|
||
|
||
### テスト
|
||
- JasmineとKarmaを使用してコンポーネント、サービス、パイプの単体テストを記述
|
||
- モックされた依存関係によるコンポーネントテストにAngularの`TestBed`を使用
|
||
- Angularのテストユーティリティを使用してシグナルベースの状態更新をテスト
|
||
- CypressまたはPlaywright（指定された場合）でエンドツーエンドテストを記述
|
||
- `HttpClientTestingModule`を使用してHTTPリクエストをモック
|
||
- 重要な機能の高いテストカバレッジを確保
|
||
|
||
## 実装プロセス
|
||
1. プロジェクト構造と機能モジュールを計画
|
||
2. TypeScriptインターフェースとモデルを定義
|
||
3. Angular CLIを使用してコンポーネント、サービス、パイプの足場を構築
|
||
4. シグナルベースの状態でデータサービスとAPI統合を実装
|
||
5. 明確な入力と出力を持つ再利用可能なコンポーネントを構築
|
||
6. リアクティブフォームとバリデーションを追加
|
||
7. SCSSとレスポンシブデザインでスタイリングを適用
|
||
8. 遅延読み込みルートとガードを実装
|
||
9. シグナルを使用してエラーハンドリングとローディング状態を追加
|
||
10. 単体テストとエンドツーエンドテストを記述
|
||
11. パフォーマンスとバンドルサイズを最適化
|
||
|
||
## 追加ガイドライン
|
||
- Angularの命名規則に従う（例：`feature.component.ts`、`feature.service.ts`）
|
||
- 定型コード生成のためAngular CLIコマンドを使用
|
||
- 明確なJSDocコメントでコンポーネントとサービスを文書化
|
||
- 該当する場合はアクセシビリティコンプライアンス（WCAG 2.1）を確保
|
||
- 国際化（指定された場合）にはAngularの組み込みi18nを使用
|
||
- 再利用可能なユーティリティと共有モジュールを作成してコードをDRYに保つ
|
||
- リアクティブ更新を確保するため状態管理でシグナルを一貫して使用 |