JavaScriptとNode.jsを使ったウェブスクレイピング：Cheerio対Puppeteer

主なポイント：

• 最初の決定は静的か動的かであり、これがあなたのツールチェイン全体を決定します。 データが初期HTMLに含まれている場合は、Cheerioを使用して解析します。JavaScriptが生成する場合は、Puppeteerのような実際のブラウザが必要です。
• Cheerioはパーサーでありブラウザではありません — これが重要です。 HTMLを読み込んで、レンダリングオーバーヘッドなしで、マークアップにすでに存在する内容に対してネイティブスピードのjQueryスタイルのセレクタを提供します。
• Puppeteerはレンダリングし、ユーザーが見るものを確認します。 クライアントレンダリングページ、無限スクロール、インタラクションの背後にあるコンテンツについては、PuppeteerがJavaScriptを実行し、完成したDOMを提供します。
• 両方とも同じScrapelessセッションで実行されます。 クラウドブラウザを介してHTMLを取得し、その後、Cheerioで解析するか、Puppeteerでライブ抽出します — 下層では同じ検出防止対策と住宅用出口があります。
• 横並びで検証済み。 以下の同じカタログページは、Cheerioを通じて20アイテム、Puppeteerを通じて20アイテムを生成します — コンテンツが存在する場合、両方の経路が一致する証拠です。
• 無料で始められます。 新しいScrapelessアカウントには無料のScraping Browserランタイムが含まれています — app.scrapeless.comでサインアップしてください。

イントロダクション：ページのために正しいツールを選択する

JavaScriptとNode.jsはウェブスクレイピングに自然に適しています — ブラウザが実行するのと同じ言語で、HTTPとHTMLのための成熟したエコシステムがあります。しかし、「Nodeでスクレイプする」は即座に非常に異なる二つの仕事に分かれ、間違った方を選ぶと労力が無駄になります。

取得したいデータがすでにページの初期HTMLに含まれている場合、ブラウザはまったく必要ありません — 速いパーサーが必要です。それがCheerioです：マークアップを読み込み、セレクタを実行し、完了です。データがロード後にJavaScriptによって構築される場合 — Reactアプリ、無限スクロールフィード、クリック後にのみ表示されるコンテンツ — パーサーは何も見ることができません。なぜなら、それが解析するHTMLは空のシェルだからです。ここでPuppeteer（またはPlaywright）の出番です：ページのJavaScriptを実行し、レンダリングされたDOMを提供します。

両者の実際の問題はアクセスです：実際のサイトはフィンガープリンティングを行い、レート制限をかけ、地理的制限を設けます。このガイドでは、Scrapeless Scraping Browser — 検出防止のクラウドブラウザ — 上で両方のアプローチを実行しますので、取得が成功し、いつCheerioを選択し、いつPuppeteerを選択するかを示します。以下の両方の経路は、同じページに対してライブで実行されました。

静的 vs 動的：見分け方

簡単なテスト：ページソースを表示します（インスペクタではなく）。データが生のHTMLに含まれているなら、Cheerioで十分です。ソースがほぼ空のシェルで、コンテンツがライブDOMでのみ表示される場合は、Puppeteerが必要です。

なぜScrapeless Scraping Browserなのか

Scrapeless Scraping Browserは、ウェブクローラーやAIエージェントのために設計されたカスタマイズ可能な検出防止のクラウドブラウザです。Nodeスクレイピングに特化しており、以下の機能を提供します：

• 標準のPuppeteer接続 — Puppeteer.connect()は通常のBrowserを返すため、コードは変更の必要がありません。
• クラウド側のJSレンダリング — 動的ページは実際にコンテンツを構築するため、page.content()（Cheerio用）とライブ抽出の両方が機能します。
• 195以上の国での住宅プロキシ — 出口を固定し、取得が成功し、一貫した状態を保ちます。
• 検出防止フィンガープリンティング — セッションは実際のブラウザとして読み取られるため、ページがレンダリングされ、挑戦することはありません。
• セッションの永続性 — マルチページ実行中にクッキーを温かく保ちます。

app.scrapeless.comの無料プランでAPIキーを取得してください。

前提条件

• Node.js 18以降
• ScrapelessアカウントとAPIキー — app.scrapeless.comでサインアップ
• CSSセレクタに関する基本的な知識

インストール

npm install @scrapeless-ai/sdk puppeteer-core cheerio

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: 'js-node-scraping',
  proxyCountry: 'US',
  sessionTTL: 300,
});

const page = await browser.newPage();
await page.goto('https://books.toscrape.com/', {
  waitUntil: 'domcontentloaded',
  timeout: 60000,
});

パスA — Cheerio（静的解析）

コンテンツがHTMLにあるときは、page.content()でマークアップを取得し、Cheerioで解析します。セレクターAPIはjQueryスタイルで、自然に読み取れます：

import * as cheerio from 'cheerio';

const html = await page.content();
const $ = cheerio.load(html);

const titles = $('.product_pod h3 a')
  .map((i, el) => $(el).attr('title'))
  .get();

console.log(titles.length, '—', titles[0]);
// 20 — A Light in the Attic

Cheerioは何もレンダリングしません — それは提供された文字列を解析するだけです。これにより、高速で、すでにHTMLを保持している場合に理想的です。また、ブラウザだけでなく、あらゆるソースからのHTMLにも使用できます。

無料プランでAPIキーを取得： app.scrapeless.com

パスB — Puppeteer（動的抽出）

JavaScriptによってコンテンツが構築されている場合、レンダリングされたページ内のライブDOMから抽出します。同じセレクタですが、ページのスクリプトが実行された後にブラウザで評価されます：

const titles = await page.evaluate(() =>
  [...document.querySelectorAll('.product_pod h3 a')].map((a) => a.getAttribute('title')),
);

console.log(titles.length, '—', titles[0]);
// 20 — A Light in the Attic

同じカタログページにおいて、両方のパスは同じ20のタイトルを返します — コンテンツがHTMLに存在するため、どちらのアプローチでも機能します。違いはクライアントレンダリングされたページで明らかになります：生のHTML上のCheerioは何も見つけられませんが、Puppeteerのパスはページが先にレンダリングされたため、アイテムを返します。

インタラクションで読み込まれる動的コンテンツに対しては、抽出する前にページを駆動させます — ライジコンテンツのためにスクロールし、クリックして表示し、その後結果に対してwaitForSelectorを使用します：

await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await page.waitForSelector('.product_pod', { timeout: 10000 });
// ...次に上記のように抽出

どちらを選ぶべきか

• 生のHTMLにコンテンツがありますか？ Cheerioを使用してください — それはより速く、シンプルです。
• JavaScriptによって構築されたコンテンツ、無限スクロール、またはクリックの背後にあるコンテンツですか？ Puppeteerを使用してレンダリングし、その後抽出します。
• どちらも1つのページにありますか？ 一般的です — Puppeteerでレンダリングし、その後静的部分のためにCheerioのセレクタ構文が好ましい場合はpage.content()を渡します。

返される結果

どちらのパスもデータが存在する場合、同じフラットなリストを生成します：

{
  "count": 20,
  "first": "A Light in the Attic"
}
// 実際のキャプチャ：CheerioとPuppeteerの両方が同じページから20のタイトルを返しました。

いくつかの正直な観察：

• レンダリングする必要がない場合はレンダリングしないでください。 HTMLにすでにデータがある場合、Cheerioはレンダリングコストを完全にスキップします。
• ソースがシェルの場合はレンダリングしてください。 空に近い生のHTMLに populatedされたライブDOMがある場合は、Puppeteerを使用する信号です。
• 時計ではなくコンテンツを待ってください。 動的ページの場合、waitForSelectorは固定のsetTimeoutよりも優れています。
• セレクタは共通の知識です。 同じCSSセレクタがCheerioとquerySelectorAllの両方で機能するため、パス間の移動はコストがかかりません。

結論：1つの決定、2つのクリーンなパス

JavaScriptおよびNode.jsを使用したWebスクレイピングは、単一の早期呼び出しに帰着します — データはHTMLにありますか、それともJavaScriptによって構築されていますか？ Cheerioは最初のケースをパーサの速度で処理し、Puppeteerはページをレンダリングして2番目を処理します。Scrapeless Scraping Browserで両方を実行すると、どちらの方法でもフェッチが成功し、居住者の出口とその下に検出防止があります。より深いアンチボットワークフローについては、Scrapling + Scrapelessガイドをご覧ください；Scraping Browser製品ページとドキュメントは完全なSDKの表面をカバーしています。まず生のHTMLをチェックし、利用可能な場合はCheerioに手を伸ばし、必要な場合はPuppeteerを使用し、時計ではなくコンテンツを待ちましょう。

AI搭載データパイプラインの構築に準備は整いましたか？

無料プランを取得し、Nodeスクレイパーを構築している開発者とつながるためにコミュニティに参加してください: Discord · Telegram。

app.scrapeless.comにサインアップして、無料のScraping Browserランタイムを取得し、上記のパターンを静的および動的ページに適応させて、ワークフローに必要なものにしてください。料金をご覧ください。

よくある質問

Q: Cheerioの代わりにPuppeteerを使うべき時はいつですか？
データがページの初期HTMLにすでにあるときです。Cheerioはマークアップを解析するだけなので、より高速でシンプルです — レンダリングは不要です。JavaScriptがコンテンツを構築する場合はPuppeteerを使用します。

Q: ページが静的か動的かどうかはどうやってわかりますか？
生のページソースを表示します（インスペクタではなく）。データがソースにある場合、それは静的です — Cheerioは機能します。ソースがほぼ空のシェルで、コンテンツがライブDOMにのみ表示される場合、それは動的です — Puppeteerを使用します。

Q: 同じページで両方を使用できますか？
はい。Puppeteerでレンダリングし、その後、静的部分のセレクタの使い勝手が良い場合はpage.content()をCheerioに渡してください。

Q: Cheerio vs Playwright vs Puppeteer — どれを選ぶべき？
静的な解析にはCheerioを。動的レンダリングにはPuppeteerまたはPlaywright（どちらも完全なブラウザ）を使用します。すでに使用しているスタックを選択してください；Scrapelessセッションは両方ともCDPを介して機能します。

Q: プロキシは必要ですか？
公開の静的ページに対しては、しばしば必要ありませんが、proxyCountryを設定すると、実際のサイトが通常の訪問者として扱う一貫した住宅IPを得ることができ、スケールするにつれて重要になります。

Q: AIエージェントなしで実行できますか？
はい。これはScrapeless SDKに加え、通常のPuppeteerとCheerioであり、エージェントは不要です。