それでは、JavaScript の slice() を使った ページネーション（ページ分割）サンプルを、初心者向けにわかりやすく紹介します。
ページネーションとは？
たとえば「10件のデータを3件ずつ表示したい」とき、
一度に全部出さずに「1ページ目」「2ページ目」と分けて表示するしくみのことです。
✅ 完成イメージ
データ: [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ]
1ページ目 → ['A', 'B', 'C']
2ページ目 → ['D', 'E', 'F']
3ページ目 → ['G', 'H']
これを slice() を使って実現します！
💻 サンプルコード（シンプル版）
// データ（8件）
const items = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
// 1ページあたりに表示する件数
const perPage = 3;
// ページ番号（1ページ目なら 1）
let currentPage = 1;
// ページ表示関数
function showPage(page) {
// 開始位置（0から始まる）
const start = (page - 1) * perPage;
// 終了位置（start + perPage）
const end = start + perPage;
// sliceでその範囲だけ取り出す！
const pageItems = items.slice(start, end);
console.log(`--- ${page} ページ目 ---`);
console.log(pageItems);
}
// ページを順に表示
showPage(1); // ['A', 'B', 'C']
showPage(2); // ['D', 'E', 'F']
showPage(3); // ['G', 'H']
🔍 解説
(page - 1) * perPage
→ 何番目から始めるかを計算します。
（例：2ページ目なら(2 - 1) * 3 = 3→ インデックス3から）slice(start, end)
→startからendの手前まで取り出します。slice()は元の配列を変えないので、安全に使えます。
🌐 応用：ブラウザでページ切り替え（実行ボタン付き）
CodePen やブラウザで動かせる簡単UI付き例👇
（HTML + JS で完結）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slice() ページネーション</title>
<style>
body { font-family: sans-serif; text-align: center; margin: 30px; }
button { margin: 5px; padding: 8px 12px; }
.items { margin-top: 10px; font-size: 1.2em; }
</style>
</head>
<body>
<h2>🍀 slice() でページ分割</h2>
<div id="items" class="items"></div>
<div>
<button id="prev">◀ 前へ</button>
<button id="next">次へ ▶</button>
</div>
<script>
const items = ['A','B','C','D','E','F','G','H','I','J']; // データ
const perPage = 3; // 1ページあたりの件数
let currentPage = 1;
function showPage(page) {
const start = (page - 1) * perPage;
const end = start + perPage;
const pageItems = items.slice(start, end);
document.getElementById('items').textContent =
`${page}ページ目: [ ${pageItems.join(', ')} ]`;
}
// 初回表示
showPage(currentPage);
// ボタン操作
document.getElementById('prev').onclick = () => {
if (currentPage > 1) currentPage--;
showPage(currentPage);
};
document.getElementById('next').onclick = () => {
const maxPage = Math.ceil(items.length / perPage);
if (currentPage < maxPage) currentPage++;
showPage(currentPage);
};
</script>
</body>
</html>
補足：slice() が活きる理由
- データ全体を1つの配列で持ち、
slice()で「一部だけ切り出す」だけでOK。 - 元データを壊さずに何度でもページ切り替えできる。
- 実際のアプリでも「記事一覧」「商品一覧」などで同じ考え方が使われます。
