SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

次のページ
プロジェクトをバージョン4に更新する方法

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10119 2017/04/27 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング