Reactで、ページ番号付きの一覧を作る方法

import { useState } from 'react';
import { COLORS, type Cat, type Color } from './cats';
import { Pagination } from './Pagination';

const PAGE_SIZE = 10;

export function CatList({ initialCats }: { initialCats: Cat[] }) {
  const [cats, setCats] = useState(initialCats);
  const [color, setColor] = useState<Color | 'all'>('all');
  const [page, setPage] = useState(1);

  const filtered = color === 'all' ? cats : cats.filter((cat) => cat.color === color);
  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  // 件数が減って page が最後のページを超えても、ないページは表示しない
  const currentPage = Math.min(page, totalPages);
  const start = (currentPage - 1) * PAGE_SIZE;
  const visible = filtered.slice(start, start + PAGE_SIZE);
  const end = start + visible.length;

  function changeColor(next: Color | 'all') {
    setColor(next);
    setPage(1); // 条件を変えたら1ページ目に戻す
  }

  function remove(id: number) {
    setCats(cats.filter((cat) => cat.id !== id));
  }

  return (
    <section>
      <label>
        毛の色
        <select value={color} onChange={(e) => changeColor(e.target.value as Color | 'all')}>
          <option value="all">すべて</option>
          {COLORS.map((c) => (
            <option key={c} value={c}>
              {c}
            </option>
          ))}
        </select>
      </label>
      <p className="summary">
        {filtered.length === 0
          ? '0件'
          : `${start + 1 === end ? end : `${start + 1}〜${end}`}件目／全${filtered.length}件`}
      </p>
      <ul className="cats">
        {visible.map((cat) => (
          <li key={cat.id}>
            {cat.name}（{cat.color}）
            <button type="button" onClick={() => remove(cat.id)} aria-label={`${cat.name}を削除`}>
              削除
            </button>
          </li>
        ))}
      </ul>
      <Pagination current={currentPage} total={totalPages} onChange={setPage} />
    </section>
  );
}

export type PageItem = number | 'start-ellipsis' | 'end-ellipsis';

const range = (from: number, to: number) =>
  Array.from({ length: to - from + 1 }, (_, i) => from + i);

// 表示するページ番号の並び。最初と最後、今のページと前後1つを出し、間は「…」にする。
// total が7以上のときは、いつも7個になる（ボタンの数が変わらない）
export function getPageItems(current: number, total: number): PageItem[] {
  if (total <= 7) return range(1, total);
  if (current <= 4) return [...range(1, 5), 'end-ellipsis', total];
  if (current >= total - 3) return [1, 'start-ellipsis', ...range(total - 4, total)];
  return [1, 'start-ellipsis', current - 1, current, current + 1, 'end-ellipsis', total];
}

current=1 total=20: 1 2 3 4 5 … 20
current=4 total=20: 1 2 3 4 5 … 20
current=5 total=20: 1 … 4 5 6 … 20
current=10 total=20: 1 … 9 10 11 … 20
current=16 total=20: 1 … 15 16 17 … 20
current=17 total=20: 1 … 16 17 18 19 20
current=20 total=20: 1 … 16 17 18 19 20
1275 通りの組み合わせで、すべての決まりを満たした

import { getPageItems } from './pageItems';

type Props = {
  current: number;
  total: number;
  onChange: (page: number) => void;
};

export function Pagination({ current, total, onChange }: Props) {
  const isFirst = current === 1;
  const isLast = current === total;

  return (
    <nav aria-label="ページ" className="pagination">
      {/* disabled にするとフォーカスが外れるので、aria-disabled にして押されても何もしない */}
      <button type="button" aria-disabled={isFirst} onClick={() => !isFirst && onChange(current - 1)}>
        前へ
      </button>
      <ul>
        {getPageItems(current, total).map((item) =>
          typeof item === 'number' ? (
            <li key={item}>
              <button
                type="button"
                aria-label={`${item}ページ`}
                aria-current={item === current ? 'page' : undefined}
                onClick={() => onChange(item)}
              >
                {item}
              </button>
            </li>
          ) : (
            <li key={item} aria-hidden="true">
              …
            </li>
          ),
        )}
      </ul>
      <button type="button" aria-disabled={isLast} onClick={() => !isLast && onChange(current + 1)}>
        次へ
      </button>
    </nav>
  );
}

- navigation "ページ":
  - button "前へ" [disabled]
  - list:
    - listitem:
      - button "1ページ": "1"
    - listitem:
      - button "2ページ": "2"
    - listitem:
      - button "3ページ": "3"
    - listitem:
      - button "4ページ": "4"
    - listitem:
      - button "5ページ": "5"
    - listitem:
      - button "10ページ": "10"
  - button "次へ"

1 … 4 5 6 … 20 | 5 aria-current=page | フォーカス: button "6"
もう一度 Enter: 1 … 5 6 7 … 20 | 6 aria-current=page | フォーカス: button "7"

1 … 4 5 6 … 20 | 5 aria-current=page | フォーカス: button "5"
もう一度 Enter: 1 … 4 5 6 … 20 | 5 aria-current=page | フォーカス: button "5"

1 … 16 17 18 19 20 | 20 aria-current=page | 次へ disabled: true | フォーカス: body

91〜95件目／全95件 | 1 … 6 7 8 9 10 | フォーカス: button "次へ"
もう一度 Enter: 91〜95件目／全95件 | フォーカス: button "次へ"

function changeColor(next: Color | 'all') {
    setColor(next);
    setPage(1); // 条件を変えたら1ページ目に戻す
  }

1匹目を削除: 91〜94件目／全94件 | 1 … 6 7 8 9 10 | 10 aria-current=page
2匹目を削除: 91〜93件目／全93件 | 1 … 6 7 8 9 10 | 10 aria-current=page
3匹目を削除: 91〜92件目／全92件 | 1 … 6 7 8 9 10 | 10 aria-current=page
4匹目を削除: 91件目／全91件 | 1 … 6 7 8 9 10 | 10 aria-current=page
5匹目を削除: 81〜90件目／全90件 | 1 … 5 6 7 8 9 | 9 aria-current=page