グリッドライブラリ/グリッドコンポーネント選定の際に抑えておきたい６個のチェックポイント

![21071500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785128/33f0df57-9aec-8896-d163-fe4bb74484b4.png)
CRM や ERP のような多くの企業で導入される情報管理システムはもちろんのこと、「管理画面」を伴うようなシステム開発を行う場合、大量のデータを一覧で表示するために行列構造を持つテーブル形式のUIを利用する機会はとても多いと思います。

データグリッドと呼ばれるこのようなUIには、大量のデータから目的のレコードを簡易に抽出して表示出来たり、多くのレコードに対して頻繁にデータの更新が必要なビジネス要件に合わせて、グリッド上で効率的に編集作業を行うことが出来るかなど、ユーザーに期待される様々な機能があります。

本記事では、サードパーティのグリッドライブラリ/グリッドコンポーネントを新たに導入する際に、選定材料としてチェックしておきたい６個のポイントについてご紹介します。

## データグリッドの概要

データグリッドは、行列構造を持つテーブルデータを一覧表形式で表示・編集するのに最適なコントロールです。ソートやフィルターなど、ユーザーがデータを理解しやすくなる仕組みが豊富に提供されています。以下に挙げるような機能は多くのグリッドライブラリ/グリッドコンポーネントには含まれているものですので、本記事のチェックポイントからは除外しています。

- 列のソート（価格列を昇順に並べ替えなど）
- フィルター（日付列を直近一週間で絞り込みなど）
- 行列の固定表示
- 列の並べ替え
- 列の非表示
- 集計データの表示

## 1.表示パフォーマンス

データグリッドは、フィルターなどでの絞り込み表示が必要なことからも分かるように、大量のデータを扱うことを前提としています。特にウェブアプリケーションにおいては大量のセルを描画することによるパフォーマンスの悪化は顕著であるため、大量データに耐えうるグリッドかどうかを確認しましょう。

高機能なデータグリッドでは、ユーザーに見えているセルのみを描画する仮想化の仕組みなどを利用してパフォーマンスを担保しています。大量のデータを一気に表示出来るグリッドであれば、ページネーションを利用してデータを数百件ずつ表示するような仕様で、ユーザーに何度もページ遷移させる必要はありません。
![21071501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785128/d341b06d-7737-8eab-dc47-b1155556b786.png)

## 2.エクセルのような操作感

完結に「エクセルのような操作感」と表現しましたが、これは多くの意味を含みます。表形式のUIを操作する際、特に編集を行う場合に、ユーザーは使い慣れたエクセルの操作感を期待することが多くあります。こういったユーザーの要件を実現するために、エクセルの操作性を実現可能なグリッドを選びましょう。例えば以下のようなものです。
![21071502.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785128/1bfe5c54-2776-a36d-c943-e316cc725a7c.png)
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/c/cleverdog/20210715/20210715095053.gif" alt="f:id:cleverdog:20210715095053g:plain" width="240" loading="lazy" title="" class="hatena-fotolife" itemprop="image">

- セルの範囲選択が可能、また選択範囲のコピー＆ペーストが可能
- 編集履歴が一次保存され、UndoやRedoなどの処理が可能
- エクセルファイルとのインポート/エクスポート機能
- セルが選択された状態で文字入力をすると自動的に編集状態になり、入力後エンターキーを押すと次のセルが選択されるように、キーボード操作のみで効率的に編集が可能

## 3.レイアウトや状態の保存/復元

前述の通り、データグリッドは大量のデータの中から、ソートやフィルターなどを利用して目的のデータを表示し、行列の固定表示や並び替え、不要な列の非表示などレイアウトの調整をして、ユーザーがデータを取り扱いやすくするという役割があります。

ユーザー毎に自分の業務シナリオに沿った、各人にとっての使いやすい表示設定が行われることになるので、これらの設定の保存/復元機能が簡単に実装できるようになっているか、確認しましょう。
![21071504.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785128/3a76f64f-9854-382d-e39f-de9a63439196.png)

## 4.複雑なセルの表現

データグリッドでユーザーが作業する時、セルで区切られた大量のデータを一覧で確認することになるため、セルの値を判定してより重要なデータをハイライト表示したり、シンプルなチャート形式で表示するといったことが出来ると効果的です。また、セル編集時のフォーマットとセル表示時のフォーマットを切り替えることができるかどうかも確認ポイントです。
![21071506.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785128/ab24eca5-3fca-3137-5e5e-c560ce3da76e.png)

## 5.複雑な構造のグリッド

1レコードを複数行のレイアウトで表示したい、隣り合うセルを結合して表示したい、階層構造を持つデータを階層化されたグリッドとして表示したいなど、要件によっては複雑な構造のグリッドでの表現が必要な場合があります。複雑な構造を持つグリッドの実現が可能かどうか確認しておきましょう。
![21071507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/785128/6ff1a0e5-bb1b-53c1-42ad-9ec7adeb85df.png)

## 6.ローカライズ対応

ここまで挙げたようなチェックポイントをクリアした高機能なグリッドであっても、日本語へのローカライズが出来ない、もしくは実現に手間がかかるような場合は、導入が難しくなってしまいます。ローカライズにどの様に対応しているか、確認するようにしましょう。また、有償のグリッドライブラリ/グリッドコンポーネントを利用する場合は、日本語による技術サポートが受けられるかどうかによって、開発効率が大きく変わってきます。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/c/cleverdog/20210715/20210715113102.png" alt="f:id:cleverdog:20210715113102p:plain" width="500" loading="lazy" title="" class="hatena-fotolife" itemprop="image">

## まとめ

一覧表示画面はユーザーが多くの時間を費やすことになる画面のひとつで、そのため一覧表示画面に対するユーザーからの多くの要望が、運用のフェーズで寄せられることが考えられます。

本記事でピックアップしたポイントが盛り込まれたデータグリッドはこれらの要望への対応を容易にし、また、あらかじめ高機能で使いやすいデータグリッドで一覧表示画面を構築しておくことで、ユーザーを早い段階から、定義済みのUI動作の枠組みの中に定着させることも可能です。

インフラジスティックスは様々な開発プラットフォームにおいて、30年以上に渡ってデータグリッドをはじめとしたUIコンポーネントの開発を続けており、本記事であげたチェックポイントをクリアしたデータグリッドを導入いただけます。

https://jp.infragistics.com/products/all

（※プラットフォームや機能の組み合わせによってサポートされていない場合がありますのでご不明な場合はお問い合わせください。）

<a style="font-size:10px" href="https://www.freepik.com/psd/background">Background psd for main image created by zlatko_plamenov - www.freepik.com</a>