文系だけど React に MUI 導入してみた。 Ver.2

MUI とは

MUIとは何か、 オープンソースのUIライブラリです。
平たく言えば、ボタンとかフォームとかを簡単にカッコよくしてくれるやつです。
Google のガイドライン に沿っているので、白ブリーフしか履かない僕のような、センスなし男でもおしゃれなWebデザインができちゃう代物です。

百聞は一件にしかずと言うことでとりあえず見てみましょう。
html で適当に書くと

こんな感じで、白ブリ野郎ができちゃいます。
これじゃモテないですね。

じゃあ、MUIでかっこいいパンツにはきかえちゃいましょう。

時間をかければ MUI でも html でも素晴らしいフォームができます。
今回は、同じ時間で比較したいので
僕の実力で5分程度で実装できるもので成果物揃えています。

MUI でフォーム実装

MUI の導入

下記コマンドでまとめて MUI を install しましょう

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

Input をカッコよくしよう

↓ が元々の 白ブリ コード

app.js

function App() {
  return (
    <form name='login_form'>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          margin: 50,
        }}
      >
        <h1>ログイン画面</h1>
        <input
          type='id'
          name='user_id'
          placeholder='ユーザーIDを入力してください'
        />
        <input
          type='password'
          name='password'
          placeholder='パスワードを入力してください'
        />
        <button type='submit'>ログイン</button>
      </div>
    </form>
  );
}

export default App;

とりあえず input の部分を mui のコンポーネントで代用してみる。

app.js

import './App.css';
import { TextField } from '@mui/material';

function App() {
  return (
    <form name='login_form'>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          margin: 50,
        }}
      >
        <h1>ログイン画面</h1>
        <TextField
          type='id'
          name='user_id'
          variant='standard'
          placeholder='ユーザーIDを入力してください'
        />
        <TextField
          type='password'
          name='password'
          variant='standard'
          placeholder='パスワードを入力してください'
        />
        <button type='submit'>ログイン</button>
      </div>
    </form>
  );
}

export default App;

こんな感じ、とりあえずTextFieldをMUIからimport してみてvarientを与えてみた。
なんとなく、下だけ線が引かれてる TextBox がカッコ良さそうなので variant='standard'と設定。
すると......

お？もう割といい感じ

Button もカッコよくしよう

app.js

import './App.css';
import { TextField, Button } from '@mui/material';

function App() {
  return (
    <form name='login_form'>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          margin: 50,
        }}
      >
        <h1>ログイン画面</h1>
        <TextField
          type='id'
          name='user_id'
          variant='standard'
          placeholder='ユーザーIDを入力してください'
        />
        <TextField
          type='password'
          name='password'
          variant='standard'
          placeholder='パスワードを入力してください'
        />
        <Button type='submit' color='primary' variant='contained'>
          ログイン
        </Button>
      </div>
    </form>
  );
}

export default App;

とりあえず color='primary' としてみた、あとで一括で色を変更できたりする。
これもあまり言うことはないのでこんな感じ

全体的にいい感じになってきたけどまだ、ぎゅっとなってるなあ。。。

下にPaperを乗せてみた

なんか全体的にレイアウトを整えてみる。
結構css っぽいお話なので細かい部分は割愛するけど、 Box, とか Grid とかでレイアウト整えやすいので便利。
あとは、Paper に載せときゃ大体それっぽいログイン画面になるっしょ

app.js

import './App.css';
import { Box, Button, Paper, TextField, Typography } from '@mui/material';

function App() {
  return (
    <>
      <Paper
        elevation={3}
        sx={{
          p: 4,
          height: '70vh',
          width: '280px',
          m: '20px auto',
        }}
      >
        <Box
          mt={8}
          display='flex'
          flexDirection='column'
          gap={5}
          alignItems='center'
        >
          <Typography variant='h5'>ログイン画面</Typography>
          <TextField
            type='id'
            name='user_id'
            variant='standard'
            placeholder='ユーザーIDを入力してください'
            fullWidth
          />
          <TextField
            type='password'
            name='password'
            variant='standard'
            placeholder='パスワードを入力してください'
            fullWidth
          />
          <Button type='submit' color='primary' variant='contained' fullWidth>
            ログイン
          </Button>
        </Box>
      </Paper>
    </>
  );
}

export default App;

色々変えてみたらこんな感じになった。

↓が実際の画面。

おお！！
なんかそれっぽい！ これで脱白ブリ、ボクサーパンツデビュー！

トランクス, ボクサー パンツって
日本で言われているものと海外で言われているものは逆らしい。
確かに ボクサーの人ってトランクス履いてるよなぁ

参考： http://sci-tech.jugem.jp/?eid=3949

まとめ

とりあえず、MUI を使えば ダサいやつでもある程度それっぽくできるって話。
でもほんとにおしゃれな UI作るには しっかり css 理解して自分で色々いじらないとなぁ......

とりあえず、付け焼き刃のおしゃれがしたいReact初心者におすすめのライブラリです。
ただ、そのまま使ってばっかりだと、「こいつMUI使ってんな」ってバレちゃう。
MUI臭いUIになっちゃうので、自分でカスタムしてコンポーネント化して使うのがおすすめです。
最初にそんな余裕ないよ〜って感じだと思うので、色々触ってみよ〜〜

その他 ライブラリ

React で使える UIライブラリは他にも

があるみたいだよ

挨拶/謝辞

割と雑に書いてみたのですが、もしここまで読んでくれた方がいたらありがとうございます。
ついでに、冒頭で html でも mui でも5分って書いたのですが、実際は身内贔屓出ちゃって、

• html: 5min
• mui 10min
  くらいでした。
  ちょっと
  盛っちゃいました。

それでは見た目系割と整ってきたかなと言うことで、
React Hook の概念に踏み込んで 別の記事も書いてみたいです。
じゃあまた ˙︶˙)ﾉ"ﾏﾀﾈｰ