Angular 16の新機能
以下では、Angular 16の主要な新機能や変更点を紹介していきます。
リアクティブなデータをシンプルに記述できるSignal
Angularではリアクティブなデータの記述にRxJSを利用してきましたが、Angular 16では、リアクティブなデータをよりシンプルに記述できる「Signal」が、開発者プレビューとして導入されました。図7のサンプルでは、ボタン押下ごとにSignal変数の値が1増加し、連動して他のSignalやObservableの値も変更されます。
図7 SignalとObservableを相互変換して利用するサンプル（p006-signal）
図7のサンプルのコンポーネントは、リスト14の通り実装されています。
export class AppComponent {
// Signalの例 ...（1）
count = signal(0);
doubleCount = computed(() => this.count() * 2);
// ボタンクリック時の処理
onClick() {
// Signalの値を更新 ...（2）
this.count.set(this.count() + 1);
}
// SignalからObservableに変換 ...（3）
countObservable$ = toObservable(this.count);
// ObservableからSignalに変換 ...（4）
count2 = toSignal(this.countObservable$);
}
（1）で、初期値0を持つSignal変数countと、それを2倍したSignal変数doubleCountを定義しています。doubleCountは、その時点のcountの値に対して常に2倍になります。ボタンクリック時には、（2）の処理により、countの値に1を加えます。またSignalは（3）、（4）の通り、Observableとの相互変換をサポートしています。リスト14で定義したSignalやObservableを参照するテンプレートの実装はサンプルコードを参照してください。
今後Signalを利用して、Angular本体をよりシンプルに改善する開発が進められる見込みです。
サーバーサイドレンダリング（SSR）時の非破壊ハイドレーションをサポート
ハイドレーション（hydration）とは、サーバーサイドで生成した静的なWebページから、画面の操作を受け付ける動的なWebページに表示を更新する処理を指します。AngularのSSRライブラリーAngular Universalでは、SSRのWebページを表示する際、サーバーサイドで生成した静的なWebページのDOMノードをいったんすべて削除し、JavaScriptの処理でDOMノードを再生成する処理を行っていましたが、Angular 16では静的なWebページのDOMノードを生かしつつ、それにイベントなど動的な要素を付加する非破壊ハイドレーション（non-destructive hydration）を開発者プレビューとしてサポートしました。
非破壊ハイドレーションを有効にするには、「ng add @nguniversal/express-engine」コマンドを実行してAngular Universalを導入後、Webアプリ起動時のオプションにリスト15の通りprovideClientHydration()を追加します。
export const appConfig: ApplicationConfig = {
providers: [
provideClientHydration() // 非破壊ハイドレーションの設定
]
};
SSRのプロジェクトを実行するには「npm run dev:ssr」コマンドを実行します。実行時、コンソールログにハイドレーションされたコンポーネントやノード数が出力されます。
将来的には一部のコンポーネントを後でハイドレーションする（部分ハイドレーション）といった、より高度な処理をサポートする計画です。
コンポーネントの必須入力指定
開発者にとって便利な新機能の一つとして、コンポーネントの必須入力指定を紹介します。リスト16の通り、@Inputにrequired: trueと設定することで、その入力項目を必須にできるようになりました。
export class SubComponent {
@Input({required: true}) name = ''; // 必須
@Input() price = ''; // 非必須
}
リスト16ではnameが必須なので、図9の通り、nameが指定されていないコンポーネント記述はエラーとなり実行できません。
まとめ
本記事では、2022年11月にリリースされたAngular 15と、2023年5月にリリースされたAngular 16について、変更点や追加機能を説明しました。スタンドアロンコンポーネントやSignalなどにより、開発者がより容易にAngularに取り組めるようになります。
