2022年12月27日火曜日

JavaScript の Grid ライブラリ 2022 雑感

久々に JavaScript の Grid ライブラリを利用したので、ライブラリの選定をしました。 以前書いた記事 から 5年も経っていることになりますが、 テーブルでたくさんのデータを表示する機会は、最近ありませんでした。 1万件くらいのデータでないと適用しにくいので、利用機会も減った気がします。 少し前に投稿した autocomplete も 1万件くらいで限界が来る ので、そのへんが JavaScript で扱いやすいデータの限界かも知れません。

5年も経てばどのライブラリも成長し、機能面ではどれもそれほど遜色がありません。 Grid ライブラリは、Pagination できれば理屈的には速度的に大差なくなるはずなので、 あとはどれだけ使いやすいかという話になります。 以前見つけたライブラリの他にも、GitHub で探せば色々と見つかります。 有名どころでは以下のライブラリが追加されていましたが、 以前ほど詳細に比較する気は起きなかったので、良さそうなものを軽く試して結論を出しました。

結論

結論だけ言えば、今から Grid ライブラリを使うなら、 Bootstrap TableDataTablesGrid.js のどれかが良いと思いました。 Bootstrap Table は名前から考えると Bootstrap 依存に見えますが、そういう訳ではなく、様々な CSS Framework から利用しやすいライブラリです。 jQuery 以外の依存はほとんどないライブラリです。Grid.js はさらに依存が小さいライブラリです。 DataTables は Bootstrap Table とよく似た設計で jQuery 依存ですが、見た目がかっこいいです。 どれも他のライブラリと比較して拡張性が高く、シンプルなのが良いところです。

最近の人気ライブラリの特徴と欠点

ちなみに以前まとめた Grid ライブラリは特定の JavaScript Framework に依存するものが多いです。 しかし流行り廃りが激しく、採用の決め手になりません。 そのような理由もあってか、最近では Vanilla JS もしくは主要 JavaScript Framework すべてに対応するライブラリが増えたように思います。 そのせいでレンダリング処理に自前感が出てくることが増えますが、ここが次のポイントだと思っています。

いくつかのライブラリでは、table 要素を使わずに複雑なレンダリングをしているものがあります。 こうしたライブラリは設定が複雑過ぎてユーザ側が使いこなせません (少なくとも私は無理)。 昔のライブラリも同じような欠点はあるのですが、CSS Framework と CSS Variables が普及してきたので、 見た目を整えないと違和感が生じることが増えています。 結果として、見た目を整えられるくらいには設計がシンプルなライブラリが良いと私は思いました。

ユーザが拡張することを考えると、JavaScript Framework より CSS Framework に依存したほうが良く、 設計がシンプルであるものが良いです。このような設計を意識したライブラリを絞り込むと、 今のところ良さそうなのは Bootstrap TableDataTablesGrid.js の 3つでした。

JavaScript Framework の依存性や、ライブラリの特性を見ていて思った個人的な印象を一言でまとめると、ライブラリに固有の概念を持ち込み過ぎないほうがいい です。 固有の概念を持ち込めば持ち込むほど、いざ廃れた時の対応が困難になります。 ユーザが扱いきれないほど複雑なレンダリングをするフレームワーク / ライブラリともなると、すぐ対応不可能になることが予想できます。 その点 jQuery は人畜無害で、一度やる気を出せば Vanilla JS へすぐ変換できます。

Free MIDI では Bootstrap Table を採用

ちなみに今回作ったアプリ Free MIDI では、 (1) 列ごとの検索がほしかったのと、(2) 列にボタンを付けたい要望があったので、 それらを実現可能な Bootstrap Table を採用することにしました。 1 に関しては自前の実装でもなんとかなることが多いですが、2 は意外と実装しにくかったりします。 Grid.js だとデフォルトで上記の機能をサポートしておらず、 DataTables より Bootstrap Table のほうが実装が楽で、より高機能だったのが決め手になりました。 Bootstrap Table はたぶん機能性を求めると最も使いやすいライブラリの気がします。 jQuery の資産の大きさと、簡潔さを改めて感じました。

0 件のコメント: