【海外記事紹介】Angular v20.1/20.2における新機能と改善まとめ — ゾーンレス安定化とAI統合で描く次の10年

8月30日、Angularチームは「Angular Summer Update 2025」という記事を公開した。

以下に、その内容をかいつまんで紹介する。詳細は公式のブログ記事を参照していただきたい。

本記事は、以下のエキスパートに監修していただきました:

lacolacoさんをTechFeed上でフォローしよう！

ゾーンレスAngular ― 長年の懸案に終止符

AngularのZone.jsは、アプリ内の非同期処理を監視して変更検知を自動化する仕組みとして長く使われてきた。しかしその裏側では、デバッグの難しさやバンドルサイズ増加、挙動が不透明になるといった課題が指摘されていた。開発者からは「ゾーンを外したい」「もっと予測可能な仕組みにしてほしい」という声が絶えなかった。

v20.2で安定化した「ゾーンレスAngular」は、その声に応えるものだ。開発者は次のように設定を変更するだけでゾーン依存を外せる。

bootstrapApplication(MyApp, {providers: [
  provideZonelessChangeDetection(), // ゾーンレスを有効化
]});

Zone.js自体は引き続きサポートされるため、大規模既存プロジェクトでも段階的な移行が可能だ。これは「Angularの複雑さを軽減し、より直感的な開発体験へ」という大きな流れを象徴するアップデートといえる。

CSSネイティブアニメーション ― 標準への回帰

かつてAngularは @angular/animations パッケージを通じて独自にアニメーション機能を提供していた。しかしWeb標準の進化により、ブラウザ自身が高性能なアニメーションAPIを備えるようになった。結果として、Angular側で独自実装を維持する意義は薄れつつあった。

今回導入された animate.enter / animate.leave は、その流れに沿ったものだ。要素の追加・削除に合わせてCSSクラスを割り当てられるようになり、標準のCSSアニメーションを自然に利用できる。

<div class="card" animate.enter="card-slide">
  <p>user-details-card</p>
</div>

<div class="card" animate.enter="card-slide" animate.leave="card-fade">
  <p>user-details-card</p>
</div>

これにより、開発者はAngular専用の学習コストをかけず、CSSや既存ライブラリ（GSAP、anime.js）をそのまま使える。フレームワークが標準に歩調を合わせることで、将来の保守性や互換性も確保される。

AIとの融合 ― 単なる補助から開発基盤へ

Angularチームは2024年からAIとの統合を打ち出していたが、2025年夏の時点でその取り組みは一段と拡大している。単なる「コード補完」ではなく、フレームワーク自体をAIが理解しやすい形に進化させる ことを目指しているのが特徴だ。

Genkit、Firebase AI Logic、Gemini APIを活用したアプリ構築ガイドの整備
Gemini CanvasやGoogle AI StudioでのAngularアプリ生成対応
IDE向けのシステムプロンプトやルールファイルの提供により、AI支援がフレームワーク標準に近いコードを出力。すべてのプロンプトやルールファイルは angular.dev/ai/develop-with-aiで参照できる。

さらに9月16日には「Angular AI Event」が開催予定で、Googleと共同での最新デモや連携施策が披露される予定だ。

MCPサーバ ― AIのためのAngular API

AIが正しくAngularコードを生成するには、適切な文脈情報が欠かせないが、Angularでも専用のMCP（Model Context Protocol）サーバが提供されるようになった。

ドキュメント検索、ベストプラクティスの提示、プロジェクトメタデータの提供といった機能を備え、AIエージェントがAngularをより深く理解してコードを生成できるようになる。これは「開発者のためのフレームワーク」であると同時に「AIに最適化されたフレームワーク」へ進化しようとしていると言えるだろう。

セットアップ方法はこちらのページを参照のこと。

DevToolsの改善

アプリケーションが大規模化するにつれ、「どう動いているか」を把握するのは難しくなっていく。Angular DevToolsに追加されたルート可視化やシグナルグラフは、Angularアプリケーションの動作を把握するために有用だ。ルーティング経路やデータフローを視覚的に追えるようになる。

詳細はAngular Summer Update 2025を参照していただきたい。