はじめに
toB向けのシステム開発に携わっていると、"Excelライクなグリッド機能"をシステム上に実装して欲しいという要望が度々上がることがあります。ユーザーの多くがシステム外ではExcelやGoogleスプレッドシートで業務しているため、システム内でも似たような操作性や機能を提供することを求められます。
具体的には、セル同士を矢印キーやTabキーで移動したり、セルをダブルクリックすると編集モードに切り替わってデータ入力ができたり、フィルタリングやソートの機能が提供されているか等です。
上記を満たすExcelライクな操作/機能を提供してくれるライブラリはいくつか存在するため、記事にまとめました。私の周りではAngularを採用しているケースが多いため、Angularをサポートしているライブラリをピックアップしています。
グリッドライブラリ
- ag-Grid
- 公式サイト: https://ag-grid.com/
- Github: https://github.com/ag-grid/ag-grid¥
- 料金: 無料（より高機能を求める場合は有料版もあり）
- Wijimo
- 公式サイト: https://www.grapecity.co.jp/developer/wijmo
- Github: なし
- デモサイト: https://demo.grapecity.com/wijmo/demos/Grid/Overview/angular
- 料金: 有料（無料版はウォーターマークが表示される）
- PrimeNG
- 公式サイト: https://primeng.org/
- Github: https://github.com/primefaces/primeng
- デモサイト: https://primeng.org/table
- 料金: 無料
ag-Grid
ag-Gridはグリッド機能に特化したライブラリで、一部の機能を除いて無料で利用することができます。無料版ではフィルタリングやソートなどのグリッドの基本的な機能が提供されています。特に拡張性が高い印象があり、イベントハンドラの提供が豊富なのでフックして振る舞いを変更することやセルに独自のコンポーネントを割り当てることが可能です。
また、大規模なデータセットを扱うことに長けている印象があり、行列を仮想化してブラウザでのレンダリング範囲を最小限に抑えることやそのレンダリング範囲を開発者が調整することが可能です。有料版の機能ではありますが、Server-Side Row Modelと呼ばれる機能が提供されていて、フィルタリングやソートなどの処理をサーバーサイドで行い、ページング無しで遅延ロードを実装することができます。また、クライアントでのデータ変更をサーバーに通知して、ダイナミックにデータを変更することもできます。
一方で過剰にカスタマイズしすぎるとパフォーマンスが著しく低下するため注意が必要です。セルに独自のフィルタリング機能付きのドロップダウンリストを組み込んだのですが、1セルあたりのDOMが増加することやAngularのライフサイクルメソッドが意図しないタイミングで実行される（行が必要時のみレンダリングされるため）ことを考慮しておらず塵積でパフォーマンスが低下しました。（パフォーマンスが低下すると、スクロール時のレンダリングが追いつかずグリッド内が白く表示されます。）
パフォーマンス低下に関する注意事項はココにまとまっていますので参考にしてください。
Wijmo
WijmoはUIコンポーネント群を提供するライブラリで、グリッドの他にチャート作成やユーザー入力UIなど、Webアプリケーションを作る上で一般的に必要とされる機能を提供します。このライブラリの使用には、開発用と配布用のそれぞれ別々のライセンスが必要で、無償版も利用可能ですが、その場合は画面上にウォーターマークが表示されます。
このライブラリは昔からtoBシステム向けのライブラリを提供してきたGrapeCity社によって提供されています。そのため、WijmoのUIは非常に完成度が高く細かいところに手が届く印象を受けます。例えば、Excelのように複数のシート構成のグリッドを画面上に描画したり、Excelのデータをインポート・エクスポートしたりする機能は、ag-Gridで実現しようと思うと開発が伴いますが、Wijimoは標準機能として提供しています。
また、有料のライブラリであるためサポートが手厚いです。メールで質問や不具合を問い合わせすれば数日で解決策を提供してもらえ、問い合わせた内容はナレッジベースというサイトに掲載されます。
ag-Gridと比較すると細かな不具合や制限が多い印象がありますが、👆で問題を解決するための詳細な解説や回避のためのサンプルコードが提供されているため、解決に時間を費やす必要がなく業務ロジックの実装に集中できます。
PrimeNG
PrimeNGは、Wijimoと同様にUIコンポーネント群を提供するライブラリです。一部の機能にTableと呼ばれる機能があり、フィルタリング、ソートなどの基本機能が提供されています。有料版もありますが、ほとんどの機能を無料版でも利用することができます。
ただ表形式のビューワーとしては扱いやすいのですが、セル上でデータ入力を頻繁に行うユースケースには不向きな印象です。スタイリングの調整やカスタマイズ次第かも知れないですがが、標準ではセルに入力フォームを埋め込んだ感じで選択モード > ダブルクリック > 編集モードのような操作ができません。また、ag-GridやWijimoに比べてフックできるイベントが少ないため、独自の動作を追加するなどのカスタマイズがし辛い印象があります。
ただ今どきなデザインテーマが揃っていたり、有料版ではありますがFigma UI Kitをサポートしているため、Excelライクな機能要件よりもデザインを重要視する場合であれば採用しても良いのかなと思います。