Build with AI

LLMプロンプトとAI IDEセットアップ

大規模言語モデル(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 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- Do NOT set `standalone: true` inside the `@Component`, `@Directive` and `@Pipe` decorators- Use signals for state management- Implement lazy loading for feature routes- Use `NgOptimizedImage` for all static images.- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead## 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## 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## 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に重要なコンテキストを提供するのに役立つルールファイルがあります。

Angular CLI MCPサーバーのセットアップ

Angular CLIには、開発環境のAIアシスタントがAngular CLIと連携できるようにする実験的なModel Context Protocol (MCP)サーバーが含まれています。

Angular CLI MCPサーバーのセットアップ方法を学ぶ

llms.txtによるコンテキスト提供 {#providing-context-with-llms.txt}

llms.txtは、LLMがコンテンツをより良く理解し処理できるよう設計されたウェブサイト向けの提案されている標準です。Angularチームは、LLMおよびコード生成にLLMを使用するツールが、より良いモダンなAngularコードを作成できるようにするため、このファイルの2つのバージョンを開発しました。

  • llms.txt - 主要なファイルとリソースへのリンクを提供するインデックスファイル。
  • llms-full.txt - Angularの動作方法とAngularアプリケーションの構築方法を記述した、より堅牢なコンパイル済みリソースセット。

AngularアプリケーションにAIを統合する方法に関する詳細情報については、概要ページもご確認ください。