複雑な管理画面のUI実装に消耗していたら、MUI Xで解決した

はじめに

管理画面やダッシュボードを作っていると、必ずと言っていいほどぶつかる壁があります。「並び替えできるテーブルが欲しい」「日付を範囲で選択させたい」「売上推移をグラフで見せたい」——こうした要件は一見シンプルですが、いざゼロから実装しようとすると、ソート・フィルタ・ページネーション・キーボード操作・アクセシビリティまで考慮すべき点が山ほど出てきます。

筆者もかつて、自前でテーブルコンポーネントを作り込んで消耗した経験があります。そんなときに出会ったのが MUI X です。Material UIの開発チームが提供する高度なReactコンポーネント群で、複雑でデータ量の多いUIをまとめて解決してくれます。この記事では、MUI Xの特徴からインストール、実践的な使い方までを紹介します。

MUI Xとは

MUI Xは、Material UI（MUI Core）を開発しているチームが提供する、データ量の多い・複雑なアプリケーション向けのReactコンポーネント集です。データグリッド、日付・時刻ピッカー、チャート、ツリービューなど、業務アプリケーションで頻繁に必要とされる高機能コンポーネントを一貫したデザインシステムの上で提供しています。

「オープンソースコミュニティだけでは維持が難しい、最先端の機能を提供する」という方針のもと、無料で使える Community 版に加え、商用向けの Pro・Premium プランが用意された "open-core" モデルを採用しているのも特徴です。

主な特徴

Data Grid - ソート・フィルタ・ページネーション・列のリサイズなどを備えた高機能テーブル
Date and Time Pickers - ロケール対応の日付・時刻選択UI。範囲選択やカレンダー表示にも対応
Charts - 棒グラフ・折れ線グラフ・円グラフなどをReactコンポーネントとして手軽に描画
Tree View - 階層構造のデータを扱うためのツリー表示コンポーネント
Material UIとの統合 - MUI CoreのテーマシステムやスタイルAPIとシームレスに連携

インストール

用途に応じて必要なパッケージを個別にインストールします。ここでは代表的な3つを紹介します。

# npm
npm install @mui/x-data-grid
npm install @mui/x-date-pickers
npm install @mui/x-charts

# yarn
yarn add @mui/x-data-grid
yarn add @mui/x-date-pickers
yarn add @mui/x-charts

Date Pickersを使う場合は、日付処理ライブラリ（dayjs など）とアダプターも合わせてインストールします。

npm install dayjs

前提として、MUI Core（@mui/material）と @emotion/react、@emotion/styled がインストール済みであることを確認してください。

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

基本的な使い方

Data Gridでテーブルを表示する

まずはData Gridの最小構成です。列定義（columns）と行データ（rows）を渡すだけで、ソートやページネーションが自動的に有効になります。

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

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: '名前', width: 150 },
  { field: 'department', headerName: '部署', width: 150 },
  { field: 'joinedYear', headerName: '入社年', type: 'number', width: 110 },
];

const rows = [
  { id: 1, name: '佐藤', department: '開発', joinedYear: 2021 },
  { id: 2, name: '鈴木', department: '営業', joinedYear: 2019 },
  { id: 3, name: '高橋', department: '人事', joinedYear: 2023 },
];

export function EmployeeGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSizeOptions={[5, 10, 25]}
        initialState={{
          pagination: { paginationModel: { pageSize: 5 } },
        }}
      />
    </div>
  );
}

Date Pickerで日付を選択する

LocalizationProvider でアプリ全体をラップし、日付処理用のアダプターを指定します。

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { useState } from 'react';
import { Dayjs } from 'dayjs';

export function ReportDatePicker() {
  const [value, setValue] = useState<Dayjs | null>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="集計対象日"
        value={value}
        onChange={(newValue) => setValue(newValue)}
      />
    </LocalizationProvider>
  );
}

Chartsで折れ線グラフを描く

import { LineChart } from '@mui/x-charts/LineChart';

export function SalesChart() {
  return (
    <LineChart
      xAxis={[{ data: [1, 2, 3, 4, 5, 6], label: '月' }]}
      series={[{ data: [120, 150, 180, 170, 210, 240], label: '売上(万円)' }]}
      width={500}
      height={300}
    />
  );
}

実践的なユースケース

例えば「社員管理画面」を作る場合を考えてみましょう。Data Gridで社員一覧をソート・フィルタ可能にし、Date Pickerで入社日の範囲検索を提供、さらにChartsで部署ごとの人数推移をグラフ化する、といった構成が一つのライブラリ群だけで完結します。

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

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '名前', width: 150 },
  { field: 'department', headerName: '部署', width: 150 },
  { field: 'status', headerName: 'ステータス', width: 120 },
];

export function EmployeeManagement({ rows }: { rows: object[] }) {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        slots={{ toolbar: GridToolbar }}
        slotProps={{
          toolbar: { showQuickFilter: true },
        }}
        checkboxSelection
        disableRowSelectionOnClick
      />
    </div>
  );
}

GridToolbar を差し込むだけで、検索・列表示切り替え・CSVエクスポート（Community版では簡易エクスポート）のUIが一括で追加されます。Pro/Premiumプランではフィルタの複合条件設定やExcelエクスポートといった、より業務要件に踏み込んだ機能も利用可能です。バックオフィス系のSaaSや社内管理画面のように「表形式データを大量に、素早く、正確に扱う」場面で特に真価を発揮します。

まとめ

MUI Xは、Data Grid・Date Pickers・Chartsといった、業務アプリケーションで避けて通れない高機能UIを、Material UIと一貫したデザインで提供してくれるコンポーネント群です。Community版だけでも十分実用的な機能が揃っており、要件が高度化した際にはPro/Premiumへスムーズに移行できる点も安心材料になります。

自前でテーブルやピッカーを作り込む前に、一度MUI Xの導入を検討してみてはいかがでしょうか。まずはData Gridから触ってみると、その恩恵を実感しやすいはずです。