React, TypeScript, Remixで作ったブログサイトにページネーションコンポーネントを追加する

React, TypeScript, Remixでブログサイトを作る機会がありました。
ブログに必要な機能は色々あるのですが、その一つにページネーションがあると思います。
ページネーションの実装は久しぶりだったので、色々調べるのに少し時間を割いてしまいました。
なので、次回実装する時のために、メモがわりとして実装方法を記事にしてみました。

作り方

まず、Paginationコンポーネントが受け取るプロパティを定義するためのinterface PaginationPropsを作ります。
PaginationPropsには、以下のプロパティを定義します。

• total: 投稿の総数
• perPage: 1ページあたりの投稿数
• current: 現在表示されているページ番号
• setCurrent: ページ番号を更新するための関数

次に、このコンポーネント自体の定義、const Pagination: FC<PaginationProps>を作ります。ここでは、FCを使って、Paginationコンポーネントを作成しています。

interface PaginationProps {
  total: number
  perPage: number
  current: number
  setCurrent: Dispatch<SetStateAction<number>>
}

const Pagination: FC<PaginationProps> = ({
  total,
  perPage,
  current,
  setCurrent,
}): JSX.Element => {
  return (
    <ul>
      <li></li>
    </ul>
  )
}

このコンポーネントでは、総ページ数を計算し、1から総ページ数までのリンクを作成します。リンクは、CSSスタイルを適用するために、CSSファイルから読み込みます。また、リンクをクリックした際には、ページ番号を更新し、ブラウザのスクロール位置をトップに戻します。

ページ番号のリンクが2つ未満の場合には、ページネーションを表示しないようにします。それ以外の場合には、左右にページを切り替えるための「<」と「>」のリンクを表示し、ページ番号をリスト形式で表示します。

ReactとTypeScriptを使った開発では、コンポーネントの型情報を定義することが重要です。ページネーションコンポーネントでは、FC（Functional Component）型を使用し、コンポーネントが受け取るプロパティの型情報を定義します。また、リンクのクリック時に呼び出される関数setCurrent()には、DispatchとSetStateActionの型情報を定義します。

以上のように、ReactとTypeScriptを使ったブログサービスにおいて、ページネーション機能を実現するためには、コンポーネントの作成と型情報の定義が必要となります。それによって、安全で使いやすいコードを作成することができます。

そして、そのタスクを担当するジュニアデベロッパーが、Paginationコンポーネントを実装すると考えた場合、以下のような手順に従うことができます。

1. Paginationコンポーネントを作成するために、必要なパッケージやライブラリをインストールし、Reactコンポーネントを作成する。
2. ページネーションに必要なプロパティを定義する。ページの総数（total）、ページごとに表示する投稿数（perPage）、現在のページ番号（current）、およびページ番号を変更するための関数（setCurrent）が必要です。
3. クリックしたページ番号を変更する関数を定義する。この関数は、setCurrent関数を呼び出し、ページ番号を変更したときにページのトップにスクロールするようにします。
4. 現在のページ番号をハイライトするための、ページ番号のリストを作成する。リスト内の各ページ番号は、クリックされた場合にクリックしたページ番号を渡すように設定された関数を呼び出します。
5. ページ番号のリスト、前のページボタン、および次のページボタンを含むページネーションのマークアップを作成します。このマークアップを返すReactコンポーネントを作成します。
6. コンポーネントをエクスポートし、アプリケーションのページで使用する。

実際の実装では、コンポーネントのスタイリング、マークアップの詳細、またはページネーションの機能性に関するアプリケーションの要件に応じてカスタマイズする必要があるかもしれません。