- Angular v21 は、AI中心のWeb開発時代に合わせ、Signal Forms、Angular Aria、MCP サーバー、Vitest、Zoneless 変更検知 などの主要機能を含む大規模アップデート
- Signal Forms は、Signals ベースのリアクティブなフォーム管理により、型安全性とスキーマベースの検証を提供
- Angular Aria は、アクセシビリティを最優先にした ヘッドレス UI コンポーネントライブラリ で、8種類のパターンと13個のコンポーネントを開発者のスタイルに合わせてカスタマイズ可能
- Vitest が標準のテストランナーとして採用され安定化し、zone.js はデフォルト同梱対象から外れ、Zoneless 戦略が標準化
- 新しいドキュメントサイトと AI チューター、MCP サーバーツール により、開発者体験と AI 統合能力を強化した点が今回のバージョンの中核
主な機能の概要
- Angular v21 は、AI支援開発環境 と 拡張可能な Web アプリケーション 構築のための機能を大幅に強化
- 新バージョンは Signal Forms、Angular Aria、MCP サーバー、Vitest、Zoneless 変更検知 を中心に構成
- 新しいアプリケーションはデフォルトで zone.js を含まない 代わりに、Zoneless 戦略を採用
- Angular CLI は Vitest を標準テストランナー として設定し、Karma と Jasmine も引き続きサポート
- AI エージェントと連携できる MCP サーバー が安定化し、LLM が最新の Angular 機能を活用可能
Signal Forms（実験的機能）
- Signal Forms は、Signals ベースの リアクティブなフォーム状態管理ライブラリ
- フォームモデルは signal として定義され、フィールドと自動同期
- 型安全性 と スキーマベースの検証ロジック を内蔵
form() と [field] ディレクティブを使ってテンプレートとバインドControlValueAccessor なしでカスタムコンポーネントをバインド可能- メール検証、正規表現マッチングなどの基本的な検証パターンを含み、カスタムバリデーターも追加可能
- 現在は 実験段階 で、フィードバックをもとに改善予定
Angular Aria（開発者プレビュー）
- Angular Aria は、アクセシビリティを最優先にした ヘッドレス UI コンポーネントライブラリ
- 8種類のパターン（Accordion、Combobox、Grid、Listbox、Menu、Tabs、Toolbar、Tree）と13個のコンポーネントを提供
- すべてのコンポーネントは スタイル未適用の状態 で提供され、自由にカスタマイズ可能
- インストールコマンド:
npm i @angular/aria
- Angular チームは3つのコンポーネント開発パスを提示
- Angular Aria: アクセシビリティ重視のヘッドレスコンポーネント
- CDK: Drag & Drop などの 振る舞いプリミティブ を提供
- Angular Material: Material Design スタイル の完成済みコンポーネント
MCP サーバーと AI 統合
- MCP サーバー は Angular CLI に組み込まれた AI 支援ツールサーバーで、v21 で 安定化
- 主な機能
- get_best_practices: ベストプラクティスを提供
- search_documentation: 公式ドキュメントを検索
- find_examples: 最新の Angular サンプルを提供
- onpush_zoneless_migration: Zoneless 移行計画を生成
- ai_tutor: AI ベースの Angular 学習支援
- MCP サーバーにより、LLM の知識カットオフ問題を解消 し、Signal Forms や Angular Aria のような最新機能を活用可能
Vitest 標準テストランナー
- Vitest が Angular の 標準テストランナーとして安定化
ng test コマンドで実行可能- Karma は 2023 年以降非推奨で、Jest と Web Test Runner は v22 で削除予定
- 既存プロジェクトでは Karma/Jasmine を引き続き使用可能
ng g @schematics/angular:refactor-jasmine-vitest コマンドで 自動マイグレーション をサポート
Zoneless 変更検知
- zone.js はブラウザ API にパッチを当てて変更検知を行っていたが、性能上の限界があった
- Signals ベースの Zoneless 変更検知 が v21 でデフォルトに移行
- 2024 年時点で Google 社内の新規アプリの半数以上が Zoneless を使用
- HTTP Archive ベースで 1,400 件以上の公開アプリが Zoneless を採用
- Zoneless の利点
- Core Web Vitals の改善、バンドルサイズ削減、デバッグの簡素化、非同期処理との互換性向上
- 既存アプリは 移行ガイド または MCP サーバーの
onpush_zoneless_migration ツールを利用可能
ドキュメントと開発者体験の改善
- angular.dev サイトを全面刷新
- 新しいランディングページと最新概念を中心にしたドキュメント構成
- AI 開発リソースハブ（angular.dev/ai）を新設
- Signals チュートリアル、ルーティング、DI、Material テーマ、Tailwind CSS ガイドを更新
- MCP サーバーの
search_documentation ツールで最新ドキュメントを検索可能
追加の改善点
- CLDR ライブラリ を v47 に更新（通貨・日付フォーマットを改善）
- テンプレート内での正規表現サポート、Signals フォーマッター内蔵、IntersectionObserver オプションのカスタマイズ が可能
- SimpleChanges のジェネリック化、KeyValue パイプ改善、Material ユーティリティクラス追加
- CDK Overlay がブラウザ標準の popover を使用することでアクセシビリティを向上
- Angular DevTools に Route 可視化と Signal グラフ を追加
コミュニティ貢献
- v20 以降、215 人 が Angular コードベースに貢献
- 主な貢献
- Jaime Burgos: マイグレーションと診断を改善
- Angelo Parziale: NgClass/NgStyle 変換マイグレーションを追加
- Hryhorii Avcharov: DevTools に Transfer State タブを追加
- Luke Beach、Ruslan Lekhman、Cédric Exbrayat、Younes Jaaidi などが Vitest と CDK 関連機能を改善
その他
- Angular マスコット投票の結果は 2025 年 11 月 20 日の YouTube リリースイベント で公開予定
- Angular チームは Signal Forms と Angular Aria を通じて、拡張性と自信を持って開発できる Web アプリ環境 を継続的に発展させる計画
ng update コマンドで最新バージョンにアップグレード可能
2件のコメント
LLMの性能が落ちる言語やフレームワークは、ああいうふうにMCPサーバーを提供して回答の品質を高めているのでしょうか
公式のMCPサーバー対応は良さそうですが、Reactにも似たようなものがあるのか気になります