Angular v20がリリース — Signals APIが安定化、サーバーサイドレンダリング強化など改善点多数

5月29日、Angular Blog - Mediumで「Angular v20の発表 (Announcing Angular v20)」と題した記事が公開された。この記事では、Angular v20の新機能と開発者体験の改善点について詳しく紹介されている。以下に、その内容を簡潔にまとめて紹介する。

v20 の概要とハイライト

effect・linkedSignal・toSignal などリアクティビティ関連 API を安定版へ昇格
インクリメンタルハイドレーションとルート単位レンダリングモード設定を安定版へ
Zoneless 検出を Developer Preview に更新し、SSR 例外処理を強化
Chrome DevTools に Angular 専用パフォーマンストラックを統合
resource / httpResource など非同期・ストリーミング API を実験的に公開
NgIf・NgFor・NgSwitch を非推奨とし、内蔵制御フローへの移行を宣言
公式マスコットの RFC を開始し、コミュニティ参加を促進

リアクティビティ機能を安定版へ昇格

Angular v16 で導入した Signals の採用が広がり、v20 では signal・computed・input・view queries に続き、effect・linkedSignal・toSignal も安定版となった。

const count = signal(0);
const doubled = computed(() => count() * 2);
effect(() => console.log(doubled()));

YouTube は Signals を用いて Living Room アプリの入力遅延を 35 % 改善した事例を公表しており、TC39 でも Signals の標準化調査が進んでいる。

新しい実験的 API ― `resource` と `httpResource`

v19 で導入された resource API が拡張され、ストリーミング対応と HTTP 要求向け httpResource が追加された。

// ユーザー ID が変わるたびに GET する例
const userId = signal(1);
const userResource = httpResource<User>(() =>
  `https://example.com/v1/users/${userId()}`
);

両 API はシグナルベースで非同期結果や isLoading 状態を管理でき、GenAI を利用するアプリのデータ取得にも応用できる。

Zoneless を Developer Preview に

provideZonelessChangeDetection() と provideBrowserGlobalErrorListeners() を追加すれば、Zone.js なしで変更検出と例外捕捉を行える。SSR では unhandledRejection / uncaughtException を防ぎ、クライアント側は angular.json から Zone.js を除去するだけで移行できる。

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(),
    provideBrowserGlobalErrorListeners()
  ]
});

サーバー機能の強化

インクリメンタルハイドレーション

provideClientHydration(withIncrementalHydration());
@defer (hydrate on viewport) { <shopping-cart/> }

ページ内の必要部分のみ段階的にハイドレートし、初期ロードを高速化する。

ルート単位レンダリングモード

export const routeConfig: ServerRoute = [
  { path: '/login',      mode: RenderMode.Server },
  { path: '/dashboard',  mode: RenderMode.Client },
  { path: '/product/:id',mode: RenderMode.Prerender, /* … */ }
];

SSR・CSR・プリレンダーをルートごとに選択できる。

開発者体験 (DX) の磨き込み

Chrome DevTools 連携

ng.enableProfiling() を実行すると、Performance パネルに Angular のライフサイクルが色分け表示され、フレームワーク内外のコールを一望できる。

`createComponent` の拡張

createComponent(MyDialog, {
  bindings: [
    inputBinding('canClose', canClose),
    outputBinding('onClose', r => console.log(r)),
    twoWayBinding('title', title),
  ],
  directives: [
    FocusTrap,
    { type: HasColor, bindings:[inputBinding('color', () => 'red')] }
  ]
});

動的生成時に入力・出力・双方向バインディングとディレクティブ適用を一括指定できる。

テンプレート式の拡張

べき乗 ** と in 演算子に対応
タグなしテンプレートリテラルをサポート

{{ n ** 2 }}  <!-- べき乗 -->
{{ 'name' in person }}  <!-- プロパティ存在確認 -->
<div [class]=\"`layout col-${colWidth}`\"></div>

型安全ホストバインディング

host オブジェクトの式に型チェックを追加し、@HostBinding より安全で簡潔になった。

スタイルガイド刷新

ファイル名／クラス名のサフィックス生成をデフォルトで無効化し、記述量を削減。NgModule 依存のガイドを整理し、最新構成に合わせたベストプラクティスへ更新した。

公式マスコット RFC

Dart や Firebase のマスコットを手掛けたデザイナーと協力し、Angular らしさを表現する公式マスコット案を公開。コミュニティは RFC で投票や提案を行える。

未来へ

v20 ではリアクティビティ、ゾーンレス、SSR、フォーム API など過去数年の大型プロジェクトを磨き上げた。今後は selectorless コンポーネント、signal-forms、ユニットテストランナーなどを計画しており、v22 での構造ディレクティブ削除に備えて内蔵制御フローへの移行が推奨される。

詳細は[Announcing Angular v20」を参照していただきたい。