• React + MUI v5(Material-UI)

React + MUI v5(Material-UI)

  • 最終更新日： 2023年5月10日（水）
  • 公開日： 2023年3月8日（水）

こんにちは。デザイン・システム室の大嶋です。
私は10月に実務未経験で入社し、弊社サービス「旬をすぐに」のシステム開発に携わっています。
当サービスでは、主にReact（フロントエンド言語）とRuby（バックエンド言語）を用いており、案件によってReactとMUI（UIフレームワーク）を組み合わせて開発に取り組むことがあります。
そこで、こちらの記事では「ReactとMUIを利用したログイン画面の作成」について紹介しようと思います。

開発環境は以下のとおりです。

OSmacOS Monterey 12.6
ブラウザGoogle Chrome
テキストエディタVS Code
React/React-domv 17.0.2 / v 17.0.2
MUI（Material-UI）v 5.11.12

React学習を始める前に

第一に、React学習の最低限必要な知識として、
「HTML」と「JavaScript」について理解していなければなりません。

この時点で「HTML ?」「JavaScript ?」 と思われた方は、
まずはHTMLとJavaScriptから学習を始めてみてください。

それでは、本題に移ります。

Reactとは

「React（正式名称：React.js）」とは、Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリです。「Facebook」や「Instagram」をはじめとして、「Yahoo!」「Airbnb」「Netflix」「Slack」「Uber」など、世界中で数多く採用されています。

インストール方法（ローカル環境構築）

1. Node.js(npm)をインストールする

Node.jsは、ブラウザ以外でもJavaScriptを扱うための実行環境です。
Reactをローカルで動かすためには、Node.jsをインストールしておく必要があります。
Node.jsを公式サイトからダウンロードしましょう。

2. Reactアプリを作成する

npx create-react-app sample-app

正常にコマンドが実行された場合、「sample-app」という新規ディレクトリがコマンド実行したディレクトリ内に作成されます。

作成したReactアプリが正常に動くか確認してみましょう。
「sample-app」 ディレクトリ直下に移動し、以下コマンドを実行してみてください。

### 以下コマンドでディレクトリ移動
cd sample-app

### ローカルのサーバー起動
npm start

「npm start」実行後、ブラウザに下記画面が表示されれば成功です。
※ブラウザが開かない場合、ブラウザにて「http://localhost:3000/」を入力してみましょう。

MUI（Material-UI）とは

「MUI（旧名称：Material-UI）」は、React用のUIコンポーネントフレームワークです。
元々は、Google社の「Material Design 」をベースに開発されました。
現在では、Material−UI社が開発・運営をしており、豊富なUIコンポーネントを提供しています。

UIコンポーネント種類一覧

Inputs: 入力
Data Display: データ表示
Feedback: フィードバック
Surfaces: 外観
Navigation: ナビゲーション
Layout: レイアウト
Utils: ユーティリティ

端的に言うと、
ボタンやテキストなど入力フォーム（Inputs）、
アイコンやテーブル（Data Display）、
メニューバー（Navigation）等 が簡易作成できます。

インストール方法

1. React/ ReactDOMバージョン確認

今回導入する「MUI v5」では、react/react-domのバージョン指定があります。

react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies.

https://mui.com/material-ui/getting-started/installation/（MUI公式）

作成した「sample-app」ディレクトリ上で確認してみましょう。

npm list --depth=0

2. MUIインストール

バージョン確認のうえ、下記コマンドを実行してMUIをインストールしましょう。

npm install @mui/material @emotion/react @emotion/styled

（任意）Material Iconsを利用したい場合は下記コマンドもあわせて実行してください。

npm install @mui/icons-material

これで、MUIの導入は完了です。

MUIを使ってログイン画面を作成してみよう

Reactプロジェクトの中に「App.js」というファイルがあると思います。
「App.js」をエディタで開いて、一度中身を全部消してください。
そして以下のように記述します。

/* App.js */
import React, { useState } from 'react';
import styled from '@emotion/styled';
import { Button, Modal, Paper, TextField, Typography } from '@mui/material';

const App = () => {
  const [open, setOpen] = useState(false);
  const handleOpen = () => {
    setOpen((prevOpen) => !prevOpen);
  };
  return (
    <>
      <Button onClick={handleOpen}>ログイン画面へ</Button>
      <Modal open={open} onClose={handleOpen}>
        <StyledPaper>
          <form className='form'>
            <Typography variant={'h5'}>ログイン</Typography>
            <TextField label="メールアドレス" variant="standard" className="text" />
            <TextField label="パスワード" variant="standard" className="text" />
            <center><Button className="login btn">ログイン</Button></center>
            <center><Button className="signup btn">新規会員登録はこちら</Button></center>
            <center><Button  variant="outlined">閉じる</Button></center>
          </form>
        </StyledPaper>
      </Modal>
    </>
  );
};

const StyledPaper = styled(Paper)`
  display: flex;
  justify-content: center;
  width: 960px;
  height: 540px;
  .form {
    width: 60%;
    margin: 3rem;
    text-align: center;
  }
  .text {
    width: 100%;
    margin: 1rem 0;
  }
  .btn {
    width: 60%;
    color: white;
    text-align: center;
    margin: 1.5rem 0;
  }
  .login {
    background-color: lightseagreen;
  }
  .signup {
    background-color: #06579b;
  }
`;

export default App;

では、開発サーバーを起動してみましょう。
ターミナルで以下のコマンドを実行します。

npm start

ログイン画面が表示されました。

それでは、各ポイントをみていきましょう。

import React, { useState } from 'react';
import styled from '@emotion/styled';
import { Button, Modal, Paper, TextField, Typography } from '@mui/material';

ここでは、ファイルにReactとMUIをインポートして利用できる状態にしています。

<StyledPaper>
  <form className='form'>
　　~省略~
  </form>
</StyledPaper>

===省略===

/* スタイル */
const StyledPaper = styled(Paper)`
  display: flex;
  justify-content: center;
  width: 960px;
  height: 540px;
  .form {
    width: 60%;
    margin: 3rem;
    text-align: center;
  }
  .text {
    width: 100%;
    margin: 1rem 0;
  }
  .btn {
    width: 60%;
    color: white;
    text-align: center;
    margin: 1.5rem 0;
  }
  .login {
    background-color: lightseagreen;
  }
  .signup {
    background-color: #06579b;
  }
`;

<StyledPaper>は、ログイン入力フォームをデザインするために定義しており、
「/* スタイル */」以下で具体的なレイアウトについては記述しています。
※今回はStyled-components形式でレイアウトしました。
　参考サイト：Styled-componentsとEmotionの違い

<TextField label="メールアドレス" variant="standard" className="text" />
<TextField label="パスワード" variant="standard" className="text" />

MUIの<TextField>コンポーネントを利用することで細かくレイアウトを指定することなくおしゃれなテキストフォームを表示できるようにしています。

まとめ

今回は簡易的にコードを使って紹介いたしましたが、MUIにはその他UIコンポーネントが豊富にありますので、ぜひMUI公式サイトで確認してみてください。色や形により変化を加えることで、自分好みのwebアプリケーションを作成することができます。
これを機会に、自分だけの唯一無二のwebアプリケーションを作成してみてはいかがでしょうか。

募集要項およびエントリーフォーム