【超簡単】AngularMaterialを導入する方法【チュートリアル】

フロントエンド
5856 view

【超簡単】AngularMaterialを導入する方法【チュートリアル】

最終更新日:2019/03/31

はじめに
AngularMaterialとは？
どんな画面が出来るの？
作業の流れ
早速作業していきましょう（完成まで後10分）
テーマの読み込み
- 他のコンポーネントの表示確認
お疲れ様でした
- - WINDII
  - 最新記事 by WINDII (全て見る)

はじめに

Angularが6にバージョンアップされた事によって、簡単にAngularMaterialを利用する事が可能になったので、AngularMaterialを導入する方法をまとめました。
このチュートリアルをやり終えたら、6で追加された新機能ng addに関してもざっくりと把握する事が出来ます。

初学者でも出来るようになっているので、そういった方にもAngularの凄さを体感して頂けると幸いです。

AngularMaterialとは？

AngularでMaterialUIを使用出来るようにするためのツールで、ハイクオリティーなUIを簡単に実現する事が出来ます。
googleが提供している事でも有名です。

以前は導入に当たってhttps://material.angular.io/guide/getting-started
の手順を踏む必要があったのですが、ver6へのアップデートでその手順が不要となりさらにAngular Material Starter Componentsにより一気にトップ、簡単にはじめる事が可能となりました。

どんな画面が出来るの？

画像で紹介します。

Material Sidenav

ブレイクポイントに基づきレスポンシブ対応もされています。

Material Dashboard

Material Data Table

作業の流れ

AngularCLIを最新に
scss対応のアプリケーションを作成
アプリケーションをサーブする
Angular MaterialとCDKのインストール
新機能ng addを利用してセットアップ
ついでにアプリケーションをpwa化
スターターコンポーネントの生成
表示の確認my-nav
テーマの読み込み
表示の確認my-dashboard my-table

早速作業していきましょう（完成まで後10分）

AngularCLIを最新の物にする

ターミナルもしくは、コマンドプロンプトに移動して

グローバルでCLIをアンインストール

$ npm uninstall -g angular-cli

グローバルでCLIをインストール

$ npm install -g @angular/[email protected]

scss対応のアプリケーションを作成


$ ng new project-name --style=scss

※拡張性を考慮して一応scssにしています。

アプリケーションをサーブする

プロジェクトディレクトリに移動後

cd project-name
$ ng serve --open

Angular MaterialとCDKのインストール


npm install --save @angular/material @angular/cdk

新機能ng addを利用してセットアップ

ng add @angular/material

Angular Materialとテーマのインストールとセットアップを行い、新しいスターターコンポーネントをng generateに登録

ng addとは

CLIのコマンドng add は、皆さんのプロジェクトに新しい機能を追加するのを容易にします。ng addは、プロジェクトのパッケージマネージャを使って、新しい依存関係をダウンロードし、（schematicとして実装された）インストール用のスクリプトを実行します。このスクリプトは、設定の変更と共にプロジェクトをアップデートすること、追加された依存関係（polyfillなど）を追加すること、さらにパッケージ固有の初期化コードをscaffoldすることができます。

ついでにアプリケーションをpwa化

ng add @angular/pwa

今更聞けないPWAとAMP

スターターコンポーネントの生成

まとめ3つ作ってしまいましょう。

ng generate @angular/material:material-nav --name=my-nav
ng generate @angular/material:material-dashboard --name=my-dashboard
ng generate @angular/material:material-table --name=my-table

ng generateにより、my-nav、my-dashboard、my-tableという3つのコンポーネントが作成されました。

表示の確認

src/app/app.component.htmlに移動して記述されている内容を全て削除して

<app-my-nav></app-my-nav>

を貼り付けてみてください。
地味な画面が出てきたと思います。
実はこれは、angularmaterialのテーマを読み込んでいないからなのです。
テーマは自分で作成する事も出来ますが、今回は予め用意されているものを利用しましょう。

7になってから以下の作業は必要なくなりました。

テーマの読み込み

src/app/styles.cssに移動して

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

を追加してください。
美しいテンプレートが表示され、優れたui,ux。
レスポンシブ対応が行われている事が確認出来るはずです。

他のコンポーネントの表示確認

src/app/app.component.htmlの中に記述する要素を

<app-my-dashboard></app-my-dashboard>

<app-my-table></app-my-table>

等にすれば確認をする事が可能です。

お疲れ様でした

Angular6のAngular Material Starter Componentsを使用する事によって、素晴らしいスタートダッシュを決められるという事が分かったのではないでしょうか？

ここだけの話なのですが、Angular6では、他にもng updateなどの便利な機能が追加されました。
Angular6について詳しく知りたい人は
Angular 6リリースノート – Angular公式ブログ日本語訳
を見たり、
AngularMaterialについてもっと知りたい人は
AngularMaterial 公式
を見たり、
Angularに興味を持った人は
Angular 公式チュートリアル
をやるといいと思います。

Angular7へのアップデートでAngularMaterial（cdk)は更に強化されました。
以下の記事でAngular7でのアップデート内容をざっくりとまとめています。

Angular7アップデート内容まとめ【ドラッグ＆ドロップ実装】

Angular6でドラッグ＆ドロップの実装をしていた僕は、Angular７のリリースをずっと待っていました。そして、ついに！なんと華金にAngularは７へと進化した。Angular7でできるようになった事。無限スクロールドラッグ＆ドロップng newなどの際のオプション選択element...

Angularでアプリを作るならIonic

Ionic開発環境構築【Ionic DevAppでの実機確認まで】

angularさえできれば、Ionicで秒速でアプリとか作れるらしいよ？？？卍という噂を聞いたのでIonicについて少しまとめ＋tutorial+実機確認をやってみました。Ionicとは開発にはIonic CLIを用いるHTML5を用いたハイブリッドアプリができる。iOS・Android・windowsのク...

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック