はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。
2017年3月のバージョン4、同11月のバージョン5に続き、2018年5月にAngularの最新版となるバージョン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のコマンドを実行します。
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のようにパッケージのバージョンが更新されます。
アップデート前（P001-update）とアップデート後（P001-update_Angular6）のソースコードをサンプルに含めているので参考にしてください。
［補足］Angular Update Guideページで案内されるAngular CLIの更新方法
Angularアプリのコードをアップデートする方法は、Angular Update Guideで案内されています。
WebページでAngularバージョンなどの条件を指定すると、アップデート方法を表示できます。
Angular Update Guideでは、Angular CLIを更新するリスト2のコマンドが表示されますが、アップデート前のAngular CLIのバージョンによっては正しく更新できない場合があります。その場合、前述の方法でAngular CLIを更新してください。
npm install -g @angular/cli npm install @angular/cli ng update @angular/cli
Angularアプリに機能を追加するaddコマンド
「ng add <パッケージ名>」コマンドで、Angularアプリに特定の機能を追加できます。公式ブログ記事では、表1の機能が案内されています。
| パッケージ名 | 追加される機能 |
|---|---|
| @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は、本記事の後半で利用例を紹介します。
