firebase(firestore)でページネーション作る方法を解説します。

ページネーションは、「進む」と「戻る」ボタンがあるものですが、

今回の解説は、主に無限スクロールをするやり方です。

「さらに記事をロードする」みたいなボタンを押すと、１０記事追加で出現するタイプです。

「戻る」「進む」ボタンよりも無限スクロールの方がシンプルかつ簡単なので、

多分プロジェクトで選択の余地が許されてるなら、僕は無限スクロールを常に選ぶと思います。

ユーザーにとっても、「戻る」「進む」ボタンより無限スクロールの方UX楽だと思うので。

それに仕組みだけ分かれば、結構容易いと思う。シンプルに外部ライブラリとか不必要かと思います。

デザインを簡単に作りたければ、何か使ってもいいのかも？でも僕は外部のnpmのパッケージとかは使っていません。

ちなみに僕のプロジェクトでは、Next.jsですが、普通にReactと考えてもらえれば。

ページネーション（無限スクロール）の仕組み

無限スクロールの仕組みは結構簡単です。

初期ロードでLimitを使って１０件だけ取得して、ボタン押すと１０件＋５件を取得してくればいいだけ。

もう一回ボタン押すと、１５件＋５件を取得してくればいいだけです。

コードで言うと、初期ロードのところで、下記のようにデータベースから値を取得します。

これでpostコレクションから５件だけデータを取得できます。

ここで取得してきたのが初期データとして表示される。

それで、フロント側のリストの一番下に、「さらに記事をロードする」みたいなボタンを作ります。

例えばこんな感じで？

それを押すと、updatePost()関数が発火する。その中には、

こんな感じでコードが実行されている。setPageはuseStateを使っています。

それで、現状のデータ取得数に＋５をして、setPostsでデータを取ってきた配列を再びセットする。

これをすることで、.limit(page) の部分は、常に現状のデータの数＋５件という記述になっているので、

データが正確に、必要な分だけ、追加で取得される感じになります。

で、そのuseStateの部分と、データ更新の部分などをになっているのが、最初の変数定義のところ。上記を見てみてください。

まあ、この書き方は若干微妙かもだけど。setPostsが実行されると、postsが再描画されてブラウザに変化をもたらす。

つまり、データが増える。setPageの分だけデータを取得できる。

まあ、こんな感じですね。