Angular 19.2 の新機能と変更点

Angular 19.2 がリリースされました！このアップデートでは、新しい Resource API の改良やテンプレートの改善、フォームでの Set 型サポートなど、多くの機能強化が行われています。本記事では、その詳細をわかりやすく解説します。

🚀 主な変更点

1. 非同期リアクティビティの拡張
   • httpResource API の導入
   • rxResource API によるストリーミングサポート
2. テンプレート構文の改善
   • タグなしテンプレートリテラル (``) のサポート
3. その他の改善
   • フォームで Set 型が使用可能に
   • 自己終了タグの変換マイグレーション追加
   • スキップハイドレーション診断の追加

🆕 非同期リアクティビティの拡張

Angular 19.2 では、シグナルと非同期データの統合を強化する httpResource と rxResource が導入されました。

1️⃣ httpResource API

• httpResource は、シグナルを通じて HTTP リクエストを リアクティブ に実行できる API です。
• 例えば、以下のように currentUserId の変更に応じて API コールを行えます。

currentUserId = getCurrentUserId();
user = httpResource(() => `/api/user/${currentUserId()}`);

このコードでは、currentUserId の値が変わるたびに、新しいリクエストが自動的に発行されます。

2️⃣ rxResource API

• rxResource は 非同期データのストリーミング をサポートし、リアクティブなデータフローを簡単に扱えます。
• 以下の例では、1秒ごとに値を更新する BehaviorSubject を rxResource でリアクティブに処理します。

readonly subject = new BehaviorSubject<number>(1);
readonly intervalId = setInterval(() => {
  this.subject.next(this.subject.value + 1);
}, 1000);

readonly resource = rxResource({
  loader: () => this.subject,
});

テンプレートで {{ resource.value() }} を使用すると、リアルタイムに値が更新される UI を作成できます。

🎨 テンプレートの改善

✅ タグなしテンプレートリテラルのサポート

Angular のテンプレートで バッククォート (``) を使用できるようになりました。

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

これにより、クラス名などを動的に設定する際に、より直感的な記述が可能になります。

✅ その他の改善

• フォームで Set 型のサポート
  • Set を使用したフォームのバリデーションやデータ管理が容易に。
• 自己終了タグの変換マイグレーション
  • <img> などの自己終了タグを自動的に変換するツールが追加。
• スキップハイドレーション診断の追加
  • サーバーサイドレンダリング（SSR）での診断が向上。

📌 アップグレード方法

Angular 19.2 にアップデートするには、以下のコマンドを実行してください。

ng update @angular/core @angular/cli

アップデート後、httpResource や rxResource などの新機能を活用できます。

🎉 まとめ

Angular 19.2 は 非同期処理の強化 や テンプレートの使いやすさ向上 など、開発体験を大幅に改善するアップデートです。ぜひ試してみてください！

📖 詳細はこちら: Angular 公式ブログ