はじめに
膨大のリストを表示するときには、データを取得しながら段々ブラウザーが遅くなって、フリーズしてしまいましたの問題にあったことありましたか？
なかったらよかったなんですが、もしかしたら未来にはその問題に会うかもしれない。
リストを表示するときには不可欠の技術を紹介していきたいです！
Virtual Scroller簡単説明
Virtual Scrollerは名前の通り、実際のものをScrollすることもなく、Virtual空間でScrollingを行うのものです。
image credit: 参考のリンクまで
アイデアとしては全部のアイテムをDOMの中に実際作ることが要らなく、ユーザが見てるアイテムのみを作ります。
たまにScrollingをするときに快適になるようにバッファーを上と下にいくつか作ります。このバッファーがなければScrollingが早すぎるの時に空白スペースが見られてしまいました。
より深く知りたければ参考欄まで！
すごい！導入したい！
Virtual Scrollerの実装はかなり複雑ですよ。参考の記事を見ると様々の概念、注意点などがあります。
しかし、こちらの実装は流行になるのでOSSで配っていて、ドキュメントを読めば使えますよ。
Vuetify 2を使ったら、 Vuetify Virtual ScrollerというComponentがあります。
Vuetify Virtual Scrollerが足りない
こちらではシンプルのリストだけを表示したいの場合では十分なんですが、たまにリストの表示方があまりにも簡単ではないところがあります。例えば
- アイテムの最後でAPIロード中のマークを表示したい!
- 表示されるアイテムのDOMサイズが異なってる！
- 私のリストは水平式なんですが
そうなったら、まさか自分で導入?
確かに、書いたある問題ではいくつか作法によってVuetify Virtual Scrollerで解決できますが、より簡単な実装はいかがでしょうか？
Vue Virtual Scroller
Github: https://github.com/Akryum/vue-virtual-scroller
Documents: https://github.com/Akryum/vue-virtual-scroller/blob/v1/packages/vue-virtual-scroller/README.md
Live Demo😍: https://vue-virtual-scroller-demo.netlify.app/
Vuetifyよりいいの理由
- Version 2ではVue3を対応してるので、今のVue３Projectで待たなく利用できます
- before and after slotにより、リストアイテム以外のもの設置できます。利用の例は
- SlotではIntersectionObserver設置ができていて、ぶつかったら次のDataをロードするように
- リストについてのAlert
- DynamicScrollerで不統一のアイテムサイズでも対応できる！
- 水平式にも対応する！
確かに様々の機能があるだからこそこのLibraryを利用するにはドキュメントをしっかり読まなければならないですね！
もしその４つの中から必要の項目がなければVuetifyの方を使った方がいいかも！
参考