クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

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

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

【目次】

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

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

前回のおさらい

styled-componentsでCSS in JSを事始める。 https://cdn-ak.f.st-hatena.com/images/fotolife/i/idr_zz/20201216/20201216044802.jpg

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のモーションなども提唱されている

f:id:idr_zz:20201218064123p:plain

※参考: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コンポーネントを配置(属性はvariantcolor、テキストは「押すが良い」)
  • 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>
  • buttonタグの中にclass名.MuiButton-containedPrimary.MuiButton-containedSecondary

CSS設定

CSSスタイルを見ると.MuiButton-containedSecondaryに赤い色が設定されている。 f:id:idr_zz:20201218071248j:plain

:hoverなども然り。 f:id:idr_zz:20201218071345j:plain


ソースコード(GitHUb)

※参考:GitHub - ryo-i/material-ui-test

最後に

ということでUIフレームワークMaterial UIを事始ました。あらかじめ用意されているコンポーネント名、設定値を指定するだけで簡単にマテリアルデザインのスタイルを導入できますね!

ただ、この設定値の実体はMaterial UIファイルの中にブラックボックス化されているのでカスタマイズはあまりせずに使う前提のツールと思います。(設定ファイルを見つけたとしても今後のメンテを考えると直接は編集したくない)

Webアプリの管理ページをマテリアルデザインでサクサク作る、みたいな用途にはとても合っていると思います♪管理ページはデザインのカスタマイズよりも実用性、機能性が重視されし、改修のスピードが早いのも歓迎されると思います。

それではまた!


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