省略メニュー付きページネーションの実装
![省略メニュー付きページネーションの実装](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F4626924a681346e9a0fcabe5478eb9fa%2F779c997a79ad4c61a31739f6a4a9d86f%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%25202024-06-19%252017.48.44.png&w=1536&q=75)
目次
こんにちは!@Ryo54388667です!☺️
普段は都内でエンジニアとして業務をしてます!
主にTypeScriptやNext.jsといった技術を触っています。今回は省略メニュー付きページネーションの実装方法を紹介していきます!
実装するもの
#まずは実装するものを見ていただくのが良いのかなと思います。
これは本ブログのトップページで実装済みです。こちらのStorybookのほうが見やすいかもしれません。
様々なブログでも実装されているUIですので、Webを探せば実装方法はたくさん紹介されています。ただ、このような省略メニュー付きのページネーションは珍しいのかなと思い、本記事を書き起こしました。
実装の詳細
#コードだけ教えてくれ!というかたは、下記のファイルをご覧ください!
詳細を説明していきます。
const rate = totalCount / PER_PAGE;
const totalPages = rate < MINIMUM_PAGE_COUNT ? MINIMUM_PAGE_COUNT : Math.ceil(rate);
ここで、rate
は総アイテム数を1ページあたりのアイテム数で割った値です。totalPages
は、rateが1未満の場合は1、そうでなければrateを切り上げた値です。ここでは総ページ数を計算しています。例えば 20(記事数) ÷ 4 (記事数 / page) = 5 (page) となります。
次に、前後のページ範囲を計算します。smallNumRange
は現在のページより前のページ番号のリスト、largeNumRange
は現在のページより後のページ番号のリストです。
const previousPageRange = useMemo(() => Array.from({ length: totalPages + INDEX_OFFSET })
.map((_, index) => index + INDEX_OFFSET)
.slice(SMALL_RANGE_START_OFFSET, currentPage - SMALL_RANGE_END_OFFSET), [currentPage, totalPages])
const nextPageRange = useMemo(() => Array.from({ length: totalPages + INDEX_OFFSET })
.map((_, index) => index + INDEX_OFFSET)
.slice(currentPage + LARGE_RANGE_START_OFFSET, totalPages - LARGE_RANGE_END_OFFSET), [currentPage, totalPages])
なぜ SMALL_RANGE_END_OFFSET, LARGE_RANGE_END_OFFSET が必要なのか?
#previousPageRange とnextPageRangeの計算において、sliceメソッドで -1 (SMALL_RANGE_END_OFFSET)を使用しています。これには以下の理由があります。
slice(SMALL_RANGE_START_OFFSET, currentPage - SMALL_RANGE_END_OFFSET) の currentPage - SMALL_RANGE_END_OFFSET
は、現在のページの1つ前までのページを取得するためです。例えば、現在のページが5の場合、previousPageRangeは 2, 3 になります。(Storybookでいうとココです!)
slice(currentPage + LARGE_RANGE_START_OFFSET, totalPages - LARGE_RANGE_END_OFFSET) は、現在のページの次のページから最後のページの1つ前までのページを取得するためです。例えば、現在のページが5で、総ページ数が10の場合、nextPageRangeは 7, 8, 9 になります。
最初のページボタン
#最初のページ(ページ番号1)
<li>
<PaginationItem pageNumber={1} currentPage={currentPage}>1</PaginationItem>
</li>
前のページボタン
#現在のページが1でない場合、前のページに移動するボタン
<li>
<PaginationItem pageNumber={currentPage - 1} currentPage={currentPage}>
<svg
className="-scale-x-90"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</PaginationItem>
</li>
省略記号と小さいページ範囲のMenu
#現在のページが4以上の場合、省略記号と小さいページ範囲のMenuを表示します。
{currentPage >= 4 && (
<li className="relative group mx-6">
<button type="button">
<span>...</span>
</button>
<EllipsisMenu range={smallNumRange} />
</li>
)}
EllipsisMenu
については下記のファイルを参照してください。
前のページボタン
#現在のページが3以上の場合、前のページを表示。
{currentPage >= 3 && (
<li>
<PaginationItem pageNumber={currentPage - 1} currentPage={currentPage}>
{currentPage - 1}
</PaginationItem>
</li>
)}
現在のページボタン
#現在のページが最初と最後のページでない場合、現在のページを表示。
{currentPage !== 1 && currentPage !== totalPages && (
<li>
<PaginationItem pageNumber={currentPage} currentPage={currentPage}>
{currentPage}
</PaginationItem>
</li>
)}
次のページボタン
#現在のページが最後のページでない場合、次のページを表示。
{currentPage < totalPages && currentPage + 1 !== totalPages && (
<li>
<PaginationItem pageNumber={currentPage + 1} currentPage={currentPage}>
{currentPage + 1}
</PaginationItem>
</li>
)}
省略記号と大きなページ範囲のMenu
#現在のページが最後のページの3ページ前以下の場合、省略記号とその後のページ範囲を表示。
{currentPage <= totalPages - 3 && (
<li className="relative group mx-6">
<button type="button">
<span>...</span>
</button>
<EllipsisMenu range={largeNumRange} />
</li>
)}
最後のページボタン
#総ページ数が1でない場合、最後のページを表示します。
{totalPages !== 1 && (
<li>
<PaginationItem pageNumber={totalPages} currentPage={currentPage}>
{totalPages}
</PaginationItem>
</li>
)}
次のページボタン
#現在のページが最後のページでない場合、次のページに移動するボタンを表示。
{currentPage !== totalPages && (
<li>
<PaginationItem pageNumber={currentPage + 1} currentPage={currentPage}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
</PaginationItem>
</li>
)}
以上です!より良い方法があれば教えてください〜
最後まで読んでいただきありがとうございます!
気ままにつぶやいているので、気軽にフォローをお願いします!🥺
![GitHub](/_next/image?url=%2Ficons%2Fgithub.webp&w=48&q=75)