ここでは、slice() を使って APIから取得したデータをページごとに表示する「実践的ページネーション例」を紹介します。
（初心者でも理解しやすいように、コメントをたっぷり入れています）
🌐 目標：APIデータをページごとに表示！
使うAPI：
👉 JSONPlaceholder
無料のテスト用APIで、ブログ記事っぽいデータが100件取得できます。
💻 実例コード（HTML + JavaScript）
CodePen やブラウザに貼り付けてそのまま動かせます👇
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>slice() × API ページネーション</title>
<style>
body {
font-family: sans-serif;
max-width: 600px;
margin: 30px auto;
text-align: center;
}
h2 { margin-bottom: 10px; }
.post {
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
margin: 10px 0;
text-align: left;
}
button {
margin: 5px;
padding: 8px 14px;
font-size: 14px;
cursor: pointer;
}
#pageInfo {
margin-top: 10px;
}
</style>
</head>
<body>
<h2>📰 APIデータを slice() でページ分割</h2>
<div id="posts"></div>
<div>
<button id="prev">◀ 前へ</button>
<button id="next">次へ ▶</button>
</div>
<div id="pageInfo"></div>
<script>
const apiURL = "https://jsonplaceholder.typicode.com/posts";
const perPage = 5; // 1ページあたり5件表示
let currentPage = 1;
let allPosts = []; // ここに全データを入れる
// APIからデータ取得
async function fetchPosts() {
const res = await fetch(apiURL);
const data = await res.json();
allPosts = data;
showPage(currentPage);
}
// ページ表示関数
function showPage(page) {
const start = (page - 1) * perPage;
const end = start + perPage;
// sliceで必要な分だけ取り出す！
const pageItems = allPosts.slice(start, end);
const container = document.getElementById("posts");
container.innerHTML = "";
pageItems.forEach(post => {
const div = document.createElement("div");
div.className = "post";
div.innerHTML = `<strong>${post.title}</strong><p>${post.body}</p>`;
container.appendChild(div);
});
const totalPages = Math.ceil(allPosts.length / perPage);
document.getElementById("pageInfo").textContent = `${page} / ${totalPages} ページ`;
}
// ボタン操作
document.getElementById("prev").onclick = () => {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
}
};
document.getElementById("next").onclick = () => {
const maxPage = Math.ceil(allPosts.length / perPage);
if (currentPage < maxPage) {
currentPage++;
showPage(currentPage);
}
};
// 読み込み開始！
fetchPosts();
</script>
</body>
</html>
🔍 解説
| 処理 | 説明 |
|---|---|
fetch() | API からデータを取得（非同期処理） |
allPosts = data | 全データを配列に保存 |
slice(start, end) | 現在ページに表示する部分だけ切り出す |
Math.ceil(allPosts.length / perPage) | 総ページ数を計算 |
| ボタンのクリック | 現在ページを増減して再表示 |
しくみを図で理解
APIから100件取得
↓
[ {id:1,...}, {id:2,...}, {id:3,...}, ... ]
1ページ目 → slice(0,5) → 1〜5件
2ページ目 → slice(5,10) → 6〜10件
3ページ目 → slice(10,15) → 11〜15件
...
slice() がまさに「ページごとに切り分けるハサミ🖋️」の役割をしています！
発展アイデア
このコードをさらに発展させると：
- ✅ ページ番号ボタン（1, 2, 3…）を動的に生成
- ✅ 「読み込み中」スピナー表示
- ✅ 検索・ソート機能を追加
- ✅ React / Vue / Svelte 版に変換
