ReactでMaterial-UIを使ってみる

プログラミング

Reactで簡単にレイアウトを整えたい。Material-UIとかどうかな?

今回は、ReactにMaterial-UIを使ってレイアウトを整えてみたいと思います。

使った環境は以下になります。前回作ったRails API + React(TypeScript)をDocker上で動かしています。

環境

  1. Node: 12.0.0
  2. React: 17.0.2
  3. typescript”: 4.1.2
  4. @material-ui/core: 4.12.1
  5. @material-ui/icons: 4.11.2

最終的にはReact側から前回のRails APIを叩いて画面に表示するという部分がゴールとなっています。

この記事では、画面を整えるためにMaterial-UIを使う部分を紹介していきます。気になる方は最後までご覧になってください。

執筆者

・エンジニア歴10年以上
・元々はバックエンド。直近5年ほどフロントエンドが多め
・プログラミングスクール運営側の経験あり
・現在はフリーランスエンジニアとして企業に常駐(在宅勤務)



目次

  1. Material-UIとは
    • Material-UIインストール
    • マテリアルアイコンをインストール
    • Material-UIのテンプレート
  2. Material-UIの使い方
    • App.tsx
    • Dashboardコンポーネント
    • Material-UIの完成
  3. Material-UIのコードを解説
    • makeStyles
    • useStyles
  4. まとめ

Material-UIとは

material-ui

Material-UIは、React用のUIライブラリです。簡単にデザインを整えることが可能で管理画面によく使われますね。

material-ui
参照元: Material-UI

このようなきれいなレイアウトが簡単にできます。と言いたいところですが、慣れていない人にとっては難しいです。

Material-UIインストール

// frontはサービス名
docker-compose run front yarn add @material-ui/core

マテリアルアイコンをインストール

docker-compose run front yarn add @material-ui/icons

Material-UIのテンプレート

Material-UIのテンプレートが公開されてるので参考にしてデザインを作り上げていくことができます。

今回使うテンプレートはこちらです。上で紹介したデザインのgithubです。

Material-UIの使い方

Material-UIの使い方・完成

Material-UIは、components配下に入れていきます。

App.tsx

App.tsxにDashboardコンポーネントをインポートしていきます。

src/App.tsx

import React from 'react';
import { Dashboard } from './components/Dashboard';

const App: React.FC = () => {
return (
    <>
      <Dashboard />
    </>
  )
}

Dashboardコンポーネント

あとは順番に以下のコンポーネントを追加していきます。

  • Chart.js
  • Deposits.js
  • Orders.js
  • Title.js
  • listItems.js

Material-UIの完成

material-ui-sample

ソースコードをコピペしたのでほぼ同じように(グラフはなしで)できました。

Material-UIのコードを解説

Material-UIのコード

Material-UIで使われているコードを少しだけ解説していきます。

makeStyles

makeStylesのTheme型のthemeを使い、Material-UIで準備されたスタイルを利用できます。

makeStyles((theme: Theme)

Theme型のinterfaceを見ると以下のような感じです。

export interface Theme {
  shape: Shape;
  breakpoints: Breakpoints;
  direction: Direction;
  mixins: Mixins;
  overrides?: Overrides;
  palette: Palette;
  props?: ComponentsProps;
  shadows: Shadows;
  spacing: Spacing;
  transitions: Transitions;
  typography: Typography;
  zIndex: ZIndex;
  unstable_strictMode?: boolean;
}

breakpoints

例えば、breakpointsを利用すると画面幅を固定することができます。

theme.breakpoints.up('sm')
  • xs, extra-small: 0px
  • sm, small: 600px
  • md, medium: 960px
  • lg, large: 1280px
  • xl, extra-large: 1920px

zIndex

 zIndex: theme.zIndex.drawer + 1

Material-UIではデフォルトで以下のz-indexが採用されています。

  • mobile stepper: 1000
  • speed dial: 1050
  • app bar: 1100
  • drawer: 1200
  • modal: 1300
  • snackbar: 1400
  • tooltip: 1500

useStyles

useStylesというhook関数にmakeStylesでセットしてスタイルを渡し利用します。

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  }
}))


// console.logで表示すると、このようなデータがセットされています。
{
    appBar: "makeStyles-appBar-23"
    appBarShift: "makeStyles-appBarShift-24"
    appBarSpacer: "makeStyles-appBarSpacer-30"
    container: "makeStyles-container-32"
    content: "makeStyles-content-31"
    drawerPaper: "makeStyles-drawerPaper-28"
    drawerPaperClose: "makeStyles-drawerPaperClose-29"
    fixedHeight: "makeStyles-fixedHeight-34"
    menuButton: "makeStyles-menuButton-25"
    menuButtonHidden: "makeStyles-menuButtonHidden-26"
    paper: "makeStyles-paper-33"
    root: "makeStyles-root-20"
    title: "makeStyles-title-27"
    toolbar: "makeStyles-toolbar-21"
    toolbarIcon: "makeStyles-toolbarIcon-22"
}

useStylesの使い方の例

const classes = useStyles();

return (
    <div className={classes.root}></div>
)

まとめ

Material-UIについて紹介しました。

きれいに実装するのが苦手なエンジニアでもMaterial-UIを使うときれいなサイトを作ることができますね。

管理画面等で使ってみましょう。


当サイト申し込みが多いプログラミングスクール

人気があるプログラミングスクールには、理由があります。

気になった方は候補に含めてみてください。