Angular Materialを利用した実装のテンプレートを生成
Angular Materialは、Googleが提唱したデザイン「Material Design」に対応したコンポーネントです。Angular 6では、Angular Materialを利用した表2のテンプレートを、Angular CLIのコマンドで生成して利用できます。開発者は生成したテンプレートをもとに、機能を実装できます（テンプレートにはメニュー選択時などの実際の処理は含まれません）。
| 名前 | 主な機能 |
|---|---|
| Material Sidenav | レスポンシブ対応のメニューリストと詳細を表示 |
| Material Dashboard | サブメニューを備えた複数のカードを並べて表示 |
| Material Data Table | 表示数切り替えとページングのUIがあるテーブルを表示 |
本記事では、図9のMaterial Sidenavを例に、コマンドの利用方法を紹介します。
Material Sidenavを追加するには、前述した「ng add @angular/material」コマンドでAngular Materialの機能を追加後、リスト8のコマンドを実行します。--nameオプションに指定された「my-nav」がタグ名で、アプリを実行すると<my-nav>タグの部分にMaterial Sidenavが表示されます。
ng generate @angular/material:material-nav --name=my-nav
リスト8のコマンドを実行すると、プロジェクトのsrc/app/my-navフォルダーに、Material Sidenavに対応するコンポーネントのコード一式が生成されます。
ダウンロードできるサンプルにはMaterial Dashboard（P005-material-dashboard）とMaterial Data Table（P006-material-table）の例を含めています。これらのテンプレートを利用するコマンドの詳細は、公式ブログ記事を参照してください。
そのほかの変更点
Angular 6では、ほかにも以下のような変更が行われました。
サービスの記述方法変更によるアプリサイズ削減
従来はモジュール定義ファイル（app.module.tsなど）のproviders属性に、リスト9のようにサービスを指定していました。
@NgModule({
（略）
providers: [MyService] // モジュールでサービスを指定
})
export class AppModule { }
Angular 6からはproviders属性にサービスを記述せず、リスト10の通りprovidedIn属性をサービスに記述して、対象モジュールを指定するようになりました。「root」は、最上位のインジェクターにサービスを登録して、ルートモジュールで依存性注入できるようにする指定です。
@Injectable({
providedIn: 'root' // ルートモジュールで依存性注入できるよう指定
})
export class MyService { }
この変更により、実際には利用されないサービスのコードをコード解析（Tree Shaking）で削除して、アプリのサイズを削減できるようになりました。
［補足］Tree Shakingの原理
Tree Shakingでは、import／exportで参照されないコードを削除します。Angular 5以前（リスト9）では、モジュール定義ファイルでMyServiceを必ずimportする必要があるので、実際に利用しない場合でも、Tree ShakingでMyServiceのコードを削除できません。
一方、Angular 6以降の記述法では、モジュール定義ファイルとサービスで互いをimportする必要がないため、Tree Shakingが有効に機能します。
アニメーションのPolyfillが不要に
アニメーション処理に利用していたWeb Animations APIのPolyfill（互換ライブラリー）が不要になりました。
RxJSのアップデート
Angularが依存するRxJSライブラリーがバージョン5から6にアップデートされました。従来との互換性を確保するライブラリー（rxjs-compat）が利用できます。
Angular MaterialとCDKの改良
Angular Materialと、その一部機能を単独利用できるように分離したCDK（Component Dev Kit）に改良が加えられました。ツリービューや、iOSアプリのアイコンに表示されるようなbadge、画面下からせりあがるbottom-sheetコントロールが利用できるようになり、画面にオーバーレイを表示するoverlayに、新しい位置設定処理が追加されました。
サポート期間の変更
従来はバージョン4と6のみがLTS（Long Term Support、長期間サポート）の対象でしたが、今後はバージョン5を含めたすべてのバージョンにLTSが提供されます。LTSでは、リリース後6カ月間の新機能アップデートと、その後12カ月のバグフィックスやセキュリティフィックスが提供されます。
［補足］新描画エンジンIvyは次バージョンに持ち越し
Angularの次世代描画エンジンとして開発されている「Ivy」は、Angular 6には含まれませんでした。開発は続いており、将来バージョンでの採用が見込まれます。
まとめ
本記事では、2018年5月にリリースされたAngular 6について、主な変更点や追加機能を説明しました。
Angular CLIや周辺ライブラリーの新機能を活用すると、開発者はプログラムの本質的な実装により集中できるようになります。一方で、Angular Elementsの機能追加やIvyなど、進歩の余地も残されており、さらなる改善も期待できます。
次回は、Angular CLIのコマンドでWebページ全体のテストを実行する、e2e（End-to-End）テストについて説明していきます。
