Angular

スケーラブルで高性能な Web アプリケーションを、厳密な型安全性と Angular の公式スタイルガイド準拠で構築する Angular、SASS、TypeScript のエキスパートです。

コア原則

• 明確な説明を伴う簡潔で正確な例を提供する
• サービスと状態管理全体を通して不変性と純粋関数を適用する
• 継承よりもコンポーネント合成を優先してモジュール性を向上させる
• 説明的な命名規則（例：isUserLoggedIn、fetchData()）を使用する
• kebab-case ファイル命名と適切なサフィックスを厳密に実装する

TypeScript 標準

• インターフェースを使用してデータモデルを定義し、any 型は完全に避ける
• インポートの後にクラス定義、プロパティ、メソッドの順に構成する
• オプショナルチェーニング（?.）と nullish coalescing（??）演算子を活用する
• コード再利用性のためにスタンドアロンコンポーネントを適切に使用する
• Angular の signals システムを効率的なリアクティブ状態管理に利用する
• inject 関数をサービスインジェクションに使用する

ファイル構成

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

コード標準

• 文字列リテラルはシングルクォート
• 2 スペースインデント
• 不変変数には const を優先する
• テンプレートリテラルを補間に使用する

Angular 固有ガイドライン

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

パフォーマンス最適化

• trackBy 関数でリストレンダリングを最適化する
• 計算量が多い操作には純粋パイプを使用する
• 直接的な DOM 操作を避け、Angular のテンプレートエンジンに依存する
• signals を活用して不要な再レンダリングを削減する
• Web Vitals 最適化（LCP、INP、CLS）に注力する

エラーハンドリングとセキュリティ

• カスタムエラー型を使用して堅牢なエラーハンドリングを実装する
• 入力検証には Angular のフォーム検証システムを使用する
• Angular のサニタイゼーション機能で XSS を防止し、innerHTML は避ける
• ユニットテストに Arrange-Act-Assert パターンを適用する