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

[フロントエンドLT飲み会@表参道](https://forkwell.connpass.com/event/80089/)で発表させていただいた資料です

## 自己紹介

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

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

* * *

## Angular Material

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

* * *

##　なぜ気になったのか

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

* * *

## 今回お話すること

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

* * *

## チュートリアル

[サンプルリポジトリ](https://github.com/8845musign/example-angular-material/)

* * *

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

* * *

### プロジェクト作成

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をカスタマイズすることも可能です。詳しくは[公式のドキュメント](https://material.angular.io/guide/theming#defining-a-custom-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ページ](https://github.com/8845musign/example-angular-material/blob/master/src/app/app.component.html)

```
<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>
```
***

### 立ち上げ

```bash
ng serve
```

***

## 触った感想 1

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

***

## 触った感想 2

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

***

## Material Designは楽しい

***

## ご清聴ありがとうございました