「jQuery UI」の「sortable」でドラッグによる並び替えを実装。件数に注意

PHPで管理画面を作成し、MySQLに格納してあるデータを一覧に書き出すページを作ることは良くあると思います。今回、何故か700件程度の書き出しで、ページの表示がとても遅くなってしまう現象に遭遇しました。

200件くらいまでは普通に表示されるのですが、400件になるとページが表示されるまでに少し時間がかかるようになり、600件くらいになると十数秒かかってしまいます。

これくらいの件数の表示で、こんなに時間がかかってしまうなんて。。。
色々と検証してみると、「jQuery UI」の「sortable」が原因でした。

「jQuery UI」の「sortable」でドラッグによる並び替え

「jQuery UI」は、ユーザーインターフェースの為のライブラリになります。「jQuery UI」を使えば、WEBサイトに様々な効果を与えたり、スライダーやアコーディオンパネルを作ったり、ドラッグ＆ドロップで要素を並び替えさせるようなことが、簡単にできるようになります。

今回は、管理画面上で表示されたデータを、ドラッグ＆ドロップで並び替えができるように「sortable」を使って実装していました。実装の方法はこちらの記事を参照してください。

・ドラッグ＆ドロップでli要素の並べ替え→DB書き換え
https://qiita.com/ao_love/items/4f74bdcd345e9e8ff810

件数が多くなるとページの表示に時間がかかる

「jQuery UI」の「sortable」を使うことで、直感的に並び替えをして、DBに保存をすることができます。ただ、200件くらいまでは全く問題はないのですが、ドラッグによる並び替え対象の行数が400行くらいを超えてくると、ページが表示されるまでに、やたらと時間がかかってしまうようになります。

おそらくパソコンの性能によって、時間は変わってくるのではないでしょうか。閲覧するブラウザによっても処理時間や現象は変わってきます。

これを回避するには、ページングなどの機能を実装して、一度に表示される件数を減らせば大丈夫ですね。100～200件程度でページングするようにすれば、ドラッグ＆ドロップでの並び替えと、並び替えのし易さを共存できそうです。

まとめ

ということで、「jQuery UI」の「sortable」でドラッグ＆ドロップの並べ替えを実装する時には、表示させる件数に注意しましょう。

・jQuery UI（公式サイト）
https://jqueryui.com/

関連記事