進化を続けるJavaScriptフレームワーク「Angular」バージョン5の変更点

次世代Webアプリケーションフレームワーク「Angular」の活用 第11回

　本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。Angularは2017年11月にメジャーアップデートを受けてバージョン5になりました。本記事では、バージョン5の変更点や新機能を紹介します。

はじめに

　AngularはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降アップデートが続いています。

　Angularは、2017年3月のバージョン4に続き、同11月にバージョン5がリリースされました。バージョン5では、Angularを「より小さく、速く、使いやすく」するための改善が行われました。

図1　Angular 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を指定できます。

リスト1　コンポーネントにpreserveWhitespacesオプションを指定

@Component({
  preserveWhitespaces: false,
（略）
})

　プロジェクト全体に対して指定するには、TypeScript設定ファイルtsconfig.jsonに、リスト2の通り指定します。なお、コンポーネントとプロジェクト全体の両方に指定された場合は、コンポーネントの設定が優先されます。

リスト2　プロジェクト全体にpreserveWhitespacesオプションを指定

{
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
（略）
}

Zoneの速度改善とバイパス機能

　Angularで変更検知などに利用しているZone（zone.js）の実行速度が改善しました。速度がさらに必要な場合は、Zone自体をバイパスできるようになりましたが、無効化すると変更検知が動作しなくなります。

Injectorの変更

　Angularが依存性注入に利用しているInjectorが、依存関係を動的に解析するReflectiveInjectorから、依存関係を明示的に指定するStaticInjectorに置き換えられました。動的解析がない分、実行速度が向上しています。

　次章からは、速度やサイズ以外の面で改良されたAngular 5の変更点について、サンプルとともに説明します。