プログラミング技術

本サイトはプロモーションが含まれています。

ReactでMaterial-UIを使ってみる

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年以上経験を積みフリーランスエンジニアになり、単価80万〜140万の案件に参画し稼げるように。プログラミングを始めた頃は、「プログラミング向いていないかも」、「自分のスキルレベル低い」と感じ悩んだ経験がある。

  • 元プログラミングスクール運営企業の社員のためプログラミングの学習に詳しい
  • 自分と同じように悩んでいる初心者へのアドバイスが得意。

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

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

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

-プログラミング技術