Puppeteerの使い方完全ガイド｜インストールからスクレイピング・Python代替まで徹底解説

Puppeteerは、Node.jsからChromeを自動操作できるオープンソースのブラウザ自動化ライブラリです。Webページを実際のブラウザで表示できるため、JavaScriptによって内容が生成される動的サイトのスクレイピングにも利用できます。

Puppeteerの基本的な使い方は、Node.js環境にPuppeteerをインストールし、ブラウザを起動して対象ページへアクセスした後、必要なHTML要素からデータを取得するという流れです。本記事では、Puppeteerとは何か、インストール方法、データスクレイピングの使い方、ページネーションや無限スクロールへの対応、よくあるエラーまで初心者向けに解説します。

Puppeteerとは？

Puppeteerとは、ChromeやChromium系ブラウザをNode.jsから操作するためのオープンソースライブラリです。ブラウザを画面に表示する通常モードだけでなく、画面を表示せずバックグラウンドで処理するヘッドレスモードにも対応しています。

一般的なHTTPリクエスト型のスクレイピングでは、最初に取得したHTMLにJavaScript実行後の情報が含まれていない場合があります。Puppeteerは実際のブラウザ上でJavaScriptを実行し、レンダリング後のDOMを操作できるため、動的コンテンツを取得しやすい点が特徴です。

Puppeteerでは、主に次のような処理を自動化できます。

• Webページへのアクセス
• テキスト、価格、画像URL、リンクなどの取得
• ボタンのクリックやフォームへの入力
• JavaScriptで生成される動的コンテンツの取得
• ページネーションや無限スクロールの自動化
• ログイン後のページ操作
• スクリーンショットやPDFの作成
• E2EテストやWebサイトの動作確認

Puppeteerがスクレイピングに向いているケース

Puppeteerは、単にHTMLを取得するだけではなく、ブラウザ上の操作が必要なWebサイトに適しています。一方、すべてのデータスクレイピングでPuppeteerを使う必要があるわけではありません。

Puppeteerは実際のブラウザを動かすため、単純なHTTPリクエストより多くのメモリと処理時間を消費します。動的ページやブラウザ操作が必要なページに絞って利用すると効率的です。

Puppeteerのインストール方法

Puppeteerを使用するには、最初にNode.jsとnpmを準備します。Node.jsの対応バージョンはPuppeteerの更新によって変わる可能性があるため、原則としてサポート中のLTS版を使用し、導入前に公式ドキュメントのシステム要件を確認してください。

基本的なインストールの流れは次のとおりです。

Node.jsが使えるか確認する

Puppeteerを使用するにはNode.jsが必要です。ターミナルまたはコマンドプロンプトで次のコマンドを実行します。

node -v
npm -v

両方のバージョン番号が表示されれば準備完了です。表示されない場合はNode.jsのLTS版をインストールしてください。

作業用プロジェクトを作成する

mkdir puppeteer-scraping
cd puppeteer-scraping
npm init -y

Puppeteerをインストールする

npm install puppeteer

通常はPuppeteerとともに、互換性のあるChrome for Testingが自動的にダウンロードされます。Puppeteer公式インストールガイド

ブラウザの自動ダウンロードがパッケージマネージャーによって阻止された場合は、次のコマンドを実行します。

npx puppeteer browsers install

ES Modulesを有効にするる

この記事ではimport構文を使用します。package.jsonに次の項目を追加してください。

{
  "type": "module"
}

すでに他の設定がある場合は、それらを削除せずに”type”: “module”を追加します。

PuppeteerとPuppeteer-coreの違い

Puppeteerには、主に「puppeteer」と「puppeteer-core」の2種類のパッケージがあります。名前は似ていますが、ブラウザの管理方法が異なります。

特別な理由がなければ、最初は通常のpuppeteerを選ぶ方が導入しやすいでしょう。既存のChromeを利用したい場合や、ブラウザのバージョンと保存場所を自分で管理したい場合はpuppeteer-coreが候補になります。

Puppeteerの基本的な使い方

Puppeteerの基本的な処理は、「ブラウザを起動する」「新しいタブを作成する」「対象ページへ移動する」「必要なデータを取得する」「ブラウザを終了する」という流れです。最初に、ページへアクセスしてタイトルと見出しを取得してみましょう。index.jsを作成し、次のコードを記述します。

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: true
});

try {
  const page = await browser.newPage();

  await page.goto('https://example.com', {
    waitUntil: 'domcontentloaded',
    timeout: 30000
  });

  const title = await page.title();

  const heading = await page.$eval(
    'h1',
    element => element.textContent.trim()
  );

  console.log({ title, heading });
} finally {
  await browser.close();
}

実行コマンドは次のとおりです。

node index.js

Puppeteerでよく使用する操作は次のとおりです。

処理中にエラーが発生してもブラウザを確実に終了できるよう、例外処理を含めて設計することが重要です。ブラウザを閉じないまま処理が繰り返されると、メモリやプロセスが残り、サーバーが不安定になる可能性があります。

Puppeteerでデータスクレイピングする方法

商品一覧のように同じ構造が繰り返されているページでは、$$eval()を使って複数要素を一括取得できます。

以下は、商品名、価格、詳細ページURLを取得するサンプルです。

import puppeteer from 'puppeteer';
import { writeFile } from 'node:fs/promises';

const browser = await puppeteer.launch({
  headless: true
});

try {
  const page = await browser.newPage();

  await page.goto('https://example.com/products', {
    waitUntil: 'domcontentloaded',
    timeout: 30000
  });

  await page.waitForSelector('.product-card', {
    timeout: 10000
  });

  const products = await page.$$eval(
    '.product-card',
    cards => cards.map(card => ({
      name:
        card.querySelector('.product-name')
          ?.textContent?.trim() ?? '',
      price:
        card.querySelector('.product-price')
          ?.textContent?.trim() ?? '',
      url:
        card.querySelector('a')?.href ?? ''
    }))
  );

  await writeFile(
    'products.json',
    JSON.stringify(products, null, 2),
    'utf8'
  );

  console.log(`${products.length}件を保存しました。`);
} finally {
  await browser.close();
}

https://example.com/productsや.product-cardなどはサンプルです。実際に使用する際は、対象サイトのURLとHTML構造に合わせて変更してください。

waitForSelector()が重要な理由

動的ページでは、ページへのアクセスが完了しても、必要な商品情報がまだ表示されていないことがあります。

await page.waitForSelector('.product-card');

この処理を入れることで、対象要素がDOMに現れるまで待ってからデータを取得できます。 クリックやフォーム入力にはLocatorも利用できます。Puppeteer公式では、要素が表示され、操作可能になるまで自動的に待機するLocatorが推奨されています。Puppeteer公式「Page interactions」

await page.locator('button.load-more').click();

取得したデータをCSVに保存する

スクレイピングしたデータをExcelなどで分析する場合は、CSV形式で保存すると便利です。

function escapeCsv(value) {
  const text = String(value ?? '');

  if (/[",\n]/.test(text)) {
    return `"${text.replaceAll('"', '""')}"`;
  }

  return text;
}

const columns = ['name', 'price', 'url'];

const rows = products.map(product =>
  columns
    .map(column => escapeCsv(product[column]))
    .join(',')
);

const csv = [
  columns.join(','),
  ...rows
].join('\n');

await writeFile(
  'products.csv',
  `\uFEFF${csv}`,
  'utf8'
);

\uFEFFはBOMと呼ばれる文字です。日本語を含むCSVをExcelで開いた際の文字化けを防ぎやすくなります。

複数ページをスクレイピングする方法

商品一覧や求人一覧にページネーションがある場合は、現在のページからデータを取得した後、「次へ」ボタンをクリックし、次のページが表示されるまで待機する処理を繰り返します。

const results = [];

while (true) {
  await page.waitForSelector('.product-card');

  const items = await page.$$eval(
    '.product-card',
    cards => cards.map(card => ({
      name:
        card.querySelector('.product-name')
          ?.textContent?.trim() ?? '',
      price:
        card.querySelector('.product-price')
          ?.textContent?.trim() ?? ''
    }))
  );

  results.push(...items);

  const nextButton = await page.$('a.next');

  if (!nextButton) {
    break;
  }

  await Promise.all([
    page.waitForNavigation({
      waitUntil: 'domcontentloaded'
    }),
    nextButton.click()
  ]);
}

クリック後にページ遷移が発生せず、Ajaxで一覧だけが更新されるサイトでは、waitForNavigation()は適しません。その場合は、次の要素が表示されるまで待つか、一覧の先頭データが変わったことを確認します。 また、無限ループを防ぐため、実務では最大ページ数も設定しましょう。

const maxPages = 20;

for (let pageNumber = 1; pageNumber <= maxPages; pageNumber++) {
  // データ取得と次ページ処理
}

無限スクロールに対応する方法

無限スクロール型のページでは、画面下部へ移動するたびに新しいデータが追加されます。Puppeteerでは、ページを下へスクロールし、データ件数が増えたことを確認してから再びスクロールする処理を繰り返します。

let previousCount = 0;

for (let i = 0; i < 20; i++) {
  const currentCount = await page.$$eval(
    '.product-card',
    elements => elements.length
  );

  if (currentCount === previousCount) {
    break;
  }

  previousCount = currentCount;

  await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
  });

  await new Promise(resolve => {
    setTimeout(resolve, 1500);
  });
}

無限スクロールでは終了条件が特に重要です。終了条件がなければ、対象サイトの仕様によっては処理が終わらなくなる可能性があります。

• 最大スクロール回数
• 最大取得件数
• データ件数が増えなくなった回数
• 最大実行時間

上記のうち少なくとも1つ、できれば複数の終了条件を設定すると、安定した運用につながります。

Puppeteerでよく発生するエラーと対処法

Waiting for selector failedが発生する原因

指定した要素が制限時間内に見つからない場合に発生する代表的なエラーです。CSSセレクターの間違いだけでなく、Cookie同意画面、ログイン画面、iframe、地域による表示差、アクセス制限なども原因になります。

原因が分からない場合は、ヘッドレスモードを解除して実際のブラウザ画面を表示し、どの画面で処理が止まっているか確認するとよいでしょう。

サーバーやDocker環境で起動できない場合

Linuxやコンテナ環境では、Chromeの実行に必要なシステムライブラリが不足している場合があります。PuppeteerはChromeと必要な依存関係を含む公式Dockerイメージも提供しています。

セキュリティ設定を安易に無効化するのではなく、Puppeteer公式のDocker構成や対応OSを確認して実行環境を整えることが重要です。

PuppeteerをPythonで使う方法はある？

Puppeteer本体はJavaScriptおよびTypeScript向けのNode.jsライブラリであり、公式Python版はありません。

PythonにはPuppeteerを移植した非公式ライブラリのPyppeteerがあります。しかし、PyppeteerのGitHubリポジトリでは、長期間十分にメンテナンスされていないことが案内されており、代替としてPlaywright Pythonを検討するよう推奨されています。

Pythonで新しいブラウザ自動化プロジェクトを始める場合は、公式Python APIが提供され、Chromium、Firefox、WebKitに対応しているPlaywrightを優先的に比較するとよいでしょう。

「puppeteer python」で検索している場合も、単にPyppeteerを選ぶのではなく、今後のメンテナンス性、使用するブラウザ、チームの開発言語を考慮して判断する必要があります。

Puppeteer・Playwright・Pythonライブラリ・Octoparseを比較

最適なデータスクレイピング方法は、対象ページ、使用言語、収集頻度、データ量、運用担当者によって異なります。

独自のログイン処理や複雑な画面操作を細かく制御したい場合は、PuppeteerまたはPlaywrightが適しています。静的ページを軽量に取得する場合は、RequestsとBeautiful Soupの組み合わせが効率的です。

一方、開発担当者を確保せず、商品価格や求人情報などを定期的に収集してExcelやCSVへ出力したい場合は、Octoparseが候補になります。

Octoparseを使ってWebデータを効率的に収集する方法

Puppeteerはコードを書ける開発者にとって強力な選択肢ですが、プログラミングの知識がない、あるいは開発リソースを割けない場合には、ノーコードのWebスクレイピングツールであるOctoparseが有力な選択肢になります。

こんな悩みはありませんか

• コードを書かずにWebデータを収集したい
• ページ構造が複雑で、セレクタの調整に時間がかかる
• ページネーションや無限スクロールへの対応が面倒
• 一覧ページだけでなく、詳細ページの情報もまとめて収集したい
• データを定期的に更新したいが、サーバーやスケジューラの管理まで手が回らない

Octoparseで解決できること

• ノーコード操作：クリック操作だけで抽出ルールを設定できる
• 豊富なテンプレート：ECサイトやSNSなど主要サイト向けのテンプレートを用意
• クラウド抽出：ローカルPCを起動したままにしなくても、クラウド上でデータ収集を実行できる
• スケジュール実行：日次・週次など定期的な自動収集に対応
• Excel／CSV／Google Sheetsへの直接出力
• MCPによるAIプラットフォームとの連携が可能

Octoparseが適しているユーザー

次のような状況では、Puppeteerを自作するよりOctoparseの方が運用しやすい場合があります。

• JavaScriptを書ける担当者がいない
• 商品価格や求人情報・口コミなどを毎日・毎週更新したい
• 一覧ページと詳細ページをまとめて取得したい
• 取得結果をExcelやCSVで業務担当者へ渡したい
• プログラムの実行サーバーを管理したくない
• 短期間でデータ収集の可否を検証したい
• 将来的にクラウドやスケジュール実行を利用したい

反対に、独自の認証処理、複雑な条件分岐、社内システムへの深い組み込みが必要な場合は、Puppeteerの方が適しています。

Octoparseでデータスクレイピングする手順は以下の通りです。ここでは求人サイトIndeedの情報をスクレイピングすることを例として紹介します。

Step1:Octoparseへログインする

Step2:テンプレートを選択

対象ページのURLを入力またはその相応なテンプレートを選択してください。ここでは、Indeedのテンプレートを捜索します。

Step3:抽出したいデータを入力

テンプレートで抽出したいデータを入力してください。ここで筆者は職業、ページ数、勤務地などの情報を入力しました。

Step4:「実行」をクリック

「実行」をクリックしてデータの収集をスタート

Step5:抽出したデータをエクスポート

抽出したデータを確認し、エクスポートしてください。ここでは、ただ9分間だけで1613件のデータが抽出されました。

継続収集が必要な場合は、利用プランを確認してスケジュールを設定する

Octoparseはノーコードで運用しやすい一方、利用できる機能はプランによって異なります。まずは14日間の無料トライアルを利用して、対象サイトのデータ抽出や必要な機能を実際に試してみるとよいでしょう。継続的なクラウド抽出やスケジュール実行が必要になった段階で、自社の利用目的に合ったプランを検討することをおすすめします。

Octoparse: ビジネスをウェブデータで動かすエンジン。

無料ダウンロード

サインアップ

競合情報も営業リストも、ウェブデータをそのままExcel・CSV・Google Sheetsに出力

コード不要、誰でも今日から。クリック操作だけで必要な項目を自動抽出

Google Maps・食べログ・iタウンページ向けテンプレートで、リード獲得をすぐに開始

クラウドで毎日・毎週自動実行。大量取得でも安定して、競合動向を常に把握

MCP対応でAIエージェントと連携。収集データをAIに渡して分析・活用まで一気通貫

クレジットカード不要で無料スタート。世界600万人以上が選んだ信頼のツール

スクレイピングを行う際の注意点

Puppeteerで技術的に取得できるデータであっても、自由に収集・利用できるとは限りません。スクレイピングを開始する前に、対象サイトのルールとデータの利用条件を確認してください。

• 対象サイトの利用規約
• robots.txtの内容
• 公式APIの有無
• 著作権やデータベースに関する権利
• 個人情報や機密情報の有無
• 取得したデータの保存・共有・商用利用条件
• アクセス頻度と対象サーバーへの負荷

公式APIが提供されている場合は、原則としてAPIを優先します。また、短時間に大量のアクセスを送ると、対象サイトへ負荷を与えたり、HTTP 429や403などのエラーが発生したりする可能性があります。

アクセス制限を無理に回避するのではなく、必要なデータだけに取得範囲を絞り、適切な待機時間、最大取得件数、同時実行数、再試行回数を設定することが重要です。

関連記事

Webスクレイピングツール12選｜5タイプ別・無料プランあり・AI対応を徹底比較

スクレイピングのブロック回避方法｜原因・対策・Octoparseでの設定手順を解説

Puppeteerに関するよくある質問

Q1:Puppeteerは無料で使えますか？

はい。Puppeteerはオープンソースであり、ライブラリ自体は無料で利用できます。ただし、クラウドサーバー、ストレージ、プロキシ、データベース、監視ツールなどの運用環境には別途費用が発生する場合があります。

Q2:PuppeteerとSeleniumの違いは何ですか？

PuppeteerはNode.jsとの親和性が高く、Chrome系ブラウザの自動化を比較的簡潔に実装できます。Seleniumは複数のプログラミング言語とブラウザに対応しており、幅広いテスト環境で利用されています。

Q3:puppeteerとpuppeteer-coreの違いは何ですか？

puppeteerは互換性のあるブラウザを自動的に取得する導入しやすいパッケージです。puppeteer-coreはブラウザを含まず、既存のChromeやリモートブラウザを自分で管理したい場合に使用します。

Q4:PuppeteerでPythonコードを書けますか？

Puppeteer本体はJavaScriptおよびTypeScript向けです。Pythonには非公式移植版のPyppeteerがありますが、新しいプロジェクトでは公式Python APIを提供するPlaywrightも比較してください。

Q5:Puppeteerでログイン後のページを取得できますか？

技術的には可能です。フォーム入力、ボタンクリック、Cookieやセッションの保存などを実装できます。ただし、対象サービスの利用規約、自動操作に関する制限、認証情報と個人情報の管理に注意が必要です。

Q6:PuppeteerでCSVを出力できますか？

可能です。取得したデータをCSV形式へ変換し、Node.jsのファイル機能を使って保存します。カンマ、改行、ダブルクォートを含む値の処理と、日本語の文字コードに注意してください。

Q7:Puppeteerは大量データの収集に向いていますか？

大量データの収集にも利用できますが、ブラウザはメモリ消費が大きいため、同時実行数、再試行、タイムアウト、ブラウザの再利用、終了条件を適切に設計する必要があります。静的ページだけを取得する場合は、より軽量な方法も比較してください。

Q8:Puppeteerでスクレイピングすると相手に分かりますか？

通常のWebアクセスと同様、IPアドレス、アクセス時刻、リクエスト内容などはサーバー側のログに記録されます。アクセス制限を無理に回避せず、対象サイトのルールと適切なアクセス間隔を守ることが重要です。

まとめ

いかがでしょうか。この記事では、Puppeteerの使い方について詳しく紹介しました。Puppeteerは、JavaScriptからChromeを操作し、動的なWebサイトからデータを取得できる強力なブラウザ自動化ライブラリです。

基本的な流れは、Node.js環境へPuppeteerをインストールし、ブラウザとページを作成して対象URLへアクセスした後、必要な要素が表示されるまで待機し、データを取得・保存するというものです。

安定したスクレイピングを実現するには、動的要素の待機、欠損データへの対応、ページネーションや無限スクロールの終了条件、例外発生時のブラウザ終了が欠かせません。

JavaScriptで複雑な処理を作り込みたい場合はPuppeteer、Pythonで新規開発する場合はPlaywright、静的ページを軽量に取得する場合はRequestsとBeautiful Soupが候補です。

一方、プログラミングなしでページネーションや定期収集を設定し、ExcelやCSVへ出力したい場合はOctoparseが適しています。対象サイトの仕組み、担当者の技術レベル、収集頻度、データ量、保守体制を比較し、自分の目的に合った方法を選びましょう。

Octoparse: ビジネスをウェブデータで動かすエンジン。

無料ダウンロード

サインアップ

競合情報も営業リストも、ウェブデータをそのままExcel・CSV・Google Sheetsに出力

コード不要、誰でも今日から。クリック操作だけで必要な項目を自動抽出

Google Maps・食べログ・iタウンページ向けテンプレートで、リード獲得をすぐに開始

クラウドで毎日・毎週自動実行。大量取得でも安定して、競合動向を常に把握

MCP対応でAIエージェントと連携。収集データをAIに渡して分析・活用まで一気通貫

クレジットカード不要で無料スタート。世界600万人以上が選んだ信頼のツール