ツールが充実してさらに便利に！ 「Angular」バージョン6の新機能

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

　本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は、Angular CLIのコマンドで実行できる単体テストについて説明しました。今回は、2018年5月にリリースされたAngularの最新版バージョン6を取り上げて、変更点や新機能を紹介します。

はじめに

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

　2017年3月のバージョン4、同11月のバージョン5に続き、2018年5月にAngularの最新版となるバージョン6がリリースされました。バージョンでは、ツールや周辺ライブラリーを中心に、さまざまな改良が行われました。

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

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

対象読者

• Angularをより深く使いこなしていきたい方
• Angularの新しい機能や変更点を確認したい方
• できるだけツールに頼って楽をしたい方

必要な環境

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

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

• Windows 10 64bit版
  • Angular 6.0.2
  • Angular CLI 6.0.1
  • Node.js v8.11.2 64bit版
  • Microsoft Edge 42.17134.1.0

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

［補足］Angularと関連ツール・ライブラリーのバージョン番号統一

　従来、Angularのバージョン5.2に対応するAngular CLIがバージョン1.7.4といったように、バージョン番号が統一されていませんでしたが、今回のアップデートからAngularとAngular CLI、後述するAngular Material+CDKのメジャーバージョンが6に統一されました。マイナーバージョンは統一されず、プロジェクトごとに個別に増えていきます。

Angular CLIの改善

　Angularでは、Angularアプリの開発を支援するCLIツール「Angular CLI」が利用できます。以下では、Angular 6で追加された機能を紹介します。

パッケージを更新するupdateコマンド

　「ng update <パッケージ名>」コマンドは、指定したパッケージと依存パッケージを更新して、さらに必要となる修正をソースコードに適用します。例えば、「ng update @angular/cli」コマンドは、従来のプロジェクトをAngular 6から導入されたワークスペースに変換します（ワークスペースについては後述します）。

　Angular CLI自体を先にアップデートする必要があるため、まずシステム全体にインストールされたAngular CLIと、プロジェクトに含まれるAngular CLIを両方ともアップデートします（第12回を参照）。次に、リスト1のコマンドを実行します。

［リスト1］AngularアプリをAngular 6にアップデートするコマンド

ng update @angular/cli   # プロジェクトをワークスペースに変換 ...（1）
ng update @angular/core  # Angularをアップデート ...（2）
ng update                # ほかのライブラリーに更新がないか確認 ...（3）

　（1）は、Angular CLIをアップデートするコマンドです。実行時点でAngular CLI自体はすでに最新になっていますが、プロジェクトをワークスペースに変換するために実行します。（2）で、Angular本体と依存パッケージをアップデートします。（3）は、ほかにアップデートが必要なパッケージを確認するためのコマンドです。アップデートが必要なパッケージが表示されたら、必要に応じてng updateコマンドで更新します。

　Angular CLI 1.7.4で生成したAngular 5.2のAngularアプリを、リスト1のコマンドでAngular 6にアップデートすると、図2のようにパッケージのバージョンが更新されます。

図2　アップデート前（写真＝上）とアップデート後（写真＝下）のpackage.json

　アップデート前（P001-update）とアップデート後（P001-update_Angular6）のソースコードをサンプルに含めているので参考にしてください。

［補足］Angular Update Guideページで案内されるAngular CLIの更新方法

　Angularアプリのコードをアップデートする方法は、Angular Update Guideで案内されています。

図3　Angular Update GuideのWebページ

　WebページでAngularバージョンなどの条件を指定すると、アップデート方法を表示できます。

図4　Angular Update Guideで表示されるアップデート方法の例

　Angular Update Guideでは、Angular CLIを更新するリスト2のコマンドが表示されますが、アップデート前のAngular CLIのバージョンによっては正しく更新できない場合があります。その場合、前述の方法でAngular CLIを更新してください。

［リスト2］Angular Update Guideで表示されるAngular CLIの更新コマンド

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

Angularアプリに機能を追加するaddコマンド

　「ng add <パッケージ名>」コマンドで、Angularアプリに特定の機能を追加できます。公式ブログ記事では、表1の機能が案内されています。

表1　ng addコマンドで追加できる機能

パッケージ名	追加される機能
@angular/pwa	PWA（Progressive Web App）
@ng-bootstrap/schematics	ng-bootstrap（Bootstrap UIコンポーネント）
@angular/material	Angular Material（後述）
@clr/angular@next	Clarity（VMwareのUIコンポーネント）
@angular/elements	Angular Elements（後述）

［補足］PWA（Progressive Web App）

　PWAは、Webページにアプリアイコンなどを設定するファイル（Web App Manifest）、オフライン表示やバックグラウンド処理を実現するService Workerなどを利用して、ネイティブアプリのような使い勝手を提供するモバイルWebページです。

　Angular MaterialとAngular Elementsは、本記事の後半で利用例を紹介します。