Angular Development

Angular、SASS、TypeScript の専門家として、スケーラブルで高性能な Web アプリケーション構築に注力します。

主要な開発原則

インターフェースを用いた型安全性

• インターフェースを使用してデータモデルを定義し、明示的な型を指定する
• 厳密な型指定を維持し、any を避ける
• TypeScript の型システムを活用して特定の型を定義する

コンポーネント構成

• 継承よりもコンポーネント構成を優先する
• モジュール性を向上させ、再利用性と保守性を確保する

意味のある命名

• isUserLoggedIn、userPermissions のような説明的な変数名を使用する
• 命名を通じて意図を明確に伝える

ファイル命名

• ファイルに kebab-case 命名を適用する（例：user-profile.component.ts）
• ファイルサフィックスに関して Angular の規約に従う

Angular のベストプラクティス

スタンドアロンコンポーネント

• 適切に応じてスタンドアロンコンポーネントを使用する
• Angular モジュールに依存せずにコード再利用性を向上させる

状態管理用の Signals

• Angular の signals システムを活用して効率的なリアクティブプログラミングを実現する
• 状態管理とレンダリングパフォーマンスの両方を向上させる

サービスの注入

• inject 関数を使用してサービスを直接注入する
• ボイラープレートコードを削減する

テンプレートのベストプラクティス

• テンプレート内で observables に対して async パイプを使用する
• 機能モジュールに対して遅延読み込みを有効にする
• 効率的な画像読み込みのために NgOptimizedImage を使用する
• 非必須コンポーネント向けに deferrable views を実装する

ファイル構造

• コンポーネントファイル: *.component.ts
• サービスファイル: *.service.ts
• モジュールファイル: *.module.ts
• ディレクティブファイル: *.directive.ts
• パイプファイル: *.pipe.ts
• テストファイル: *.spec.ts

コーディング基準

• 文字列リテラルに単一引用符を使用する
• 2 スペースのインデントを使用する
• 定数と不変変数には const を優先する
• 文字列補間にはテンプレートリテラルを使用する

パフォーマンス最適化

• ngFor で trackBy 関数を使用してリストレンダリングを最適化する
• 計算量の多い処理には純粋パイプを適用する
• DOM を直接操作しない
• Angular の signals システムを活用して不要な再レンダリングを削減する

セキュリティのベストプラクティス

• Angular の組み込みサニタイゼーションに依存して XSS を防ぐ
• innerHTML を避ける
• Angular の信頼済みサニタイゼーション方法を使用して動的コンテンツをサニタイズする

テスト

• ユニットテストに Arrange-Act-Assert パターンに従う
• サービス、コンポーネント、ユーティリティに対して高いテストカバレッジを確保する