AngularはAI志向のフレームワークへ
Angular は AI-forward, あるいは AI-firstなフレームワークへと変化しようとしている。公式オンラインイベントと、先日開催されたAngularConnect 2025での基調講演で明かされたその内容を紹介したい。
Develop with AI
プログラミングにおけるAIの活用が急速に発展する中で、Angularのようなフレームワークに求められるのは、あらゆる開発者、そしてAIのためのフレームワークであること。バイブコーディングでアプリを開発したい人だけでなく、コーディングエージェントをパートナーとして活用したい熟練の開発者にとっても、さまざまなユースケースにおいて、LLMが優れた品質のAngularアプリケーションコードを生成することを確実にする。そのために、Angularチームは Web Codegen Scorer を開発した。
Web Codegen Scorerは、計測用のプロンプトに対して生成されたアプリケーションコードのクオリティを評価する。ビルドに成功するかどうかだけでなく、ランタイムパフォーマンスやセキュリティ、アクセシビリティのベストプラクティスに則っているかも総合的にチェックする。Web Codegen Scorer の開発にはGoogleのセキュリティチーム、Gemini開発チーム、Chromeチームなどがコラボレーションしており、その結果の信頼性はお墨付きだ。
Web Codegen Scorer
Angularチームが Web Codegen Scorer を開発したのは、確実な改善のために計測が欠かせないからだ。このツールにより、フレームワークの現状に合わせて LLM を最適化するための信頼性高いプロンプトを作成できるようになった。これは angular.dev/ai で公開されていて、各種ツールのルールドキュメントやシステムインストラクションに組み込むことができる。
LLM Prompt Improvement Process
次に、Angularアプリケーションコードの生成において LLM が失敗する一般的な原因を分析・デバッグし、それらの問題を軽減するためにフレームワークを改善できるようになった。つまり、定量的な評価をもとにして、LLM が間違えやすい落とし穴を塞ぐように、フレームワークの機能や構文を変更できるようになった。
これらの成果として、LLMは従来のAngularの機能について高い安定性でコード生成できるだけでなく、次のバージョンで試験的機能としてリリースされる Signal Forms 機能についても初日から適切に処理できるようになった。Angularチームは、すでにLLMが優れたAngular開発者として機能することをデータから確信している。
“LLM models are great Angular developers — Angular team & data”
その核となるのが バージョン20.2からAngular CLIに搭載された Angular MCP Server である。Angular MCP ServerをAIツールに連携することで、モデルやツールの違いに左右されずに、AngularのベストプラクティスをLLMのコンテキストに与えられる。
さらに将来的には、Angular MCPとブラウザオートメーションを統合した一連のローカル開発ワークフローを構築できるようにする予定だ。ng serve で起動したローカルサーバーをMCP経由で管理し、プロンプトでコードを生成したらビルドを待つ。ビルド後にPlaywright MCPで動作を確認、問題があれば Angular MCPがソースコードをデバッグ、うまくいけば次のコード生成へ、というサイクルができあがる。これは一度作って終わりのバイブコーディングではなく、継続的にメンテナンスするアプリケーションの開発を念頭に置いたものだ。
AI-driven Angular Dev
Learn with AI
もちろんAngularはAIのためだけでなく、これまで通り開発者とコミュニティのためのフレームワークでもある。AngularチームはAIのサポートを受けながらAngularの最新のプラクティスを学べるインタラクティブな教材を開発した。それが Angular AI Tutor だ。
AI TutorはFirebase Studio上で動作する。GitHubのREADMEに貼られた “Try in Firebase Studio” のリンクからプロジェクトを生成すると、ベースとなるAngularアプリケーションとともに、チャット画面でAIが学習をサポートしてくれる。現在の理解度に応じて難易度を変えてくれるので、初心者の入門ハンズオンから経験者の久々のキャッチアップまで幅広く対応できる。
Angular AI Tutor
Firebase Studio上で構築されるプロジェクトはAngular CLIベースなので、チュートリアルが終わったあとファイルをダウンロードすればローカルで開発を再開できるし、そのまま出来上がったサンプルアプリをFirebaseにデプロイすることもできる。
Angular TutorはAngular MCPにも組み込まれているため、Firebase Studioが使えない場合でも、好きなAIツールを使ってチュートリアルを開始できる。
また、Gemini CanvasやGoogle AI StudioといったGoogleのAI製品のWebアプリ作成にも、Angularが組み込まれるようになった。アイデアをもとに簡単なプロトタイプを手早く作るのに適している。
Gemini Canvas
Design with AI
LLMは、Angularフレームワークそのものの開発においても活用されはじめている。AngularConnect 2025でAngularチームが明かしたのは、すでにAngularフレームワークのAPI設計プロセスにLLMが組み込まれていることだ。
その内容は次のようなものだ。基本的なコンセプトをもとに、APIドキュメントの草稿を作成する。次に、そのドキュメントを入力としてLLMに実装コード例を生成させる。その出力されたコードをAngularチームがレビューし、APIコンセプトを見直す。このサイクルによって、実際に実装する前からAPIデザインの妥当性を検証している。
API Design Process with AI
Angularチームの調査によれば、LLMが生成に失敗しやすいインターフェースは、人間の開発者にとっても同様に混乱を招き、使い方を間違いやすい傾向にあった。逆に言えば、LLMがうまくコードを生成できるインターフェースを設計できれば、それは開発者にとっても学びやすく使いやすいものになる。このサイクルの評価にも Web Codegen Scorer が活用されている。
すでにリリースされている @for や @if などのテンプレート構文も、このプロセスを経てブラッシュアップされたものだという。先述のとおり、Signal Forms も同様だ。
以前はGitHubなどを通じて開発者からAPIコンセプトについてのフィードバックを集め、それを元にデザインを固めていたが、それだけではブラッシュアップできる回数が少なかった。チーム内で事前にLLMによる検証を繰り返すことで、最初からすでに妥当性の高いデザインをコミュニティに提案できるようになった。
開発者がLLMからのサポートを十分に得られるフレームワークであると確信を持って示すために、その開発プロセスにLLMからの評価を組み込むことにしたのだ。
Build with AI
AngularアプリケーションにAIを組み込むのは、Google AI SDKやFirebase Genkitなどのライブラリを通じて現在でも実現できる。しかし、それが開発者とAIツールにとって開発しやすく、ユーザーにとってアクセシブルなものになっているかは未知数だ。
そこでAngularチームはRFCを公開し、AIを組み込むWebアプリケーションのユースケースを集めている。ここで集まったコメントをもとに、Angularが今後備えるべき機能や構文、周辺ツールのサポートなどを検討する予定だ。
まとめ
Angularは着実に進化を続けてきたフレームワークだが、いまやAIと共に成長し、AIと共に開発を支援し、AIと共に学習を促進するという新たな道を歩み始めている。これがAngularの “AI-forward” の方向性だ。
Angular MCPをはじめとした各種ツールの導入により、LLMとの連携が強化され、開発者体験の向上だけでなく、フレームワーク自体の設計にも影響を与えている。しかしAngularとAIのコラボレーションはバイブコーディングを超えて、これまでどおり、品質の高いスケーラブルなWebアプリケーションを構築する開発者とチームのためにある。AI時代においても「自信を持って」開発できるフレームワークとしてのAngularに今後も期待してほしい。
Discussion