はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。AngularJSと呼ばれていたバージョン1（AngularJS 1）から、バージョン2で大きく変更されて、以降はAngularと呼ばれています。バージョン2時点では「Angular 2」と呼ばれることもありましたが、現在はAngularが正式名称です。
Angularは2017年3月にバージョンアップされて、バージョン4になりました。Angularは今後、おおむね6カ月ごとのメジャーアップデート予定がアナウンスされています。本記事では、Angularのバージョン4で変更された点や新機能を、サンプルとともに説明していきます。また、今後のアップデート予定について解説します。
［補足］幻のバージョン3
Angularは、「Angular 2」と呼ばれていたバージョン2の次バージョンが今回紹介するバージョン4となり、バージョン3は存在しません。これは、Angularを構成するパッケージのうちルーター（@angular/router）のバージョンが、バージョン2の時点ですでに3.xとなっていたためです。今回バージョンアップで全パッケージのバージョンが4.xに統一されました。Angular公式ブログ記事も参照してください。
対象読者
- Angularをより深く使いこなしていきたい方
- 最新バージョンを常に追っていきたい方
- 今後のバージョンアップ予定を知っておきたい方
必要な環境
AngularはJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScript向けが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。また、サンプルの実行にはNode.jsが必要になります。
今回は以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Angular 4.0.1
- Angular 2.4.12（アップデート前）
- Node.js v6.10.2 64bit版
- Microsoft Edge 40.15063.0.0
公式サイトのガイドでは、GitHubからプロジェクトテンプレートをダウンロードして実装環境を作るよう案内されています。テンプレートを展開したフォルダで、Node.jsのコマンド「npm install」を実行して依存ライブラリをダウンロード後、「npm start」コマンドを実行すると、WebブラウザでWebページを表示できます。本記事のサンプルもこのテンプレートをもとに実装しています。
バージョン4の変更点
バージョン4の主な変更点が、Angular公式ブログ記事で案内されています。ここでは、変更点の概要を説明します。
より効率のよいコード生成
本連載のサンプルコードでは、Angularを開発モードで実行しています。この方法では、Webページの表示時に実行するコードをWebブラウザ上で動的に生成します。この方法をJIT（just-in-time）と呼びます。一方、実行速度向上のために、コードを事前に生成する、AOT（ahead-of-time）と呼ばれる方法も利用できます。
バージョン4では、AOTで生成されるコードが従来よりも効率化され、サイズも小さくなりました。なお、AOTについては本連載内で紹介する予定です。
アニメーションパッケージの分離
従来、Angularのアニメーション機能はコアパッケージ（@angular/core）に含まれていましたが、バージョン4からは別パッケージ（@angular/animations）に分離されました。アニメーション機能を利用しない場合に参照するパッケージサイズを減らせる一方、アニメーションを含むプロジェクトでは、パッケージ参照の記述を変更する必要があります。
*ngIf、*ngForディレクティブの機能追加
*ngIfディレクティブの属性指定で、条件に合致するとき、しないときに特定のテンプレートを表示するthen、else記述がサポートされました。また、属性指定でローカル変数を宣言できるようになりました。
サーバーサイドで実行するAngular Universal
Angularをサーバーサイドで実行するAngular Universalプロジェクトの成果物がマージされて、@angular/platform-serverに導入されました。Angular Universalの詳細については、公式サイトを参照してください。
TypeScriptサポート
Angularで利用しているTypeScriptのバージョンが上がり、TypeScript 2.1、2.2との互換性が確保されました。
テンプレートに対するソースマップの生成
テンプレートにエラーがある場合、エラー情報を含むテンプレートのソースマップが生成されるようになりました。
モジュールパッケージの最適化
フラット化されたECMAScriptモジュール（Flat ESM / FESM）が導入されました。これは、rollup.jsでモジュールをバンドルして、速度と効率の向上を目指したものです。また、ES2015形式のFlat ESMと、クロージャへの対応が、試験的な実装として追加されました。
