見やすいデザインを実現！ Angular Materialのインストール方法

#JavaScript

記事をシェア：

コピー

こんにちは。昼間です。

前回は、Angularの環境構築からプロジェクト実行までの手順をご紹介しましたが、UIコンポーネントを使用することで、見やすく使いやすいデザインにすることができます。
Angular入門！環境構築からプロジェクト実行までの手順をご紹介します

AngularのUIコンポーネントはいくつかありますが、「Angular Material」はデザインがシンプルで簡単な設定で使用できるのでおすすめです。

今回は、Angularプロジェクトに「Angular Material」を導入していきたいと思います。インストール完了まで15分程度で終わります。

説明時の環境

今回の説明で使用している環境は以下のとおりです。

OS: Windows 10 Pro 64ビット
Angular: 13.0.0
Angular Material: 14.1.2

Angular Materialとは

Angular Materialは、Google社によって開発されているAngularのための公式UIコンポーネント集です。コンポーネント集を使用することで、WEBページを見やすいデザインに統一させることができます。

Angular Materialの公式サイトでは、すべてのコンポーネントをプレビューすることができます。
Angular Material 公式ページ

Angular Materialの導入方法

以下のコマンドでAngular Materialのスキーマを取り込みます。

ng add @angular/material

コマンド実行後に以下の3つが聞かれます。

質問1：Design themes（themeオプション）

Choose a prebuilt theme name, or "custom" for a custom theme

デザインのテーマを聞かれています。「Indigo/Pink」「Deep purple/ Amber」「Pink/ Blue Grey」「Purple/ Green」の４つから、テーマの色を選べます。今回は「Indigo/Pink」と入力します。

質問2：Global typography stylesをアプリに入れるか

Set up global Angular Material typography styles? (y/N)

Angular Materialが設定しているフォントの種類やフォントサイズ、ラインハイトなどをAngular Materialに適用するかの質問です。「y(yes)」と入力します。

質問3：アニメーションを可能にするAngular animations moduleを入れるか

Include the Angular animations module? (Y/n)

この質問には「y(yes)」を入力しておきましょう。

3つの質問に答え終わると、以下のようにアプリのアップデートの内容が記載されます。

UPDATE package.json (1102 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (502 bytes)
UPDATE angular.json (3153 bytes)
UPDATE src/index.html (573 bytes)
UPDATE src/styles.css (181 bytes)

こちらが出れば、無事にインストール完了です。