MUI DataGridProコンポーネントの紹介

自社サービスの新機能開発で初めて MUI DataGrid コンポーネントを使用し、今後、既存のテーブルコンポーネントを DataGrid に置き換えるタスクも予定されています。プロジェクト全体で長期的に DataGrid を活用する見込みがあるため、その機能やメリット・デメリットを理解し、開発チームにも共有したいという思いから、今回の紹介に至りました。

Transcript

1. MUI DataGridPro コンポーネントの紹介 開発部　多田
2. 自己紹介 名前：多田 陸 仕事：エンジニア 領域：フロントエンド 所属：株式会社トリドリ 開発部 入社：2024年4月
3. 目次 1. なぜこのお題？ 2. そもそもMUIとは 3. DataGridとは 4. DataGridProの主な機能 5. Pro版限定の特別な機能 6. 自社サービスでの活用方法 7. まとめ
4. なぜこのお題？ 自社サービスの新機能開発で初めて DataGrid に触れ、 今後、既存のテーブルコンポーネントを DataGrid にリ プレイスするタスクもあり、プロジェクト全体で長く活 用していくことが予想されるため、自己学習も兼ねてこ のテーマにしました󰝊
5. そもそも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.
6. そもそも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.
7. DataGridとは DataGridは、大量のデータを効率的に表示・管理す るためのコンポーネントです。
8. DataGridProの主な機能 ・フィルタ ・ソート ・列のカスタマイズ ・エキスポート ・サーバーページネーション またプロパティは100個以上あります すごい・・ などなど
9. 定義済みフィルタを事前に表示できる など便利なメソッドがたくさん😀
10. Pro版限定の特別な機能 ・列のピン留め ・列の並び替え ・詳細パネル ・ツリーデータ構造での表示 ・ヘッダーフィルタ/マルチフィルタ 料金はこんな感じ→
11. 列のピン留め（Column Pinning） 特徴 ・特定の列を画面に固定し、横や縦にスクロー ルしても常に表示されるようにできる 使う場面 ・重要な情報を常に表示したい時 ユーザーにとっての利点 ・重要な情報を見失うことがないので、特に大 量のデータを扱うユーザーにとって視覚的に分 かりやすく、操作性が向上する
12. 列の並び替え（Column Reordering） 特徴 ・ユーザーが列の順番をドラッグ＆ドロップで自由に並べ替えできる機能。 ・カスタマイズされた列順を保存することも可能。 使う場面 ・データ分析や業務フローに合わせてカスタマイズしたい時 ユーザーにとっての利点 ・自分にとって重要な情報を素早く見やすく配置できるため、業務効率向上を 見込める。ユーザーごとに柔軟な操作が可能になり、個別のニーズに対応でき る。 詳細パネル（Detail Panel） 特徴 ・各行に関連する詳細情報を折りたたみ式パネルで表示できる機能 使う場面 ・行に表示するには多すぎる追加情報がある場合 （例: 商品の概要は行で表示し、商品詳細や顧客履歴などはパネル内に表示） ユーザーにとっての利点 ・必要な時にだけ詳細情報を表示でき、画面が整理され、見やすさが向上。
13. ツリーデータ構造での表示（Tree Data） 特徴 ・データを親子関係で階層化して表示する機能 使う場面 ・階層構造を持つデータを表示・管理する場合に便利です。 （例: プロジェクトとそのサブタスク、カテゴリとサブカテゴリ） ユーザーにとっての利点 ・階層化されたデータを見やすく、管理しやすい状態で表示できるため、大規模で 複雑なデータでも直感的に把握できます。必要に応じて展開・折りたたみできるの で、効率的に情報を閲覧できます。 ヘッダーフィルタ/マルチフィルタ（Header-Filter/Multi-Filter） 特徴 ・各行に関連する詳細情報を折りたたみ式パネルで表示できる機能 使う場面 ・行に表示するには多すぎる追加情報がある場合 例）商品の概要は行で表示し、商品詳細や顧客履歴などはパネル内に表示 ユーザーにとっての利点 ・必要な時にだけ詳細情報を表示でき、画面が整理され、見やすさが向上。
14. Pro版限定の特別な機能（実装が予定されている機能） サーバーページネーションにおいての ・遅延読み込み ・無限ローディング ・行のグループ化 さらに複雑なデータ構造にも対応できるようになり、 ユーザーエクスペリエンスの向上が見込めます より便利になる󰢏
15. Pro版限定の特別な機能（実装が予定されている機能） MUI Pro版がおすすめなケース 複雑なデータ処理や、一つのデータに付随する情報（階層化さ れたデータなど）を扱いたい時、カスタマイズ性が求められる 時はPro版にしても良さそう
16. 自社サービスでの活用した主な機能 ・ピン留め ・サーバーページネーション ・ソート 自社サービスでの活用方法
17. 実際にサーバーページネーションを実装するには、以下の流れで動作します。 1. 最初に表示するデータをサーバーから取得 ページが表示されたときに、最初のページ（例: 1〜10件）のデータをサーバーから取 得します。 2. 次のページのデータを要求 ユーザーが「次のページ」を見たいときに、次の10件をサーバーにリクエストして取 得し、画面に表示します。 自社サービスでの活用方法（サーバーページネーションの実装）
18. 1. 初回レンダリング時の処理 ・ページサイズ（1ページあたりに表示する件数）や現在の ページ番号は、デフォルトで10件、0ページ目（最初のペー ジ）として設定しています。 ・ページが最初に表示されるとき、useDataQuery が呼び出さ れ、サーバーから最初のページ（この場合は10件分）のデータ を取得します。このデータは、テーブルに表示されます。 2. ユーザーがページを進めたときの処理 ・ユーザーが「次のページ」のボタンをクリックすると、 handlePaginationChange 関数が呼ばれます（「前へページ」 のボタンも同様）。このとき、現在のページの次に表示する データをサーバーにリクエストし、新しいデータがテーブル に表示されます。 ・さらに、hasNextPage が true の場合のみ、次のデータがあ ることを確認し、fetchMore関数 を使って次のデータを取得し ます。 サーバーページネーションの実装（Graphqlでの一例）
19. 使用した感想 good 👍 ・カスタマイズ性が高い ・豊富な機能で独自実装が少なくて済む ・パフォーマンスが良い（サーバーページネーション） bad 👎 ・プロパティ多すぎてコードがカオスに？ まとめ
20. おわり