【Vue.js】ページネーション付きリスト表示を実装する方法｜1ページ○件表示に対応

// utils/getPageItems.js
// 表示するページ番号の並びを返す。常に最大7個になり、ボタンの数が増えすぎない
//   getPageItems(1, 10)  → [1, 2, 3, 4, 5, 'ellipsis-right', 10]
//   getPageItems(5, 10)  → [1, 'ellipsis-left', 4, 5, 6, 'ellipsis-right', 10]
//   getPageItems(10, 10) → [1, 'ellipsis-left', 6, 7, 8, 9, 10]
export function getPageItems(current, total, siblings = 1) {
  const range = (from, to) => Array.from({ length: to - from + 1 }, (_, i) => from + i)

  // 先頭・末尾・現在・左右の省略記号・現在の前後 を並べても収まるなら、全部出す
  const maxButtons = siblings * 2 + 5
  if (total <= maxButtons) return range(1, total)

  const left = Math.max(current - siblings, 1)
  const right = Math.min(current + siblings, total)
  const showLeftDots = left > 2
  const showRightDots = right < total - 1
  const edgeCount = 3 + siblings * 2

  if (!showLeftDots && showRightDots) {
    return [...range(1, edgeCount), 'ellipsis-right', total]
  }
  if (showLeftDots && !showRightDots) {
    return [1, 'ellipsis-left', ...range(total - edgeCount + 1, total)]
  }
  return [1, 'ellipsis-left', ...range(left, right), 'ellipsis-right', total]
}

<script setup>
import { ref, computed, watch } from 'vue'
import { getPageItems } from './utils/getPageItems'

// 各項目に、固有の id を持たせる
const items = ref(Array.from({ length: 95 }, (_, i) => ({ id: i + 1, title: `項目${i + 1}` })))

const pageSize = ref(10)
const currentPage = ref(1)

// 0件でも 1 ページとして扱う（ボタンが消えないように）
const totalPages = computed(() => Math.max(1, Math.ceil(items.value.length / pageSize.value)))

const pagedItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return items.value.slice(start, start + pageSize.value)
})

const pageItems = computed(() => getPageItems(currentPage.value, totalPages.value))

const rangeText = computed(() => {
  if (items.value.length === 0) return '0件'
  const start = (currentPage.value - 1) * pageSize.value + 1
  const end = Math.min(currentPage.value * pageSize.value, items.value.length)
  return `全${items.value.length}件中 ${start}〜${end}件`
})

function goToPage(page) {
  if (page < 1 || page > totalPages.value || page === currentPage.value) return
  currentPage.value = page
  // 移動したら、リストの先頭へ戻す
  document.getElementById('list-top')?.scrollIntoView()
}

// 件数が減って、今のページが範囲外になったら、最後のページに戻す
watch(totalPages, (total) => {
  if (currentPage.value > total) currentPage.value = total
})

// 1ページの件数を変えたら、1ページ目に戻す
watch(pageSize, () => {
  currentPage.value = 1
})
</script>

<template>
  <div id="list-top">
    <label for="page-size">1ページの件数</label>
    <select id="page-size" v-model.number="pageSize">
      <option :value="10">10件</option>
      <option :value="20">20件</option>
      <option :value="50">50件</option>
    </select>

    <!-- 件数とページを、読み上げソフトにも伝える -->
    <p role="status">{{ rangeText }}（{{ currentPage }} / {{ totalPages }}ページ）</p>

    <ul v-if="pagedItems.length">
      <li v-for="item in pagedItems" :key="item.id">{{ item.title }}</li>
    </ul>
    <p v-else>該当する項目がありません。</p>

    <nav aria-label="ページネーション" class="pagination">
      <button
        type="button"
        :aria-disabled="currentPage === 1"
        @click="goToPage(currentPage - 1)"
      >
        前へ
      </button>

      <template v-for="item in pageItems" :key="item">
        <span v-if="typeof item === 'string'" aria-hidden="true">…</span>
        <button
          v-else
          type="button"
          :aria-current="item === currentPage ? 'page' : undefined"
          :aria-label="`${item}ページ目`"
          :class="{ active: item === currentPage }"
          @click="goToPage(item)"
        >
          {{ item }}
        </button>
      </template>

      <button
        type="button"
        :aria-disabled="currentPage === totalPages"
        @click="goToPage(currentPage + 1)"
      >
        次へ
      </button>
    </nav>
  </div>
</template>

<style scoped>
.pagination { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-top: 1rem; }
.pagination button { padding: 0.4rem 0.8rem; cursor: pointer; }
.pagination button.active { background: #007acc; color: #fff; }
/* 端のボタンは見た目を弱めるが、フォーカスはできる状態のままにする */
.pagination button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
</style>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// URL の ?page=3 と currentPage を同期する
const currentPage = computed({
  get: () => {
    const n = Number(route.query.page)
    return Number.isInteger(n) && n >= 1 ? n : 1   // 不正な値は 1 ページ目にする
  },
  // 履歴をページごとに残したいなら push、残したくなければ replace
  set: (page) => router.push({ query: { ...route.query, page } })
})
</script>

// サーバー側でページを分ける場合：表示するページ分だけを取得する
const res = await fetch(`/api/items?page=${currentPage.value}&limit=${pageSize.value}`)
const { items, total } = await res.json()   // total は、全件数

// totalPages は、取得した全件数 total から計算する
// const totalPages = Math.max(1, Math.ceil(total / pageSize.value))