Angularよく知らんけどAngular Material触ってみた #Angular

フロントエンドLT飲み会@表参道で発表させていただいた資料です

自己紹介

横内宏樹
チームスピリットデザイナー
仕事とは別に趣味でサービス開発(AngularJS)を手伝っている

本業Reactマン、雰囲気で（片手間で）AngularJSを書いている(^p^)

Angular Material

Material Designに沿って開発されたUIコンポーネント
Material Designに忠実？
Angular Teamによって開発されている

　なぜ気になったのか

手伝ってるサービス、BootstrapからMaterial Designへ移行したいと言われた
ReactではMaterial UIを試食済み、辛かった。Angular　Materialはどんな感じ？

今回お話すること

適当に簡単に画面作ってみた
やり方まとめて見た
- AngularJSしらなくても適当に触れるようなチュートリアルになるようまとめた

チュートリアル

サンプルリポジトリ

こんな画面をつくりました（デモ）

プロジェクト作成

Angular CLIを前提とします。

npm install -g @angular/cli

ng new example-angular-material && cd example-angular-material

Angular Material 導入

本体
npm install --save @angular/material @angular/cdk
Animations　
npm install --save @angular/animations
Gesture用プラグイン
npm install --save hammerjs

theme読み込み

style.cssからprebuildされて用意されたthemeをimportする

src/style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

themeは４種用意されています

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.css

themeをカスタマイズすることも可能です。詳しくは公式のドキュメントへ

ICONの読み込み

index.htmlから読み込んでおきます

src/index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Fontの読み込み

src/index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

コンポーネントのimport

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import 'hammerjs';
import {
  MatAutocompleteModule,
  // ... Componentのimport
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatAutocompleteModule,
    // ... Componentのimport
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML記述抜粋

全体はこちらのGithubページ

<mat-card class="exapmle-card">
  <h2 class="mat-h2">Exapmle Data</h2>

  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

  <div class="radio-group">
    <label class="radio-group-label">Float label</label>
    <mat-radio-group>
      <mat-radio-button value="1">Option 1</mat-radio-button>
      <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>
  </div>

  <button mat-raised-button color="primary">Search</button>
</mat-card>

立ち上げ

ng serve

触った感想 1

CSS、めっちゃ書く
あくまでコンポーネントライブラリ
- 便利なUtility CSSなどない
サイズの調整オプションなどほとんど無い
パーツが少ない

触った感想 2

コンポーネント同士を合わせて配置した場合に、いい感じにデザインを変えたり、レイアウトしてはくれることが少ない
コンポーネントごとの完成度は高いと感じる、コードはきれい
あくまでコンポーネントとして取り入れるつもりなら良さそう
Material Designの再現度は高い （と思う）

Angularよく知らんけどAngular Material触ってみた