MUI DataGridPro コンポーネントの紹介 開発部　多田

自己紹介 名前：多田 陸 仕事：エンジニア 領域：フロントエンド 所属：株式会社トリドリ 開発部 入社：2024年4月

目次 1. なぜこのお題？ 2. そもそもMUIとは 3. DataGridとは 4. DataGridProの主な機能 5. Pro版限定の特別な機能 6. 自社サービスでの活用方法 7. まとめ

なぜこのお題？ 自社サービスの新機能開発で初めて DataGrid に触れ、 今後、既存のテーブルコンポーネントを DataGrid にリ プレイスするタスクもあり、プロジェクト全体で長く活 用していくことが予想されるため、自己学習も兼ねてこ のテーマにしました󰝊

そもそもMUIとは？ ・MUI（Material-UI）はGoogleのMaterial Designに基づいた包括的なUIコンポーネントラ イブラリ ・ 基礎的なUI要素と高度なUI要素のスタイリングやテーマ設定も柔軟にカスタマイズ可能 ・モバイルフレンドリーでレスポンシブなデザインを簡単に実現可能 
 公式引用 MUI offers a comprehensive suite of free UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

そもそもMUIとは？（Material Designって？） ・Googleが提案するデザインルール ・スマホ、タブレット、PCなどどのデバイスでも同じ操作感や見た目を保つ ・UIの一貫性と使いやすさを重視したデザインシステム 公式引用 Material Design is a design system built and supported by Google designers and developers. Material.io includes in-depth UX guidance and UI component implementations for Android, Flutter, and the Web.

DataGridとは DataGridは、大量のデータを効率的に表示・管理す るためのコンポーネントです。

DataGridProの主な機能 ・フィルタ ・ソート ・列のカスタマイズ ・エキスポート ・サーバーページネーション またプロパティは100個以上あります すごい・・ などなど

定義済みフィルタを事前に表示できる など便利なメソッドがたくさん😀

Pro版限定の特別な機能 ・列のピン留め ・列の並び替え ・詳細パネル ・ツリーデータ構造での表示 ・ヘッダーフィルタ/マルチフィルタ 料金はこんな感じ→

列のピン留め（Column Pinning） 特徴 ・特定の列を画面に固定し、横や縦にスクロー ルしても常に表示されるようにできる 使う場面 ・重要な情報を常に表示したい時 ユーザーにとっての利点 ・重要な情報を見失うことがないので、特に大 量のデータを扱うユーザーにとって視覚的に分 かりやすく、操作性が向上する

列の並び替え（Column Reordering） 特徴 ・ユーザーが列の順番をドラッグ＆ドロップで自由に並べ替えできる機能。 ・カスタマイズされた列順を保存することも可能。 使う場面 ・データ分析や業務フローに合わせてカスタマイズしたい時 ユーザーにとっての利点 ・自分にとって重要な情報を素早く見やすく配置できるため、業務効率向上を 見込める。ユーザーごとに柔軟な操作が可能になり、個別のニーズに対応でき る。 詳細パネル（Detail Panel） 特徴 ・各行に関連する詳細情報を折りたたみ式パネルで表示できる機能 使う場面 ・行に表示するには多すぎる追加情報がある場合 （例: 商品の概要は行で表示し、商品詳細や顧客履歴などはパネル内に表示） ユーザーにとっての利点 ・必要な時にだけ詳細情報を表示でき、画面が整理され、見やすさが向上。

ツリーデータ構造での表示（Tree Data） 特徴 ・データを親子関係で階層化して表示する機能 使う場面 ・階層構造を持つデータを表示・管理する場合に便利です。 （例: プロジェクトとそのサブタスク、カテゴリとサブカテゴリ） ユーザーにとっての利点 ・階層化されたデータを見やすく、管理しやすい状態で表示できるため、大規模で 複雑なデータでも直感的に把握できます。必要に応じて展開・折りたたみできるの で、効率的に情報を閲覧できます。 ヘッダーフィルタ/マルチフィルタ（Header-Filter/Multi-Filter） 特徴 ・各行に関連する詳細情報を折りたたみ式パネルで表示できる機能 使う場面 ・行に表示するには多すぎる追加情報がある場合 例）商品の概要は行で表示し、商品詳細や顧客履歴などはパネル内に表示 ユーザーにとっての利点 ・必要な時にだけ詳細情報を表示でき、画面が整理され、見やすさが向上。

Pro版限定の特別な機能（実装が予定されている機能） サーバーページネーションにおいての ・遅延読み込み ・無限ローディング ・行のグループ化 さらに複雑なデータ構造にも対応できるようになり、 ユーザーエクスペリエンスの向上が見込めます より便利になる󰢏

Pro版限定の特別な機能（実装が予定されている機能） MUI Pro版がおすすめなケース 複雑なデータ処理や、一つのデータに付随する情報（階層化さ れたデータなど）を扱いたい時、カスタマイズ性が求められる 時はPro版にしても良さそう

自社サービスでの活用した主な機能 ・ピン留め ・サーバーページネーション ・ソート 自社サービスでの活用方法

実際にサーバーページネーションを実装するには、以下の流れで動作します。 1. 最初に表示するデータをサーバーから取得 ページが表示されたときに、最初のページ（例: 1〜10件）のデータをサーバーから取 得します。 2. 次のページのデータを要求 ユーザーが「次のページ」を見たいときに、次の10件をサーバーにリクエストして取 得し、画面に表示します。 自社サービスでの活用方法（サーバーページネーションの実装）

1. 初回レンダリング時の処理 ・ページサイズ（1ページあたりに表示する件数）や現在の ページ番号は、デフォルトで10件、0ページ目（最初のペー ジ）として設定しています。 ・ページが最初に表示されるとき、useDataQuery が呼び出さ れ、サーバーから最初のページ（この場合は10件分）のデータ を取得します。このデータは、テーブルに表示されます。 2. ユーザーがページを進めたときの処理 ・ユーザーが「次のページ」のボタンをクリックすると、 handlePaginationChange 関数が呼ばれます（「前へページ」 のボタンも同様）。このとき、現在のページの次に表示する データをサーバーにリクエストし、新しいデータがテーブル に表示されます。 ・さらに、hasNextPage が true の場合のみ、次のデータがあ ることを確認し、fetchMore関数 を使って次のデータを取得し ます。 サーバーページネーションの実装（Graphqlでの一例）

使用した感想 good 👍 ・カスタマイズ性が高い ・豊富な機能で独自実装が少なくて済む ・パフォーマンスが良い（サーバーページネーション） bad 👎 ・プロパティ多すぎてコードがカオスに？ まとめ

おわり