次世代レンダリングエンジン「Ivy」がついに試せるように
Ivyは、Angularの次世代レンダリングエンジンです。Angular 8では、Ivyのプレビュー版を利用できるようになりました。
新規プロジェクトでIvyを有効にするには、プロジェクトを生成するng newコマンドの実行時に、リスト7の通り「--enable-ivy」オプションを付加します。
ng new p004-ivy --enable-ivy
既存のプロジェクトでIvyを有効にするには、tsconfig.app.jsonにリスト8の通り記述します。angularCompilerOptions項目で、enableIvyをtrueに設定します。
{
（略）
"angularCompilerOptions": {
"enableIvy": true // Ivy有効
}
}
また、IvyではAOTコンパイル（Ahead of Time、事前にコンパイルを実行する）が高速なので、angular.jsonファイルにリスト9の通り設定して、AOTコンパイルを有効にすることが推奨されています。
{
（略）
"projects": {
"p004-ivy": {
（略）
"architect": {
"build": {
（略）
"options": {
（略）
"aot": true, // AOTコンパイル有効
なお、Ivyを試す場合は、リスト10のコマンドでAngularを更新して、「next」とタグ付けされたAngularの最新バージョンを利用する必要があります。
ng update @angular/core --next
Ivyを有効にすると、リリース用のファイルをビルドする「ng build --prod」コマンドで生成したメインバンドルのサイズが、Ivy無効時より削減されます（図7）。
公式ブログのIvy紹介記事では、Ivyにはファイルサイズ削減のほかに、再コンパイルやテストの実行速度向上、HTMLテンプレートにブレークポイントを設定したデバッグなどのメリットがあるとしています。現在のIvyはプレビュー版で、互換性の確保や不具合修正などの開発が今後も続けられていきます。
GoogleのビルドツールBazelへの対応
Bazelは、Googleが自社製品のビルドに利用しているビルドツールです。実装の変更に関連したファイルだけを並列処理で高速にビルドできる特徴があります。
Angular 8では、従来ツールの代わりに、Bazelをビルドツールに利用できるプレビュー版機能が提供されました。AngularプロジェクトをBazelでビルドするには、BazelがPCにインストールされている必要があります。Bazelは、Windows、Mac、Linuxにインストールできます。公式ドキュメントを参照して、インストールを行ってください。
新規のプロジェクトでBazelを有効にするには、リスト11の通り実行してプロジェクトを生成します。（1）でシステム全体にBazelの対応機能をインストール後、（2）のng newコマンドで、「--collection=@angular/bazel」オプションを指定します。2回目以降のプロジェクト生成時は、（1）は必要ありません。
npm install -g @angular/bazel #...（1） ng new p005-bazel --collection=@angular/bazel #...（2）
既存のプロジェクトでBazelを有効にするには、リスト12の通りng addコマンドを実行します。
ng add @angular/bazel
Bazelを有効にしたプロジェクトで「ng build」コマンドを実行すると、AngularプロジェクトがBazelでビルドされ、結果ファイルがdist/bin/src/prodappフォルダーに生成されます。初回ビルド時はBazelがファイルをキャッシュするため、時間がかかります。2回目以降のビルドは差分ビルドになるため、比較的短時間で終了します。
AngularのBazel対応はプレビュー版で、今後も開発が続けられます。AngularのBazel対応についての詳細は、公式ブログ記事も参照してください。
そのほかの変更点
上記のほかに、Angular 8では以下の変更が行われました。
非推奨ガイドの更新
公式のAPIは、非推奨になってから2回のメジャーリリースまでは利用可能であることが保証されるようになりました。例えば、Angular 8で非推奨になったAPIは、Angular 9、10まで利用できます。
CLIの機能を拡張するAPI
「ng build」「ng test」といったAngular CLIコマンドの処理を入れ替える「Builder API」が提供されました。前述のBazel対応はこのAPIを利用しています。また、モジュールのインストール時などにAngularの設定ファイルangular.jsonを編集する「Workspace API」が提供されました。
まとめ
本記事では、2019年5月にリリースされたAngular 8の変更点や追加機能を説明しました。機能追加や速度向上／サイズ削減といった、以前から継続した変更の一方で、IvyやBazel対応といった、将来見込まれる大規模変更の準備が始まったリリースといえます。
次回は、CSSフレームワークBootstrapに準拠したUI部品をAngularに提供する「Angular Powered Bootstrap」を紹介します。
