Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

改良の継続と次世代への進化に注目! 「Angular」バージョン8の新機能

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

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

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はAngularのUIコンポーネントであるAngular Materialを紹介しました。今回は2019年5月にリリースされたAngularのバージョン8について、変更点や新機能を紹介していきます。

目次

はじめに

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

 2018年5月のバージョン6、10月のバージョン7に続いて、2019年5月にAngularのバージョン8がリリースされました。CLIツールの機能追加、速度向上やサイズ削減などについて、引き続き改良が行われた一方、新しいレンダリングエンジン「Ivy」やビルドツール「Bazel」への対応といった、次世代を見据えた機能も導入されています。

図1:バージョン8のリリースを告知する公式ブログ記事
図1:バージョン8のリリースを告知する公式ブログ記事

 本記事では、Angularのバージョン8(以下「Angular 8」)について、主要な変更点や新機能をサンプルとともに説明していきます。

対象読者

  • 常にAngularの最新動向を把握しておきたい方
  • 既存のAngularソースコードを最新版に追従する必要がある方
  • 次世代のAngular技術をいち早く体験したい方

必要な環境

 Angularの開発では、一般にTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)が利用されます。本記事のサンプルコードもTypeScriptで記述しています。

 今回は以下の環境で動作を確認しています。 

  • Windows 10 64bit版 
    • Angular 8.1.0
    • Angular CLI 8.1.0
    • Node.js v10.16.0 64bit版
    • Microsoft Edge 44.18362.1.0

 Bazel対応については、以下の環境で動作を確認しています。

  • Visual C++ Redistributable for Visual Studio 2015 x64 14.0.23026
  • MSYS2 x86_64-20190524
  • Bazel 0.27.1 x86_64

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリをダウンロード後、「ng serve --open」コマンドを実行します。--openは、ブラウザーを自動的に起動するオプションです。

プロジェクトをAngular 8対応にアップデートする方法

 既存のAngularプロジェクトをAngular 8対応にアップデートするには、リスト1のコマンドを実行します。

[リスト1]プロジェクトをAngular 8へアップデートするコマンド
ng update @angular/cli @angular/core

 プロジェクトによっては追加の手順が必要になる場合があります。詳細は「Angular Update Guide」で確認できます。

バンドルの差分ロード

 Angular 8では、ECMAScript 2015に対応した新しいブラウザー(いわゆるモダンブラウザー)と、それ以前の古いブラウザーで、読み込むファイル(バンドル)を切り替える「差分ロード」(Differential Loading)に対応しました。モダンブラウザー用のファイルは、新しいAPIを利用することで実装がシンプルになり、Polyfill(互換性を確保するコード)も少なく済むため、ファイルサイズを削減できます。

 Angularのプロジェクトで、tsconfig.jsonの「target」が「es2015」に設定されている場合に、差分ロードが有効になります。Angular 8のAngular CLIで新規に生成したプロジェクトや、リスト1のコマンドでAngular 8にアップデートしたプロジェクトでは、デフォルトで差分ロードが有効になります。

図2:差分ロードを有効にする設定(p001-default/tsconfig.json)
図2:差分ロードを有効にする設定(p001-default/tsconfig.json)

 差分ロードが有効なプロジェクトでビルドを実行すると、モダンブラウザー用と古いブラウザー用のファイルが生成され、ブラウザーによってどちらかのファイルが読み込まれるようになります。

 例えば、Angular CLIで生成した直後のプロジェクト(p001-default)で、正式リリース用のビルドを行う「ng build --prod」コマンドを実行すると、図3のファイルが生成されます。ファイル名に「es2015」を含むファイルがモダンブラウザー用、「es5」を含むファイルが古いブラウザー用のファイルです。モダンブラウザー用のファイルは、古いブラウザー用のファイルと比較して、ファイルサイズが削減されていることがわかります。

図3:差分ロードによってビルド時に生成されるファイル(p001-default)
図3:差分ロードによってビルド時に生成されるファイル(p001-default)

 公式ドキュメントでは、差分ロードによって、モダンブラウザーでのファイルサイズが7~20%削減されるとしています。


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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