ReactでMaterial-UIを使ってみる

初心者さん

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

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

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

関連記事

【Rails API】1対多のテーブルからデータを取得

環境

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

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

この記事の信頼度

くろめがね

・エンジニア歴10年以上
・バックエンドがメインでフロント開発も行うフルスタック
・プログラミングスクール運営側の経験あり
・単価約100万↑のフリーランスエンジニア

Material-UIとは

Material-UIは、React用の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のテンプレートが公開されてるので参考にしてデザインを作り上げていくことができます。

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コンポーネント

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

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')

zIndex

 zIndex: theme.zIndex.drawer + 1

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

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を使うときれいなサイトを作ることができますね。

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