JavaScript を使ったウェブスクレイピング：ステップごとのガイド

最初に自動化ツールを作り始めたころ、ウェブサイトの奥深い部分をのぞき込み、デジタル考古学者みたいに HTML をいじり回すことに、こんなに時間を使うとは思っていませんでした。ですが2026年の今も、Web は依然として世界最大で、しかも最も散らかったデータ倉庫です。しかも今では、その半分が JavaScript、動的読み込み、そしてますます厳しくなるボット対策の裏に隠れています。営業担当でも、EC運営者でも、あるいは単に好奇心旺盛な開発者でも、ウェブスクレイピングは公開ウェブページを実用的なビジネス資産に変えるための秘訣になっています。そして私と同じなら、きっと一度はこう思ったはずです。「JavaScript だけで自分専用のウェブスクレイパーって、本当に作れるの？」先に答えを言うと、できます。でも、作るべきでしょうか？ そのあたりを一緒に見ていきましょう。

このガイドでは、ゼロから JavaScript ベースの自作ウェブスクレイパーを作る方法を紹介します。静的 HTML の解析から、動的で JavaScript が多用されたサイトの扱い方まで、ひと通りカバーします。さらに、コードを書く道と、AI 搭載ツールの に重たい作業を任せる道の両方を見てきた立場から、どんなときにコードを手放すべきかもお伝えします。デジタル的に手を動かす準備はできましたか？ では始めましょう。

JavaScript を使ったウェブスクレイピングとは？

まずは基本から見ていきましょう。ウェブスクレイピングとは、ウェブサイトから情報を自動で抽出する処理です。人の手でコピペする代わりに（正直、あれは乾く塗料を眺めるのと同じくらい退屈ですよね）、データを取得して必要な情報だけを抜き出す “スクレイパー” というプログラムを書きます。

では、JavaScript はどこで使うのでしょうか。JavaScript は Web の標準言語です。ブラウザ上で動き、インタラクティブなサイトを支え、さらに Node.js を使えば自分のパソコンやサーバー上でも動かせます。JavaScript を使ったウェブスクレイピングというと、たいていは Node.js で次のような処理を書くことを指します。

• HTTP リクエストでウェブページを取得する
• HTML を解析して欲しいデータを見つける
• 必要に応じて実ブラウザを自動操作し、動的に読み込まれるサイトに対応する

この文脈での Web ページは、大きく2種類あります。

• 静的ページ：データが HTML の中にそのまま入っているページ。シンプルな商品一覧ページなどがこれに当たります。
• 動的ページ：ページ自身の JavaScript が動いたあとにデータが表示されるページ。無限スクロールのフィードや、AJAX でデータを読み込むダッシュボードなどです。

JavaScript は豊富なライブラリ群のおかげで、この両方に対応できます。静的ページなら HTML を直接取得して解析できますし、動的ページなら実際のユーザーと同じように見せるため、ブラウザ自動化が必要になります。

JavaScript を使ったウェブスクレイピングがビジネスで重要な理由

正直に言うと、誰もスクレイピングを「楽しいから」やっているわけではありません。まあ、土曜の夜の私みたいな例外もいるかもしれませんが。企業がスクレイピングを行うのは、インサイト、リード、競争優位への近道だからです。重要な理由は次のとおりです。

• 時間短縮：自動スクレイパーなら数千件のデータを数分で収集でき、手作業のコピペと比べて何百時間も節約できます（）。
• より良い意思決定：リアルタイムデータがあれば、市場変化への対応、価格調整、競合より先のトレンド把握ができます（）。
• 精度向上：自動抽出は人為的ミスを減らし、よりきれいで信頼性の高いデータセットを作れます（）。
• 競合インサイト：競合の価格を追跡し、レビューを監視し、市場トレンドを分析できます。オープンな Web が、そのままあなた専用のリサーチラボになります。
• リード獲得：見込み客リストの作成、CRM データの補完、新規営業機会の発掘まで、すべて自動で進められます。

ビジネスへの影響を、簡単な表でまとめるとこんな感じです。

そして毎回驚かされる統計があります。 して公開データを収集しており、 しています。これはニッチな趣味ではなく、完全に主流のビジネス手法です。

JavaScript でウェブスクレイピング環境を整える

では実践編です。自分でスクレイパーを作るなら、まず環境を整える必要があります。私ならこう進めます。

1. Node.js と npm をインストールする

   にアクセスして、LTS バージョンを入手します。これで Node.js（実行環境）と npm（パッケージマネージャー）の両方が使えるようになります。

   • インストール確認:

     1node -v
     2npm -v

2. プロジェクトフォルダを作る

   プロジェクト用の新しいディレクトリ（例: web-scraper-demo）を作成し、その場所でターミナルを開いて次を実行します。

   1npm init -y

   これで依存関係を管理する package.json ファイルが作成されます。

3. 必要なライブラリをインストールする

   まずはこのセットから始めましょう。

   • Axios：Web ページを取得するための HTTP クライアント
     npm install axios
   • Cheerio：jQuery 風の HTML パーサー
     npm install cheerio
   • Puppeteer：ヘッドレス Chrome の自動操作（動的サイト向け）
     npm install puppeteer
   • Playwright：複数ブラウザ対応の自動化（Chromium、Firefox、WebKit）
     npm install playwright 次に以下を実行します。
     npx playwright install（ブラウザのバイナリをダウンロードします）

各ツールの違いを、簡単に比較するとこうなります。

静的ページなら Axios + Cheerio が定番です。動的またはインタラクティブなページなら、Puppeteer か Playwright が適しています（）。

JavaScript を使ったシンプルなウェブスクレイパーの作成

では、袖をまくって基本的なスクレイパーを作ってみましょう。たとえば、“Books to Scrape” のような静的サイトから書籍タイトルと価格を取得したいとします（学習用の素晴らしい練習サイトです）。

Step 1: ブラウザでページを調べます。すると、各書籍が <article class="product_pod"> の中にあり、タイトルは <h3>、価格は <p class="price_color"> に入っていることが分かります。

Step 2: コードはこちらです。

1const axios = require('axios');
2const cheerio = require('cheerio');
3(async function scrapeBooks() {
4  try {
5    // 1. ページの HTML を取得
6    const { data: html } = await axios.get('http://books.toscrape.com/');
7    // 2. HTML を Cheerio に読み込む
8    const $ = cheerio.load(html);
9    // 3. 欲しいデータを選択して抽出
10    const books = [];
11    $('.product_pod').each((_, element) => {
12      const title = $(element).find('h3 a').attr('title');
13      const price = $(element).find('.price_color').text();
14      books.push({ title, price });
15    });
16    // 4. 結果を出力
17    console.log(books);
18  } catch (error) {
19    console.error('スクレイピングに失敗しました:', error);
20  }
21})();

ここで何が起きているのか？

• 取得: Axios で HTML を取得します。
• 解析: Cheerio が HTML を読み込み、CSS セレクターを使えるようにします。
• 抽出: .product_pod ごとにタイトルと価格を取り出します。
• 出力: 書籍オブジェクトの配列を表示します。

セレクターのコツ:

ブラウザの DevTools（右クリック → 検証）を使って、固有のクラス名やタグを見つけましょう。Cheerio はほとんどの CSS セレクターをサポートしているので、要素をかなり正確に指定できます。

データの解析と抽出

私自身のスクレイピング経験から得た、ちょっとした実践的なコツを紹介します。

• テキストと属性の使い分け: 要素内テキストには .text()、属性（title や href など）には .attr('attributeName') を使います。
• データ型の整形: 取得したら、その場でデータを整えましょう。通貨記号を除去し、数値をパースし、日付を整形します。
• 欠損データへの対応: 抽出前に要素の存在を必ず確認し、エラーを防ぎます。
• ループ処理: .each() や .map() を使って要素を巡回し、結果配列を組み立てます。

データを取得できたら、CSV、JSON、あるいはデータベースに書き出せます。あとはもう、あなたの自由です（少なくともスプレッドシートまでは）。

JavaScript で動的サイトをスクレイピングする：Puppeteer と Playwright

ここからは難所です。動的サイト、つまりサイト側の JavaScript が動いてからでないとデータが表示されないページに取り組みます。SNS のフィード、ダッシュボード、「もっと見る」ボタン付きのサイトなどがその例です。

なぜヘッドレスブラウザを使うのか？

単純な HTTP リクエストだけでは足りません。返ってくるのは骨組みだけの HTML だからです。Puppeteer や Playwright のようなヘッドレスブラウザを使えば、次のことができます。

• 実際のブラウザを起動する（GUI は表示しない）
• サイトの JavaScript を実行する
• コンテンツの読み込みを待つ
• レンダリング後のデータを抽出する

Puppeteer の例:

1const puppeteer = require('puppeteer');
2(async function scrapeQuotes() {
3  const browser = await puppeteer.launch({ headless: true });
4  const page = await browser.newPage();
5  await page.goto('https://quotes.toscrape.com/js/', { waitUntil: 'networkidle0' });
6  await page.waitForSelector('.quote');  // 名言が表示されるのを待つ
7  const quotesData = await page.$$eval('.quote', quoteElements => {
8    return quoteElements.map(q => {
9      const text = q.querySelector('.text')?.innerText;
10      const author = q.querySelector('.author')?.innerText;
11      return { text, author };
12    });
13  });
14  console.log(quotesData);
15  await browser.close();
16})();

ここで何が起きているのか？

• ヘッドレス Chrome を起動する
• ページに移動し、通信が落ち着くまで待つ
• .quote セレクターが現れるのを待つ
• DOM から名言と作者を抽出する

Playwright もほぼ同じように使えますが、複数ブラウザ（Chromium、Firefox、WebKit）に対応しており、自動待機機能も便利です（）。

適切なツールの選び方：Puppeteer と Playwright の比較

Puppeteer も Playwright も動的スクレイピングには優秀ですが、私ならこう考えます。

• Puppeteer:
  • Chrome / Chromium 専用（Firefox も一部対応）
  • シンプルで、Chrome ベースのスクレイピングにすぐ使える
  • コミュニティが大きく、ステルスモードなどのプラグインも豊富
• Playwright:
  • 複数ブラウザ対応（Chromium、Firefox、WebKit / Safari）
  • 複数言語を公式サポート（JS、Python、.NET、Java）
  • 要素の自動待機、複数ページやコンテキストの扱いが得意
  • 複雑なケースやクロスブラウザ対応に強い

1つのサイトだけをスクレイピングして Chrome で十分なら、Puppeteer は手早くて簡単です。クロスブラウザ対応や自動待機が必要だったり、スクレイピングを AI エージェントに組み込みたい場合（Playwright には公式 MCP サーバーがあり、エージェントが直接操作できます）は、2026年の新規プロジェクトでは Playwright をデフォルトにするのが安全です（）。

JavaScript を使ったウェブスクレイピングでよくある課題を乗り越える

ここからが本当の面白さです（“面白い” の意味は「なぜ深夜2時にスクレイパーが突然壊れたんだ？」ですが）。ウェブスクレイピングはコードだけの話ではなく、さまざまな障害をどう越えるかの話でもあります。

• IP ブロックとレート制限: 1つの IP からリクエストを送りすぎるとブロックされます。プロキシを使い、ローテーションさせましょう（）。
• CAPTCHA とボット検出: サイトは CAPTCHA、フィンガープリント、ハニーポットを使います。リクエスト速度を落とし、ステルス系プラグインを使うか、外部の CAPTCHA 解決サービスを利用します。
• 動的コンテンツと AJAX: 画面ではなく、ネットワークログからバックエンド API を直接呼び出せることもあります。
• ページ構造の変更: サイトの HTML は頻繁に変わります。セレクターはモジュール化し、更新しやすくしておきましょう。
• パフォーマンスのボトルネック: 数千ページをスクレイピングするなら並行処理が必要ですが、自分のマシンや対象サイトに負荷をかけすぎないよう注意します。

ベストプラクティス:

• リクエストを間引く（待機時間を入れる）
• 現実的な User-Agent ヘッダーを設定する
• 大規模スクレイピングではプロキシを使う
• すべてをログに残す（どこで・なぜ壊れたか分かるようにする）
• robots.txt と利用規約を尊重する

そして忘れてはいけないのは、スクレイピングは常に変化する対象だということです。サイトは進化し、ボット対策は賢くなり、スクリプトも最新の状態に保つ必要があります（）。

トラブルシューティングと保守のコツ

• セレクターをモジュール化する: CSS セレクターは1か所にまとめ、更新しやすくします。
• 分かりやすいログを残す: 進捗とエラーを記録し、問題をすばやく見つけます。
• GUI ありモードでデバッグする: ブラウザ自動化を画面付きで実行し、何が起きているか確認します。
• エラーハンドリングを入れる: try/catch と再試行で堅牢性を高めます。
• 定期的にテストする: スクレイパーが突然0件を返したらアラートが出るようにします。
• バージョン管理を使う: Git で変更を追跡し、必要なら元に戻せるようにします。

ここまでやっても、何十本ものカスタムスクレイパーを保守するのは、かなり骨の折れる作業です。だからこそ、多くのチームが AI 搭載のノーコードソリューションに目を向けています。

ノーコード代替を検討するとき：Thunderbit と JavaScript スクレイピングの比較

率直に言えば、週末を使ってセレクターのデバッグやプロキシとの格闘をしたい人ばかりではありません。そこで登場するのが、 です。AI 搭載のウェブスクレイパー Chrome 拡張機能です。

Thunderbit の仕組みは？

• Chrome 拡張機能をインストールする
• 任意のページに移動し、「AI で項目を提案」をクリックする
• Thunderbit の AI がページを読み取り、列を提案し、データを抽出する
• 動的ページ、サブページ、ドキュメント、PDF などにも対応
• Google Sheets、Airtable、Notion、CSV に直接エクスポート可能。コードは不要です

並べて比較するとこんな感じです。

Thunderbit の AI は、スクレイピングしながら 要約・分類・翻訳 までできます。DIY でこれをやろうとすると、追加のコーディングが必要です（）。

実際のケース別に見る：どの方法がチームに合う？

• ケース1：開発者・複雑なプロジェクト

  5つの異なるサイトから求人情報を集約する製品を作っていて、独自ロジックが必要で、自社サーバー上で動かしたいとします。こうした場合は、自作スクレイパーが向いています。完全な制御ができ、スケール向けに最適化でき、バックエンドにも直接統合できます。

• ケース2：ビジネスチーム・急ぎのデータ取得

  今日中に、複数のディレクトリから見込み客リストを作りたいマーケティング担当だとします。コードのスキルも、開発サイクルを待つ時間もありません。そんなときは Thunderbit がぴったりです。クリックして Google Sheets に出力すれば、1時間で完了します（）。

• ケース3：ハイブリッド運用

  チームによっては、まず Thunderbit で試作したり短時間の作業をこなし、その後、長期運用が必要になったらカスタムコードに投資します。あるいは、最初は開発者がスクレイパーを作り、運用は Thunderbit のテンプレートを通じて非エンジニアに引き継ぐこともあります。

どう選ぶべきか？

• 深いカスタマイズが必要で、技術力があり、完全な制御を求めるなら、コードで作る。
• 速さ、簡単さ、チームでの協業を重視するなら、Thunderbit は非常に強力です。
• 多くのチームは両方を使い分けています。基幹システムはコード、突発的な案件やビジネス主導のスクレイピングは Thunderbit という使い方です。

第3の選択肢：AI コーディングエージェントとブラウザエージェント

多くの JavaScript スクレイピング入門記事が書かれた当時には、あまり存在しなかった中間的な選択肢があります。知っておく価値があるのは次の2つです。

• AI コーディングエージェント（Claude Code、OpenAI Codex CLI、Cursor）— ページや欲しいデータを平易な英語で説明すると、Axios/Cheerio/Playwright のスクリプトを代わりに書いてくれます。コードは自分のものですし、同じボット対策の壁にもぶつかりますが、“書く” 作業は数時間から数分に短縮されます。リポジトリ内に本物のスクリプトを置きたいけれど、ブラックボックスのツールは避けたいときに便利です。
• ブラウザ操作エージェント（Browser Use、Playwright MCP、Skyvern）— スクリプトを生成する代わりに、エージェント自身がページを操作します。「ログインして、注文ページへ移動し、直近30日分を CSV で出力して」といったプロンプトを書けば、クリックを自動で判断して進めます。ログインが必要なフロー、複数ステップの移動、レイアウト変更が多いページに向いています。固定セレクターに頼るのではなく、見えている内容をもとに推論するからです。

どちらも、レート制限、利用規約、CAPTCHA、IP ブロックといった面倒な制約を消してくれるわけではありません。ですが、「とりあえず1回だけこのデータが欲しい」「セレクターがすぐ壊れる」といったケースでは、puppeteer.launch() のスクリプトをもう1本保守する前に、試してみる価値があります。

エージェント層を完全に飛ばして、ただクリック操作だけで進めたいなら、Thunderbit の出番です。上の比較表を見てください。

データの出力、自動化、協業：基本のスクレイピングを超えて

データを集めるのは始まりにすぎません。そのあとに何をするかが重要です。

JavaScript スクレイパーの場合:

• Node の fs モジュールで CSV / JSON に書き出す
• データベースに入れる、または API（Google Sheets API など）を呼び出す
• cron ジョブやクラウド関数で定期実行する
• 共有にはファイル送付やダッシュボード構築が必要

Thunderbit の場合:

• Google Sheets、Airtable、Notion、CSV にワンクリックで出力できる（）
• スケジュール機能を内蔵。設定したらあとは自動でデータが更新される
• チームメンバーが共有テンプレートを使え、出力結果はすぐに共同作業へつながる
• AI による後処理（要約、分類、翻訳）も標準搭載

たとえば、競合価格を毎日スクレイピングして、Google スプレッドシートが毎朝自動で更新されるとしたらどうでしょう。コードも手作業も不要です。Thunderbit は、そんなワークフローを実現します。

重要ポイント：JavaScript を使ったウェブスクレイピングでビジネス成果を出す

最後に、要点を整理しましょう。

• JavaScript は強力なスクレイピングツールです: Node.js、Axios、Cheerio、Puppeteer、Playwright を使えば、ほぼあらゆるサイトをスクレイピングできます（）。
• 目的はビジネス価値です: スクレイピングは、より良い意思決定、より速い業務フロー、競争優位のためにあります（）。
• 適切な方法を選びましょう: 静的ページには軽量ツール、動的ページにはヘッドレスブラウザを使います。
• 課題を見越しておくこと: IP ブロック、CAPTCHA、サイト変更はつきものです。プロキシ、ステルス対策、モジュール化されたコードで備えましょう。
• 保守は必須です: スクリプト更新に備えるか、自動で適応する AI ツールを検討しましょう（）。
• Thunderbit のようなノーコードツールは成果を早めます: 非エンジニアや急ぎの業務では、Thunderbit の AI、サブページスクレイピング、ワンクリック出力が、誰でも使える形でスクレイピングを実現します。
• 連携と協業が重要です: データが、チームで使っている Google Sheets、Airtable、Notion、または CRM に流れるようにしましょう。

最後にひとこと:

Web にはデータがあふれています。取り出し方を知っていれば、もう一歩先に進めます。JavaScript で自作スクレイパーを作るにせよ、Thunderbit の AI に重たい作業を任せるにせよ、大事なのは生データをビジネス価値に変えることです。両方試してみて、自分のワークフローに合う方を選んでください。そして覚えておいてください。最高のスクレイパーとは、必要なときに必要な答えをくれるものです。

Thunderbit を試してみたくなりましたか？ して、ウェブスクレイピングがどれだけ簡単か確かめてみてください。もっと詳しく知りたい方は、 で、さらに多くのガイド、ヒント、そしてデータ自動化の最前線のストーリーをご覧ください。

よくある質問

1. JavaScript のウェブスクレイピングとは何ですか？ どのように動作しますか？

JavaScript のウェブスクレイピングとは、Node.js、Axios、Cheerio、Puppeteer、Playwright などのツールを使って、Web サイトからプログラムでデータを取得・抽出することです。静的ページは HTTP リクエストと HTML パーサーで取得でき、動的ページは実際のユーザー操作を再現するためにヘッドレスブラウザが必要になります。

2. なぜ企業は JavaScript を使ったウェブスクレイピングを重視すべきなのですか？

ウェブスクレイピングは、時間の節約、手作業の削減、データ精度の向上、リアルタイムの競合インサイト獲得に役立ちます。リード獲得、価格追跡、市場調査、営業自動化などにも使え、データドリブンな意思決定に役立つ重要なツールです。

3. JavaScript スクレイピングで使われる主要なツールやライブラリは何ですか？

• Axios: 静的ページへの HTTP リクエスト用。
• Cheerio: 静的 HTML の解析と問い合わせ用。
• Puppeteer: Chrome を自動操作して動的コンテンツを抽出するため。
• Playwright: 複数ブラウザに対応した、強力なスクレイピング向け自動化ツール。

4. JavaScript でスクレイパーを自作する代わりに、Thunderbit を使うべきなのはどんなときですか？

スクリプトを書いたり保守したりせず、すぐにノーコードでスクレイピングしたいときは Thunderbit が最適です。ビジネスチーム、短期案件、共同作業のワークフローに向いています。Thunderbit は動的コンテンツ、サブページ、Google Sheets や Airtable への直接出力にも対応しています。

5. JavaScript のウェブスクレイピングで最も大きな課題は何ですか？ どう解決できますか？

よくある課題は、IP ブロック、CAPTCHA、ページ構造の変更、パフォーマンスの制約です。プロキシ、ステルス系プラグイン、ブラウザ自動化、モジュール化されたコード、再試行ロジックで軽減できます。あるいは、Thunderbit のようなツールなら、こうした障害の多くを自動で回避できます。

6. Claude Code や Browser Use のような AI コーディングエージェントやブラウザエージェントは、JavaScript スクレイパーを置き換えますか？

完全には置き換えませんが、作業の流れは変わります。AI コーディングエージェント（Claude Code、Codex CLI、Cursor）は、平易な説明から Axios/Cheerio/Playwright のスクリプトを生成できます。コードは自分で実行し、ボット対策やレート制限の対応も自分で行う必要があります。ブラウザエージェント（Browser Use、Playwright MCP）はさらに一歩進み、自然言語の指示で実際にブラウザを操作します。ログインが必要なフローや複数ステップの操作、セレクターが壊れやすいケースに便利です。単発作業なら大幅に時間を節約できますが、本番スクレイピングでは、変化が起きたときにデバッグできる自作スクリプト、または Thunderbit のような管理型ツールが依然として有効です。