3月6日、Angular 19.2 がリリースされた。Angular 19.2での改善点としては、新たに追加・改善された非同期リアクティビティに関するAPIやテンプレートまわりの機能などが挙げられる。

以下に、その内容を簡潔にまとめて紹介する。

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

Angular 19.2では、新しいAPIや実験的機能が導入された。特に注目すべきは、非同期リアクティビティへの拡張である。

リソースAPIの拡張と非同期リアクティビティ

Angular v19では、シグナルを用いた同期的な状態管理に加え、非同期のデータソースを扱うためのリソースAPIが実験的に導入されていた。これに続き、v19.2では新たにhttpResourceとrxResourceという2つのAPIが加わり、シグナルの利便性を非同期処理にも活用できるようになった。

httpResource: シグナルを活用したHTTP通信

シグナルの値に応じてHTTP通信を自動的にトリガーするhttpResourceが提供された。AngularのHttpClientを内部的に呼び出しており、インターセプターなどの機能も利用できるのが特徴である。下記は、その利用例である。

// returns a signal
currentUserId = getCurrentUserId();
// A reactive function as argument
user = httpResource(() => `/api/user/${currentUserId()}`);

currentUserIdというシグナルが変化すると、httpResourceによって自動的に新しいHTTPリクエストが発行されるしくみだ。

rxResource: ストリーミングデータの受け取り

rxResourceは複数の値をストリームとして受け取ることができる。下記の例では、BehaviorSubjectとsetIntervalによって定期的に値を生成し、その変化をrxResourceでストリームとして取得している。

/*
component.ts
BehaviorSubjectとsetIntervalを用いて、1000msごとに新しい値を生成するストリームを構築
*/
readonly subject = new BehaviorSubject<number>(1);
readonly intervalId = setInterval(() => {
  this.subject.next(this.subject.value + 1);
}, 1000);

/* rxResourceは新しい値が到着するたびにそれらをストリームする */
readonly resource = rxResource({
  loader: () => this.subject,
});

/*
component.html
rxResourceから返る最新の値を表示する
*/
<section>
  <p>{{ resource.value() }}</p>
</section>

非同期のレスポンスを連続的に受け取る場面や、ストリームのように複数回にわたって値が更新される状況で特に役立つAPIである。これらの新しいAPIは開発途上のため、リソースAPIに関するRFCでコミュニティからの意見を募集している。

テンプレート記述の利便性向上

テンプレートリテラルを使用して文字列を簡単に結合したり、シングルクォートやダブルクォートをエスケープしたりできる機能が拡張された。例えば、下記の例のようにテンプレート内でよりスムーズにシグナルの値を利用できる。

<div [class]="`layout col-${colWidth}`"></div>

自己クローズタグへの変換が可能になるマイグレーション

Angularのテンプレートで、コンポーネントタグに子要素やコンテンツが存在しない場合、自己クローズタグ（例：<my-component />）を使うことでHTMLをより簡潔に記述できるようになる。今までも手動で自己クローズタグを書いている開発者はいたが、v19.2では公式にこれをサポートするマイグレーションが登場した。

• 可読性の向上
  余計な閉じタグを省略し、不要な行数を減らすことでコードの見通しが良くなる効果がある。
• 一括変換が容易
  マイグレーションコマンドを実行することで、一度に複数のテンプレートを変換できるため、手作業でタグを置き換える必要がない。
• HTMLバリデーションとの相性
  一部のHTMLツールやフォーマッターで、自己クローズタグの方が好まれるケースもある。プロジェクトで使用している開発ツールによっては、コードの整合性を保ちやすくなる利点がある。

Set型をフォームでサポートする機能

Angularのフォーム（Reactive FormsやTemplate-driven Forms）では、主に配列型やオブジェクト型を扱うことが多かった。しかし、新たにSet型のデータ構造をフォームコントロールとして扱いやすくなる機能がv19.2で導入された。

• API連携時の利便性
  サーバーサイドや他のライブラリがSet構造を前提としている場合、変換の手間を減らし、コードをシンプルに保つことができる。
• 型安全性の向上
  TypeScriptの型システムの恩恵を受けながら、Setをフォーム全体の中で安全に取り扱えるようになった。

skip hydration diagnostic

Angularにはサーバーサイドレンダリング（SSR）との組み合わせで、クライアント側のハイドレーション機能が存在する。ハイドレーションとは、SSRで生成したHTMLをクライアントのアプリケーションと同期させるプロセスのことだ。v19.2では、このハイドレーションをスキップするかどうかを診断するための機能（skip hydration diagnostic）が追加された。

• SSR後の状態確認
  クライアント側でSSR済みのDOMを読み込む際、ハイドレーション対象外とすべき要素を見極める手がかりとして機能する。
• パフォーマンスの最適化
  不要なハイドレーションを回避することで、レンダリングのオーバーヘッドを抑制し、アプリケーションのパフォーマンスを向上させることが可能になる。
• デバッグやトラブルシュートに有用
  SSRとクライアントの状態が整合しない場合の原因を特定しやすくなり、トラブルシュートの時間を短縮できる。

詳細はAngular 19.2 Is Now Availableを参照していただきたい。