React Virtualized - Reactで大量データのスクロール表示
ReactでWebアプリケーションを作るとサーバサイドの感覚でスムーズに開発ができます。しかしそれでもUI、UX周りになると気にしなければならないことも多数あります。 その一つとして長大なリストがあります。大量のDOMを表示したりスクロールすると時間がかかってしまうものです。それを改善してくれるのがReact Virtualizedです。
React Virtualizedの使い方
デモの画面です。一覧表示のコンポーネントが並んでいます。
実際に使っているところです。大量のデータを一気に表示したり、スクロールや行を指定したジャンプができるようになっています。
React Virtualizedでは一行あたりの高さを変えたり、ソートすることもできます。様々な場面で使えそうなライブラリです。
React VirtualizedはReact/JavaScript製のオープンソース・ソフトウェア(MIT License)です。