JavaScriptでコンテンツを読み込むサイトや、ログイン後に価格を表示するサイト、レイアウト変更が多いサイトでは、静的なスクレイパーだけで必要なデータを安定して取得できない場合があります。公開されている調査では、米国の投資アドバイザーの67％以上が代替データの取得にウェブスクレイピングを活用し、米国小売業者の81％が競合価格の監視を自動化しているとされています。こうした業務で動的サイトからデータを取得する手段の一つが、ヘッドレスブラウザの自動化とPuppeteerです。
自動化やAIツールの開発に長年携わり、営業やオペレーションチーム向けに多くのサイトをスクレイピングしてきた経験から、Puppeteerが従来のスクレイパーでは取得しにくいデータに対応できる場面を何度も見てきました。一方で、実装と保守に必要なコーディングが、ビジネスユーザーの導入負担になることもあります。本記事では、Puppeteerスクレイパーの仕組み、実装手順、動的コンテンツへの対応方法に加え、コード不要のAI搭載ウェブスクレイパーであるThunderbitを選ぶ場面まで順に解説します。
実際の運用では、取得対象と利用目的を決めたうえで、対象サイトの利用規約、著作権、個人情報の取り扱い、アクセス頻度を確認する必要があります。技術的に取得できるかだけでなく、取得したデータを業務で適切に利用できるかも判断基準に含めてください。
Puppeteerスクレイパーの仕組みと向いている用途
PuppeteerとSeleniumの違いとは？特徴・PlaywrightやAIスクレイピングの最新代替ツールも徹底比較は、Googleが提供するオープンソースのNode.jsライブラリで、JavaScriptを使ってヘッドレスChromeまたはChromiumブラウザを操作できます。ウェブページの表示、ボタンのクリック、フォーム入力、スクロール、データ抽出などを、画面表示を伴わない状態でも自動化できます。
Puppeteerの主な特徴
- 動的コンテンツを描画できるため、JavaScriptで読み込まれる要素の表示を待ってから処理できます。
- ユーザー操作を再現できるので、クリック、入力、スクロール、ポップアップ対応をスクリプトに組み込めます。
- ECサイトの商品一覧、SNSのフィード、ダッシュボードなど、操作後にデータが表示されるサイトの取得に向いています。
他のツールとの違い
- Selenium：複数のブラウザや言語を対象とする自動化で広く使われています。クロスブラウザテストに向く一方、ChromeとNode.jsを中心としたプロジェクトでは、Puppeteerのほうが構成を簡潔にしやすい場合があります。
- Thunderbit：ブラウザ上で動くコード不要のAIウェブスクレイパーです。対応するページでは、「AIでフィールドを提案」を使って抽出列の候補を作成し、必要に応じて人が内容を調整できます。スクリプト開発を行わず、表形式のデータを短時間で検証したいビジネスユーザーに向いています（詳しくはこのあと説明します）。
細かな処理や外部システムとの統合をコードで制御したい場合はPuppeteer、標準的なデータ抽出をノーコードで試したい場合はThunderbitが候補になります。
Puppeteerによるウェブスクレイピングが業務で使われる理由
データスクレイピングとは？2026年に実践する方法 Get Started Free
ウェブスクレイピングは、開発者やデータサイエンティストだけでなく、営業、オペレーション、マーケティング、不動産などの業務でも利用されています。必要な情報がJavaScriptで表示される場合や、操作後に初めて取得できる場合には、Puppeteerのブラウザ自動化が選択肢になります。
主な用途と、業務上の効果として紹介されている例を整理します。数値は対象企業、期間、運用条件によって結果が異なるため、自社で導入効果を判断する際は、作業時間、取得精度、保守工数などの基準をあらかじめ決めておくことが重要です。
| 用途 | 恩恵を受ける人 | 効果 / ROI |
|---|---|---|
| リード獲得 | 営業、Biz Dev | 見込み顧客リスト作成を自動化し、1人あたり週8時間以上を節約 (case study) |
| 価格監視 | EC、商品オペレーション | 競合をリアルタイムで追跡。ある企業は年間380万ドルを節約 (source) |
| 市場調査 | マーケティング、戦略、財務 | 投資アドバイザーの67％がウェブスクレイピングデータを活用。ケースによっては最大890％のROI (source) |
| 不動産データ集約 | エージェント、アナリスト | 50件以上の物件ページを、数時間ではなく数分でスクレイピング (source) |
| コンプライアンス追跡 | オペレーション、法務 | 監視を自動化し、ある保険会社は5,000万ドルの罰則を回避 (source) |
また、労働者の40％超が、データ収集のような反復作業に週の4分の1を費やしているという調査もあります。ウェブスクレイピングは、こうした作業時間を削減し、担当者が分析や判断に時間を振り向けるための手段として検討できます。
Puppeteerスクレイパーのセットアップ手順
ここでは、JavaScriptの基本操作に慣れている読者を対象に、Puppeteerを初めて実行するまでの手順を説明します。環境が整っていれば、作業時間は10分以内が目安です。
1. Node.jsをインストールする
PuppeteerはNode.js上で動きます。Puppeteerとの互換性を確かめたうえで、最新のLTS版をnodejs.orgからダウンロードしてください。
2. 新しいプロジェクトフォルダを作成する
ターミナルを開いて、次を実行します。
mkdir puppeteer-scraper-demo
cd puppeteer-scraper-demo
npm init -y
3. Puppeteerをインストールする
npm install puppeteer
標準構成では、テスト用のChrome（Chrome for Testing）もダウンロードされます。容量はOSやバージョンによって異なり、目安として170〜280MB程度です。
4. 最初のスクリプトを作成する
scrape.js というファイルを作成します。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
const title = await page.title();
console.log('ページタイトル:', title);
await browser.close();
})();
次のコマンドで実行します。
node scrape.js
「ページタイトル: Example Domain」と表示されれば、ブラウザの起動、ページ表示、タイトル取得までの初期動作は完了です。
最初のPuppeteerウェブスクレイピングスクリプトを作る
では、実践に入ってみましょう。たとえば、quotes.toscrape.com（スクレイピング用のデモサイト）から名言を抽出したいとします。
ステップ1：ページに移動する
await page.goto('http://quotes.toscrape.com', { waitUntil: 'networkidle0' });
ステップ2：データを抽出する
const quotes = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.quote')).map(node => ({
text: node.querySelector('.text')?.innerText.trim(),
author: node.querySelector('.author')?.innerText.trim(),
tags: Array.from(node.querySelectorAll('.tag')).map(tag => tag.innerText.trim())
}));
});
console.log(quotes);
ステップ3：ページネーションを処理する
let hasNext = true;
let allQuotes = [];
while (hasNext) {
// 上と同じように名言を抽出
const quotes = await page.evaluate(/* ... */);
allQuotes.push(...quotes);
const nextButton = await page.$('li.next > a');
if (nextButton) {
await Promise.all([
page.click('li.next > a'),
page.waitForNavigation({ waitUntil: 'networkidle0' })
]);
} else {
hasNext = false;
}
}
ステップ4：JSONに保存する
const fs = require('fs');
fs.writeFileSync('quotes.json', JSON.stringify(allQuotes, null, 2));
これで、移動して、抽出して、ページ送りして、保存まで行う基本的なPuppeteerスクレイパーが完成です。
高度なPuppeteerスクレイパーのテクニック：動的コンテンツへの対応
実際のサイトの多くは、単純な静的リストほど簡単ではありません。代表的な対応方法を整理します。
1. 動的要素が読み込まれるのを待つ
await page.waitForSelector('.product-list-item');
これで、取得したいコンテンツが読み込まれてから処理を始められます。
2. ユーザー操作を再現する
- ボタンをクリックする:
await page.click('#load-more'); - 入力欄に文字を入れる:
await page.type('#search', 'laptop'); - 無限スクロールを処理する:
// 注意: page.waitForTimeout は Puppeteer v22 で削除されました。代わりに通常のPromiseを使ってください。 const sleep = (ms) => new Promise(r => setTimeout(r, ms)); let previousHeight = await page.evaluate('document.body.scrollHeight'); while (true) { await page.evaluate('window.scrollTo(0, document.body.scrollHeight)'); await sleep(1500); const newHeight = await page.evaluate('document.body.scrollHeight'); if (newHeight === previousHeight) break; previousHeight = newHeight; }
**3. ログインに対応する**
```javascript
await page.goto('https://exampleshop.com/login');
await page.type('#login-username', 'myusername');
await page.type('#login-password', 'mypassword');
await page.click('#login-button');
await page.waitForNavigation({ waitUntil: 'networkidle0' });
4. AJAXで読み込まれるデータへの対処 データがDOM内にあるのではなく、API呼び出しで取得されることもあります。その場合は、次のようにネットワーク応答をフックできます。
page.on('response', async response => {
if (response.url().includes('/api/products')) {
const data = await response.json();
// データを処理する
}
});
実例：ECサイトから商品データをスクレイピングする
ここまでの手順を一つの例にまとめます。ログイン後の（デモ）ECサイトから、商品名、価格、画像を取得する想定です。
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
// ステップ1：ログインする
await page.goto('https://exampleshop.com/login');
await page.type('#login-username', 'myusername');
await page.type('#login-password', 'mypassword');
await page.click('#login-button');
await page.waitForNavigation({ waitUntil: 'networkidle0' });
// ステップ2：カテゴリページへ移動する
await page.goto('https://exampleshop.com/category/laptops', { waitUntil: 'networkidle0' });
// ステップ3：商品を抽出する
const products = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.product-item')).map(item => ({
name: item.querySelector('.product-title')?.innerText.trim() || '',
price: item.querySelector('.product-price')?.innerText.trim() || '',
image: item.querySelector('img.product-image')?.src || ''
}));
});
// ステップ4：JSONに保存する
fs.writeFileSync('products.json', JSON.stringify(products, null, 2));
await browser.close();
})();
このスクリプトは、ログインして、移動して、スクレイピングして、保存までをすべて自動で行います。さらに高度な用途では、ページネーションのループを追加したり、各商品をクリックして詳細を取得したりすることもできます。
Thunderbitでノーコードのデータ抽出を試す
Thunderbit Chrome拡張機能を試す AIを使って、どんなウェブサイトでも2クリックでスクレイピングできます。 Get Started Free
新しいデータセットが必要になるたびにスクリプトを作成・保守することが負担になる場合があります。まさにそのために私たちはThunderbitを作りました。Thunderbitは、標準的なWebページから必要な項目を表形式で取り出し、短時間で検証したい業務に向いています。
Thunderbitの主な機能
- コード不要： Thunderbit Chrome拡張機能をインストールし、スクレイピングしたいページを開いて、「AIでフィールドを提案」をクリックします。提案された列は、用途に合わせて編集してから抽出できます。
- AIによるフィールド検出：ページの構造や表示状態に応じて、「商品名」「価格」「画像」などの抽出列候補を提案します。必要な列や取得結果は人が見直せます。
- 動的コンテンツにも対応：対象サイトの構成、認証、設定によって結果は異なりますが、無限スクロール、ポップアップ、ページネーション、サブページからの情報補完に対応する場合があります。
- 即時エクスポート：対応するプランと設定では、データをExcel、Googleスプレッドシート、Notion、Airtableへワンクリックで送信できます。追加料金がかからない範囲は、利用中のプランと最新の料金条件によって異なります。
- 人気サイト向けテンプレート：Amazon、Zillow、LinkedInなど、対応対象として提供されているサイトではテンプレートを利用できます。利用可否や設定内容は、サイトと提供時期によって異なります。
- クラウドまたはブラウザでスクレイピング：大量の作業では、対応プランと設定に応じて、クラウド上で一度に最大50ページを処理できます。
独自の認証処理、複雑な分岐、大規模システムへの組み込みが必要な場合は、Puppeteerのようなコードベースの方法が適しています。Thunderbitは、非技術系の担当者が営業リスト、商品情報、価格調査などをまず表にして試す場面で候補になります。
私は、条件が合うケースで、ユーザーが「このデータが取れたらいいのに」と考えてからスプレッドシートを得るまで、5分以内で進んだ例を何度も見てきました。サイトのレイアウト変更に対してAIが調整を支援しますが、変更後は抽出列と結果を再検証することが重要です。
PuppeteerとThunderbitの選び方
PuppeteerとThunderbitは、必要な制御範囲、担当者の技術スキル、導入までの時間によって向いている場面が異なります。主な判断項目を整理します。
| 比較項目 | Puppeteer（コード） | Thunderbit（ノーコード、AI） |
|---|---|---|
| 使いやすさ | JavaScriptとDOMの知識が必要 | 対応ページではクリック操作を中心に設定でき、AIがフィールド候補を提案 |
| セットアップ速度 | 要件が複雑な作業では数時間〜数日かかる場合がある | 条件が合う標準的な抽出なら、インストール後に数分で試せる場合がある |
| 制御力 / 柔軟性 | 任意のロジックを書け、他のコードとも細かく統合可能 | 標準的な用途には対応しやすいが、非常に独自性の高いワークフローにはやや不向き |
| 動的コンテンツ対応 | 待機、クリック、スクロールを要件に合わせて手動で実装 | 対象サイトと設定に応じて、AIが動的コンテンツ、ページネーション、サブページ処理を支援 |
| 保守 | スクリプトは自分で管理し、サイト変更時は更新が必要 | AIがレイアウト変更への対応を支援するが、変更後の抽出結果は再検証が必要 |
| データ出力 | 必要なエクスポート処理を自分で実装 | 対応するプラン・仕様では、Excel、Sheets、Notion、Airtable、CSV、JSONへ出力可能 |
| 最適な用途 | 開発者、高度にカスタマイズしたスクレイピング、大規模処理 | ビジネスユーザー、短納期の標準的な案件、非技術系チーム |
| コスト | 無料（ただし時間とインフラ費用は別） | 無料プランとクレジット制の有料プランがあり、利用条件は現行の料金体系による (Thunderbitの料金) |
選択の目安：
- Puppeteerを使うべき場合：完全な制御が必要、コーディングリソースがある、あるいはスクレイピングを大きなアプリに組み込みたい。
- Thunderbitを使うべき場合：標準的な抽出を短時間で試したい、コードを書かずに運用したい、非技術系メンバーも同じ手順を使う必要がある。
両方を使い分ける方法もあります。要件を固める前の試作や短納期のデータ取得にはThunderbit、独自処理や深いシステム統合にはPuppeteerを使うと、担当者と保守方法を分けて設計できます。
Puppeteerウェブスクレイピングの実装・運用チェックリスト
Puppeteerによるデータ取得を設計、実装、検証、保守する順序をチェックリストにまとめます。
- 目的を定義する：必要なデータ、取得元、利用者、更新頻度を決める。
- サイトを分析する：動的か、ログインが必要か、アクセス制限があるかを調べる。
- 環境を整える：Node.js、Puppeteer、必要なヘルパーライブラリを用意する。
- 試作版を作る：まずは1ページから始め、セレクタと期待する出力を照合する。
- 動的コンテンツを処理する：
waitForSelectorを使い、必要に応じてクリックやスクロールを再現する。 - ページネーションやループを追加する：必要な取得範囲を決め、複数ページを処理する。
- アクセス制限に対応する：待機時間、User-Agent、プロキシなどの技術設定を検討する前に、対象サイトの利用規約、robots.txt、認証条件、許容されるアクセス頻度を確認する。制限を回避する目的でIPローテーションやステルス系プラグインを使わない。
- データを出力して検証する：JSON/CSVに保存し、件数、欠損、重複、形式を検証する。
- 最適化とエラー処理を行う：try/catchを追加し、進捗を記録し、欠損データを適切に扱う。
- 監視と保守を続ける：サイト変更を検知できるようにし、セレクタと出力結果を更新する。
トラブルシューティングのヒント：
- セレクタがnullを返す場合は、HTML、表示タイミング、待機条件を見直してください。
- ブロックされる場合は処理を停止し、アクセス速度と対象サイトの条件を見直します。IPローテーションやステルス系プラグインは、許可された検証環境など対象サイトが認める範囲に限って検討します。
- スクリプトが落ちる場合は、メモリリーク、未処理例外、失敗時のログを調べてください。
まとめ：要件に応じてPuppeteerとThunderbitを使い分ける
ウェブスクレイピングは、データ収集を自動化したいチームにとって有用な手段です。Puppeteerは、JavaScriptが多用された動的サイトからデータを取得し、処理を細かく制御したい場合に向いていますが、実装と継続的な保守が必要です。Thunderbitは、コードを作成せず、標準的なWebページから表形式のデータを短時間で試したいビジネスユーザーに向いています。対象サイトや設定によっては、抽出結果の調整や別の手段が必要になります。
選択の目安：
- 技術寄りで、細かいカスタマイズが必要なら、Puppeteerから始める。
- 速度、操作の簡潔さ、保守負担を重視するなら、Thunderbitを候補にする。無料のChrome拡張機能では、まず1ページで抽出列、精度、出力形式を試せます。
- 両方を組み合わせてウェブデータのニーズの99％をカバーできるかは、対象サイト、件数、認証方式、必要な保守水準によって異なる。試作と本番運用の役割を分けて判断する。
関連する実装方法や比較情報は、Thunderbit Blog のチュートリアル、比較記事、AI搭載ウェブスクレイピングの解説でも紹介しています。
Thunderbit AIウェブスクレイパーを試す Get Started Free
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スプレッドシートへ出力したい用途に向いていますが、対応範囲と出力先は対象サイト、製品仕様、プランによって異なります。独自処理や大規模な統合が必要な場合はPuppeteerも比較してください。
まずは実際の対象ページで取得項目、精度、出力形式を検証する場合は、Thunderbitをダウンロード できます。実装方法や使い分けは、Thunderbit Blog のガイドでも紹介しています。
さらに詳しく
