Angular 16の新機能
以下では、Angular 16の主要な新機能や変更点を紹介していきます。
リアクティブなデータをシンプルに記述できるSignal
Angularではリアクティブなデータの記述にRxJSを利用してきましたが、Angular 16では、リアクティブなデータをよりシンプルに記述できる「Signal」が、開発者プレビューとして導入されました。図7のサンプルでは、ボタン押下ごとにSignal変数の値が1増加し、連動して他のSignalやObservableの値も変更されます。
![図7 SignalとObservableを相互変換して利用するサンプル(p006-signal)](http://cz-cdn.shoeisha.jp/static/images/article/17782/007.gif)
図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」コマンドを実行します。実行時、コンソールログにハイドレーションされたコンポーネントやノード数が出力されます。
![図8 ハイドレーションの様子を出力するログ(p007-hydration)](http://cz-cdn.shoeisha.jp/static/images/article/17782/17782_08.png)
将来的には一部のコンポーネントを後でハイドレーションする(部分ハイドレーション)といった、より高度な処理をサポートする計画です。
コンポーネントの必須入力指定
開発者にとって便利な新機能の一つとして、コンポーネントの必須入力指定を紹介します。リスト16の通り、@Inputにrequired: trueと設定することで、その入力項目を必須にできるようになりました。
export class SubComponent { @Input({required: true}) name = ''; // 必須 @Input() price = ''; // 非必須 }
リスト16ではnameが必須なので、図9の通り、nameが指定されていないコンポーネント記述はエラーとなり実行できません。
![図9 必須入力項目が未指定でエラーになるコンポーネント(p008-required-param/src/app/app.component.html)](http://cz-cdn.shoeisha.jp/static/images/article/17782/17782_09.png)
まとめ
本記事では、2022年11月にリリースされたAngular 15と、2023年5月にリリースされたAngular 16について、変更点や追加機能を説明しました。スタンドアロンコンポーネントやSignalなどにより、開発者がより容易にAngularに取り組めるようになります。