ウェブスクレイピングにおけるページネーションの扱い方：すべてのタイプの説明

npm install @scrapeless-ai/sdk puppeteer-core

export SCRAPELESS_API_KEY="your_api_token_here"

import { Puppeteer } from '@scrapeless-ai/sdk';

const browser = await Puppeteer.connect({
  apiKey: process.env.SCRAPELESS_API_KEY,
  sessionName: 'pagination',
  proxyCountry: 'US',
  sessionTTL: 300,
});

const page = await browser.newPage();

const BASE = 'https://quotes.toscrape.com';
let url = `${BASE}/page/1/`;
const items = [];
let pages = 0;

while (url) {
  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
  pages++;

  const pageItems = await page.evaluate(() => 

[...]document.querySelectorAll('.quote .text')].map((q) => q.textContent),
  );
  items.push(...pageItems);

  // 次のリンクを読む；最後のページにいるときはnull
  const next = await page.evaluate(() => {
    const a = document.querySelector('li.next a');
    return a ? a.getAttribute('href') : null;
  });
  url = next ? new URL(next, BASE).href : null;
}

console.log(pages, 'ページ,', items.length, 'アイテム');
// 10ページ、100アイテム

await page.goto(`${BASE}/page/1/`, { waitUntil: 'domcontentloaded' });
// 例：最後のページリンクを読み取り、それが存在しない場合はページが何も返さないまで進めます
for (let n = 1; ; n++) {
  await page.goto(`${BASE}/page/${n}/`, { waitUntil: 'domcontentloaded' });
  const count = await page.evaluate(() => document.querySelectorAll('.quote').length);
  if (count === 0) break;   // 空のページ = 終了の先
  // ...抽出
}

await page.goto(TARGET, { waitUntil: 'domcontentloaded' });
while (true) {
  const before = await page.evaluate(() => document.querySelectorAll('.item').length);
  const btn = await page.$('button.load-more');
  if (!btn) break;                       // もうボタンがない = 終了
  await btn.click();
  await page.waitForFunction(
    (n) => document.querySelectorAll('.item').length > n,
    {},
    before,
  );                                      // 固定のスリープではなく新しいアイテムを待つ
}

await page.goto(TARGET, { waitUntil: 'domcontentloaded' });
let prevHeight = 0;
while (true) {
  const height = await page.evaluate(() => document.body.scrollHeight);
  if (height === prevHeight) break;       // 高さが増加しなくなった = 終了
  prevHeight = height;
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await new Promise((r) => setTimeout(r, 1500)); // 次のバッチを待ちます
}
const items = await page.evaluate(() =>
  [...document.querySelectorAll('.item')].map((el) => el.textContent),
);

[app.scrapeless.com](https://app.scrapeless.com/passport/login/?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=handle-pagination-web-scraping)に登録して、無料のスクレイピングブラウザランタイムを取得し、上記のパターンをワークフローに必要なページネーションサイトに適応してください。スケールについては[料金](https://www.scrapeless.com/ja/pricing?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=handle-pagination-web-scraping)を参照してください。

---

## よくある質問

**Q: サイトが使用しているページネーションのタイプをどうやって知るのですか？**  
ページを見てください：「次へ」リンクは次のボタン、番号付きリンクは番号付きページ、「もっと読み込む」ボタンはロードモア、スクロールするにつれて新しいコンテンツが制御なしで表示されるのが無限スクロールです。多くのサイトは2つを混合していますが、データを読み込む方を処理してください。

**Q: なぜ`?page=N`ループでデータが欠けるのですか？**  
サイトがクリーンな番号付きURLを使用していないか、番号にギャップがあるからです。URLを構築するのではなく、サイト独自の次のリンクをたどってください。

**Q: 無限スクロールループをどのように停止しますか？**  
各スクロールの前後で`document.body.scrollHeight`を比較します。増加が止まると、読み込むものが残っていません。

**Q: 複数ページのクロールにプロキシは必要ですか？**  
多くの場合、必要です — 1つのIPから多くのページを歩くことは、従来のレート制限のトリガーです。`proxyCountry`で住宅用エグレスを固定し、クロールのペースを保ちます。

**Q: 途中でブロックされるのを避けるにはどうすればいいですか？**  
ページ間に短い遅延を追加し、同時実行を控えめにし、後のページがレンダリングされ続けるように、実際のアンチディテクションブラウザで実行します。

**Q: AIエージェントなしでこれを実行できますか？**  
はい。Scrapelessセッション上のプレーンPuppeteerで、エージェントは必要ありません。