この記事では、Angular v21 がもたらす新機能と開発体験の進化についてかいつまんで紹介する。

Angular v21 概要

Angular v21 は、AI を活用した開発が一般化しつつある現在の状況に合わせ、フォーム管理、アクセシブル UI、AI エージェントとの連携、テスト環境、パフォーマンス改善といった領域を総合的に強化したリリースとなった。
Signals を中心に据えた API の拡張や zoneless へのデフォルト移行など、フレームワークの根幹に踏み込んだ変化が特徴である。

実験的なSignal Forms

今回のリリースで特に注目されるのが、実験的に公開された Signal Forms である。
Signal ベースのリアクティブなフォーム管理モデルで、フォーム状態が signal で定義され、テンプレートとの同期が自動化される。

フォームモデルの定義は次のとおりである。

import { form, Field } from '@angular/forms/signals';

@Component({
  imports: [Field],
  template: `
    Email: <input [field]="loginForm.email">
    Password: <input [field]="loginForm.password">
  `
})
export class LoginForm {
  login = signal({
    email: '',
    password: ''
  });

  loginForm = form(this.login);
}

フォームフィールドは [field] ディレクティブで簡潔に扱え、メールアドレスの形式チェックなど一般的なバリデーションは内蔵されている。
カスタムバリデーションも容易で、独自コンポーネントとの連携も signal ベースで統一されるため、ControlValueAccessor を実装する必要もない。

API はまだ実験扱いだが、今後の Angular におけるフォーム管理の基盤となる方向性が示されたと言える。

Angular Aria：アクセシビリティを核にした UI コンポーネント

Angular Aria は、アクセシビリティを主軸に設計されたヘッドレス UI コンポーネント群で、今回 Developer Preview として登場した。
スタイルは付与されておらず、開発者が自由にデザインできる点が特徴である。

用意されている UI パターンは次の8種類。

Accordion
Combobox
Grid
Listbox
Menu
Tabs
Toolbar
Tree

複数階層を持つメニューなど、複雑な UI も構築でき、Signal ベースの仕組みと最新の Angular ディレクティブが内部に採用されている。

インストールは以下のとおり簡単だ。

npm i @angular/aria

Angular Aria、Angular CDK、Angular Material の三つが補完し合う構成になり、開発者は用途に応じて適切なレイヤーを選択できるようになった。

MCP Server：AI エージェントとの連携強化

Angular CLI には AI エージェント向けのバックエンドとして MCP Server が統合されているが、v21 でこれが安定版となった。
LLM が Angular プロジェクトを理解し、操作するためのツール群が整備されている点が特徴だ。

提供される主なツールには以下のようなものがある。

get_best_practices：最新のベストプラクティスを取得
list_projects：ワークスペース内の Angular プロジェクト一覧
search_documentation：公式ドキュメントの検索
find_examples：最新のコード例（Signal Forms や Angular Aria を含む）
onpush_zoneless_migration：OnPush + Zoneless への移行計画生成
modernize（実験）：既存コードのモダナイズ支援
ai_tutor：AI を用いた対話型学習ガイド

Signal Forms や Angular Aria といった公開直後の機能も AI エージェントが把握できる点は注目に値する。

Vitest がデフォルトテストランナーに

v21 では、テスト環境が大きく刷新された。
長らく Angular アプリケーションの標準として採用されてきた Karma はすでに非推奨となっており、その代わりに Vitest がデフォルトのテストランナーとして採用された。

Angular プロジェクトで ng test を実行すると、Vitest が標準で走る。

既存プロジェクトの移行には以下のスキーマティクスが用意されている。

ng g @schematics/angular:refactor-jasmine-vitest

Vitest の採用により、モダンブラウザ環境との整合性、実行速度、エコシステムとの相性が大きく改善されることになる。

Zoneless への完全移行

Signals に基づく新しい変化検知モデルの浸透により、Angular は zone.js をデフォルトで含めない構成へ移行した。
これは v18 から続いてきた段階的な zoneless 化の最終段階に位置づけられる。

Google 内部ではすでに zoneless の採用が進んでおり、2024 年時点で新規 Angular アプリの半数以上が zoneless を選択していたという。
公開されている Angular アプリでも 1400 を超えるプロジェクトが zoneless を利用している。

ゾーンレス化により、Core Web Vitals の改善、async/await の扱いやすさ、バンドルサイズ削減、デバッグの容易化といった効果が期待できる。
既存アプリの移行には専用ガイドや MCP Server の移行ツールが用意されている。

ドキュメントの刷新

angular.dev の内容が大規模に更新され、最新 API と開発パターンに即したガイドが整備された。
ルーティング、依存性注入、Angular Material へのテーマ適用、Tailwind CSS 連携など、主要分野の文書が書き直されている。

加えて、AI 時代の開発に特化したポータル angular.dev/ai が公開され、プロンプト例やコード生成のベストプラクティスも提供されるようになった。

まとめ

Angular v21 は、Signal ベースのフォーム、アクセシブルな UI コンポーネント、AI エージェント向けの MCP 拡張、Vitest の標準化、ゾーンレス化など、多方面で大規模な進化を遂げたリリースである。
モダン Angular が目指す方向性が明確に示されたアップデートといえるだろう。

詳細は公式のリリースノートを参照していただきたい。