firebase(firestore)でページネーション作る方法 React を使った無限スクロールの解説 [Next.js]

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

例えばこんな感じで?

 

<button onClick={() => updatePost()}>さらに記事をロードする</button>

 

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

 

 

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

 

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

 

sortDate()の中で、追加の記事を取得します。それが下記のコードです。

 

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

 

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

 

 

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

 

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

 

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

 

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

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です