MUI（Material UI）ざっくりキャッチアップ

MUI（Material UI）でUIは一気に整う

Reactでアプリを作ってると、「見た目がショボい」と感じるタイミングが必ず来る。
そんなときの救世主が MUI（Material UI）。GoogleのMaterial Designに準拠していて、整った見た目のUIがすぐに使える。

この記事では、MUIの基本コンポーネント4つにしぼって、サクッとキャッチアップしていく。

MUIを使うメリット

デザインが最初からキレイ
コンポーネント単位で導入できる
スタイリングが柔軟（sxやstyled）
TypeScriptとの相性も◎

実務だと「見た目を整えるためにMUI使ってます」って現場はかなり多い。

よく使うMUIコンポーネントまとめ

コンポーネント	用途
`TextField`	テキスト入力欄
`Button`	ボタン（クリック操作）
`Box`	レイアウト（divの代わり）
`Typography`	見出しや本文の表示

1. TextField：入力欄の標準装備

tsx
<TextField
  fullWidth
  label="ユーザー名"
  value={username}
  onChange={(e) => setUsername(e.target.value)}
  variant="outlined"
/>

label：フィールド名（ラベル）
value, onChange：Reactの状態で管理
variant：見た目のバリエーション（outlined, filled, standard）

2. Button：クリックするやつ

tsx
<Button variant="contained" color="primary" onClick={handleSubmit}>
  送信
</Button>

variant：contained, outlined, text の3パターン
color：primary, secondary, errorなど
onClick：普通にReactの関数を渡すだけ

3. Box：スタイル付きのdiv感覚

tsx
<Box
  sx={{
    maxWidth: 400,
    mx: 'auto',
    mt: 4,
    p: 3,
    boxShadow: 1,
    borderRadius: 1,
  }}
>
  {/* 中にコンポーネントを置く */}
</Box>

sx：MUI独自のスタイル指定（CSS-in-JS風）
mx: 'auto'：中央寄せ、mt: 4：上マージン
レスポンシブ対応も sxだけでいける

4. Typography：テキスト表示の基本

tsx
<Typography variant="h5" gutterBottom>
  入力フォーム
</Typography>

variant：h1〜h6, body1, body2, subtitle1など
gutterBottom：下にスペースを追加

スタイリングの基本：`sx`プロパティ

MUIのスタイリングの中心は<Box>とsx。

tsx
<Box sx={{ backgroundColor: 'lightblue', padding: 2 }}>
  <Typography>見出し</Typography>
</Box>

通常のCSSっぽい書き方ができる
テーマやレスポンシブ対応も可能

実務でありがちな構成

tsx
<Box sx={{ maxWidth: 400, mx: 'auto' }}>
  <Typography variant="h6" gutterBottom>
    ログインフォーム
  </Typography>

  <TextField label="メールアドレス" fullWidth />
  <TextField label="パスワード" type="password" fullWidth sx={{ mt: 2 }} />

  <Button variant="contained" fullWidth sx={{ mt: 3 }}>
    ログイン
  </Button>
</Box>

これだけで、「それっぽいログインフォーム」が完成。スタイル地獄から解放される。

サンプル：MUI 基礎フォームアプリ

このサンプルでは、上記の4つのコンポーネントだけで構成された「シンプルなフォームUI」を構築。
状態管理（useState）との組み合わせで、入力内容のリアルタイム表示もしてる。

まとめ

MUIを使えば、UIの見た目が即整う
よく使うのは TextField, Button, Box, Typography
sxでスタイルも簡単に指定できる
スタイリングに悩む時間を減らせる＝開発スピードUP