Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

進化を続けるJavaScriptフレームワーク「Angular」バージョン5の変更点

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

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

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。Angularは2017年11月にメジャーアップデートを受けてバージョン5になりました。本記事では、バージョン5の変更点や新機能を紹介します。

目次

はじめに

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

 Angularは、2017年3月のバージョン4に続き、同11月にバージョン5がリリースされました。バージョン5では、Angularを「より小さく、速く、使いやすく」するための改善が行われました。

図1 Angular 5のアップデートを案内するブログ記事(Angular公式ブログより)
図1 Angular 5のアップデートを案内するブログ記事(Angular公式ブログより)

 本記事では、Angularのバージョン5(以下、Angular 5)の変更された点や新機能を、サンプルとともに説明していきます。

対象読者

  • Angularをより深く使いこなしていきたい方
  • Angularの新しい機能や変更点を確認したい方
  • 今後のAngularの動向を知りたい方

必要な環境

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

 本記事のサンプルコードは、AngularのコマンドラインツールAngular CLIで作成したプロジェクトをもとに作成します。Angular CLIやAngularアプリの動作にはNode.jsが必要です。

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

  • Windows 10 64bit版
    • Angular 5.2
    • Node.js v8.9.4 64bit版
    • Angular CLI 1.6.8
    • Microsoft Edge 41.16299.15.0

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --aot --open」コマンドを実行します。「--aot」は、実行前にスクリプトの変換処理をまとめて行うオプションで、詳細は後述します。「--open」は、ブラウザーを自動的に起動するオプションです。

 なお、サンプルコードでは、Webページの表示を整えるためにBootstrap(4.0.0)を使用しています。

Angularを「より小さく、速く」する変更点

 Angular 5では、アプリのサイズを小さく、動作を速くするため、以下の変更が行われました。

Build Optimizer

 Angularアプリをリリースビルドするときに、実装の不要な部分や、実行時に使われないデコレーターを削除するといった最適化が行われるようになりました。

AOTの処理を高速化

 Angularアプリの実行では、実行時にスクリプトの変換処理を随時行うJIT(Just-in-Time)と、実行前にまとめて変換するAOT(Ahead-of-Time)が選択できますが、Angular 5ではAOTの処理が高速化されました。AOTでアプリを実行するには、「ng serve --aot」のように、実行コマンドに「--aot」オプションをつけます。将来的には開発時も常にAOTで実行できるまでに高速化し、AOTをデフォルトとすることが見込まれています。

テンプレートの空白などを残すかどうかを指定するオプション

 Angularのテンプレートでは、空白、タブ、改行文字がそのまま残っていましたが、Angular 5ではこれらを残すかどうかを指定するpreserveWhitespacesオプションが導入されました。現状のデフォルトはtrue(残す)ですが、falseを指定すると空白などを削除してアプリサイズを減らせます。将来的にはデフォルトがfalseになる見込みです。

 コンポーネントの@Componentデコレーターでリスト1の通り指定すると、コンポーネント単位でpreserveWhitespacesを指定できます。

リスト1 コンポーネントにpreserveWhitespacesオプションを指定
@Component({
  preserveWhitespaces: false,
(略)
})

 プロジェクト全体に対して指定するには、TypeScript設定ファイルtsconfig.jsonに、リスト2の通り指定します。なお、コンポーネントとプロジェクト全体の両方に指定された場合は、コンポーネントの設定が優先されます。

リスト2 プロジェクト全体にpreserveWhitespacesオプションを指定
{
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
(略)
}

Zoneの速度改善とバイパス機能

 Angularで変更検知などに利用しているZone(zone.js)の実行速度が改善しました。速度がさらに必要な場合は、Zone自体をバイパスできるようになりましたが、無効化すると変更検知が動作しなくなります。

Injectorの変更

 Angularが依存性注入に利用しているInjectorが、依存関係を動的に解析するReflectiveInjectorから、依存関係を明示的に指定するStaticInjectorに置き換えられました。動的解析がない分、実行速度が向上しています。

 次章からは、速度やサイズ以外の面で改良されたAngular 5の変更点について、サンプルとともに説明します。


  • 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-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5