JavaScriptフレームワーク「Angular」新バージョン4の変更点と今後の展望

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

　本連載では、Webアプリケーションフレームワーク「Angular」の活用方法をサンプルとともに紹介しています。前回は、Angularが提供するアニメーション機能について解説しました。今回は、2017年3月にリリースされたAngularバージョン4の変更点や新機能と、今後のバージョンアップの見通しを紹介します。

はじめに

　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と、クロージャへの対応が、試験的な実装として追加されました。