「Angular Material」で、「Angular」のWebページにMaterial Designを導入しよう

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

　本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は、Angularの要素を操作するディレクティブの自作方法を説明しました。今回は、Googleのデザインガイドライン「Material Design」に対応したAngularのコンポーネント（UI部品）「Angular Material」を紹介していきます。

はじめに

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

　「Material Design」は、Googleが提唱するデザインガイドラインで、Googleのスマートフォンアプリなどで利用されています。本記事で紹介する「Angular Material」は、このMaterial Designに対応したUI部品を提供する、Angular用コンポーネント集です。Angular Materialを利用すれば、AngularのWebページにMaterial Designの外観や挙動を適用できます。

図1：Angular Materialの公式ページ

　本記事では、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のサンプルで説明します。

図2：Angular Materialのツールバーを表示するサンプル（p001-basic）

　最初に、リスト1のコマンドを実行して、Angular CLIでAngularのプロジェクトを生成し、Angular Materialを導入します。

［リスト1］プロジェクト生成と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のモジュールは機能ごとに分かれているので、必要な機能のモジュールをインポートします。

［リスト2］ツールバーのモジュールをインポートする設定（p001-basic/src/app/app.module.ts）

import { MatToolbarModule } from '@angular/material'; // 参照 ...（1）
（略）
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule // インポート ...（2）
  ],
（略）
})
export class AppModule { }

　最後に、Webページのルートコンポーネントで、Angular Materialのツールバーコンポーネントを表す<mat-toolbar>を、テンプレートにリスト3の通り記述します。

［リスト3］ツールバーの記述（p001-basic/src/app/app.component.html）

<mat-toolbar color="primary">
  <span>はじめてのAngular Material</span>
</mat-toolbar>

　<mat-toolbar>のcolor属性に指定されている「primary」は、Angular Materialのテーマカラーのうち、メインとなる色を表します。テーマカラーにはprimary以外にaccent（アクセント色）、warn（エラーを表す色）があります。