【初心者向け】MUI（Material UI）入門！導入から使い方まで解説

By /

はい、承知いたしました。MUI（Material UI）を初めて使う方向けに、導入から基本的な使い方、重要なコンセプトまでを網羅した詳細な解説記事を約5000語で記述します。記事形式で直接出力します。

【初心者向け】MUI（Material UI）入門！導入から使い方まで徹底解説

ReactでWebアプリケーション開発を始めたばかりの皆さん、デザインやUIコンポーネントの実装に時間を取られていませんか？「もっと素早く、もっと簡単に、見た目も整ったUIを作りたい！」そう願うなら、MUI（Material UI）が強力な味方になります。

この詳細なガイドでは、MUIの基本から、プロジェクトへの導入方法、基本的なコンポーネントの使い方、そしてカスタマイズの要となるスタイル適用方法まで、初心者の方でもつまずかないように丁寧に解説していきます。この記事を読めば、あなたもMUIを使って効率的に、そして美しいUIを持つReactアプリケーションを開発できるようになるでしょう。

さあ、MUIの世界へ踏み込みましょう！

はじめに：MUI（Material UI）とは何か？なぜ使うのか？

MUIとは？

MUIは、ReactのためのオープンソースのUIライブラリです。Googleが提唱するMaterial Designというデザインシステムを基盤としており、このデザイン原則に基づいた高品質なUIコンポーネント（ボタン、テキストフィールド、ダイアログなど）を豊富に提供しています。

Material Designは、物理世界とその動きをデジタル環境に適用することを試みたデザインシステムです。直感的で一貫性のあるユーザーインターフェースの構築を目指しています。MUIは、このMaterial Designの思想をReactコンポーネントとして忠実に再現しています。

MUIは以前は「Material-UI」という名前でしたが、バージョン5からはブランド名を「MUI」に変更し、より広範なUIツールキットを提供する方向に進化しています。この記事では、主に最新バージョンであるMUI v5以降を対象として解説します。

なぜMUIを使うべきなのか？

ReactでUIを構築する方法はMUI以外にもたくさんあります。自分でCSSを書く、Bootstrapのような別のCSSフレームワークを使う、Styled ComponentsのようなCSS-in-JSライブラリと組み合わせてゼロからコンポーネントを作るなど、選択肢は多岐にわたります。その中で、なぜMUIを選ぶメリットがあるのでしょうか？

  1. 開発速度の向上: これがMUIを使う最大の理由の一つです。あらかじめデザインされ、機能も実装されたコンポーネントが豊富に用意されているため、ゼロからボタンやフォームを作る必要がありません。必要なコンポーネントをインポートして配置するだけで、すぐに機能するUIを構築できます。これにより、アプリケーションのコアロジック開発に集中する時間を増やせます。

  2. 一貫性のあるデザイン: Material Designに基づいているため、MUIのコンポーネントはすべて統一されたルック＆フィールを持っています。これにより、アプリケーション全体でデザインの一貫性を保つことが容易になり、プロフェッショナルな印象を与えることができます。

  3. 高いカスタマイズ性: 「Material Designの見た目そのままじゃないとダメなの？」と思うかもしれませんが、そんなことはありません。MUIはテーマ設定やsxプロパティなどを通じて、色、タイポグラフィ、間隔、形状など、デザインのあらゆる側面を簡単にカスタマイズできます。企業ブランディングに合わせたデザインへの変更も柔軟に対応できます。

  4. レスポンシブ対応: 多くのMUIコンポーネントは、デフォルトでレスポンシブデザインに対応しています。異なる画面サイズ（スマートフォン、タブレット、PC）に応じてレイアウトや表示を自動的に調整してくれるため、別途ブレークポイントごとに細かくCSSを書く手間が省けます。

  5. アクセシビリティ: MUIのコンポーネントは、WCAG（Web Content Accessibility Guidelines）に準拠するように設計されています。キーボードナビゲーション、ARIA属性、フォーカス管理などが考慮されており、アクセシビリティの高いアプリケーション開発をサポートします。これは非常に重要な点であり、自分自身でゼロから実装するとなるとかなりの労力が必要です。

  6. 活発なコミュニティと豊富なドキュメント: MUIは非常に人気のあるライブラリであり、ユーザーコミュニティが活発です。問題が発生した際に助けを得やすく、また公式ドキュメントも非常に詳細で充実しています。これは学習を進める上で非常に大きなメリットとなります。

これらのメリットから、MUIは特に管理画面、社内ツール、ダッシュボードなど、機能性と開発速度が求められるプロジェクトにおいて非常に効果を発揮します。もちろん、一般ユーザー向けのサービスでも、洗練されたUIを素早く構築したい場合に適しています。

MUIが向いているプロジェクト・向いていないプロジェクト

  • 向いている:

    • 開発速度を重視したい
    • Material Designの見た目が好き、またはそれに近いデザインで問題ない
    • デザインの一貫性を簡単に保ちたい
    • レスポンシブ対応やアクセシビリティを効率的に実現したい
    • 管理画面や社内ツールなど、多数の標準的なUI要素が必要なアプリケーション

  • 向いていない:

    • 完全に独自の、Material Designとはかけ離れたアバンギャルドなデザインを厳密に追求したい（全くできないわけではないが、MUIの恩恵を受けにくい）
    • 極端にバンドルサイズを小さくしたい（他の軽量なライブラリや、ゼロからのCSSよりは大きくなる可能性がある）
    • Reactを使わないプロジェクト（MUIはReact専用ライブラリです）

あなたがもしReactでの開発プロジェクトを持っていて、上記の「向いている」項目にピンとくるものがあるなら、MUIを試してみる価値は十分にあります。

準備：MUIを始めるために必要なこと

MUIをプロジェクトに導入する前に、いくつかの準備が必要です。

  1. Reactの基本的な知識: 関数コンポーネント、JSX、props、state、Hooks（useState, useEffectなど）といった、Reactの基本的な概念を理解している必要があります。
  2. JavaScript (ES6+) の知識: import/export構文、アロー関数、分割代入など、モダンなJavaScriptの知識があるとコードの理解が深まります。
  3. Node.jsとnpmまたはyarnのインストール: Reactプロジェクトを作成・実行するために必要です。
  4. 既存のReactプロジェクト: 新規でプロジェクトを作成するか、既存のプロジェクトを用意してください。create-react-app、Vite、Next.jsなど、どのような環境でも構いません。

この記事では、すでにReactプロジェクトが用意されている前提で進めます。もしプロジェクトがない場合は、Viteなどを使って新規作成してください。

“`bash

Viteを使って新規Reactプロジェクトを作成する場合

npm create vite my-mui-app –template react
cd my-mui-app
npm install
npm run dev # プロジェクトが起動することを確認
“`

導入：MUIをプロジェクトにインストールしよう

さあ、MUIをあなたのReactプロジェクトに組み込みましょう。インストールは非常に簡単です。

ターミナルを開き、プロジェクトのルートディレクトリに移動してから、以下のコマンドを実行します。npmまたはyarnのどちらか使い慣れている方を使用してください。

npmの場合:

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

yarnの場合:

bash
yarn add @mui/material @emotion/react @emotion/styled

pnpmの場合:

bash
pnpm add @mui/material @emotion/react @emotion/styled

各パッケージの説明

  • @mui/material: これがMUIの主要なコンポーネントライブラリ本体です。Material Designに基づいたUIコンポーネント（Button, TextField, Paperなど）が含まれています。
  • @emotion/react と @emotion/styled: MUI v5以降では、デフォルトのスタイリングエンジンとしてEmotionが推奨されています。これらのパッケージは、Emotionを使ってコンポーネントにスタイルを適用するために必要です。（MUIはStyled Componentsもサポートしていますが、Emotionがデフォルトであり、よりバンドルサイズが小さい傾向があるため、初心者の方はEmotionを選択するのがおすすめです）

ロボットフォント（Roboto）の導入

Material Designでは、デフォルトのフォントとしてRobotoが推奨されています。MUIのコンポーネントも、Robotoが適用されていることを前提としたデザインになっています。 Robotoを導入しないと、一部のコンポーネントの見た目が意図通りにならない可能性があります。

Robotoを導入する方法はいくつかありますが、最も簡単なのはHTMLファイルの<head>セクションにCDNリンクを追加する方法です。

通常、Reactプロジェクトの公開用HTMLファイルは public/index.html または index.html にあります。そのファイルを開き、<head>タグ内に以下の<link>タグを追加してください。

“`html








React App




“`

これで、RobotoフォントとMaterial Iconsフォントがプロジェクトで利用できるようになります。

基本的なコンポーネントを使ってみよう

インストールが完了したら、早速MUIのコンポーネントを使ってみましょう。まずは最も基本的でよく使うコンポーネントであるButtonとTypographyを使ってみます。

Reactのコンポーネントファイル（例: src/App.js または新しいコンポーネントファイル）を開き、以下のコードを記述してみましょう。

“`javascript
import React from ‘react’;
import { Button, Typography, Container, Box } from ‘@mui/material’;
import FavoriteIcon from ‘@mui/icons-material/Favorite’; // アイコンも使ってみる

function App() {
return (
// ContainerとBoxはレイアウトやスタイル適用に便利なコンポーネント



MUI 入門へようこそ！

    <Typography variant="body1" paragraph>
      これはMUIのTypographyコンポーネントを使ったテキストです。
      variantプロパティで見た目を、componentプロパティでHTMLタグを指定できます。
    </Typography>

    <Box sx={{ '& button': { m: 1 } }}> {/* 子要素のボタンにマージンを適用 */}
      {/* ボタンの基本的な使い方 */}
      <Button variant="text">Text Button</Button>
      <Button variant="contained">Contained Button</Button>
      <Button variant="outlined">Outlined Button</Button>

      {/* 色やサイズを変更 */}
      <Button variant="contained" color="secondary">
        Secondary Button
      </Button>
      <Button variant="contained" color="success" size="large">
        Large Success Button
      </Button>

      {/* アイコン付きボタン */}
      <Button variant="contained" startIcon={<FavoriteIcon />} color="error">
        Like
      </Button>
       <Button variant="outlined" endIcon={<FavoriteIcon />}>
        Like
      </Button>

      {/* クリックイベントの処理 */}
      <Button variant="contained" onClick={() => alert('ボタンがクリックされました！')}>
        Click Me
      </Button>
    </Box>

    {/* ちょっとした余白を追加 */}
    <Box sx={{ mt: 4 }}>
         <Typography variant="h5" component="h2" gutterBottom>
            その他の基本的なコンポーネント（例）
         </Typography>
         {/* 他のコンポーネントの例は後述しますが、ここでは概念だけ */}
         {/* <TextField label="名前" variant="outlined" /> */}
         {/* <Checkbox defaultChecked /> ラベル付きはFormControlLabelを使うのが一般的 */}
         {/* <Paper elevation={3} sx={{ p: 2, mt: 2 }}> 紙のようなUI </Paper> */}
    </Box>

  </Box>
</Container>

);
}

export default App;
“`

上記のコードを保存して開発サーバーを起動（npm start または npm run dev）すると、MUIのスタイルが適用されたボタンとテキストが表示されるはずです。

コードの解説

  • import { Button, Typography, Container, Box } from '@mui/material';: 使いたいMUIコンポーネントを@mui/materialからインポートします。必要なコンポーネントだけをインポートすることで、バンドルサイズを抑えられます。
  • import FavoriteIcon from '@mui/icons-material/Favorite';: アイコンを使う場合は、別途 @mui/icons-material パッケージをインストールし、使いたいアイコンをインポートします。（アイコンパッケージのインストール方法は後述します）
  • <Container>: コンテンツの幅を制限し、中央寄せするためのレイアウトコンポーネントです。maxWidthプロパティで最大幅を指定できます（’xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, false）。
  • <Box>: スタイリングやレイアウトのために柔軟に使える汎用コンポーネントです。主にsxプロパティを使ってスタイルを適用します。これはMUIで最も頻繁に使うコンポーネントの一つになるでしょう。
  • <Typography>: テキストを表示するためのコンポーネントです。
    • variant: テキストの種類（見出し、本文、キャプションなど）を指定します。h1～h6, subtitle1, subtitle2, body1, body2, caption, button, overline, inheritなどの値があります。指定したvariantに基づいて、フォントサイズ、太さ、行高などが自動的に設定されます。
    • component: 実際にレンダリングされるHTMLタグを指定します。例えば、variant="h4"で見た目はh4にしても、component="h1"とすればSEO的にはh1として扱われます。セマンティックなHTML構造を保つために重要です。
    • gutterBottom: 段落の下に余白を追加します。
    • paragraph: 要素が段落であることを示し、下部にマージンを追加します（通常<p>タグに使用）。
  • <Button>: ボタンを表示するためのコンポーネントです。
    • variant: ボタンの見た目を指定します。
      • text: テキストのみのボタン。
      • contained: 背景色で塗りつぶされたボタン（デフォルトのプライマリアクションに推奨）。
      • outlined: 境界線のみのボタン（セカンダリアクションに推奨）。
    • color: ボタンの色を指定します。primary（デフォルトの青など）、secondary（デフォルトの紫など）、error, warning, info, successといったテーマで定義された色や、CSSの色コード（例: color="#ff0000"）を指定できます。
    • size: ボタンのサイズを指定します。small, medium（デフォルト）, large。
    • disabled: trueにするとボタンが無効になり、クリックできなくなります。
    • href: リンクとして機能させたい場合にURLを指定します。<button>タグではなく<a>タグとしてレンダリングされます。
    • startIcon, endIcon: ボタンのテキストの前後ろにアイコンを配置できます。アイコンコンポーネントを渡します。
    • その他のHTML属性: 標準的なHTMLの<button>タグで使える属性（onClick, typeなど）は、ほとんどMUIのButtonコンポーネントでもそのまま使えます。
  • sxプロパティ: スタイルを適用するためのMUI独自のプロパティです。これはMUIのスタイリングの要となる機能で、後ほど詳しく解説します。上記の例では、ContainerやBoxに余白（mt: 4, my: 4）や、子要素のボタンにマージン（'& button': { m: 1 }）を適用しています。

アイコンの導入

Material Design Iconsを使うには、追加のパッケージが必要です。

“`bash

npmの場合

npm install @mui/icons-material

yarnの場合

yarn add @mui/icons-material
“`

インストール後、使いたいアイコンを@mui/icons-materialからインポートして使用します。アイコンの名前は、Material Iconsの公式サイトやMUIのドキュメントで確認できます（例: FavoriteIcon, MenuIcon, SettingsIconなど）。

“`javascript
import FavoriteIcon from ‘@mui/icons-material/Favorite’;

// … コンポーネント内で使用

“`

アイコンコンポーネントも、colorやfontSizeプロパティで色やサイズを簡単に変更できます。

javascript
<FavoriteIcon color="error" fontSize="large" />

スタイリング：MUIコンポーネントの見た目を変更する

MUIを使う上で避けて通れない、そして最も強力な機能の一つがスタイリングです。MUIはコンポーネントにスタイルを適用するためにいくつかの方法を提供していますが、v5以降で最も推奨され、柔軟性が高いのがsxプロパティです。

sxプロパティとは？

sxプロパティは、MUI v5で導入された強力なスタイリングシステムです。Reactコンポーネントに直接CSSプロパティやMUIのテーマに関連するプロパティをオブジェクトとして渡すことで、そのコンポーネントにスタイルを適用できます。

sxプロパティのメリットは以下の通りです。

  • 直感的: CSSプロパティ名をキャメルケースで記述するため、インラインスタイルに近い感覚で書けます。
  • テーマへのアクセス: MUIのテーマ（色、間隔、タイポグラフィなど）に簡単にアクセスできます。
  • システムプロパティ: m, p, color, bgcolor, fontSize, fontWeight, display, flexなど、一般的なCSSプロパティに対するショートハンドや、MUI独自の便利なプロパティ（System Properties）が使えます。
  • レスポンシブ対応: ブレークポイントごとに異なるスタイルを適用するのが非常に簡単です。
  • 擬似セレクタ・ネスト: :hover, :focusなどの擬似セレクタや、子要素に対するスタイルも記述できます。
  • 他のスタイルシステムとの併用: EmotionやStyled Componentsのstyledユーティリティとも組み合わせて使えます。

多くのMUIコンポーネント（特にBoxやレイアウトコンポーネント）がsxプロパティをサポートしています。自分で作成したコンポーネントでも、MUIのBoxやstyledユーティリティを使うことでsxプロパティを使えるようにできます。

sxプロパティの基本的な使い方

sxプロパティには、スタイルを定義したオブジェクトを渡します。CSSプロパティ名は、CSSのようにハイフン繋ぎ（例: background-color）ではなく、JavaScriptのオブジェクトのキーとして有効なキャメルケース（例: backgroundColor）で記述します。

“`javascript
import { Box, Button } from ‘@mui/material’;

function MyStyledComponent() {
return (

スタイルされたBox


);
}
“`

sxプロパティでよく使う機能

  1. システムプロパティ (System Properties):
    MUI Systemが提供する、スタイリングに便利なショートハンドやプロパティです。sxプロパティ内で直接使えます。

    • Spacing (間隔): m (margin), p (padding) を基本に、方向を示す文字と組み合わせます。値はテーマで定義された間隔単位（通常は8pxの倍数）の乗数として解釈されます。
      • m: margin (全方向)
      • mt: margin-top
      • mb: margin-bottom
      • ml: margin-left
      • mr: margin-right
      • mx: margin-left + margin-right
      • my: margin-top + margin-bottom
      • p, pt, pb, pl, pr, px, py: padding も同様
      • 値: 1 (8px), 2 (16px), auto, '16px', '50%' など。
      • 例: sx={{ mt: 2, mx: 'auto', p: 3 }} は margin-top: 16px; margin-left: auto; margin-right: auto; padding: 24px; とほぼ同等に解釈されます。
    • Sizing (サイズ): width, height, minWidth, maxWidth, minHeight, maxHeight。値は数値（pxとして解釈）、パーセンテージ文字列、またはテーマの値。
      • 例: sx={{ width: 300, height: '50vh', maxWidth: 'lg' }}
    • Colors (色): color, bgcolor (background-color)。テーマで定義された色名（例: primary.main, secondary.light, grey.500）またはCSSの色コード。
      • 例: sx={{ color: 'text.primary', bgcolor: 'background.paper' }}
    • Display: display, flexDirection, justifyContent, alignItemsなど、flexboxやgridに関するプロパティ。
      • 例: sx={{ display: 'flex', justifyContent: 'space-between' }}
    • その他にも、border, position, shadow, typographyなど、多くのシステムプロパティがあります。詳細はMUIのSystemドキュメントを参照してください。

  2. レスポンシブ値:
    sxプロパティの値として、単一の値の代わりにオブジェクトを渡すことで、ブレークポイントごとに異なるスタイルを適用できます。MUIのデフォルトブレークポイントは、xs (extra-small, 0+), sm (small, 600+px), md (medium, 900+px), lg (large, 1200+px), xl (extra-large, 1536+px) です。

    • 例: sx={{ width: { xs: 100, sm: 200, md: 300 } }}
      • xsサイズ（0px以上）では width: 100px
      • smサイズ（600px以上）では width: 200px
      • mdサイズ（900px以上）以上では width: 300px となります。
    • 配列形式も使用できます。例: sx={{ width: [100, 200, 300] }} は width: { xs: 100, sm: 200, md: 300 } と同じ意味になります（ブレークポイントの順序に対応）。
    • 例: sx={{ display: { xs: 'none', md: 'block' } }} は、mdサイズ未満では要素を非表示にし、mdサイズ以上で表示します。

  3. 擬似セレクタとネスト:
    セレクタ文字列をキーとして、そのセレクタに適用するスタイルをオブジェクトとして記述できます。

    • 例: sx={{ '&:hover': { opacity: 0.8 }, '& .my-child-class': { color: 'blue' } }}
      • &:hover: その要素自身がホバーされたときのスタイル
      • & .my-child-class: その要素の子孫でクラス名が my-child-class の要素に対するスタイル
    • & はその要素自身を表します。

他のスタイリング方法（補足）

sxプロパティが推奨されますが、他の方法も存在します。

  • styledユーティリティ: EmotionやStyled Componentsのように、新しいスタイル付きコンポーネントを定義するためのユーティリティです。より複雑なスタイルや、再利用性の高いスタイルを持つコンポーネントを作成する場合に適しています。sxプロパティよりも詳細な制御が可能ですが、初心者には少し敷居が高いかもしれません。
  • CSSモジュールや通常のCSS: MUIコンポーネントにもクラス名が付与されているので、それらをターゲットに通常のCSSやCSSモジュールでスタイルを適用することも可能ですが、テーマの恩恵を受けにくく、スタイル衝突の管理が必要になる場合があります。
  • インラインスタイル: React標準のインラインスタイルも使えますが、擬似セレクタやメディアクエリなどが使えず、テーマにもアクセスできないため、限定的な使用にとどめるのが一般的です。

結論として、MUIでのスタイリングは、まずはsxプロパティをマスターすることから始めるのが最も効率的で推奨されるアプローチです。

テーマ：アプリケーション全体のデザインを統一する

MUIの強力な機能の一つにテーマ（Theme）があります。テーマは、アプリケーション全体で使用されるデザインの基準（色、タイポグラフィ、間隔、形状、ブレークポイントなど）を集中管理するためのオブジェクトです。

テーマを使用することで、以下のようなメリットがあります。

  • デザインの一貫性: アプリケーション全体で同じ色、同じフォントサイズ、同じ間隔などが使用されるため、デザインに統一感が生まれます。
  • 簡単なデザイン変更: アプリケーション全体のデザインを変更したい場合、テーマオブジェクトの値を変更するだけで、そのテーマを使っている全てのコンポーネントに反映されます。
  • 開発者間の連携: デザイナーと開発者の間で、デザインの基準をテーマオブジェクトという形で共有しやすくなります。

デフォルトテーマ

MUIはデフォルトのテーマを提供しており、特に設定を行わない場合はこのデフォルトテーマが使用されます。このデフォルトテーマに基づいて、各コンポーネントのデフォルトの見た目（プライマリボタンの色、h1のフォントサイズなど）が決まります。

カスタムテーマの作成と適用

独自のテーマを作成し、アプリケーションに適用することで、Material Designの見た目をベースにしながらも、独自のブランディングやデザイン要件に合わせたカスタマイズが可能です。

  1. createTheme関数を使う: MUIが提供するcreateTheme関数を使って、カスタムテーマオブジェクトを作成します。デフォルトテーマをベースに、変更したい部分だけを上書きしていくのが一般的です。

    “`javascript
    import { createTheme } from ‘@mui/material/styles’;

    const theme = createTheme({
    palette: { // 色の設定
    primary: {
    main: ‘#1976d2’, // デフォルトの青
    light: ‘#42a5f5’,
    dark: ‘#1565c0’,
    contrastText: ‘#fff’,
    },
    secondary: {
    main: ‘#9c27b0’, // デフォルトの紫
    light: ‘#ba68c8’,
    dark: ‘#7b1fa2’,
    contrastText: ‘#fff’,
    },
    // その他の色もここで設定
    error: { main: ‘#f44336’ },
    warning: { main: ‘#ff9800’ },
    info: { main: ‘#2196f3’ },
    success: { main: ‘#4caf50’ },
    text: { // テキストの色
    primary: ‘rgba(0, 0, 0, 0.87)’,
    secondary: ‘rgba(0, 0, 0, 0.6)’,
    disabled: ‘rgba(0, 0, 0, 0.38)’,
    },
    background: { // 背景色
    default: ‘#fff’,
    paper: ‘#fff’,
    },
    },
    typography: { // タイポグラフィ（フォント、サイズ、太さなど）の設定
    fontFamily: [
    ‘Roboto’,
    ‘”Helvetica Neue”‘,
    ‘Arial’,
    ‘sans-serif’,
    ].join(‘,’),
    h1: {
    fontSize: ‘3rem’, // h1のフォントサイズを変更
    fontWeight: 500,
    },
    body1: {
    fontSize: ‘1rem’,
    lineHeight: 1.5,
    },
    // 他のvariantも設定可能
    },
    spacing: 8, // 間隔単位の基本値（px）。デフォルトは8。これを変更するとm,pなどの値の解釈が変わる
    // breakpionts: …, // ブレークポイントの変更も可能
    // components: …, // 個別コンポーネントのデフォルトスタイルの変更
    // shape: …, // ボーダーラディウスなど
    // shadows: …, // シャドウ
    });

    export default theme;
    “`

    上記の例では、paletteで色の定義を、typographyでフォント関連の設定を変更しています。spacingを変更すると、sx={{ m: 2 }}のような記述が16pxではなく、変更したspacing * 2として解釈されるようになります。

  2. ThemeProviderを使う: 作成したカスタムテーマオブジェクトをアプリケーション全体に適用するには、MUIが提供するThemeProviderコンポーネメントを使用します。通常、アプリケーションのルートコンポーネント（例: src/index.js または src/App.js の一番親）をThemeProviderで囲みます。

    “`javascript
    // src/index.js または src/App.js の一番親のファイル
    import React from ‘react’;
    import ReactDOM from ‘react-dom/client’; // React 18の場合
    import App from ‘./App’;
    import { ThemeProvider } from ‘@mui/material/styles’;
    import theme from ‘./theme’; // 上で作成したカスタムテーマをインポート

    const root = ReactDOM.createRoot(document.getElementById(‘root’));
    root.render(

    {/ ThemeProviderでAppコンポーネント全体を囲む /}

    {/ CSSベースラインの追加（任意だが推奨） /}




    );
    ``
    * **    CssBaseline:** これはMUIが提供するコンポーネントで、ブラウザ間のCSSの差異を吸収し、Material Designのベースとなるスタイル（余白のリセット、背景色、フォントの適用など）を適用します。アプリケーション全体に適用すると、MUIコンポーネントの見た目がより期待通りになります。ThemeProvider`の中で使用するのが一般的です。

これで、アプリケーション全体にカスタムテーマが適用され、MUIコンポーネントがそのテーマ設定に基づいてレンダリングされるようになります。例えば、先ほどのButtonコンポーネントは、テーマで定義したprimary.mainの色を使うようになります。

テーマの値へのアクセス

カスタムテーマで定義した値は、sxプロパティ内や、MUIのHooks（例: useTheme）を使ってコンポーネント内でアクセスできます。

  • sxプロパティでアクセス:
    テーマで定義された色や間隔、タイポグラフィの値は、文字列や数値として直接参照できます。

    • 色: sx={{ color: 'primary.main', bgcolor: 'secondary.light' }}
    • 間隔: sx={{ m: 2, p: 3 }} (theme.spacing(2) と theme.spacing(3) に相当)
    • ブレークポイント: sx={{ width: { sm: 400, md: 600 } }} (smブレークポイントで400px, mdブレークポイント以上で600px)
    • タイポグラフィ: sx={{ fontSize: 'h6.fontSize' }} (テーマのh6で定義されたフォントサイズ)

  • useTheme Hookでアクセス:
    関数コンポーネント内でテーマオブジェクト全体にアクセスしたい場合は、@mui/material/stylesからuseTheme Hookをインポートして使用します。

    “`javascript
    import { useTheme } from ‘@mui/material/styles’;
    import { Typography } from ‘@mui/material’;

    function MyComponent() {
    const theme = useTheme();

    return (

    エラーメッセージ

    );
    }
    ``useTheme`を使うと、より複雑なロジックに基づいてテーマの値を使用したり、テーマ全体を参照したりできます。

テーマはMUIアプリケーションの見た目を管理する上で非常に重要です。最初はデフォルトテーマのままでも構いませんが、アプリケーション固有のデザインが必要になったら、積極的にカスタムテーマを活用しましょう。

レイアウト：GridとStackを使ってみよう

アプリケーションのUIは、個々のコンポーネントを並べるだけでなく、それらをどのように配置し、レイアウトするかが重要です。MUIはレイアウト構築を助ける強力なコンポーネントを提供しています。特にGridとStackはよく使われます。

Gridシステム

MUIのGridコンポーネントは、レスポンシブ対応の12カラムグリッドシステムに基づいています。Web開発で一般的なグリッドレイアウトを簡単に実装できます。Flexboxを内部的に利用しています。

基本的な使い方は、コンテナとなる<Grid container>とその中に配置する項目となる<Grid item>を組み合わせます。

“`javascript
import { Grid, Paper, Box } from ‘@mui/material’;

function MyGridLayout() {
return (

{/ containerプロパティでグリッドコンテナを指定 /}
{/ spacingでグリッド間の間隔を指定 /}
{/ itemプロパティでグリッド項目を指定 /}
{/ xs, sm, md, lg, xlプロパティで各ブレークポイントでのカラム幅を指定 (合計12になるように) /}


項目 1 (xs=12, sm=6, md=4)




項目 2 (xs=12, sm=6, md=4)




項目 3 (xs=12, sm=6, md=4)


{/ 合計12カラムになるように自由に組み合わせ /}

項目 4 (xs=6, sm=3)




項目 5 (xs=6, sm=9)




);
}
“`

Gridコンポーネントの主要なプロパティ

  • <Grid container> に適用するもの:

    • container: この要素がグリッドコンテナであることを示します。必須です。
    • spacing: グリッド項目間の間隔を指定します。数値（テーマの間隔単位）またはオブジェクト（ブレークポイントごと）。spacing={2} は上下左右に theme.spacing(2) の間隔を入れます。
    • direction: 項目の並ぶ方向 (row (デフォルト), row-reverse, column, column-reverse)。
    • justifyContent: 主軸方向（directionで指定した方向）の項目の揃え方。Flexboxのjustify-contentプロパティに対応します。
    • alignItems: 交差軸方向（directionと垂直な方向）の項目の揃え方。Flexboxのalign-itemsプロパティに対応します。
    • columns: グリッドシステムの総カラム数を変更できますが、通常はデフォルトの12で十分です。

  • <Grid item> に適用するもの:

    • item: この要素がグリッド項目であることを示します。必須です。
    • xs, sm, md, lg, xl: 各ブレークポイントで項目が占めるカラム数を指定します。1から12までの数値。xs={12} は最も小さい画面幅では全幅を占めることを意味します。指定がないブレークポイントでは、それより小さい画面幅での指定値が継承されます。例えば sm={6} だけ指定すると、xsでは全幅（デフォルト）、sm以上で6カラム幅になります。
    • auto: 項目の幅をコンテンツに合わせて自動調整します。
    • zeroMinWidth: itemのmin-widthを0に設定します。コンテンツが広い場合にグリッドが崩れるのを防ぐことがあります。
    • その他のFlexboxプロパティ: alignSelf, order, flexGrow, flexShrink なども適用可能です。

Gridシステムを使うことで、レスポンシブなレイアウトを比較的簡単に構築できます。特に複雑な2次元レイアウト（複数行・複数列）に適しています。

Stackコンポーネント

Stackコンポーネントは、1次元（水平または垂直）のレイアウトを簡単に構築するためのコンポーネントです。Flexboxを内部的に利用しており、特にシンプルなリスト状の要素配置や、要素間に一定の間隔を開けたい場合に非常に便利です。BoxコンポーネントのFlexboxプロパティをより簡単に扱えるようにしたようなイメージです。

“`javascript
import { Stack, Button } from ‘@mui/material’;

function MyStackLayout() {
return (





);
}
“`

Stackコンポーネントの主要なプロパティ

  • spacing: 子要素間の間隔を指定します。数値（テーマの間隔単位）またはオブジェクト（ブレークポイントごと）。
  • direction: 子要素の並ぶ方向 (row, row-reverse, column, column-reverse)。デフォルトはcolumnです。
  • justifyContent: 主軸方向の要素の揃え方。
  • alignItems: 交差軸方向の要素の揃え方。

StackはGridよりもシンプルで、要素を単一の方向（水平か垂直）に並べたい場合に特に便利です。要素間の間隔指定がspacingプロパティ一つで済むのが大きな利点です。

GridとStackの使い分け:

  • Grid: 複雑な2次元レイアウト（複数行、複数列）、レスポンシブなカラム分割が必要な場合。
  • Stack: シンプルな1次元レイアウト（水平方向または垂直方向）、要素間の間隔を均等に開けたい場合。

両方のコンポーネントは組み合わせて使用することも可能です。例えば、Gridの項目の中にStackを使って要素を垂直に並べるといったこともできます。

よく使うその他のコンポーネント

MUIにはButtonやTypography以外にも、Webアプリケーション開発で頻繁に使用される様々なUIコンポーネントが用意されています。全てを紹介することはできませんが、代表的なものをいくつか紹介します。

  • TextField: テキスト入力欄。様々な種類（outlined, filled, standard）、ラベル、ヘルパーテキスト、バリデーションなどを簡単に設定できます。フォーム作成に必須です。
    javascript
    import TextField from '@mui/material/TextField';
    // ...
    <TextField id="my-input" label="名前を入力" variant="outlined" helperText="お名前を入力してください" />
  • Checkbox, Radio, Select: フォームでの選択肢。FormControl, FormLabel, FormGroup, FormControlLabel と組み合わせて使うことで、アクセシビリティやグループ化を考慮したフォーム要素を作成できます。
  • Paper: 紙のような見た目のコンテナ。UI要素を囲んで視覚的に区切ったり、要素に奥行き（シャドウ）を与えたりするのに使います。elevationプロパティでシャドウの強さを調整できます。
    javascript
    import Paper from '@mui/material/Paper';
    // ...
    <Paper elevation={3} sx={{ p: 2 }}>
    <Typography variant="h6">これはPaperコンポーネントです</Typography>
    </Paper>
  • Card: 関連する情報やアクションをまとめるためのコンテナ。画像、テキスト、ボタンなどを組み合わせて、ニュース記事や商品情報などを表示するのに使われます。
  • Dialog: ポップアップ形式でユーザーに情報を提供したり、操作を促したりするためのコンポーネント。モーダルウィンドウとして使用されます。
  • AppBar: アプリケーションのヘッダー（ナビゲーションバー）として使われるコンポーネント。タイトル、ナビゲーションメニュー、アクションボタンなどを配置するのが一般的です。
  • Drawer: 画面の端からスライドして表示されるパネル（サイドバーなど）。ナビゲーションメニューなどに使われます。
  • List: アイテムのリストを表示するためのコンポーネント。メニューや設定項目などを表示するのに使われます。ListItem, ListItemIcon, ListItemText などと組み合わせて使用します。
  • Table: 表形式でデータを表示するためのコンポーネント。Table, TableContainer, TableHead, TableBody, TableRow, TableCell などと組み合わせて使用します。
  • Rating, Slider, Switch, Stepper: 特定の入力や表示形式を提供するコンポーネント。

これらのコンポーネントは、MUIの公式ドキュメントに詳細な使い方のサンプルコードとともに解説されています。新しいコンポーネントが必要になったら、まずはMUIのドキュメントで探してみるのが良いでしょう。

もう少しだけ踏み込んだ使い方：HooksやUtilities

MUIはコンポーネントだけでなく、React Hooksや便利なユーティリティ関数も提供しています。これらを使うことで、MUIをさらに活用できます。

  • useTheme Hook: 先ほどテーマのセクションで紹介した通り、関数コンポーネント内で現在のテーマオブジェクトにアクセスできます。テーマの値に基づいて条件分岐したり、計算を行ったりする際に便利です。

  • useMediaQuery Hook: CSSのメディアクエリをJavaScriptで簡単に扱うためのHookです。現在の画面サイズが特定のブレークポイントを満たしているかどうかを判定し、それに基づいてUIの表示を切り替えたり、異なるコンポーネントをレンダリングしたりするのに使います。

    “`javascript
    import useMediaQuery from ‘@mui/material/useMediaQuery’;
    import { useTheme } from ‘@mui/material/styles’;
    import { Typography } from ‘@mui/material’;

    function ResponsiveText() {
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down(‘sm’)); // smブレークポイント未満ならtrue

    return (

    {isSmallScreen ? ‘画面が小さいです’ : ‘画面が大きいです’}

    );
    }
    ``theme.breakpoints.down(‘sm’)`のように、テーマで定義されたブレークポイントにアクセスできるのが便利です。

  • styled Utility: EmotionやStyled Componentsのstyled関数と似た機能を提供します。MUIコンポーネントや任意のHTMLタグにスタイルを適用した新しいコンポーネントを作成できます。sxプロパティよりも、より複雑なスタイルや、他のコンポーネントスタイルとの連携、高度なカスタマイズを行いたい場合に検討します。

    “`javascript
    import { styled } from ‘@mui/material/styles’;
    import Button from ‘@mui/material/Button’;

    // MUIのButtonコンポーネメントをベースにスタイルを適用した新しいコンポーネントを作成
    const MyStyledButton = styled(Button)(({ theme }) => ({
    backgroundColor: theme.palette.success.main,
    color: theme.palette.success.contrastText,
    padding: theme.spacing(1, 3),
    borderRadius: theme.shape.borderRadius, // テーマの形状設定にアクセス
    ‘&:hover’: {
    backgroundColor: theme.palette.success.dark,
    },
    }));

    function App() {
    return カスタムボタンスタイル;
    }
    ``styled`関数は、第一引数にスタイルを適用したいコンポーネントまたはHTMLタグ名（文字列）、第二引数にスタイリング関数またはスタイルオブジェクトを取ります。スタイリング関数を使うと、Propsやテーマにアクセスして動的にスタイルを生成できます。

まとめ：MUIを使いこなすためのステップ

MUIの基本的な導入から使い方までを見てきました。最後に、MUIをこれから使いこなしていくためのロードマップと、いくつかのヒントをまとめます。

  1. 公式ドキュメントを積極的に活用する: MUIのドキュメントは非常に充実しており、各コンポーネントの使い方、利用可能なProps、カスタマイズ方法、デモなどが網羅されています。新しいコンポーネントを使う際や、特定の機能を実装したい際には、まず公式ドキュメントを参照する癖をつけましょう。
  2. sxプロパティを使いこなす: ほとんどの基本的なスタイリングはsxプロパティで事足ります。テーマとの連携、システムプロパティ、レスポンシブ対応、擬似セレクタの使い方をしっかりと理解しましょう。
  3. テーマを活用してデザインの一貫性を保つ: アプリケーションの色やタイポグラフィをカスタムテーマで一元管理することで、メンテナンス性が向上し、簡単にデザイン変更が可能になります。
  4. Box, Grid, Stackでレイアウトを構築する: これらのレイアウトコンポーネントを組み合わせることで、様々な画面サイズに対応した柔軟なレイアウトを効率的に作成できます。
  5. フォーム関連コンポーネントを学ぶ: Webアプリケーションではフォームが非常に重要です。TextField, Checkbox, Radio, Selectなどのフォームコンポーネントと、それらを囲むFormControlなどの使い方を学びましょう。
  6. より高度なカスタマイズ: sxプロパティだけでは難しい場合や、再利用可能なスタイルを持つコンポーネントを作成したい場合は、styledユーティリティの利用も検討しましょう。また、テーマのcomponentsキーを使って、特定のコンポーネントのデフォルトスタイルを一括で変更することも可能です。
  7. MUIの他のライブラリを知る: MUIは @mui/material だけでなく、よりシンプルなデザインの @mui/joy や、高度なデータ表示・操作に特化した @mui/x-data-grid など、様々な関連ライブラリを提供しています。プロジェクトのニーズに合わせてこれらの利用も検討できます。
  8. アクセシビリティを意識する: MUIコンポーネントはアクセシビリティに配慮して設計されていますが、適切なARIA属性の追加やキーボード操作への対応など、コンポーネントの組み合わせ方によっては開発者側での追加対応が必要な場合もあります。MUIのアクセシビリティに関するドキュメントも確認しましょう。

よくある疑問と解決策

  • 「MUIコンポーネントの見た目をデフォルトから大きく変えたいけど、どうすればいい？」
    まずはsxプロパティで試せるか確認します。色や間隔、ボーダー、シャドウなどの基本的な変更はsxで十分可能です。より詳細な、例えばボタンの内部構造を変更したり、複雑な擬似要素を追加したりしたい場合は、styledユーティリティやテーマのcomponentsキーを使ったカスタマイズを検討します。それでも難しい場合は、MUIコンポーネントを参考にしながら、独自のReactコンポーネントをゼロから作成することも選択肢に入ります。
  • 「特定のコンポーネントに独自のクラス名をつけたい」
    ほとんどのMUIコンポーネントはclassNameプロパティをサポートしています。これにより、CSSモジュールや他のCSSフレームワークと組み合わせてスタイルを適用できます。ただし、MUIのテーマやSystemプロパティの恩恵を受けたい場合はsxを使う方が効率的なことが多いです。
  • 「バンドルサイズを小さくしたい」
    MUIは多くのコンポーネントを含むため、バンドルサイズがある程度大きくなるのは避けられません。しかし、MUIはES modulesをサポートしており、import { Button, Typography } from '@mui/material'; のように必要なコンポーネントだけをインポートすれば、不要なコードは最終的なバンドルに含まれません（Tree Shaking）。EmotionよりもStyled Componentsを使う方がわずかに大きくなる傾向があります（これはEmotionがデフォルトである理由の一つです）。本当に最小限のバンドルサイズが必要な場合は、MUI Baseなど、スタイルが当たっていないコンポーネントライブラリを検討するか、自分で最小限のCSSを書く方が良いかもしれません。
  • 「CSSフレームワーク（Bootstrapなど）と併用できる？」
    技術的には可能ですが、スタイル衝突を起こす可能性が高く、管理が複雑になるため推奨されません。MUIを使うなら、MUIのスタイリングシステム（テーマ、sx、styled）をメインに使うのが最もスムーズです。レイアウトに関しては、MUIのGridやStackで十分対応できることが多いです。
  • 「バージョンアップについていけるか心配」
    MUIはアクティブに開発されており、定期的に新しいバージョンがリリースされます。v4からv5のような大きなバージョンアップでは破壊的変更が含まれることもありますが、MUIはマイグレーションガイドを詳細に提供しています。日々の開発では、公式ブログやリリースノートをチェックし、非推奨になった機能や新しい推奨手法に慣れていくことが大切です。v5以降はAPIがかなり洗練されており、今後の安定性が期待されます。

まとめ

この記事では、React開発者向けのUIライブラリ、MUIの導入から基本的な使い方、そしてスタイリングやテーマといった重要なコンセプトまでを詳しく解説しました。

MUIは、Material Designに基づいた高品質なコンポーネントと強力なスタイリング・テーマシステムを提供することで、ReactアプリケーションのUI開発を劇的に効率化してくれます。特に開発速度、デザインの一貫性、レスポンシブ対応、アクセシビリティといった面で大きなメリットがあります。

初めてMUIを使う場合、最初は多くのコンポーネントやプロパティに圧倒されるかもしれません。しかし、まずはButton、Typography、Box、Container、Grid、Stackといった基本的なコンポーネントから使い始め、sxプロパティを使ったスタイリングに慣れることから始めれば大丈夫です。少しずつ様々なコンポーネントを試し、テーマを使ったカスタマイズに挑戦していくことで、MUIの強力さを実感できるはずです。

MUIは非常に人気があり、情報も豊富です。もしこの記事を読んでも分からないことがあれば、公式ドキュメントやWeb上の多くのチュートリアル、Stack Overflowなどのコミュニティを頼りに学習を進めてください。

さあ、MUIを使って、あなたのReactアプリケーションをもっと速く、もっと美しく開発しましょう！この記事が、その最初の一歩を踏み出す助けになれば幸いです。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール