Puppeteerでウェブスクレイピング：ステップごとのガイド

スクロールするたびにコンテンツが読み込まれるサイト、ログインしないと価格が見えないサイト、あるいは数週間おきにレイアウトが変わるようなサイトからデータを取ろうとしたことがあるなら、その大変さはよくご存じでしょう。静的なスクレイパーだけでは、もう十分ではありません。実際、米国の投資アドバイザーのが現在、オルタナティブデータの収集にウェブスクレイピングを活用しており、米国の小売業者のは競合価格の監視を自動化しています。とはいえ、やっかいなのは、その多くのデータがJavaScriptで読み込まれる動的サイト上にあり、さらにユーザー操作の裏に隠れていることです。そこで役立つのが、ヘッドレスブラウザの自動化、そしてPuppeteerのようなツールです。

私は長年、業務自動化やAIツールの開発に携わってきましたが（もちろん、営業やオペレーション向けにかなりの数のサイトもスクレイピングしてきました）、Puppeteerが従来のスクレイパーでは取りこぼすデータをどれだけ引き出せるかを、何度も目の当たりにしてきました。一方で、コードの手間がビジネスユーザーにとって大きな壁になることも知っています。そこでこのガイドでは、Puppeteerスクレイパーとは何か、ウェブスクレイピングにどう使うのか、そしてもっと簡単な方法、たとえば私たちのAI搭載・ノーコードのウェブスクレイパーであるを使うべき場面まで、順を追って解説します。

Puppeteerスクレイパーとは？ まずは概要をつかもう

まずは基本から見ていきましょう。は、Googleが提供するオープンソースのNode.jsライブラリで、JavaScriptを使ってヘッドレスChromeまたはChromiumブラウザを操作できます。平たく言えば、ページを開き、ボタンをクリックし、フォームに入力し、スクロールし、そして何よりデータを抽出してくれるロボットを持っているようなものです。しかも、画面には何も表示されません。

Puppeteerの何が特別なのか？

• 動的コンテンツを描画できるため、実際のユーザーと同じようにJavaScriptの読み込みを待てます。
• ユーザー操作を再現できます。クリック、タイピング、スクロール、ポップアップ対応まで可能です。
• ECサイトの商品一覧、SNSのフィード、ダッシュボードのように、操作後に初めてデータが表示されるサイトのスクレイピングに最適です。

他のツールと比べると？

• Selenium: ブラウザ自動化の老舗です。多くのブラウザや言語に対応していますが、やや重く、少し昔ながらの印象があります。クロスブラウザテストには向いていますが、Chrome/Node.jsベースのプロジェクトではPuppeteerのほうが機敏です。
• Thunderbit: ここが私のお気に入りポイントです。Thunderbitは、ブラウザ上で動くノーコードのAI搭載ウェブスクレイパーです。スクリプトを書く代わりに、「AIで項目を提案」をクリックするだけで、AIが何を抽出すべきか判断してくれます。コードなしで成果を出したいビジネスユーザーにぴったりです（後ほど詳しく紹介します）。

要するに、Puppeteer = 最大限の制御（コードを書くなら）。Thunderbit = 最大限の手軽さ（コードを書きたくないなら）。

Puppeteerによるウェブスクレイピングがビジネスユーザーに重要な理由

現実を見ましょう。ウェブスクレイピングは、もうハッカーやデータサイエンティストだけのものではありません。営業、オペレーション、マーケティング、さらには不動産チームまで、ウェブデータを活用して成果を上げています。そして、重要な業務データの多くが動的サイトの背後にある今、Puppeteerはそれを引き出す鍵になることがよくあります。

実際のユースケースをいくつか見てみましょう。

さらに言えば、が、データ収集のような反復作業に週の4分の1を費やしています。ウェブスクレイピングでこれを自動化するのは、単なる便利機能ではなく、競争優位性そのものです。

はじめ方：Puppeteerスクレイパーのセットアップ

さっそく始めましょう。JavaScriptに少し慣れている前提で、10分以内にPuppeteerを動かす手順を紹介します。

1. Node.jsをインストールする
PuppeteerはNode.js上で動作します。から最新のLTS版をダウンロードしましょう。

2. 新しいプロジェクトフォルダを作成する
ターミナルを開いて、次を実行します。

1mkdir puppeteer-scraper-demo
2cd puppeteer-scraper-demo
3npm init -y

3. Puppeteerをインストールする

1npm install puppeteer

これで互換性のあるChromium（約100MB）も一緒にダウンロードされます。

4. 最初のスクリプトを作成する
scrape.js というファイルを作ります。

1const puppeteer = require('puppeteer');
2(async () => {
3  const browser = await puppeteer.launch();
4  const page = await browser.newPage();
5  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
6  const title = await page.title();
7  console.log('Page title:', title);
8  await browser.close();
9})();

次のように実行します。

1node scrape.js

「Page title: Example Domain」と表示されたら成功です。これでChromeの自動化ができました。

初めてのPuppeteerウェブスクレイピングスクリプトを作る

実践してみましょう。たとえば、（スクレイピング練習用のデモサイト）から引用を取得したいとします。

ステップ1：ページに移動する

1await page.goto('http://quotes.toscrape.com', { waitUntil: 'networkidle0' });

ステップ2：データを抽出する

1const quotes = await page.evaluate(() => {
2  return Array.from(document.querySelectorAll('.quote')).map(node => ({
3    text: node.querySelector('.text')?.innerText.trim(),
4    author: node.querySelector('.author')?.innerText.trim(),
5    tags: Array.from(node.querySelectorAll('.tag')).map(tag => tag.innerText.trim())
6  }));
7});
8console.log(quotes);

ステップ3：ページネーションに対応する

1let hasNext = true;
2let allQuotes = [];
3while (hasNext) {
4  // 上記と同様に引用を抽出
5  const quotes = await page.evaluate(/* ... */);
6  allQuotes.push(...quotes);
7  const nextButton = await page.$('li.next > a');
8  if (nextButton) {
9    await Promise.all([
10      page.click('li.next > a'),
11      page.waitForNavigation({ waitUntil: 'networkidle0' })
12    ]);
13  } else {
14    hasNext = false;
15  }
16}

ステップ4：JSONとして保存する

1const fs = require('fs');
2fs.writeFileSync('quotes.json', JSON.stringify(allQuotes, null, 2));

これで、移動・抽出・ページ送り・保存まで行う基本的なPuppeteerスクレイパーの完成です。

進んだPuppeteerスクレイパー技術：動的コンテンツへの対処

実際のサイトは、静的な一覧のように単純ではありません。難しい部分への対処法を見ていきましょう。

1. 動的要素を待つ

1await page.waitForSelector('.product-list-item');

これで、取得したいコンテンツが読み込まれてから処理を進められます。

2. ユーザー操作を再現する

• ボタンをクリックする: await page.click('#load-more');
• 入力欄に文字を入れる: await page.type('#search', 'laptop');
• 無限スクロールに対応する:

  1let previousHeight = await page.evaluate('document.body.scrollHeight');
  2while (true) {
  3  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  4  await page.waitForTimeout(1500);
  5  const newHeight = await page.evaluate('document.body.scrollHeight');
  6  if (newHeight === previousHeight) break;
  7  previousHeight = newHeight;
  8}

3. ログインに対応する

1await page.goto('https://exampleshop.com/login');
2await page.type('#login-username', 'myusername');
3await page.type('#login-password', 'mypassword');
4await page.click('#login-button');
5await page.waitForNavigation({ waitUntil: 'networkidle0' });

4. AJAXで読み込まれるデータへの対処 データがDOM上になく、API呼び出しで取得されることもあります。そんなときは、次のようにネットワーク応答を横取りできます。

1page.on('response', async response => {
2  if (response.url().includes('/api/products')) {
3    const data = await response.json();
4    // データを処理する
5  }
6});

実例：ECサイトから商品データをスクレイピングする

ここまでをまとめてみましょう。ログイン後のデモECサイトから、商品名、価格、画像を取得したいとします。

1const puppeteer = require('puppeteer');
2const fs = require('fs');
3(async () => {
4  const browser = await puppeteer.launch({ headless: true });
5  const page = await browser.newPage();
6  // ステップ1：ログインする
7  await page.goto('https://exampleshop.com/login');
8  await page.type('#login-username', 'myusername');
9  await page.type('#login-password', 'mypassword');
10  await page.click('#login-button');
11  await page.waitForNavigation({ waitUntil: 'networkidle0' });
12  // ステップ2：カテゴリページへ移動する
13  await page.goto('https://exampleshop.com/category/laptops', { waitUntil: 'networkidle0' });
14  // ステップ3：商品を抽出する
15  const products = await page.evaluate(() => {
16    return Array.from(document.querySelectorAll('.product-item')).map(item => ({
17      name: item.querySelector('.product-title')?.innerText.trim() || '',
18      price: item.querySelector('.product-price')?.innerText.trim() || '',
19      image: item.querySelector('img.product-image')?.src || ''
20    }));
21  });
22  // ステップ4：JSONとして保存する
23  fs.writeFileSync('products.json', JSON.stringify(products, null, 2));
24  await browser.close();
25})();

このスクリプトは、ログインし、移動し、スクレイピングし、保存まで自動で行います。さらに高度な要件があるなら、ページネーション用のループを追加したり、各商品をクリックして詳細を取得したりすることもできます。

Thunderbit：AIでPuppeteerスクレイパーをもっと簡単に

ここまで読んで、「たしかに便利そうだけど、新しいデータセットが必要になるたびにコードを書くのは嫌だな」と思ったなら、それはあなただけではありません。だからこそ、私たちはを作りました。

Thunderbitの何が違うのか？

• コード不要: をインストールし、スクレイピングしたいページを開いて、「AIで項目を提案」をクリックするだけです。
• AIによる項目検出: Thunderbitがページを読み取り、「商品名」「価格」「画像」など、抽出すべき最適な列を提案します。
• 動的コンテンツに対応: 無限スクロール、ポップアップ、サブページもおまかせです。ThunderbitのAIがページ送りや各商品の詳細ページ巡回までこなして、データを充実させます。
• 即時エクスポート: データをExcel、Google Sheets、Notion、Airtableへワンクリックで直接送れます。エクスポート追加料金はかかりません。
• 人気サイト向けテンプレート: Amazon、Zillow、LinkedInをスクレイピングしたいですか？ Thunderbitには即使えるテンプレートがあります。設定は不要です。
• クラウドまたはブラウザでスクレイピング: 大規模な作業では、Thunderbitはクラウド上で一度に最大50ページまでスクレイピングできます。

私は、ユーザーが「このデータが取れたらいいのに」から「はい、こちらがスプレッドシートです」へ、5分以内で変わるのを何度も見てきました。しかも一番の魅力は、サイトの変更でスクリプトが壊れる心配がほとんどなくなることです。ThunderbitのAIがその場で適応してくれます。

PuppeteerとThunderbit：最適なウェブスクレイピングツールの選び方

では、どちらを使うべきでしょうか？ チーム向けに整理すると、私はこう考えます。

結論：

• Puppeteerを使うべきなのは、完全な制御が必要で、コーディングのリソースがあり、スクレイピングを大きなアプリに組み込みたい場合です。
• Thunderbitを使うべきなのは、すぐに結果を出したい、コードを書きたくない、あるいは非技術メンバーにも使ってもらいたい場合です。

正直に言うと、私は両方を使い分けるチームを何度も見てきました。Thunderbitは素早い成果や試作に、Puppeteerは深い統合や例外対応に向いています。

ステップごとのチェックリスト：Puppeteerウェブスクレイピングを成功させる

私がいつも使っている、Puppeteerスクレイピングをスムーズに進めるためのチェックリストはこちらです。

1. 目的を定義する: どのデータが必要ですか？ それはどこにありますか？
2. サイトを分析する: 動的ですか？ ログインが必要ですか？ ボット対策はありますか？
3. 環境を整える: Node.js、Puppeteer、必要な補助ライブラリを用意します。
4. プロトタイプを書く: まずは1ページから始め、セレクタを正しく取ります。
5. 動的コンテンツに対応する: waitForSelectorを使い、必要に応じてクリックやスクロールを再現します。
6. ページネーションやループを追加する: 1ページだけでなく、すべてのページを取得します。
7. ブロック回避策を実装する: 遅延をランダム化し、実際のUser-Agentを設定し、必要ならプロキシを使います。
8. データを出力して検証する: JSON/CSVに保存し、漏れがないか確認します。
9. 最適化とエラー処理を行う: try/catchを追加し、進捗をログに残し、欠損データも丁寧に処理します。
10. 監視と保守を続ける: サイトは変わるので、スクリプトの更新に備えましょう。

トラブルシューティングのヒント:

• セレクタがnullを返す場合は、HTMLをもう一度確認し、待機処理を入れてください。
• ブロックされる場合は、速度を落とし、IPをローテーションし、必要ならステルス系プラグインを使いましょう。
• スクリプトが落ちる場合は、メモリリークや未処理例外を確認してください。

まとめと重要ポイント

ウェブスクレイピングは、データドリブンなチームにとって必須スキルになりました。Puppeteerなら、最も動的でJavaScript主体のサイトからでもデータを抽出できますが、そのぶんある程度のコーディング力と継続的な保守が必要です。コードを省いてすぐにデータを取りたいビジネスユーザーには、Thunderbitが高速で柔軟、しかも驚くほど堅牢なAI搭載ノーコード代替手段を提供します。

おすすめは次のとおりです。

• 技術的な知識があり、深いカスタマイズが必要なら、Puppeteerから始める。
• スピード、シンプルさ、保守負担の少なさを重視するなら、を試してみる（まずはから始めるのがおすすめです）。
• 多くのチームにとっては、両方を組み合わせることで、ウェブデータのニーズの99%はカバーできます。

このようなガイドをもっと見たい方は、チュートリアル、比較記事、AI搭載ウェブスクレイピングの最新情報がそろうをご覧ください。

FAQ

1. Puppeteerスクレイパーとは何ですか？ なぜウェブスクレイピングに使うのですか？
Puppeteerは、JavaScriptでヘッドレスChromeブラウザを操作できるNode.jsライブラリです。動的コンテンツを読み込めて、ユーザー操作を再現でき、従来のスクレイパーでは扱えないサイトからデータを抽出できるため、ウェブスクレイピングに使われます。

2. PuppeteerはSeleniumやThunderbitとどう違いますか？
Seleniumは複数のブラウザや言語で使えますが、やや重めです。PuppeteerはChrome/Node.js向けに最適化されており、多くのスクレイピング作業でより高速です。一方、ThunderbitはノーコードのAI搭載ツールで、非技術ユーザーでも数クリックでデータを取得できます。

3. Puppeteerによるウェブスクレイピングの主なビジネス上の利点は何ですか？
データ収集の自動化により、時間を節約し、ミスを減らし、営業、マーケティング、オペレーションなどでリアルタイムの洞察を得られます。ユースケースは、リード獲得から価格監視、市場調査まで幅広いです。

4. Puppeteerスクレイピングで最も大きな課題は何ですか？
主な課題は、動的コンテンツへの対応、ボット対策によるブロック回避、そしてサイト変更時のスクリプト保守です。待機処理、操作の再現、エラー処理を管理するためのコードが必要になります。

5. PuppeteerではなくThunderbitを使うべきなのはどんなときですか？
コードを書かずに済ませたい、すぐ結果が欲しい、非技術メンバーにも使ってもらいたい場合はThunderbitが向いています。標準的なスクレイピング作業、短納期案件、あるいはExcelやGoogle Sheetsへ手早く出力したいときに最適です。

もっと賢い方法でスクレイピングしてみませんか？するか、のほかのガイドでさらに深く学んでみてください。良いスクレイピングを！

さらに詳しく