大規模言語モデル（LLM）によるコード生成は、開発者にとって急速に成長している関心分野です。LLMは動作するコードを生成できることが多い一方で、Angularのような常に進化するフレームワーク向けにコードを生成することは困難な場合があります。
高度な指示とプロンプトは、ドメイン固有の詳細情報を用いた最新のコード生成をサポートするための新たな標準となっています。このセクションには、AngularとLLM向けにより正確なコード生成をサポートする厳選されたコンテンツとリソースが含まれています。
カスタムプロンプトとシステム指示
LLMでコードを生成する体験を向上させるには、以下のカスタムのドメイン固有ファイルを使用してください。
NOTE: これらのファイルは、Angularの規約に準拠するために定期的に更新されます。
これは、LLMがAngularのベストプラクティスに従った正しいコードを生成するのに役立つ一連の指示です。このファイルは、AIツールへのシステム指示として含めることも、プロンプトとともにコンテキストとして含めることもできます。
You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
## TypeScript Best Practices
- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is uncertain
## Angular Best Practices
- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
- Use signals for state management
- Implement lazy loading for feature routes
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
- Use `NgOptimizedImage` for all static images.
- `NgOptimizedImage` does not work for inline base64 images.
## Accessibility Requirements
- It MUST pass all AXE checks.
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
### Components
- Keep components small and focused on a single responsibility
- Use `input()` and `output()` functions instead of decorators
- Use `computed()` for derived state
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
- Prefer inline templates for small components
- Prefer Reactive forms instead of Template-driven ones
- Do NOT use `ngClass`, use `class` bindings instead
- Do NOT use `ngStyle`, use `style` bindings instead
- When using external templates/styles, use paths relative to the component TS file.
## State Management
- Use signals for local component state
- Use `computed()` for derived state
- Keep state transformations pure and predictable
- Do NOT use `mutate` on signals, use `update` or `set` instead
## Templates
- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
- Use the async pipe to handle observables
- Do not assume globals like (`new Date()`) are available.
## Services
- Design services around a single responsibility
- Use the `providedIn: 'root'` option for singleton services
- Use the `inject()` function instead of constructor injection
ここをクリックしてbest-practices.mdファイルをダウンロードしてください。
ルールファイル
いくつかのエディター（例: Firebase Studio）には、LLMに重要なコンテキストを提供するのに役立つルールファイルがあります。
| 環境/IDE | ルールファイル | インストール手順 |
|---|---|---|
| Firebase Studio | airules.md | airules.mdを設定 |
| Copilot powered IDEs | copilot-instructions.md | .github/copilot-instructions.mdを設定 |
| Cursor | cursor.md | cursorrules.mdを設定 |
| JetBrains IDEs | guidelines.md | guidelines.mdを設定 |
| VS Code | .instructions.md | .instructions.mdを設定 |
| Windsurf | guidelines.md | guidelines.mdを設定 |
Angular CLI MCPサーバーのセットアップ
Angular CLIには、開発環境のAIアシスタントがAngular CLIと連携できるようにする実験的なModel Context Protocol (MCP)サーバーが含まれています。
Angular CLI MCPサーバーのセットアップ方法を学ぶ
llms.txtによるコンテキスト提供
llms.txtは、LLMがコンテンツをより良く理解し処理できるよう設計されたウェブサイト向けの提案されている標準です。Angularチームは、LLMおよびコード生成にLLMを使用するツールが、より良いモダンなAngularコードを作成できるようにするため、このファイルの2つのバージョンを開発しました。
- llms.txt - 主要なファイルとリソースへのリンクを提供するインデックスファイル。
- llms-full.txt - Angularの動作方法とAngularアプリケーションの構築方法を記述した、より堅牢なコンパイル済みリソースセット。
AngularアプリケーションにAIを統合する方法に関する詳細情報については、概要ページもご確認ください。
Web Codegen Scorer
AngularチームはWeb Codegen Scorerを開発し、オープンソース化しました。これは、AI生成ウェブコードの品質を評価・スコア化するためのツールです。このツールを使用して、Angular向けにLLM生成コードの精度を向上させるプロンプトの微調整など、AI生成コードに関するエビデンスベースの意思決定を行うことができます。これらのプロンプトは、AIツールのシステム指示として含めたり、プロンプトとともにコンテキストとして含めたりできます。また、このツールを使用して、異なるモデルが生成するコードの品質を比較したり、モデルやエージェントの進化に伴う品質の経時変化を監視したりできます。