HACK SUMMER 東海  MUI勉強会資料

:::note
[これは何]
2023年9月に開催した HACK SUMMER 東海というハッカソンイベントで限定公開したMUIについての記事
いつか手直しして出し直そうと思っていましたが、めんどくさくなったのでそのまま放流します（）
:::
:::note warn
[外部公開にあたって]
この記事は初学者向けに短時間でツール群や概念を説明するために、意図的に言葉の解像度を落としたり、誇張した表現を行なっている箇所があります
:::
 ## 自己紹介

 ### Yuma Satake
 
 - 名前：佐竹友真
 - 所属：名古屋工学院専門学校(3年)
 - 所属：NRUG Nagoya 副支部長
 - 領域：Web開発
 - 趣味：車・旅行
 - Twitter：[Yuma Satake | Matsuriba🏮](https://x.com/yuma_satake22)

 <img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/aaf685a0-0af0-5e5b-92e9-a6f0275812fc.jpeg">

 <br/>

# MUI

<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/1d1e6bb6-0c89-9147-0554-3e10cb821f92.png">


## Welcome to MUI👋

MUI は素晴らしい。

MUI は Google のデザインガイド "Material Design" に基づいた React UI ライブラリです。
そのため、ベースとなる"Material Design"は、Google の提供する Youtube・Gmail・Google ドライブなどのサービスや、Android の OS のデザインにも採用されています。

つまり Pixel の画面をスクロールしているあなた、Youtube を見ながら笑っているそこのあなた。

**あなた達は MUI から逃れることはできないのです。**

※Material-ui と MUI は同じものです。（バージョンによって名前が違う）

## MUI って何？

### まず公式サイトを見てみよう
👉[MUI公式サイト](https://mui.com/material-ui/react-button/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/bcd37720-4e54-7a42-316a-6d295ccdcb89.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/c11a1f5b-8131-c516-9b05-002f0545820e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/80fb31cf-89da-8785-7a12-de6c602a7a8a.png)


### MUI の始まり


<img width="400" alt="image.png (154.2 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/7ed100b0-22b0-4b56-a41c-a89661f73522.png">

※関係のない Google のおじさん

- Material Design 👉 Google が提唱したデザインガイドラインであり、2014 年に発表
- Material-ui 👉 Material Design を元に、UIコンポーネントを提供、同じく2014年に発表

## MUI では何ができるか

- Material Design に基づいたデザインのコンポーネントを簡単に作れる
- デザインのカスタマイズが簡単にできる
**👉 React 上で、いい感じのデザインを楽して作れる**

</br>

### 結論：とりあえず MUI 使っとけば綺麗な UI になる 🥰

↓↓ 実践編 ⚔️↓↓

<br>

# イケメンフロントエンジニアが教える！<br> 10 分で MUI ちゃんと仲良くなる方法💘

## 仲良しになる準備（環境構築）

<img width="70" alt="image.png (3.6 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/6ab2bef0-5b28-9896-cebb-6e876c5bc7a8.jpeg">
<img width="70" alt="image.png (40.0 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/9f49f9f5-198b-40ab-91ce-534a72cc9212.png">
<img width="70" alt="image.png (11.4 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/1d1e6bb6-0c89-9147-0554-3e10cb821f92.png">
<img width="70" alt="image.png (9.2 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/3d8a51c2-ba15-4bb8-8887-cc5d44ca3d16.png">

- Node.js
- VSCode
  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
  - [MUI Snippets](https://marketplace.visualstudio.com/items?itemName=vscodeshift.mui-snippets)

## MUI ちゃんにお近づきになる方法

※ 一般的な React のプロジェクトが既に作成されている事を前提にします

### 拡張機能のインストール

MUI ちゃんは Snippets がないと死ぬほど多いプロパティを覚えなきゃいけなくて嫌いになるので、必ず拡張を入れてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/f2935e95-06e9-90bd-3638-1eac7d05ac19.png)

### VSCodeのターミナルでインストール

まず最初に、MUI とそのベースになっている Emotion をインストールします。

```zsh
yarn add @mui/material @emotion/react @emotion/styled
```

いい感じのアイコンを使えるようになる、MUI icons もインストールします。

```zsh
yarn add @mui/icons-material
```

#### 準備はたったこれだけ！愛しい。

# 実際に書いてみよう 💨

#### 今日作るもの

### [ コード置き場 💻 ](https://github.com/Yuma-Satake/I-love-wanko.git)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/8e03eb2d-33c7-3b1c-5dd5-70e48d240994.png)

## 今日のコードを取ってきて開く

1.デスクトップで右クリックして`Github`というフォルダを作る

2.VSCode を開く

<img width="70" alt="image.png (40.0 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/9f49f9f5-198b-40ab-91ce-534a72cc9212.png">

3.VSCode でさっき作った`Github`というフォルダを開く

<img width="494" alt="image.png (253.6 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/65efe720-8009-43b3-915a-5d35b17f360c.png">

4.[ コード置き場 💻 ](https://github.com/Yuma-Satake/I-love-wanko.git)を開く

5.写真の`<>Code`というところをクリック

<img width="600" alt="スクリーンショット 2023-05-24 19.35.52.png (444.9 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/64cc15d6-4e69-4ae1-afa8-c8fe4eb3f1a8.png">

6.写真のコピーアイコンをクリック

<img width="500" alt="スクリーンショット 2023-05-24 19.37.21.png (209.6 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/8fe62783-9298-4501-9a3e-ea822273f052.png">

7.VSCode で`新しいターミナル`を開く

<img width="600" alt="image.png (257.7 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/db10367e-552c-4d48-98bc-9bbd5a2e7631.png">

8.開いたターミナルで以下を入力

```zsh
git clone "コピーしてるURLをペースト ctrl+v "
```

9.VSCode の`フォルダを開く`から`デスクトップ/Github/I-love-wanko`を開く

<img width="600" alt="image.png (331.7 kB)" src="https://img.esa.io/uploads/production/attachments/20372/2023/05/24/144426/c0c1312d-951f-4ed7-ad94-c60bf478d399.png">

<br>

## フォルダの中身を確認して・実行

### `各種設定ファイル`と`src`

- 浅いディレクトリには、いろいろな設定ファイルが入っています
- `src`フォルダの中身が今回触るものです
  <img width="319" alt="スクリーンショット 2023-05-24 19.55.53.png (61.9 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/e259a751-c8d2-1ef8-3bb9-8f60e191122e.png">

### インストールと実行

パッケージのインストール
```zsh
yarn install 
```

実行
```zsh
yarn run dev
```

👉`http://localhost:3000`をブラウザで開く

**このような画面が表示されればOK👌**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/8e03eb2d-33c7-3b1c-5dd5-70e48d240994.png)

<br>

## MUIを使ってみる

### Buttonコンポーネントを実装してみる

今回は例として、MUIの`Button`コンポーネントを実装してみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/3da3a2e5-a694-4aed-c3f1-b1f2668d0640.png)

MUIでは、通常の`HTML・JSX`と同様に、`Button`タグで、文字列を挟む事で実装します。
それぞれのコンポーネントを使うときは、ページの上部でインポートする必要があります。

```ts
import { Button } from '@mui/material'
```

```ts
<Button>ボタンに表示するテキスト</Button>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/a75f0256-5664-cf4a-e0d5-ae2d858a1b9a.png)


Buttonなどのタグには、`variant`・`color`・`startIcon`などのプロパティが設定できます

|プロパティ|変更点|
|---|---|
|variant|ボタンのスタイルを変更できる|
|color|色を変更することができる（success・error など）|
|startIcon|ボタンにアイコンをつけることができます|

```ts
import { Button } from '@mui/material'
import DeleteIcon from '@mui/icons-material/Delete'
```

```ts
<Button variant="contained" color="success" startIcon={<DeleteIcon />} >こんな感じのボタン</Button>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/2e233e7d-e9a9-c0cb-81d1-283f8713cd63.png)


<br>

## MUIに置き換えてみる

### buttonをMUIのButtonに置き換える

`Description.js`を開く
```ts
// DO NOT DELETE
import * as React from 'react'
import { useState } from 'react';
import { DogImage } from './DogImage';

export const Description = () => {
  const [dogUrl, setDogUrl] = useState('https://images.dog.ceo/breeds/shiba/shiba-16.jpg');

  const handleUpdate = () => {
    fetch('https://dog.ceo/api/breeds/image/random')
      .then(response => response.json())
      .then(data => setDogUrl(data.message))
      .catch(error => console.log(error));
  };

  return (
    <div id="flex">
      <h2>愛しいわんこを眺めるためのサイトです</h2>
      <DogImage url={dogUrl} />
      <button type="button" onClick={handleUpdate} id="updateButton">
          更新
      </button>
    </div>
  );
};
```

#### ▽ この部分のコンポーネント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/d35eb143-8333-dc74-b4a0-2b0d4ce7a91e.png)

以下の`button`コンポーネントを、MUIの`Button`コンポーネントに置き換えます

**元の`button`コンポーネント**
```ts
<button type="button" onClick={handleUpdate} id="updateButton">
  更新
</button>
```
↓↓↓

**MUIの`Button`コンポーネント**
```ts
import { Button } from '@mui/material'

<Button type="button" onClick={handleUpdate} id="updateButton">
更新
</Button>
```

<br>

**元の`button`コンポーネント**
![スクリーンショット 2023-08-15 20.27.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/598d1a45-e785-bd03-b518-5e9559d67c0a.png)

↓↓↓

**MUIの`Button`コンポーネント**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/df8a0eed-3933-4556-eb33-e376e57eb3e7.png)

これではちょっとダサいので、`variant`を追加して`contained`にしてみましょう

```ts
  <Button
    variant="contained" // ここを追加
    type="button"
    onClick={handleUpdate}
    id="updateButton"
  >
    更新
  </Button>
```

いい感じのボタンになりました
![スクリーンショット 2023-08-15 20.27.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/55be598c-9ba6-391e-56a8-6b273d5e2c64.png)


## まとめ

MUIには他にも便利なコンポーネントがたくさんある・公式サイトのテンプレートがしっかりしているので、是非みて使えそうなコンポーネントを探してみよう。

## 資料

https://mui.com/material-ui/

https://github.com/Yuma-Satake/I-love-wanko.git

https://x.com/yuma_satake22