【React】React Windowの紹介とリストの作成方法

はじめに

こんにちは、株式会社TOKOSのナオキです！
今回はReactのライブラリである「React Window」について紹介します！
DOM要素の多いリスト表示やグリッド表示を扱うときに役立つと思うので、ぜひ参考にしてください！

対象読者

• WEB開発を行っている方

React Windowについて

React WindowはReactアプリケーションでたくさんのDOM要素を表示する際に表示パフォーマンスを改善するためのライブラリです。
通常多くの要素を一度に表示をしようとすると、表示されるまでに時間がかかってしまいますが、React Windowを使用したらその問題が解決できます！

具体的にいうと、React Windowは画面の表示領域に入っている要素のみをレンダリングします。これにより一度にレンダリングされる量が減り、パフォーマンス改善が見込めます！

React Windowのコンポーネント

React Windowには次の4つのコンポーネント(パッケージ)があります。

• FixedSizeList
• VariableSizeList
• FixedSizeGrid
• VariableSizeGrid

それぞれの用途を簡単に説明します！

これらのコンポーネントを用途に合わせて適切に使用しましょう！

プロパティ

それぞれのコンポーネントには豊富なPropsが存在します。
今回は実際にFixedSizeListを使用して簡単なリストを作成していきたいと思いますので、FixedSizeListで主に使われているPropsを紹介します！
(※)が付いているPropsは必須のPropsになります！

詳しく知りたい方は下記を参照してください！

react-window: render everything

Documentation for the react-window NPM package

react-window.vercel.app

開発環境

• react: "18.2.0"
• react-window: "^1.8.10"
• typescript: "^5.3.3"
• next: "^14.1.0"
• tailwindcss: "^3.3.3"

今回はTailwindcssを使用しています。

FixedSizeListを使用したリスト

サンプルリスト

今回はFixedSizeListを使用してリストのサンプルを作成しました。

コード

import React from "react"
import { FixedSizeList } from "react-window"
 
export default function List() {
  // レンダリングする要素を定義しています
  const ListItem = ({
    index, // 要素のインデックス
    style, // 要素のスタイル
  }: {
    index: number
    style: React.CSSProperties
  }) => (
    <div
      style={style} // 要素のスタイルを適用
      className="flex items-center justify-center border" // 要素のスタイルを適用
    >
      Item {index} // 要素のインデックスを表示
    </div>
  )
 
  // FixedSizeListコンポーネントを使ってリストを作成
  return (
    <div>
      <FixedSizeList
        height={400} // リストの高さ
        width={300} // リストの幅
        itemCount={1000} // 要素の総数
        itemSize={50} // 要素の高さ
      >
        {ListItem}
      </FixedSizeList>
    </div>
  )
}

コード説明

まずReact Windowの中からFixedSizeListをインポートします。
FixedSizeListコンポーネントでは、表示をさせたい領域をheightとwidthでを指定します。
表示させたいコンポーネントの数をItemCountで指定します、表示させたいコンポーネントのheightをitemSizeで指定します。
そしてchildrenとして表示させたいコンポーネントを指定します。
今回はListItemを指定しています。
またchildrenで指定したコンポーネントはindexとstyleを受け取ることができます。

• index : インデックス番号
• style : itemSizeなどChildrenに対してのcssプロパティ

今回は受け取ったindexを表示させます。
childrenが受け取ったcssプロパティで補えない場合は別途スタイルを当てる必要があります。(今回の場合はclassNameでTailwindを使用し指定しています。)

以上になります。
とても簡単にFixedSizeListを使用しリストの作成ができることがわかってもらえたと思います！

さいごに

今回はReact Windowについての紹介と、実際にReact WindowのFixedSizeListコンポーネントを使って簡単なリストの作成をしました。
React Windowは4つのコンポーネントと豊富なプロパティをうまく使えばさまざまなニーズに対応できると思うので、パフォーマンス改善として色々試しながら使用してみてください。