Reactを用いたマテリアルデザインの実践：Material-UI入門

作成日 2025.05.08
React
React

Reactアプリでマテリアルデザインを実現するためにMaterial-UIを使用する方法について解説します。このガイドでは、基本的なセットアップから高度なカスタマイズまでをカバーします。

1. Material-UIのインストール
2. テーマプロバイダーの設定
3. ボタンコンポーネントの使用
4. アイコンの利用
5. レスポンシブグリッドレイアウト
6. AppBarでヘッダーを作成
7. ダイアログを実装
8. カードコンポーネントの活用
9. Snackbarで通知を表示
10. テーマのカスタマイズ
11. まとめ

Material-UIのインストール

Material-UIのコアライブラリとスタイルエンジンのインストール。

// 必要なパッケージをインストール
npm install @mui/material @emotion/react @emotion/styled

テーマプロバイダーの設定

アプリ全体にテーマを適用する方法。

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>Your App</div>
    </ThemeProvider>
  );
}

export default App;

ボタンコンポーネントの使用

Material-UIのボタンコンポーネントの基本的な使い方。

import React from 'react';
import Button from '@mui/material/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Click Me
    </Button>
  );
}

export default App;

アイコンの利用

Material-UIのアイコンパッケージを使ったアイコンの追加。

// アイコンパッケージをインストール
npm install @mui/icons-material

// アイコンの使用例
import React from 'react';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

function App() {
  return (
    <IconButton color="primary" aria-label="menu">
      <MenuIcon />
    </IconButton>
  );
}

export default App;

レスポンシブグリッドレイアウト

Gridコンポーネントを使ったレスポンシブデザインの実現。

import React from 'react';
import Grid from '@mui/material/Grid';

function App() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        Item 1
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        Item 2
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        Item 3
      </Grid>
    </Grid>
  );
}

export default App;

AppBarでヘッダーを作成

AppBarコンポーネントを使ったナビゲーションバーの作成。

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6">My App</Typography>
      </Toolbar>
    </AppBar>
  );
}

export default App;

ダイアログを実装

ダイアログコンポーネントを使ったモーダルウィンドウの作成。

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button variant="outlined" onClick={() => setOpen(true)}>
        Open Dialog
      </Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Title</DialogTitle>
        <DialogContent>Content goes here.</DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>Close</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default App;

カードコンポーネントの活用

カードコンポーネントを使った情報の整理と表示。

import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

function App() {
  return (
    <Card>
      <CardContent>
        <Typography variant="h5">Card Title</Typography>
        <Typography variant="body2">Card content goes here.</Typography>
      </CardContent>
    </Card>
  );
}

export default App;

Snackbarで通知を表示

Snackbarコンポーネントを使った通知メッセージの表示。

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Show Snackbar</Button>
      <Snackbar
        open={open}
        onClose={() => setOpen(false)}
        message="Notification message"
        autoHideDuration={3000}
      />
    </div>
  );
}

export default App;

テーマのカスタマイズ

createThemeを使ったテーマのカスタマイズ方法。

const theme = createTheme({
  typography: {
    fontFamily: 'Roboto, Arial',
    h1: {
      fontSize: '2.5rem',
    },
  },
});

まとめ

Material-UIを活用することで、マテリアルデザインのガイドラインに沿ったReactアプリを簡単に構築できます。カスタマイズ性と機能性を活かして、魅力的なUIを作成しましょう。