図解ページネーション~オフセット・カーソル~

プログラミングをしているとWebサイトに対してページネーションを実装したいということがあると思います。ページネーションはたとえばgoogleの検索だったりこのnoteもスクロースすれば自動的に記事が見れるようになったりと言った機能のことです。

今回はそのページネーションのロジック部分について解説したいと思います。具体的なコードは書いていないので環境に合った別サイトを参考にして実装をしてください！

対象読者

• オフセットとカーソルの違いを知りたい方

• それぞれの実装方法は分かったが仕組みまで知りたい方

ページネーションの2つの実装方法

まず前提としてページネーションには2つの実装方法があります。それはオフセットページネーションとカーソルページネーションです。どちらの方式でも実装はできますがどちらにもメリット・デメリットがあるので状況によって使い分ける必要があります。

この記事の流れとしてはまずそれぞれのページネーションの実装方式について示した後それぞれのメリット・デメリットについても解説しようと思います！

図を使っての解説

今回は5つのデータがあってページネーションとして2つずつ取得したいと言ったシチュエーションを想定しています。最初の2件は取っていて次の2件を取りたいとします。

オフセットページネーション

聞いたことあるのではないでしょうか？自分も実はオフセットに関しては知っていました。(具体的なロジックはわからず適当に使っていました)

図で表すと以下のような感じになります。緑色に塗った箇所が実際に取得できるデータです。

最初の2つをスキップ(Skip)してその次の2つを取得(Take)することによってデータを取得していきます。Skipの部分がオフセットを表しています。このSkipの数を変更することにより取得するデータを変更できます。

たとえば最初の一回目はSkipの値を0とし2つ取得することによりデータが取れます。三回目になると4つSkipして2つ取得します。

カーソルページネーション

カーソルを一つ持ってそれ以降のデータを取得すると言った手法です。
図は以下のような形になります。

まず前に取得したデータの最後のデータのidなどの一意でなおかつ時系列順になるデータをカーソル(Cursor)として取得します。そのカーソルを飛ばし(Skip)た状態からデータを取得(Take)します。

初期ではカーソルを指定せずスキップもせずに前から2つデータを取得します。3回目では2回目のデータの最後の値である「4」をカーソルとして一つ飛ばし5からデータを2つ取ります。

メリット・デメリット

それぞれのメリット・デメリットについて解説します。

オフセットページネーション

メリット

• すぐに任意のページに移動ができる

オフセットページネーションでは何番目のデータが何ページ目に来るのかが計算できます。たとえば10データずつ取っているのであれば5ページ目のデータは51~60個目となります。
これによりページを切り替える方式のページネーションを実装する場合にはこちらの手法を取る必要があります。

• 一意となるようなデータが不要

たとえば作成日などでデータをソートしてからデータの取得ができます。その作成日に重複があってもこのページネーション手法では上手く行きます。

デメリット

• オフセットが大きくなるとパフォーマンスが低下する

カーソルページネーション

メリット

• オフセットを使わないのでパフォーマンスが良い

オフセットページネーションを使っていてページが後半にいくとたとえばオフセットが200, 500となる可能性があります。一方でカーソルページネーションではカーソルの位置をすぐに検索できるのでページの後半に行ってもパフォーマンスが下がりにくいです。無限スクロールを実装する場合はこちらの手法が良いです。

デメリット

• どのページにどのデータがくるか予想ができない

• 一意となるデータをベースとする必要がある

まとめ

以上です。それぞれのページネーションの実装方式の特徴やそのロジック・使い分けについて理解できれば嬉しいです！