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

はじめに

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

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

とはいえ、読むより触った方が早いと思います。DataGridの並び替え・フィルタ・選択、DatePickerでの日付選択、Chartsのグラフ切り替えを、実際に操作しながら確認できるサンプルを用意しました。先に挙動を見たい方はこちらからどうぞ。

＞＞＞ まずはサンプルを確認 ＜＜＜

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

MUI Xのサンプルを動かす

MUI Xを構成する3つの代表的なパッケージ、DataGrid・DatePicker・Chartsについて、それぞれ実際に操作できるサンプルを用意しました。値を書き換えたり、ボタンを押したりして挙動を確かめてみてください。

DataGridで並び替え・フィルタ・選択を試す

DataGridコンポーネントは、rows（行データ）とcolumns（列定義）を渡すだけで、列見出しクリックによるソート、ツールバーからの検索フィルタ、チェックボックスでの行選択が使えるようになります。選択状態はonRowSelectionModelChangeイベントで受け取れます。

const columns: GridColDef[] = [
  { field: 'name', headerName: '名前', width: 120 },
  { field: 'department', headerName: '部署', width: 120 },
  { field: 'score', headerName: '評価', type: 'number', width: 90 },
]

<DataGrid
  rows={rows}
  columns={columns}
  checkboxSelection
  slots={{ toolbar: GridToolbar }}
  slotProps={{ toolbar: { showQuickFilter: true } }}
  onRowSelectionModelChange={(model) => setSelected(model.ids.size)}
/>

実際に動かせるものが下です。列見出しをクリックすると並び替わり、右上の検索欄に文字を入力するとGridToolbarのクイックフィルタが効きます。行のチェックボックスを押すと、選択件数が上の表示に反映されます。

columnsに列を追加したり、検索欄に「開発」と入力してみたりすると、DataGridが自動でフィルタ・再描画してくれるのが分かるはずです。自前でこの挙動を実装しようとすると意外と骨が折れる部分を、プロパティを渡すだけで済ませられます。

DatePickerで日付を選択する

DatePickerコンポーネントは、LocalizationProviderで日付処理用のアダプター（ここではAdapterDayjs）を指定してラップすることで使えます。minDate・maxDateプロパティで選択可能な範囲を制限できるのも特徴です。

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    label="集計対象日"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    minDate={dayjs('2020-01-01')}
    maxDate={dayjs()}
  />
</LocalizationProvider>

実際に動かせるものが下です。入力欄をクリックしてカレンダーから日付を選ぶと、選択した日付が下のテキストにそのまま反映されます。

maxDate={dayjs()}を消してみると、未来の日付も選べるようになります。逆にminDateを今日の日付に変えれば、過去日を選ばせない予約フォームのような制御も簡単に作れます。

Chartsでグラフの表示データを切り替える

ChartsパッケージのLineChartコンポーネントは、xAxisとseriesにデータを渡すだけで折れ線グラフを描画します。seriesの中身をstateで差し替えれば、ボタン操作に応じてグラフを更新することもできます。

<LineChart
  xAxis={[{ data: [1, 2, 3, 4, 5, 6], label: '月' }]}
  series={[{ data: salesData, label: '売上(万円)' }]}
  width={480}
  height={280}
/>

実際に動かせるものが下です。「今年」「昨年」のボタンを押すと、seriesのデータが切り替わってグラフが再描画されます。

datasetsオブジェクトにキーを追加してボタンを増やせば、複数年の比較グラフにも拡張できます。seriesは配列なので、複数のdataを同時に渡せば折れ線を重ねて表示することも可能です。

基本的な使い方

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から触ってみると、その恩恵を実感しやすいはずです。

参考リンク

• MUI X公式ドキュメント
• MUI X GitHub
• @mui/x-data-grid - npm