ReactとMUI（Material UI）で始めるUI開発入門 - ボタン1つから始めよう

こんにちは、とまだです。

「Reactは勉強したけど、見た目がダサくて困ってる…」

そんな悩み、ありませんか？

実はこれ、多くの初心者が通る道なんです。

でも安心してください。

今回はReactとMUI（Material UI）を組み合わせて、簡単にきれいなUIを作る方法を解説します。

ReactとMUIの関係とは？

Reactは「動き」担当

Reactを料理に例えてみましょう。

Reactは「調理方法」のようなもの。

材料（データ）を切ったり、煮たり、焼いたり。

そうやって「動き」を作り出すのが得意です。

でも、盛り付けは苦手。

つまり、見た目の部分は自分で考える必要があるんです。

MUIは「盛り付け」担当

一方、MUIは「お皿やカトラリーのセット」です。

きれいなお皿、おしゃれなフォーク。

全部セットで用意されています。

しかも、Googleのデザインチームが考えた統一感のあるセット。

だから、これを使うだけでプロの盛り付けができるんです。

環境構築 - まずは土台作り

Node.jsのインストール

最初にNode.jsが必要です。

これはReactを動かすための「エンジン」みたいなもの。

公式サイトからダウンロードして、インストールしてください。

インストールできたか確認してみましょう。

node --version

バージョン番号が表示されれば成功です。

ReactとMUIを追加する

次は必要なパッケージを追加します。

プロジェクトフォルダで以下のコマンドを実行してください。

npm install react react-dom @mui/material @mui/icons-material

これで準備完了です。

意外と簡単でしょう？

最初の一歩 - ボタンを作ってみよう

普通のボタンとMUIボタンの違い

まず、普通のHTMLボタンを見てみましょう。

<button>クリックしてね</button>

シンプルですが、見た目が地味ですよね。

では、MUIのボタンはどうでしょう。

import Button from "@mui/material/Button";

function MyButton() {
  return (
    <Button variant="contained" color="primary">
      クリックしてね
    </Button>
  );
}

このコードで、青くて押しやすそうなボタンができます。

variant="contained"で塗りつぶしボタンに。

color="primary"でメインカラーに。

たった2つの設定で、プロっぽい見た目になりました。

ボタンの種類を変えてみる

MUIのボタンには3つのスタイルがあります。

// 塗りつぶしボタン
<Button variant="contained">塗りつぶし</Button>

// 枠線だけのボタン
<Button variant="outlined">枠線のみ</Button>

// テキストだけのボタン
<Button variant="text">テキスト</Button>

用途に合わせて使い分けができるんです。

メインアクションにはcontained。

サブアクションにはoutlined。

リンクっぽく見せたいならtext。

こんな感じで選べます。

フォーム入力も簡単に

TextFieldで入力欄を作る

ユーザーからの入力を受け取る場面は多いですよね。

MUIなら、きれいな入力欄も簡単です。

import TextField from "@mui/material/TextField";
import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <TextField
      label="お名前"
      value={name}
      onChange={(e) => setName(e.target.value)}
      variant="outlined"
    />
  );
}

labelで入力欄の説明を追加。

枠線が浮き上がって、ラベルが表示されます。

これだけで、使いやすい入力フォームの完成です。

エラー表示もお手の物

入力内容にエラーがある時の表示も簡単。

<TextField
  label="メールアドレス"
  error={true}
  helperText="正しいメールアドレスを入力してください"
/>

error={true}で赤く表示。

helperTextでエラーメッセージを追加。

ユーザーにとって分かりやすいフォームが作れます。

レイアウトを整える - Gridの活用

横並びレイアウトの基本

要素を横に並べたい時、CSSで悩むことありますよね。

MUIのGridを使えば、簡単に解決できます。

import { Grid } from "@mui/material";

function TwoColumns() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={6}>
        左側のコンテンツ
      </Grid>
      <Grid item xs={6}>
        右側のコンテンツ
      </Grid>
    </Grid>
  );
}

xs={6}は「12分割のうち6つ分」という意味。

つまり、半分ずつの幅になります。

spacing={2}で要素間の余白も自動調整。

レスポンシブ対応も簡単

スマホとPCで表示を変えたい。

そんな時も、Gridなら簡単です。

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    スマホでは全幅、タブレット以上では半分
  </Grid>
  <Grid item xs={12} sm={6}>
    同じく、スマホでは全幅、タブレット以上では半分
  </Grid>
</Grid>

xsはスマホサイズ。

smはタブレット以上のサイズ。

画面サイズに応じて、自動で切り替わります。

テーマで全体の雰囲気を変える

色を統一する方法

アプリ全体の色を統一したい。

そんな時は、テーマ機能を使います。

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#ff6b6b",  // 赤っぽい色に変更
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* ここに入れたコンポーネントは全て赤系の色になる */}
      <Button variant="contained" color="primary">
        赤いボタン
      </Button>
    </ThemeProvider>
  );
}

一度設定すれば、アプリ全体に反映されます。

ブランドカラーがある場合は、この方法で統一しましょう。

よくあるつまずきポイント

アイコンが表示されない？

アイコンを使いたいけど、表示されない。

そんな時は、インポートを確認してください。

// 正しいインポート
import SendIcon from "@mui/icons-material/Send";

// 使い方
<Button startIcon={<SendIcon />}>
  送信
</Button>

アイコン名は必ず大文字で始まります。

Sendであって、sendではありません。

スタイルが効かない？

独自のスタイルを当てたいのに効かない。

MUIコンポーネントにはsxプロップスを使いましょう。

<Button
  sx={{
    backgroundColor: "purple",
    "&:hover": {
      backgroundColor: "darkpurple",
    },
  }}
>
  紫のボタン
</Button>

sxなら、MUIのスタイルを上書きできます。

実践的な使い方

お問い合わせフォームを作る

学んだことを組み合わせて、実際のフォームを作ってみましょう。

import { TextField, Button, Box } from "@mui/material";
import { useState } from "react";

function ContactForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("送信データ:", formData);
  };

  return (
    <Box component="form" onSubmit={handleSubmit}>
      <TextField
        label="お名前"
        fullWidth
        margin="normal"
        value={formData.name}
        onChange={(e) =>
          setFormData({ ...formData, name: e.target.value })
        }
      />
      <TextField
        label="メールアドレス"
        type="email"
        fullWidth
        margin="normal"
        value={formData.email}
        onChange={(e) =>
          setFormData({ ...formData, email: e.target.value })
        }
      />
      <TextField
        label="お問い合わせ内容"
        multiline
        rows={4}
        fullWidth
        margin="normal"
        value={formData.message}
        onChange={(e) =>
          setFormData({ ...formData, message: e.target.value })
        }
      />
      <Button
        type="submit"
        variant="contained"
        color="primary"
        sx={{ mt: 2 }}
      >
        送信する
      </Button>
    </Box>
  );
}

fullWidthで横幅いっぱいに。

margin="normal"で適度な余白を確保。

multilineで複数行入力に対応。

これだけで、実用的なフォームの完成です。

まとめ

ReactとMUIを組み合わせれば、見た目で悩む時間が激減します。

まずはButtonやTextFieldから始めてみてください。

慣れてきたらGridでレイアウトを整え、テーマで色を統一。

少しずつできることを増やしていけば、きっと素敵なUIが作れるようになります。

今日学んだことを、さっそく自分のプロジェクトで試してみてください。

きっと「こんなに簡単だったんだ！」と感じるはずです。