はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。
2018年5月のバージョン6、10月のバージョン7に続いて、2019年5月にAngularのバージョン8がリリースされました。CLIツールの機能追加、速度向上やサイズ削減などについて、引き続き改良が行われた一方、新しいレンダリングエンジン「Ivy」やビルドツール「Bazel」への対応といった、次世代を見据えた機能も導入されています。
本記事では、Angularのバージョン8（以下「Angular 8」）について、主要な変更点や新機能をサンプルとともに説明していきます。
対象読者
- 常にAngularの最新動向を把握しておきたい方
- 既存のAngularソースコードを最新版に追従する必要がある方
- 次世代のAngular技術をいち早く体験したい方
必要な環境
Angularの開発では、一般にTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）が利用されます。本記事のサンプルコードもTypeScriptで記述しています。
今回は以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Angular 8.1.0
- Angular CLI 8.1.0
- Node.js v10.16.0 64bit版
- Microsoft Edge 44.18362.1.0
Bazel対応については、以下の環境で動作を確認しています。
- Visual C++ Redistributable for Visual Studio 2015 x64 14.0.23026
- MSYS2 x86_64-20190524
- Bazel 0.27.1 x86_64
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリをダウンロード後、「ng serve --open」コマンドを実行します。--openは、ブラウザーを自動的に起動するオプションです。
プロジェクトをAngular 8対応にアップデートする方法
既存のAngularプロジェクトをAngular 8対応にアップデートするには、リスト1のコマンドを実行します。
ng update @angular/cli @angular/core
プロジェクトによっては追加の手順が必要になる場合があります。詳細は「Angular Update Guide」で確認できます。
バンドルの差分ロード
Angular 8では、ECMAScript 2015に対応した新しいブラウザー（いわゆるモダンブラウザー）と、それ以前の古いブラウザーで、読み込むファイル（バンドル）を切り替える「差分ロード」（Differential Loading）に対応しました。モダンブラウザー用のファイルは、新しいAPIを利用することで実装がシンプルになり、Polyfill（互換性を確保するコード）も少なく済むため、ファイルサイズを削減できます。
Angularのプロジェクトで、tsconfig.jsonの「target」が「es2015」に設定されている場合に、差分ロードが有効になります。Angular 8のAngular CLIで新規に生成したプロジェクトや、リスト1のコマンドでAngular 8にアップデートしたプロジェクトでは、デフォルトで差分ロードが有効になります。
差分ロードが有効なプロジェクトでビルドを実行すると、モダンブラウザー用と古いブラウザー用のファイルが生成され、ブラウザーによってどちらかのファイルが読み込まれるようになります。
例えば、Angular CLIで生成した直後のプロジェクト（p001-default）で、正式リリース用のビルドを行う「ng build --prod」コマンドを実行すると、図3のファイルが生成されます。ファイル名に「es2015」を含むファイルがモダンブラウザー用、「es5」を含むファイルが古いブラウザー用のファイルです。モダンブラウザー用のファイルは、古いブラウザー用のファイルと比較して、ファイルサイズが削減されていることがわかります。
公式ドキュメントでは、差分ロードによって、モダンブラウザーでのファイルサイズが7～20%削減されるとしています。
