はじめに
AngularはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降アップデートが続いています。
Angularは、2017年3月のバージョン4に続き、同11月にバージョン5がリリースされました。バージョン5では、Angularを「より小さく、速く、使いやすく」するための改善が行われました。
本記事では、Angularのバージョン5（以下、Angular 5）の変更された点や新機能を、サンプルとともに説明していきます。
対象読者
- Angularをより深く使いこなしていきたい方
- Angularの新しい機能や変更点を確認したい方
- 今後のAngularの動向を知りたい方
必要な環境
Angularの開発ではTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。
本記事のサンプルコードは、AngularのコマンドラインツールAngular CLIで作成したプロジェクトをもとに作成します。Angular CLIやAngularアプリの動作にはNode.jsが必要です。
今回は以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Angular 5.2
- Node.js v8.9.4 64bit版
- Angular CLI 1.6.8
- Microsoft Edge 41.16299.15.0
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --aot --open」コマンドを実行します。「--aot」は、実行前にスクリプトの変換処理をまとめて行うオプションで、詳細は後述します。「--open」は、ブラウザーを自動的に起動するオプションです。
なお、サンプルコードでは、Webページの表示を整えるためにBootstrap（4.0.0）を使用しています。
Angularを「より小さく、速く」する変更点
Angular 5では、アプリのサイズを小さく、動作を速くするため、以下の変更が行われました。
Build Optimizer
Angularアプリをリリースビルドするときに、実装の不要な部分や、実行時に使われないデコレーターを削除するといった最適化が行われるようになりました。
AOTの処理を高速化
Angularアプリの実行では、実行時にスクリプトの変換処理を随時行うJIT（Just-in-Time）と、実行前にまとめて変換するAOT（Ahead-of-Time）が選択できますが、Angular 5ではAOTの処理が高速化されました。AOTでアプリを実行するには、「ng serve --aot」のように、実行コマンドに「--aot」オプションをつけます。将来的には開発時も常にAOTで実行できるまでに高速化し、AOTをデフォルトとすることが見込まれています。
テンプレートの空白などを残すかどうかを指定するオプション
Angularのテンプレートでは、空白、タブ、改行文字がそのまま残っていましたが、Angular 5ではこれらを残すかどうかを指定するpreserveWhitespacesオプションが導入されました。現状のデフォルトはtrue（残す）ですが、falseを指定すると空白などを削除してアプリサイズを減らせます。将来的にはデフォルトがfalseになる見込みです。
コンポーネントの@Componentデコレーターでリスト1の通り指定すると、コンポーネント単位でpreserveWhitespacesを指定できます。
@Component({
preserveWhitespaces: false,
（略）
})
プロジェクト全体に対して指定するには、TypeScript設定ファイルtsconfig.jsonに、リスト2の通り指定します。なお、コンポーネントとプロジェクト全体の両方に指定された場合は、コンポーネントの設定が優先されます。
{
"angularCompilerOptions": {
"preserveWhitespaces": false
},
（略）
}
Zoneの速度改善とバイパス機能
Angularで変更検知などに利用しているZone（zone.js）の実行速度が改善しました。速度がさらに必要な場合は、Zone自体をバイパスできるようになりましたが、無効化すると変更検知が動作しなくなります。
Injectorの変更
Angularが依存性注入に利用しているInjectorが、依存関係を動的に解析するReflectiveInjectorから、依存関係を明示的に指定するStaticInjectorに置き換えられました。動的解析がない分、実行速度が向上しています。
次章からは、速度やサイズ以外の面で改良されたAngular 5の変更点について、サンプルとともに説明します。
