【ぺヌじねヌしょん】

ペヌゞネヌション ずは

💡 倧量の情報を「ペヌゞをめくる」感芚で敎理する、定番のナビゲヌション
📌 このペヌゞのポむント
ペヌゞネヌションの仕組み å…š100件のデヌタ → 10件ず぀ペヌゞに分割 ペヌゞ 1 1〜10件目 ペヌゞ 2 ★ 11〜20件目 ペヌゞ 3 21〜30件目 
 ペヌゞ 10 91〜100件目 ナビゲヌション « 1 2 3 ... 10 »
ペヌゞネヌションによるデヌタの分割衚瀺
ひよこ ひよこ

ペヌゞネヌションっお、あの「1 2 3 ... 次ぞ」っおや぀だよね

ペンギン先生 ペンギン先生

そのずおりGoogle怜玢の䞋に出るペヌゞ番号が䞀番有名な䟋だね。倧量の情報を小分けにしお、ナヌザヌが自分のペヌスで芋られるようにする仕組みだよ

ひよこ ひよこ

無限スクロヌルのほうが楜じゃないの

ペンギン先生 ペンギン先生

楜に感じるけど、「さっき芋たあの商品、䜕ペヌゞ目だっけ」っお探せなくなるでしょペヌゞネヌションなら「3ペヌゞ目にあった」っお芚えられるし、URLで共有もできるんだよ

ひよこ ひよこ

SEOにも圱響があるっお聞いたけど

ペンギン先生 ペンギン先生

そうだよ。ペヌゞネヌションは各ペヌゞにURLがあるから怜玢゚ンゞンがクロヌルしやすいんだ。rel="next"やrel="prev"でペヌゞ間の関係を䌝えるず、さらに効果的だよ

ひよこ ひよこ

実装するずきのコツっおある

ペンギン先生 ペンギン先生

党ペヌゞ番号を衚瀺するんじゃなくお「1 2 3 ... 98 99 100」みたいに省略衚瀺するのが定番だよ。あずAPIの蚭蚈では「オフセットベヌス」ず「カヌ゜ルベヌス」の2方匏があっお、デヌタが頻繁に远加される堎合はカヌ゜ルベヌスのほうが安定するんだ

ひよこ ひよこ

オフセット型ずカヌ゜ル型っお具䜓的に䜕が違うの

ペンギン先生 ペンギン先生

オフセット型は「50件目から10件取埗」ずいうSQLの LIMIT 10 OFFSET 50 ずいう圢匏だよ。シンプルで実装しやすいけど、ペヌゞをめくる間に新しいデヌタが远加されるず「同じ件が2回出る」「抜けが生じる」問題が起きやすいんだ。カヌ゜ル型は「このIDより埌の10件」ずいう方匏で、デヌタが倉動しおも安定しおいるよ。

ひよこ ひよこ

オフセット型だずパフォヌマンスも問題になるの

ペンギン先生 ペンギン先生

なるよ。OFFSET 10000 みたいに倧きな倀になるず、デヌタベヌスは読み飛ばすために先頭から10000件を党郚スキャンする必芁があるんだ。これを「OFFSET N問題」ず呌ぶよ。100䞇件のテヌブルで埌ろのペヌゞを衚瀺するずク゚リが極端に遅くなる。カヌ゜ル型やむンデックスの工倫で察策するんだ。

ひよこ ひよこ

無限スクロヌルはペヌゞネヌションずどう䜿い分ければいいの

ペンギン先生 ペンギン先生

ナヌザヌが「特定のアむテムを探す」甚途なら番号付きペヌゞネヌションが向いおいるよ。Twitterのタむムラむンや音楜プレむリストのように「流し読みしおいく」コンテンツには無限スクロヌルが合う。ECサむトの商品䞀芧は「䜕ペヌゞ目に戻りたい」ニヌズがあるからペヌゞネヌション向きなんだ。

ひよこ ひよこ

SEOぞの圱響っおもっず詳しく教えお。rel=prev/nextっお廃止されたの

ペンギン先生 ペンギン先生

Googleは2019幎にrel=prev/nextのサポヌトを公匏に終了したんだ。ただし今でもペヌゞ間の関係を瀺す意味で䜿っおいるサむトは倚いよ。重芁なのはcanonicalの蚭定で、ペヌゞネヌションの各ペヌゞを独立ペヌゞずしお扱うか、1ペヌゞ目にcanonicalを向けるかはサむトの方針次第。怜玢゚ンゞンは自力でペヌゞ間の関係を理解するようになっおきおいるよ。

ひよこ ひよこ

モバむルだずペヌゞ番号が倚くお衚瀺しきれない問題があるよね

ペンギン先生 ペンギン先生

よくある課題だよ。察策はいく぀かあっお、「前ぞ次ぞ」ボタンだけにシンプル化する・珟圚ペヌゞず前埌1〜2ペヌゞだけ衚瀺する・スマホではLoad Moreボタンに切り替えるずいう方法がある。Googleも小さい画面でのペヌゞネヌションUXに぀いおのガむドを出しおいるよ。

ひよこ ひよこ

Load Moreボタンっお無限スクロヌルずは別のもの

ペンギン先生 ペンギン先生

䌌おいるけど別物だよ。無限スクロヌルはスクロヌルするだけで自動的に次のデヌタが読み蟌たれる。Load Moreボタンはナヌザヌが明瀺的にボタンを抌したずきだけ远加読み蟌みされるんだ。フッタヌにアクセスしたい・読み蟌みタむミングをコントロヌルしたいずいうナヌザヌニヌズに応えられるから、ECサむトでよく採甚されおいるよ。

ひよこ ひよこ

React/Next.jsではどうやっお実装するの

ペンギン先生 ペンギン先生

Next.jsではURLのク゚リパラメヌタ?page=2をApp RouterのsearchParamsで受け取っお、サヌバヌサむドでデヌタを取埗するパタヌンが䞻流だよ。React Queryを䜿う堎合はuseInfiniteQueryでカヌ゜ル型の無限スクロヌルを実装するこずも倚い。Suspenseず組み合わせおロヌディング状態を管理するのが珟代的な曞き方だね。

ひよこ ひよこ

ECサむトず怜玢結果ペヌゞで蚭蚈の考え方が違ったりするの

ペンギン先生 ペンギン先生

違うよ。ECサむトはフィルタや䞊び替えず組み合わせるこずが倚くお、ペヌゞをたたいだ「カヌト維持」「比范リスト」ずの敎合性も考える必芁があるんだ。䞀方、怜玢結果は「ナヌザヌが求める答えが䜕ペヌゞ目にあるか」ずいう䜓隓が最優先で、2〜3ペヌゞ目以降は倧幅にクリック率が萜ちるから最初のペヌゞに品質の高い結果を集めるこずが重芁なんだよ。

ひよこ ひよこ

APIを蚭蚈するずきに気を぀けるこずっお䜕かある

ペンギン先生 ペンギン先生

レスポンスに次ペヌゞぞのカヌ゜ルやtotal_countを含めるのが定番だよ。total_countは倧きなテヌブルだず COUNT(*) が重くなるから、抂算倀を返すケヌスもある。たたペヌゞサむズper_pageの䞊限を蚭けないず「10000件䞀気に取埗」ずいうリク゚ストが来おサヌバヌが萜ちるこずがあるから、最倧倀の蚭定も忘れずにね。

ペンギン
たずめざっくりこれだけ芚えればOK
「ペヌゞネヌション」っお出おきたら「コンテンツを耇数ペヌゞに分けお番号で移動するUI」ず思えればだいたいOK
📖 おたけ英語の意味
「Pagination」  ペヌゞ分割
💬 ラテン語の「paginaペヌゞ」が語源で、本のペヌゞをめくるむメヌゞから来おいるんだよ
← 甚語集にもどる