Angular 19の新機能と変更点をまとめ。Signalsの強化！（Linked signal・リソースAPI）
- 投稿日:2024.12.18 最終更新日:2024.12.18
- Angular
2024年11月19日にAngularのバージョン19がリリースされた。
この記事では、Angular19のおもなアップデート内容をAngular開発者向けに紹介したい。
Angular 17・18に引き続き今回も開発者にとってインパクトの大きい変更点が多く含まれている。
今回、特筆すべきなのはSignalに関するアップデートで、ユーザからのフィードバックというかたちで多くのアップデートが追加されている。
Angular 19のアナウンス記事（英語）
https://blog.angular.dev/meet-angular-v19-7b29dfd05b84
Angular 19のおもなアップデート内容
今回のアップデートは数が多く重要なものが多いので、どの機能にフォーカスすべきか迷ったがすべてのAngular開発者が変更点をピックアップした。
- スタンドアローンコンポーネントのデフォルト化
- injectベースのディペンデンシー・インジェクション
- Signalsの安定版リリース（+オートリファクタリングツール）
- LinkedSignalの導入
- リソースAPIの導入
- テンプレートローカル変数
Angular 18のアップデート内容を知りたい人はこちらの記事を読んでほしい。
Angular 17についてはこちらの記事を読んでほしい。
スタンドアローンコンポーネントのデフォルト化
従来のモジュール型のコンポーネントに追加される形でAngular 14から導入されたスタンドアローンコンポーネント。
プロジェクトによっては既にスタンドアローンに置き換えられていると思うが、Angular19ではスタンドアローンがデフォルト値となった。
standalone: trueAngular 19のプロジェクトでは、コンポーネントをスタンドアローンにする際、@Componentセッティングにて”standalone”プロパティを設定する必要が無い。
逆にコンポーネントをモジュール型のコンポーネントに指定する場合は「standalone: false」を設定する必要がある。
Angular 19のプロジェクトで「ng update」を実行すれば、自動でモジュールのプロパティはアップデートされる。
injectベースのディペンデンシー・インジェクション
今回のアップデートにて推奨されるディペンデンシー・インジェクションの方法が、従来のコンストラクタ・ベースからinjectionベースへと変更となった。
コンストラクタベースのディペンデンシー・インジェクション
constructor(private productService: ProductService) {}injectionベースのディペンデンシー・インジェクション
private productService = inject(ProductService);Signalsの安定版リリース（+オートリファクタリングツール）
今回のアップデートでは、Angular 16にてプレビュー版として導入された「Signals」が遂に安定版としてリリースされる。
それに伴い既に紹介されている「input-API」「output-API」「viewChild-API」なども安定版となる。
input-APIの例
title = input.required<string>();output-APIの例
userUpdate = output<User>();viewChild-APIの例
private userForm = viewChild.required<ElementRef<HTMLFormElement>>('form');オートリファクタリングツールを使用すれば自動で既存のコードをアップデートすることができる。
ng generate @angular/core:signalsもしくは以下の個別コマンドを使用する。
ng generate @angular/core:signal-input-migration
ng generate @angular/core:signal-queries-migration
ng generate @angular/core:output-migrationLinkedSignalの導入
AngularのSignalには今までにinput signal・writable signal・computed signalなどがあったが、今回のアップデートでは試験版としてlinked signalが追加になった。
LinkedSignalは基本的にcomputed signalに似ているが、coupted signalがsetやupdate関数を持たなったのに対して、linked signalはset関数を使って簡単に値を変更することができる。
options: Signal<QuestionAnswer[]> = getOptions();
selectedOption = linkedSignal(() => this.options()[0]);
changeOption(index: number) {
this.selectedOption.set(this.options()[index]);
}リソースAPIの導入
Signalsをより使いやすくするために新しく導入されたのがこの「リソースAPI」。
まだ、試験版だが個人的には今回のアップデートのハイライトともいってもいいくらい役に立ちそうなAPIとなっている。
リソースAPIは今までtoObservable・toSignalなどの補助関数を用いて複雑な記述が必要だったリソースの呼び出しおよびアップデートをシンプルに記述できるようにするAPI。
user = resource({
request: this.userId,
loader: async ({request: id}) => await userService.getUser(id),
});このAPIが登場するまでSignalsは同期処理を前提としたものであったが、今後は非同期処理にも対応できるようにSignalsは進化していくだろう。
テンプレートローカル変数
今回のアップデートでテンプレートにてローカル変数を使用できるようになった。
これはAngular開発者が長らく待ち望んだ機能で正直に言えばもっと早く実装してほしかった。
@let greeting = 'Hello ' + name.value;
@let user = user$ | async;
{{ greeting }}
{{ user.name }}
{{ user.email }}今まではテンプレートにて変数を定義したい場合「@if」または「ngIf」 を使用するしかなかった。しかし、ngIf・@ifは条件を定義する際に使用するオペレーターであり、予期せぬ挙動が起きないように扱いには気を付けなければならなかった。
Angular 19のその他のアップデート
その他のアップデートも簡単に紹介したい。
ホットモジュール・リプレイスメント
Angular 19では、スタイルシートに変更を加えた際に即座に画面プレビューに反映する「ホットモジュール・リプレイスメント（HMR）」をサポートしている。
この機能によりデザインを変更する際の作業スピードの向上が期待できる。
インクリメンタル・ハイドレーション
Angular 16以降、SSR（サーバーサイドレンダリング）を強化するアップデートが次々と発表されたが、今回はそれらの一連のアップデートを総括する形でインクリメンタル・ハイドレーションが導入された。
インクリメンタル・ハイドレーションでは、@defer構文を使ってテンプレートの一部にアノテーションを付け、特定のトリガーでそれらをロードしてハイドレーションするように指示することができる。