はじめに
多くのダイナミックなデータを集約して視覚化するサービスに携わっており、検索機能を作成することで興味深い選択問題を出てました。
新しいデータが大量に追加されると、同じ場所(ページ)のデータをリクエストしても異なる結果が返ってくることが判明した。データの分析や比較がより複雑になっちゃう。
通常、誰もがオフセット・ページネーションに慣れているが、常に変化するデータ（挿入、削除）に対してより効果的な方法もある。カーソルのページネーションを使った方がいいかもしれない。両方について説明しよう。
オフセットページネーション:
この方法では、結果セットの先頭からスキップするアイテムの数（オフセット）と、各ページで返すアイテムの数を指定します。たとえば、100個のアイテムの結果セットがある場合、1ページ目を取得するためにはオフセットを0、サイズを10に設定します。次に、2ページ目を取得するためにはオフセットを10、サイズを10に設定し、以降も同様です。オフセットページネーションはシンプルですが、大きなオフセット値では効率が低下し、動的なデータセットでは問題が生じることがあります。
カーソルページネーション:
この方法では、一意の識別子（カーソル）を使用して次のページの結果を取得します。通常、カーソルは結果セット内の特定のアイテムを指します。次のページをリクエストする際には、前のページで取得した最後のアイテムに対応するカーソルを指定します。この方法は大きなデータセットに対して効率的であり、オフセットを使用しないため、アイテムの挿入や削除がページネーションのパフォーマンスに影響を与えません。
可視化
説明を理解するのが難しいかもしれないので、簡単な視覚化を作成しました。
オフセット（左側）の場合、データが追加されるたびに（新しいリクエストが行われるたびに）ドキュメントのインデックスが変化することがわかります。
カーソルを使うことで、変化するデータセットをよりスムーズにナビゲートできる。
可視化を作成するために使用したコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ページネーション視覚化: Offset vs Cursor</title>
<style>
.document { width: 15px; height: 10px; background-color: blue; margin: 1px; float: left; color: white; text-align: center; font-size: 8px; }
.container { width: 220px; height: 660px; overflow: hidden; float: left; margin-right: 10px; }
</style>
</head>
<body>
<div class="container" id="offsetContainer"></div>
<div class="container" id="cursorContainer"></div>
<button onclick="next()">+1</button>
<button onclick="previous()">-1</button>
<script>
const documentsOffset = [];
const documentsCursor = [];
const offsetContainer = document.getElementById('offsetContainer');
const cursorContainer = document.getElementById('cursorContainer');
let intervalIdOffset = null;
let intervalIdCursor = null;
const cursorInitialIndices = [];
let counter = 0;
let page = 0;
const next = () => {
counter += 10;
page += 10;
};
const previous = () => {
counter -= 10;
page -= 10;
if (page < 0) {
page = 0;
}
if (counter < 0) {
counter = 0;
}
};
const createDocuments = () => {
for (let i = 0; i < 100; i++) {
addDocument(i + 1, true); // offset
addDocument(i + 1, false); // cursor
}
for (let i = 0; i < 10; i++) {
cursorInitialIndices.push(i);
}
};
const addDocument = (index, isOffset) => {
const doc = document.createElement('div');
doc.className = 'document';
doc.textContent = index;
if (isOffset) {
offsetContainer.insertBefore(doc, offsetContainer.firstChild);
documentsOffset.unshift(doc);
} else {
cursorContainer.insertBefore(doc, cursorContainer.firstChild);
documentsCursor.unshift(doc);
}
};
const startOffsetPagination = () => {
const step = 10;
intervalIdOffset = setInterval(() => {
clearHighlight(documentsOffset);
for (let i = 0; i < step && i < documentsOffset.length; i++) {
documentsOffset[i + page].style.backgroundColor = 'red';
}
}, 100);
};
const startCursorPagination = () => {
const step = 10;
intervalIdCursor = setInterval(() => {
clearHighlight(documentsCursor);
cursorInitialIndices.forEach(index => {
if (index + counter < documentsCursor.length) {
documentsCursor[index + counter].style.backgroundColor = 'green';
}
});
}, 100);
};
const clearHighlight = (docs) => {
docs.forEach(doc => {
doc.style.backgroundColor = 'blue';
});
};
createDocuments();
startOffsetPagination();
startCursorPagination();
// 新しいデータの追加を開始し、ライブ環境をシミュレートする
setInterval(() => {
counter += 1;
addDocument(documentsOffset.length + 1, true); // offset追加
addDocument(documentsCursor.length + 1, false); // cursor追加
}, 2000);
</script>
</body>
</html>
まとめて
要約すると、両方の方法はページネーションを実現しますが、カーソルページネーションは大きなデータセットや動的なデータセットに対して効率的でスケーラブルなため、より好まれます。一方、オフセットページネーションはシンプルですが、大きくて複雑データセットでは効率が悪くなる場合があります。