【React】UIフレームワークMaterial UIでマテリアルデザインを事始める

Reactの続きです。前回はstyled-componentsでCSS in JSを事始めました。今回はUIフレームワークMaterial UIを事始めたいと思います。その名の通りGoogleが提唱するマテリアルデザインのスタイルを簡単に設定できるツールです。それではいきましょう！

【目次】

前回のおさらい
Material UIとは
マテリアルデザインとは
Create React Appをインストール
Material UIをインストール
ボタンを配置
ボタンの色を変更
最後に

※参考：前回記事
【React】styled-componentsでCSS in JSを事始める - クモのようにコツコツと

※参考：Reactを習得するためにやったことまとめ
qiita.com

前回のおさらい

styled-componentsでCSS in JSを事始める。

JSのコンポーネントファイルの中にCSS書式のまま設定できて、Sass(SCSS)のようなインデントの入れ子書式も対応している。コンポーネントとスタイルの対応関係が把握しやすい方法。

詳細は前回記事を参照。

※参考：【React】styled-componentsでCSS in JSを事始める - クモのようにコツコツと

その他のReactのCSS設定方法

※参考：ReactのCSS設定方法について調べたこと（className属性、style属性、CSS Modules、CSS in JS、UIフレームワーク） - クモのようにコツコツと

今回はUIフレームワークMaterial UIを事始める。

Material UIとは

Material UIとはUIフレームワーク。Googleの提唱するマテリアルデザインのスタイルを簡単に設定することができる。

※参考：Material-UI: A popular React UI framework

参考記事

※参考：React入門～Material UI編～ - Qiita
※参考：React + Material-UIで管理画面を作成してみた | Developers.IO
※参考：Material-UI でインタフェースを作る【Reactで作るマラソンペースメーカー】 - bagelee（ベーグリー）

UIフレームワークは以前、Vue.jsでもVuetifyを触ってみた。

※参考：【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた - クモのようにコツコツと
※参考：Vue.jsを習得するためにやった事まとめ（随時更新） - Qiita

マテリアルデザインとは

Googleが提唱するデザインシステム

平面的なパネルが何層も重なっている構造
重なり具合を陰で表現している
フラットデザイン（平面的）とスキューモーフィックデザイン（立体的）の間
UIのモーションなども提唱されている

※参考：Material Design

参考記事

※参考：【2018年版】マテリアルデザインとは？作り方とガイドラインまとめ
※参考：マテリアルデザインについて少し調べる - Qiita
※参考：マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第一弾 - bagelee（ベーグリー）

Material UIを使うとマテリアルデザインのスタイルを簡単に導入できる。

※参考：9+ Free React Templates - Material-UI

Create React Appをインストール

前回までと同様に今回もCreate React App環境で導入したい。

Create React Appをインストール。material-ui-testという名前で。

$ npx create-react-app material-ui-test

「material-ui-test」というフォルダが作られる

フォルダに移動

$ cd material-ui-test

アプリ起動

$ npm start

ブラウザでlocalhostの3000番が開く。
f:id:idr_zz:20201218065105j:plain
よし！いつものクルクル♪

いったん「Control + C」で閉じる。

Material UIをインストール

次にMaterial UIをインストールする。

※参考：Installation - Material-UI

Material UIをインストールするコマンド

$ npm install @material-ui/core

package.jsonを見ると、Material UIが追加されている！

  "dependencies": {
    "@material-ui/core": "^4.11.2", // 追加
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

ボタンを配置

Buttonコンポーネントを配置

マテリアルデザインのボタンを配置してみる。

※参考：Usage - Material-UI

「App.js」にインポート

$ import Button from '@material-ui/core/Button';

Buttonという名前で

Buttonコンポーネントを配置

      <header className="App-header">
        <!-- 中略 -->
        <Button variant="contained" color="primary">
        押すが良い
        </Button>
      </header>

Buttonコンポーネントを配置（属性はvariantとcolor、テキストは「押すが良い」）
variantの属性はcontained
colorの属性はprimary

属性も値もあらかじめMaterial UIに用意されているもの。

ブラウザ確認：ボタンが出現！

アプリ起動

$ npm start

ブラウザを確認すると、おお、ボタンが出た！
f:id:idr_zz:20201218065655j:plain
（ボタンの上のテキストがaタグでマージンがなかったため、pタグにした）

カーソルを重ねると色が変わる
f:id:idr_zz:20201218065712j:plain

ボタンを押すとその位置を中心にホワンと丸く薄い色が広がる f:id:idr_zz:20201218065738j:plain

レンダリングされたHTML

デベロッパーツールで見ると下記のHTMLがレンダリングされている。

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary" tabindex="0" type="button">
    <span class="MuiButton-label">押すが良い</span>
    <span class="MuiTouchRipple-root"></span>
</button>

buttonタグの中にclass名.MuiButtonBase-root、.MuiButton-root、.MuiButton-contained、.MuiButton-containedPrimary
1つ目のspanのclass名はMuiButton-labelでテキストは「押すが良い」
2つ目のspanのclass名はMuiTouchRipple-root

CSS設定

スタイルはこのclass名であらかじめ設定されている。
f:id:idr_zz:20201218070416j:plain

:hoverや:focusなどの擬似クラスも。
f:id:idr_zz:20201218070501j:plain

ボタンの色を変更

Buttonのcolorを変更

ボタンのスタイル変更方法

※参考：React ButtonGroup component - Material-UI

ボタンの色を変更してみる

        <Button variant="contained" color="secondary">
        押すが良い
        </Button>

color属性の値をprimaryからsecondaryへ

ブラウザ確認：ボタンが赤に！

ブラウザを見ると、おお！ボタンが赤くなった♪
f:id:idr_zz:20201218070648j:plain

レンダリングされたHTML

デベロッパーツールを確認すると

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary" tabindex="0" type="button">
    <span class="MuiButton-label">押すが良い</span>
    <span class="MuiTouchRipple-root"></span>
</button>