Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5