WEBアプリではTableを表示する機会が多くあります。Laravelではページネート機能は持っているため簡単に実装できますが、テーブル検索やソートをするためには、作り込みが必要です。そしてそれ作るとなるとめちゃ大変です。
そこで今回はVue.jsとLaravelの組み合わせでテーブル検索やソート、ページネーションなどの機能を持ったVueライブラリを4つ調査して比較してみました。実際に試したのはそのうち2つのライブラリです。
もし現在jqueryを使っていてVue.jsなどの他のフロントエンドフレームワークに切りかえたいな〜、と思っている方は是非試してみてください。
比較したライブラリ
色々とググって調査した結果、以下の4つのライブラリを比較してみました。
かなり似たような名前のものが多くて紛らわしいですのでご注意ください。２は解説サイトがいくつかありましたが、それ以外のライブラリの情報はほとんどなかったです。特に日本語の情報は少ないです。
- vue-good-table
- vue-tables2
- vue-bootstrap4-table
- bootstrap-table
必要な機能/欲しい機能
今回の比較する機能は、私が個人的に最低限欲しい以下の機能に絞って調査しています。
- 検索(グローバル/列ごと)
- ページネート（１ページの表示アイテムの切替、詳細情報表示）
- ソート
- 列の表示/非表示の切り替え
- CSV or Excelなどへのエクスポート機能
- アイテムに対して操作(Edit/Delete)をするために、任意の列を追加できるか
他にもグルーピングやチェックボックスの機能など色々ありますが、現時点では使うことないので調査してません。またサーバサイド機能（下で説明）も不要としてます。
テーブル操作の処理として、「クライアント」サイドと「サーバ」サイドの２種類があります。
- ①クライアントサイド → 初回に全データを取得してクライアンド再度で処理
- ②サーバサイド → 処理が発生した際に、その都度サーバリクエストで処理
要は初回で全てのデータを取得するのが①、都度リクエストでデータ取得するのが②です。初回データを取得したあとは①の処理の方が断然速いです。
テーブルのアイテム数が多くなってきた場合にはサーバサイドの機能が有効になってきます。データサイズに依存しますが、1000とか？2000？アイテム超えたあたり（データ量に依存します）で重くなってきます。ただし、都度サーバにクエリを投げるのでソートやフィルタ自体の速度は遅くなるというデメリットがあります→普通のサーバサイドアプリと同じです。
構築するシステムの仕様によっては検討する必要あります。
比較結果
では、いきなりですが、それぞれのライブラリを比較した結果をまとめてみました。
| ①vue-good-table | ②vue-tables2 | ③vue-bootstrap4-table | ④bootstrap-table + tableexport.jquery.plugin | |
|---|---|---|---|---|
| URLリンク | https://xaksis.github.io/vue-good-table/ | https://github.com/matfish2/vue-tables-2 | https://github.com/rubanraj54/vue-bootstrap4-table | https://bootstrap-table.com/docs/vuejs/introduction/ |
| ライセンス | MIT | GPL3.0 有料でMIT(月額15$) | MIT | MIT |
| 検索：グローバル | ○ | ○ | ○ | ○ |
| 検索：列ごと | ○ | ○ | ○ | ○ |
| 列単位でのソート | ○ | ○ | ○ | ○ |
| ページネート | ○ | ○ | ○ | ○ |
| １ページの表示数変更 | ○ | ○ | ○ | ○ |
| 総アイテム数などの詳細情報表示(○件中○件など) | △おそらく可 | ？ | △クライアントモードでは不可 | ○ |
| 列単位での項目表示/非表示の切替 | × | ？ | × | ○ |
| 任意で追加できる(Edit/Deleteなど)列 | △ | ○ | △がんばればできそう？ | ○ |
| サーバサイド機能 | ○ | ○ | ○ | △ |
| データダウンロード機能 | × | × | × | ○(CSV/Excelなど） tableexport.jquery.pluginを利用 |
| 結果 | △ | -未検証 | ○良 | ◉最高 |
結論：bootstrap-tableが最高だった・・・
簡単に機能を調べた後に、比較的よさそうな③と④を試してみました。②に関しては機能としては十分なのですが、ライセンスが少し引っかかるため今回はスキップしました。
結果としては「bootstrap-table+tableexport.jquery.plugin」がダウンロード機能なども簡単に実装することができて最高でした。おそらく現時点ではこれが一択ではないでしょうか⁈
また、「vue-bootstrap4-table」に関しても機能的にはすぐれていて、ダウンロード以外は大体の機能はもっていて、こちらは実装も簡単なので、簡単なテーブルであればこちらを使っても問題ないと思います。
- vue-good-table → 今回未検証、ただ基本的な機能はあって使いやすそう
- vue-tables2 → 機能は豊富そうだが、今回は未検証
- vue-bootstrap4-table → 実検証済、簡単に使えたがいくつかの機能が不足
- bootstrap-table → 実検証済、まさに最高の一言に尽きる、他のライブラリとの組み合わせだが、データダウンロードまでできるのが最高！！
まとめ
テーブル操作の処理をLaravel側で実装しようとすると、検索機能を実装するだけでもかなりの時間がかかる作業になりますが、Vue.jsのライブラリに操作を任せれることで、時間がを大幅に短縮することができますね！！
もし間違っている部分とかあったら指摘いただけるとありがたいです。
「vue-bootstrap4-table」検証してみた
実際に検証した「vue-bootstrap4-table」についてLaravelとの連携のやり方について紹介します。
「bootstrap-table」検証してみた
こちらが本命です！！是非試して見てください！！
今回は以上となります。
コメント