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

  1. フロントエンド
  2. 2656 view

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

最終更新日:2019/03/31

はじめに

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

作業の流れ

  1. AngularCLIを最新に
  2. scss対応のアプリケーションを作成
  3. アプリケーションをサーブする
  4. Angular MaterialとCDKのインストール
  5. 新機能ng addを利用してセットアップ
  6. ついでにアプリケーションをpwa化
  7. スターターコンポーネントの生成
  8. 表示の確認my-nav
  9. テーマの読み込み
  10. 表示の確認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でのアップデート内容をざっくりとまとめています。

Angularでアプリを作るならIonic

The following two tabs change content below.
WINDII

WINDII

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

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

  1. Avatar
    • 永瀬友彦
    • 2019年 3月 31日

    表示の確認 以下の src/app/app.component.html の内容が見れません。

    • ぞえ
      • ぞえ
      • 2019年 3月 31日

      申し訳ありません。
      更新しておきました

  1. この記事へのトラックバックはありません。

PAGE TOP