MUI Gridの実例による解説：レイアウト、フォーム、ダッシュボード

Material UI (MUI)は、Reactで応答性の高いレイアウトを構築するための強力なGridコンポーネントシステムを提供しています。しかし、最初は特にレイアウトに使用されるGridとデータ表示に使用されるDataGridの違いが分かりにくいことがあります。この記事では、MUI Gridシステムを効果的に使用する方法を、フォーム、ダッシュボードなどに適用できる実例を交えて説明します。

MUI Gridとは何か？

MUIは2種類のグリッドコンポーネントを提供しています：

• Grid（レイアウト） @mui/materialまたは@mui/systemから：12列のフレックスボックスシステムを使用してページレイアウトを作成するために使用されます。
• Data Grid @mui/x-data-gridから：ページネーション、ソート、フィルタリングなどを備えたテーブルをレンダリングするために使用されます。

どちらを使用するかを知ることが重要です：

• レイアウトと配置を制御するにはGridを使用します。
• テーブルのような構造化データを表示する場合はDataGridを使用します。

MUI Gridによる基本レイアウト

コンテナとアイテム

MUI Gridはコンテナ + アイテムモデルを使用します：

<Grid container spacing={2}>
  <Grid item xs={6}>Left</Grid>
  <Grid item xs={6}>Right</Grid>
</Grid>

列の仕組み

グリッドは幅を12列に分割します。xs={6}は半分、xs={4}は3分の1を占めるといった具合です。

スペーシングと間隔

コンテナにspacing={n}を使用して、アイテム間に一貫したパディングを追加します。

Gridによる応答性の高いレイアウト

ブレークポイント

Gridはxs、sm、md、lg、xlのブレークポイントをサポートしています。

<Grid item xs={12} sm={6} md={4}>
  Responsive box
</Grid>

このボックスは小さい画面では全幅、中程度の画面では半分、大きい画面では3分の1の幅を占めます。

ネストされたグリッド

アイテムをコンテナにすることで、グリッドをネストできます：

<Grid item xs={12}>
  <Grid container spacing={1}>
    <Grid item xs={6}>Nested A</Grid>
    <Grid item xs={6}>Nested B</Grid>
  </Grid>
</Grid>

実際のUIパターン

フォームレイアウト

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField label="First Name" fullWidth />
  </Grid>
  <Grid item xs={12} sm={6}>
    <TextField label="Last Name" fullWidth />
  </Grid>
</Grid>

ダッシュボードカード

<Grid container spacing={2}>
  <Grid item xs={12} md={4}>
    <Paper>Stats Card</Paper>
  </Grid>
  <Grid item xs={12} md={8}>
    <Paper>Chart Area</Paper>
  </Grid>
</Grid>

サイドバー + コンテンツ

<Grid container>
  <Grid item xs={12} md={3}>
    <Sidebar />
  </Grid>
  <Grid item xs={12} md={9}>
    <MainContent />
  </Grid>
</Grid>

MUI Grid vs Data Grid

機能 Grid (@mui/material) DataGrid (@mui/x-data-grid) 目的 ページレイアウト 表形式データの表示 列数 12列システム データ列ごとに定義された列 ユースケース フォーム、ダッシュボード、レイアウト テーブル、スプレッドシート、レポート ブレークポイント あり なし（コンテナのリサイズで処理）

DataGridの使用例：

import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
];

const rows = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

<DataGrid rows={rows} columns={columns} autoHeight />

一般的な問題と解決策

1. オーバーフローまたは配置の問題

• 常にアイテムをcontainerでラップします。
• xs、smなどの値が12（またはそれ以下）になることを確認します。

2. 不要なスクロールバー

• 手動のmarginやpaddingの代わりにspacing={2}を使用します。

3. 予期せずにグリッドアイテムが伸びる

• テキストをBox、Paperなどでラップして、幅/高さを制御します。

結論

MUIのGridシステムは、シンプルで柔軟なAPIを使用して応答性の高いレイアウトを構築するための強力な方法を提供します。コンテナ/アイテム構造、ブレークポイント、一般的なレイアウトパターンをマスターすることで、カスタムCSSを必要とせずに堅牢なUIを構築できます。

よくある質問