本セッションの登壇者
セッション動画
では、これからAngular最新動向ということで発表させていただきます。よろしくお願いします。
まず軽く自己紹介ですが、lacolacoと申します。このような活動をしています。
コミュニティではAngular日本ユーザー会というものをやっています。Xのアカウント（@ng_japan）やYouTubeチャンネル（@ng_japan）、Discordチャンネル、ウェブサイトもありますので、ぜひ参加してみてください。
また、YouTubeで毎月1回、その月のAngularのアップデートを追いかける放送をやっています。よろしくお願いします。
今日は最近1年間ぐらいのアップデートのまとめと、これから先、どう進んでいこうとしているのかというロードマップの話をします。Signals、サーバーサイドレンダリング、Angular.dev、そして新しいコンポーネントの書き方の4点に絞ってお話ししていきます。
データにリアクティビティをもたせるSignals
まずSignalsについてです。ちょうど1年前のバージョン16の時に試験的なAPIとして導入されて、半年前くらいのバージョン17で安定版になりました。
Signalsは、いわゆるリアクティブ・プログラミングを実現するための基本的なAPIです。スプレッドシートとかエクセルの関数のようなもので、あるデータを変更すると、それに対応して別のデータも変更されるものです。手続き的ではなく宣言的に、あるデータとあるデータの依存関係を記述していくAPIになっています。
たとえば、firstNameとlastNameという2つのシグナルを合わせたfullNameを宣言しておけば、ファーストネームが変わった時、あるいはラストネームが変わった時に自動的にフルネームが再計算されます。Angularのコンポーネントやアプリケーションの中で、こういったリアクティブなデータの扱いができるようになるのがSignalsです。
すでにステーブルなAPIになっていて、バージョン17で安定して使えます。実装は外部のライブラリに依存せず、軽量です。触ってみようと思う方はドキュメントを読んでみてください。
Signalsは最近、YouTubeモバイルの画面に使われています。
YouTubeモバイルは、Googleの社内フレームワークの「Wiz」を使用しているのですが、そちらにもSignalsが導入されていて、WizとAngularで同じコードベースを共有しています。
YouTubeのようなリッチなアプリケーションでも実用に耐え得るスペックを持つことが実証されたので、これからSignalsの利用がGoogle社内でも広がっていくと考えられます。
これについてはAngularのブログを読んでみてください。
ハイドレーションの進化と新しいドキュメンテーションサイト Angular.dev
次は、SSRとハイドレーションです。バージョン16、17の時点でAngularのサーバーサイドレンダリング機能に、非破壊的なハイドレーションを可能にする大きな改善変更が入りました。
今まではSSRで作ったDOM構造を一度破棄して、クライアントサイドでDOMを作り直していたのですが、今はDOMを再利用してその上でアプリケーションを起動するようになりました。
これを1行で実現可能にしたのがバージョン17時点でのアップデートです。
今はアプリケーションを作成する時にSSRを有効にすれば、自動的にセットアップされます。
Angular CLIを使っていれば、コマンド1つで自動的にSSRのセットアップが終わります。
また、ビルド時にプリレンダリングする機能も、この設定だけで自動的に導入されます。
今後は、パーシャルハイドレーションが実装される予定です。
通常のハイドレーションではSSRされたものを起動するとアプリケーション全体が起動されますが、パーシャルハイドレーションは必要な部分を必要な時に起動するものです。
たとえば、ユーザーがクリックした時に必要なコンポーネントだけをダウンロードして実行し、画面を更新できるので、パフォーマンスが大きく改善します。2024年内のリリースが予定されています。
続いてAngular.devです。今のドキュメンテーションサイトはAngular.ioですが、新しくAngular.devというドメインでドキュメンテーションサイトが作られています。次のバージョン18の時点で安定版になる予定で、昔のAngular.ioの方はクローズされます。Angular.dev自体がAngularで作られていて、デザインにこだわったウェブサイトが作れるというデモンストレーションやショーケースとして使われている感じです。
ちなみに今さらですが、バージョン17のタイミングでロゴがまったく変わっているので、新しいロゴを覚えていってください。
また、チュートリアルはブラウザ上で完結するようになっています。
コンポーネントの新たな「書き味」
最後はコンポーネントオーサリングということで、コンポーネントの書き方のスタイルが最近の1年間ぐらいで結構変わってきているので紹介します。
最初はコントロールフローです。if文、for文、switch文と、ビューにおいて条件分岐や繰り返しをする上で大きく変わっています。元々はおなじみのディレクティブという機能を使ったものだったんですが、構文レベルでNgIfが@if、NgForが@for、NgSwitchが@switchというように追加されています。メリットはドキュメンテーションを見てください。
もう1つ大きい書き方の変化は「Deferrable Views」、画面の一部だけを遅延して読み込む機能です。Angularのテンプレート上で@deferというブロックに囲うだけで、その部分のコンポーネントチャンクが別のバンドルに切り離されて遅延ロードできるようになりました。ユーザーのクリックや画面表示など、トリガーも柔軟に設定できて、非常に簡単に書けます。
また、これが一番最近変わってきているものですが、コンポーネント関連のAPIがどんどん関数ベースになってきています。
親のコンポーネントから子のコンポーネントにデータを渡す時、今までAngularでは@Input()というデコレーターを使って修飾したフィールドにデータを渡していたのですが、デコレーターを使わない関数ベースに変わっています。これは今、まだ試験的なAPIですが、SignalsのAPIと関連していて、これから安定版になっていきます。
アウトプットについても、子から親にデータを渡す時に、今の安定版では@Outputというデコレーターを使っているんですが、これもoutput()関数に置き換えられるようになっています。コードがかなり短くなりますし、扱いやすくなるので、Angularユーザーの中で歓迎されています。
まとめとしては、この1年間でAngularがかなり大きく変わってきているということです。ぜひ1回触って、今のAngularってこんな感じなんだというのを味わってみてください。また、5月のGoogle I/OでもAngularについての新情報が発表される予定なので、もう一度新しいAngularに出会っていただけるといいなと思います。ありがとうございました。
