はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。
「Material Design」は、Googleが提唱するデザインガイドラインで、Googleのスマートフォンアプリなどで利用されています。本記事で紹介する「Angular Material」は、このMaterial Designに対応したUI部品を提供する、Angular用コンポーネント集です。Angular Materialを利用すれば、AngularのWebページにMaterial Designの外観や挙動を適用できます。
本記事では、AngularプロジェクトにAngular Materialを導入して利用する方法と、Angular MaterialのUI部品を利用する例を、サンプルとともに紹介していきます。
対象読者
- AngularのWebページに統一的なデザインを適用したい方
- Googleのアプリのようなデザインを自分のWebページにも導入したい方
- 見栄えの良いWebページを作りたい方
必要な環境
Angularの開発では、一般にTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）が利用されます。本記事のサンプルコードもTypeScriptで記述しています。
今回は以下の環境で動作を確認しています。Angular MaterialのセレクトボックスがMicrosoft Edgeで正しく表示されない（意図せずブラウザー画面の横幅いっぱいに表示される）ため、本記事ではGoogle Chromeを動作確認に使用します。
-
Windows 10 64bit版
- Angular 7.2.12
- Angular Material 7.3.7
- Angular CLI 7.3.8
- Node.js v10.15.3 64bit版
- Google Chrome 73.0.3683.103
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリをダウンロード後、「ng serve」コマンドを実行して、Webブラウザーで「http://localhost:4200」を開きます。「ng serve --open」とオプション指定すると、実行時にWebブラウザーを自動で起動してページを表示できます。
Angular Materialの導入と、基本的な利用方法
Angular Materialを導入して利用する基本的な方法を、ツールバー（MatToolbar）を表示する図2のサンプルで説明します。
最初に、リスト1のコマンドを実行して、Angular CLIでAngularのプロジェクトを生成し、Angular Materialを導入します。
ng new p001-basic #...（1） cd p001-basic #...（2） ng add @angular/material #...（3）
（1）でプロジェクトを生成後、（2）でそのフォルダーに移動して、（3）のng addコマンドでAngular Materialを導入します。なお、Angular 7以降では、（3）のコマンド実行時に、テーマカラーなどを対話入力で指定できます。詳細はAngluar 7の紹介記事、連載18回「フレームワークとツールの両面で完成度アップ！ 「Angular」バージョン7の新機能」も参考にしてください。
次に、Angular Materialのモジュールをインポートします。Webページのルートモジュール定義ファイル（app.module.ts）で、ツールバーのモジュール（MatToolbarModule）を、リスト2（1）で参照して、（2）でインポートします。Angular Materialのモジュールは機能ごとに分かれているので、必要な機能のモジュールをインポートします。
import { MatToolbarModule } from '@angular/material'; // 参照 ...（1）
（略）
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatToolbarModule // インポート ...（2）
],
（略）
})
export class AppModule { }
最後に、Webページのルートコンポーネントで、Angular Materialのツールバーコンポーネントを表す<mat-toolbar>を、テンプレートにリスト3の通り記述します。
<mat-toolbar color="primary"> <span>はじめてのAngular Material</span> </mat-toolbar>
<mat-toolbar>のcolor属性に指定されている「primary」は、Angular Materialのテーマカラーのうち、メインとなる色を表します。テーマカラーにはprimary以外にaccent（アクセント色）、warn（エラーを表す色）があります。
