MUIでUIコンポーネントを使おう

このページで学ぶこと

MUI（Material UI）とは何かがわかる
よく使うMUIコンポーネントを使えるようになる
TailwindとMUIの使い分けがわかる

MUI（Material UI）とは

MUI は Googleのデザインシステム「Material Design」 を実装したReactコンポーネントライブラリです。

ボタン、フォーム、ダイアログ、テーブルなど、よく使うUIパーツがあらかじめ作られています。
ゼロからCSSを書かなくても、プロ品質のUIがすぐ作れます。

インストール

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

なぜ @emotion も？
MUI はスタイリングに Emotion というライブラリを使っています。
MUI と一緒にインストールが必要です。

やってみよう

ステップ1: よく使うコンポーネントを試す

app/page.js に以下を書いて動作を確認しましょう。

// app/page.js
'use client'
import { useState } from 'react'
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import Alert from '@mui/material/Alert'
 
export default function Home() {
  const [name, setName] = useState('')
  const [submitted, setSubmitted] = useState(false)
 
  const handleSubmit = () => {
    if (name) setSubmitted(true)
  }
 
  return (
    <div style={{ padding: '32px', maxWidth: '400px' }}>
      <h1>MUIのサンプル</h1>
 
      <TextField
        label="名前を入力"
        value={name}
        onChange={(e) => setName(e.target.value)}
        fullWidth
        sx={{ marginBottom: '16px' }}
      />
 
      <Button
        variant="contained"
        onClick={handleSubmit}
        fullWidth
      >
        送信
      </Button>
 
      {submitted && (
        <Alert severity="success" sx={{ marginTop: '16px' }}>
          こんにちは、{name}さん！
        </Alert>
      )}
    </div>
  )
}

ステップ2: よく使うコンポーネント一覧

ボタン

import Button from '@mui/material/Button'
 
// variant で見た目を変える
<Button variant="contained">塗りつぶし（メイン操作）</Button>
<Button variant="outlined">アウトライン（補助操作）</Button>
<Button variant="text">テキスト（控えめな操作）</Button>
 
// color で色を変える
<Button variant="contained" color="error">削除</Button>
<Button variant="contained" color="success">保存</Button>

テキストフィールド

import TextField from '@mui/material/TextField'
 
<TextField label="メールアドレス" type="email" fullWidth />
<TextField label="パスワード" type="password" fullWidth />
<TextField label="メモ" multiline rows={4} fullWidth />

カード

import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardActions from '@mui/material/CardActions'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
 
<Card>
  <CardContent>
    <Typography variant="h5">カードタイトル</Typography>
    <Typography variant="body2" color="text.secondary">
      カードの内容です。
    </Typography>
  </CardContent>
  <CardActions>
    <Button size="small">詳細を見る</Button>
  </CardActions>
</Card>

ダイアログ（モーダル）

'use client'
import { useState } from 'react'
import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogActions from '@mui/material/DialogActions'
import Button from '@mui/material/Button'
 
function ConfirmDialog() {
  const [open, setOpen] = useState(false)
 
  return (
    <>
      <Button variant="contained" color="error" onClick={() => setOpen(true)}>
        削除
      </Button>
 
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>本当に削除しますか？</DialogTitle>
        <DialogContent>
          この操作は取り消せません。
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>キャンセル</Button>
          <Button color="error" onClick={() => { /* 削除処理 */ }}>削除する</Button>
        </DialogActions>
      </Dialog>
    </>
  )
}

ステップ3: sx プロップでスタイルを当てる

MUIコンポーネントは sx プロップで追加スタイルを指定できます。

// sx にはCSS的なオブジェクトを渡す
<Button
  variant="contained"
  sx={{
    marginTop: '16px',         // CSS の margin-top と同じ
    borderRadius: '20px',       // 丸みを帯びたボタン
    backgroundColor: '#ff6b6b', // カスタムカラー
    '&:hover': {
      backgroundColor: '#ee5a24', // ホバー時の色
    }
  }}
>
  カスタムボタン
</Button>

TailwindとMUIの使い分け

両方使うことも可能ですが、役割を分けると整理しやすいです。

	MUI	Tailwind
得意なこと	ボタン・フォーム・ダイアログなどのUI部品	レイアウト・余白・カラーなどのカスタムスタイル
使い方	コンポーネントとしてimportして使う	クラス名を書くだけ
おすすめ	インタラクティブな部品	ページ全体のレイアウト

{/* MUI + Tailwind を組み合わせた例 */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-8">
  {/* レイアウトは Tailwind、部品は MUI */}
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

確認しよう

MUI をインストールできた
Button, TextField, Alert を使えた
variant でボタンの見た目を変えられた
Dialog でモーダルを実装できた

AIに聞いてみよう

「MUIのThemeProviderを使ってアプリ全体の色やフォントをカスタマイズするにはどうしますか？」

次のステップ

スタイリングの基礎はここで完了です！次はバックエンドを学びましょう。

→ APIって何？RESTを理解する