トップ > フロントエンド > MUI（Material UI）の基本的な使い方と簡単なイベントの呼び出し方について

MUI（Material UI）の基本的な使い方と簡単なイベントの呼び出し方について

フロントエンド React Next.js MUI UIコンポーネント
記事タイトルとURLをコピーする

こんにちは、アプリケーションサービス部ディベロップメントサービス1課の外崎です。

MUIとは

MUI（Material UI）は、GoogleのマテリアルデザインをベースにしたReactコンポーネントライブラリです。様々な部品が揃っているので、デザインやプログラミングの知識が少なくても、美しく一貫性のあるUIを簡単に作成することができます。

MUIの導入

前提条件

MUIを使用するためには、以下の環境が整っている必要があります：

  1. Node.jsとnpm：Node.jsとnpm（Node Package Manager）がインストールされていること。Node.jsの公式サイトから最新のLTS（Long Term Support）バージョンをインストールしてください。
  2. Reactプロジェクト：既存のReactプロジェクトがあるか、新しく作成する必要があります。Reactの基本的な知識があることも前提とします。

インストール手順

MUIのインストールは、npmまたはYarnを使用して簡単に行えます。以下に、両方の方法を紹介します。

Installation

npmを使用したインストール

  1. プロジェクトのルートディレクトリでターミナルを開き、以下のコマンドを実行します：
npm install @mui/material @emotion/react @emotion/styled

このコマンドにより、MUIのコアパッケージとEmotionライブラリ（MUIのスタイルエンジン）がインストールされます。

Yarnを使用したインストール

  1. Yarnを使用している場合は、以下のコマンドを実行します：
yarn add @mui/material @emotion/react @emotion/styled

package.jsonを利用したインストール

以下のパッケージを追加する為、package.jsonを編集します。

// package.json
~省略~
  "dependencies": {
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@mui/material": "latest"
  },
~省略~

MUIのインストールが完了すれば、プロジェクトでMUIのコンポーネントを利用する準備が整います。

基本的な使い方

この章では、MUI（Material-UI）の基本的な使い方について紹介します。具体的には、ボタン、テキストフィールド、アイコンの3つの基本的なコンポーネントを紹介します。

1. ボタン（Button）

ボタンは、ユーザーが操作を行うための基本的なコンポーネントです。MUIのボタンコンポーネントは、さまざまなスタイルとバリエーション、色やサイズのカスタマイズなど、さまざまなオプションを提供しています。

参考：Button

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

function CustomButton() {
  return (
    <div>
      {/* ボタン：　最も基本的なボタンで、デフォルトのスタイルが適用されています。 */}
      <div>
        <Button>ボタン1</Button>
      </div>

      {/* 非活性ボタン：　disabled 属性を使用して、ボタンを非活性化しています。*/}
      <div>
        <Button disabled>非活性ボタン</Button>
      </div>

      {/* ボタン2：　variant="contained" 属性を使用して、塗りつぶされたスタイルのボタンを作成しています。 */}
      <div>
        <Button variant="contained">ボタン2</Button>
      </div>

      {/* ボタン3：　variant="outlined" 属性を使用して、枠線のみのスタイルのボタンを作成しています。*/}
      <div>
        <Button variant="outlined">ボタン3</Button>
      </div>
    </div>
  );
}

export default CustomButton;

2. テキストフィールド（TextField）

テキストフィールドは、ユーザーがテキスト入力を行うためのコンポーネントです。この他にも、エラーメッセージの表示、アイコンの追加、さまざまなスタイルの適用などが可能です。

Text Field

import React from "react";
import TextField from "@mui/material/TextField";

function CustomTextField() {
  return (
    <div>
      {/* text入力：　最も基本的なテキストフィールドで、label 属性を使用してラベルを指定し、variant="standard" 属性で標準のスタイルを適用しています。 */}
      <div>
        <TextField label="ほげほげ" variant="standard" />
      </div>

      {/* カウントアップ：　数値入力専用のテキストフィールドで、type="number" 属性を使用しています。InputLabelProps={{ shrink: true }} を指定することで、ラベルが入力フィールドの上に固定されます。 */}
      <div>
        <TextField
          label="カウントアップ"
          type="number"
          InputLabelProps={{
            shrink: true,
          }}
        />
      </div>
      {/* パスワード：　パスワード入力専用のテキストフィールドで、type="password" 属性を使用しています。autoComplete="current-password" を指定することで、ブラウザの自動入力機能をサポートします。 */}
      <div>
        <TextField
          label="パスワード"
          type="password"
          autoComplete="current-password"
        />
      </div>
    </div>
  );
}

export default CustomTextField;

3. アイコン（Icon）

アイコンは、ユーザーインターフェースに視覚的な要素を追加するためのコンポーネントです。MUIのアイコンコンポーネントは、Material Iconsを簡単に利用できるようにしています。

import React from "react";
import IconButton from "@mui/material/IconButton";
import Brightness2Icon from "@mui/icons-material/Brightness2";
import InstagramIcon from "@mui/icons-material/Instagram";
import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";

function HomeIcon(props: SvgIconProps) {
  return (
    <SvgIcon {...props}>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
    </SvgIcon>
  );
}

function CustomIcon() {
  return (
    <div>
      {/* インスタグラムアイコン：　@mui/icons-materialライブラリから提供されるインスタグラムのアイコンです。 */}
      <div>
        <InstagramIcon />

        {/* インスタグラムボタン：　IconButtonコンポーネントの中にインスタグラムアイコンを配置しています。これにより、アイコンがクリック可能なボタンとして機能します。 */}
        <IconButton>
          <InstagramIcon />
        </IconButton>
      </div>

      {/* カラー変更：　Brightness2Iconコンポーネントを使用して、異なる色のアイコンを表示しています。colorプロパティを使用して、MUIのテーマカラーを適用しています。 */}
      <div>
        <Brightness2Icon color="primary" />
        <Brightness2Icon color="secondary" />
        <Brightness2Icon color="action" />
      </div>

      {/* ホームアイコン：　SvgIconコンポーネントを使用することで、カスタムSVGアイコンを簡単に作成できます。このカスタムアイコンは、特定のパスデータを使って家の形を描画します。 */}
      <div>
        <HomeIcon />
      </div>
    </div>
  );
}


export default CustomIcon;

SvgIconコンポーネントは、カスタムSVGアイコンを作成するためのMUIのコンポーネントです。任意のSVGパスを指定することで、独自のアイコンを簡単に作成・使用することができます。さらに詳しい情報や使い方については、参考：SvgIconを参照してください。

レイアウトの作成

BoxとContainerを使用して基本的なレイアウトを作成し、最終的にグリッドシステムを用いてこれらのコンポーネントを管理する流れを説明します。

1. Boxレイアウトの作成

  1. Boxコンポーネントの概要: Boxコンポーネントは、他のコンポーネントをグループ化するための汎用コンテナです。<div> タグのように使えますが、アプリのテーマやsxプロパティへのアクセスなど、追加機能が組み込まれています。

    一方、Container、Stack、Paperなどの他のコンテナには、それぞれ特定の用途に適した機能があります。例えば、Containerはページ全体のレイアウトを整えるために使われ、Stackは一方向にコンポーネントを並べるために使われます。Paperは、影を付けて立体感のある見た目を作るために使います。

  2. 実装例: Boxコンポーネントを使用して、枠線とパディングを持つ基本的なボックスを作成しています。Box内には、Typographyコンポーネントを使用してタイトルとテキストを表示しています。

  import React from "react";
  import Box from "@mui/material/Box";
  import Typography from "@mui/material/Typography";

  function CustomBox() {
  return (
      <>
      <Box sx={{ border: "1px solid gray", padding: 2, borderRadius: 1 }}>
          <Typography variant="h5" component="div">
          タイトル ほげほげ
          </Typography>
          <Typography variant="body2" color="text.secondary">
          テキスト　ほげほげ
          </Typography>
      </Box>
      </>
  );
  }

  export default CustomBox;

  • Boxコンポーネント: このコンポーネントは、他のコンポーネントをグループ化するための汎用的なコンテナです。ここでは、枠線（border）、パディング（padding）、角の丸み（borderRadius）のスタイルを適用しています。

  • sxプロパティ: sxプロパティを使うと、スタイルを簡単に追加できます。例えば、border: '1px solid gray'は灰色の枠線を、padding: 2はパディングを、borderRadius: 1は角の丸みを設定しています。

  • Typographyコンポーネント: これはテキストを表示するためのコンポーネントです。variant="h5"は大きな見出しスタイルを、variant="body2"は小さな本文スタイルを適用します。

2. Containerレイアウトの作成

  1. Containerコンポーネントの概要: Containerコンポーネントは、ページコンテンツを中央に配置し、レイアウトの幅を制限するためのコンテナです。maxWidthプロパティでコンテナの最大幅を指定でき、fixedプロパティを使用すると、固定幅になり、画面の幅に応じて変化しなくなります。デフォルトでは可変幅でレスポンシブに変化します。

  2. 実装例: Containerコンポーネントを使用して、Boxコンポーネントを2つ配置しています。

  import React from "react";
  import Container from "@mui/material/Container";
  import Box from "@mui/material/Box";
  import Typography from "@mui/material/Typography";

  function CustomBox() {
  return (
      <Box
      sx={{
          border: "1px solid gray",
          padding: 2,
          borderRadius: 1,
          marginBottom: 2,
      }}
      >
      <Typography variant="h5" component="div">
          タイトル ほげほげ
      </Typography>
      <Typography variant="body2" color="text.secondary">
          テキスト　ほげほげ
      </Typography>
      </Box>
  );
  }

  function CustomContainer() {
  return (
      <Container maxWidth="sm" fixed>
      <CustomBox />
      <CustomBox />
      </Container>
  );
  }
  export default CustomContainer;
  • Containerコンポーネント:
    • maxWidthプロパティ: maxWidth="sm"は、コンテナの最大幅を設定しています。この設定は、テーマのブレークポイントに基づいており、スクリーンサイズに応じて幅が変化します。
    • fixedプロパティ: fixedプロパティを使用すると、コンテナの幅が固定され、画面の幅に応じて変化しません。デフォルトでは可変幅でレスポンシブに変化します。

3. グリッドシステムの活用

  1. グリッドシステムの概要: グリッドシステムは、コンポーネントをきれいに配置し、レスポンシブなレイアウトを作成するためのツールです。Material UIのGridコンポーネントを使用すると、画面サイズに応じてコンポーネントの配置やサイズを柔軟に調整できます。Gridコンポーネントは、レイアウト全体を管理するcontainerと、その中の要素を配置するitemのプロパティを持ちます。

  2. 実装例:

import React from "react";
import Grid from "@mui/material/Grid";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";


function CustomBox() {
    return (
      <Box
        sx={{
          border: "1px solid gray",
          padding: 2,
          borderRadius: 1,
          marginBottom: 2,
        }}
      >
        <Typography variant="h5" component="div">
          タイトル ほげほげ
        </Typography>
        <Typography variant="body2" color="text.secondary">
          テキスト　ほげほげ
        </Typography>
      </Box>
    );
  }


function CustomContainer() {
    return (
      <Container maxWidth="sm" fixed>
        <CustomBox />
      </Container>
    );
  }


function GridLayout() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={3}>
        <CustomContainer />
      </Grid>
      <Grid item xs={12} sm={3}>
        <CustomContainer />
      </Grid>
      <Grid item xs={12} sm={3}>
        <CustomContainer />
      </Grid>
      <Grid item xs={12} sm={3}>
        <CustomContainer />
      </Grid>
    </Grid>
  );
}

export default GridLayout;
  • Gridコンポーネント:
    • containerプロパティ: containerプロパティを使用すると、Gridコンポーネント内に他のコンポーネントを配置できます。spacing={2}は、コンポーネント間のスペースを設定しています。

    • itemプロパティ: itemプロパティは、グリッド内に配置される各要素に使用されます。これにより、各要素がグリッドシステムの一部として認識され、指定されたスペース内に配置されます。例えば、画面サイズやブレークポイントに応じて、各アイテムの幅を設定することができます。

      例えば、xs={12}は、画面が小さい場合にアイテムが全幅を占めることを意味し、sm={3}は、画面が大きい場合にアイテムが4分の1の幅を占めることを意味します。比率を変更して変更してみてください。

      ブレーキングポイントについての参考：Default breakpoints

応用的な使い方

MUIを使った応用的なコンポーネントの使い方を紹介します。具体的には、ボタンをクリックすると発火するイベントの設定方法と、実践的なテキストエリアの作り方について説明します。

1. ボタンをクリックすると発火するイベント

MUIのボタンコンポーネントを使用して、ユーザーがボタンをクリックした際に特定のイベントが発火するように設定できます。以下は、ボタンをクリックするとアラートが表示されるシンプルな例です。

'use client';

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

function ClickableButton() {
  const handleClick = () => {
    alert('ボタンがクリックされました！');
  };

  return (
    <Button variant="contained" color="primary" onClick={handleClick}>
      クリックしてアラート
    </Button>
  );
}

export default ClickableButton;

handleClick関数は、アラートが表示されるような関数です。実践では、この部分がAPIリクエストや他の処理に置き換えられることが多いです。

2. テキストエリアの作成

MUIのテキストフィールドコンポーネントを使用して、ユーザーがテキストを入力できるテキストエリアを作成する方法を紹介します。以下は、ユーザーがテキストを入力すると、入力されたテキストがテキストフィールドに表示され、「送信」ボタンをクリックするとアラートが表示される例です。

"use client";

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

function TextAreaExample() {
  const [text, setText] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  const handleSubmit = () => {
    alert(`入力されたテキスト: ${text}`);
  };

  return (
    <div>
      <TextField
        label="テキストを入力してください"
        multiline
        variant="outlined"
        value={text}
        onChange={handleChange}
        fullWidth
      />
      <Button
        variant="contained"
        color="primary"
        onClick={handleSubmit}
        style={{ marginTop: "10px" }}
      >
        送信
      </Button>
    </div>
  );
}

export default TextAreaExample;

この例では、useStateフックを使用して、テキストフィールドに入力されたテキストをstateとして管理しています。handleChange関数は、テキストフィールドの値が変更されるたびに呼び出され、入力されたテキストをstateに保存します。handleSubmit関数は、「送信」ボタンがクリックされたときに呼び出され、アラートを表示します。

まとめ

この記事では、MUI（Material-UI）の基本的な使い方と応用的な使い方について紹介しました。MUIを使うことで、簡単に統一的なUIを作成できるため、Reactアプリケーションの開発に役立ちますので是非活用してみてください。

外崎 隼斗 (記事一覧)

アプリケーションサービス部ディベロップサービス1課

雑食系