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

Vue.jsを使えば、大量のリストデータをページ単位で表示する「ページネーション機能」も簡単に実装できます。本記事では、1ページあたりの表示件数を制御し、前後のページ切り替えができるシンプルなページネーション付きリストの作成方法を紹介します。

ページネーション機能とは？
基本的な実装例
実装のポイント
拡張のアイデア
まとめ

ページネーション機能とは？

ページネーションとは、表示するリストが多すぎる場合に、複数のページに分割して表示する仕組みです。Vue.jsでは、現在のページ番号と表示件数をもとにcomputedで表示リストを制御することで、柔軟なページネーションUIが実現できます。

基本的な実装例

以下は、Vue 3のComposition APIで実装したシンプルなページネーション付きリストの例です。前へ／次へボタンと、ページ番号によるナビゲーションを実装しています。

<template>
  <div class="pagination-container">
    <ul class="item-list">
      <li v-for="(item, index) in paginatedItems" :key="index">
        {{ item }}
      </li>
    </ul>

    <div class="pagination-controls">
      <button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1">前へ</button>

      <button
        v-for="page in totalPages"
        :key="page"
        @click="goToPage(page)"
        :class="{ active: page === currentPage }"
      >
        {{ page }}
      </button>

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

<script setup>
import { ref, computed } from 'vue';

const allItems = ref([
  '項目1', '項目2', '項目3', '項目4', '項目5',
  '項目6', '項目7', '項目8', '項目9', '項目10',
  '項目11', '項目12', '項目13', '項目14', '項目15'
]);

const itemsPerPage = 5;
const currentPage = ref(1);

const totalPages = computed(() => {
  return Math.ceil(allItems.value.length / itemsPerPage);
});

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  return allItems.value.slice(start, start + itemsPerPage);
});

const goToPage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  }
};
</script>

<style scoped>
.pagination-container {
  max-width: 500px;
  margin: 2rem auto;
  text-align: center;
}
.item-list {
  list-style: none;
  padding: 0;
}
.item-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}
.pagination-controls {
  margin-top: 1rem;
}
.pagination-controls button {
  margin: 0 0.25rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.pagination-controls button.active {
  background-color: #007acc;
  color: #fff;
}
.pagination-controls button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>