Zenn
🍔

【初学者向け】React + MUI v5(Material-UI)

2023/09/02に公開
React
frontend
UI
mui
ログイン画面
tech

私は2022年10月より実務未経験でフルスタックエンジニアとして事業会社に入社し、
現在はReactとRubyを用いたシステム開発に携わっています。
ReactとMUI（UIフレームワーク）を利用して開発に取り組む機会が多々あるので、
こちらでは「ReactとMUIを利用したログイン画面の作成方法」について紹介しようと思います。

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

  • OS : macOS Monterey 12.6
  • ブラウザ : Google Chrome
  • テキストエディタ : VS Code
  • React/React-dom : v 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/」を入力してみましょう。

React起動画面
React起動画面

MUI（Material-UI）とは

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

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

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

MUIを利用することで、ボタンやテキストなど入力フォーム（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.（MUI公式より引用）

https://mui.com/material-ui/getting-started/installation/

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

npm list --depth=0

2. MUIインストール

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

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

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

npm install @mui/icons-material

https://mui.com/material-ui/material-icons/

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

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

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

App.jsx

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

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

作成したログイン画面
作成したログイン画面

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

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

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

App.jsx
<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の違い

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

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

まとめ

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

Discussion