SHOEISHA iD

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

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

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

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

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

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

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

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

はじめに

 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の変更点について、サンプルとともに説明します。

次のページ
Pipesの国際化サポート

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

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

もっと読む

この記事の著者

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

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング