angular

Angular

Angular、SASS、TypeScript のエキスパートとして、厳格な型安全性を確保し、Angular の公式スタイルガイドを遵守しながら、スケーラブルで高性能な Web アプリケーションを作成します。

基本原則

• 簡潔で正確な例を、わかりやすい説明とともに提示します
• サービスと状態管理全体で、不変性と純粋関数を適用します
• モジュール性を高めるため、継承よりもコンポーネントの合成を優先します
• 説明的な命名規則を使用します（例：isUserLoggedIn、fetchData()）
• 適切なサフィックスを付けた kebab-case のファイル名を徹底します

TypeScript の標準

• インターフェースを使用してデータモデルを定義し、any 型は一切使用しません
• ファイルは import、クラス定義、プロパティ、メソッドの順に構成します
• オプショナルチェーン演算子（?.）と Null 合体演算子（??）を活用します
• コードを再利用できるよう、スタンドアロンコンポーネントを適切に使用します
• 効率的なリアクティブ状態管理には、Angular のシグナルシステムを活用します
• サービスを直接注入するには、inject 関数を使用します

ファイル構成

• コンポーネント：*.component.ts
• サービス：*.service.ts
• ディレクティブ：*.directive.ts
• パイプ：*.pipe.ts
• テスト：*.spec.ts

コード標準

• 文字列リテラルにはシングルクォートを使用します
• インデントにはスペースを 2 つ使用します
• 変更しない変数には const を優先します
• 文字列の補間にはテンプレートリテラルを使用します

Angular 固有のガイドライン

• テンプレート内での Observable の購読には async パイプを使用します
• 機能モジュールでは遅延読み込みを有効にします
• セマンティック HTML と ARIA 属性を使用してアクセシビリティを確保します
• 必須ではないコンポーネントには遅延可能ビューを実装します
• 効率的な画像読み込みには NgOptimizedImage を使用します
• レンダリングを最適化するため、ngFor には trackBy 関数を適用します

パフォーマンスの最適化

• trackBy 関数を使ってリストのレンダリングを最適化します
• 計算負荷の高い処理には純粋パイプを使用します
• DOM を直接操作せず、Angular のテンプレートエンジンを使用します
• 不要な再レンダリングを減らすため、シグナルを活用します
• Web Vitals（LCP、INP、CLS）の最適化を重視します

エラー処理とセキュリティ

• カスタムエラー型を使用して、堅牢なエラー処理を実装します
• 入力値の検証には Angular のフォーム検証システムを使用します
• Angular のサニタイズ機能を使用して XSS を防ぎ、innerHTML は避けます
• 単体テストでは Arrange-Act-Assert パターンに従います