営業リストの作成、競合価格の調査、市場情報の収集では、Webページから必要なデータを手作業で転記すると、工数が増え、入力漏れも起きやすくなります。実際、2025年のインターネット通信量のおよそ半分は、データ収集を目的にウェブを巡回するボットが生み出しており、デジタル企業の70％超が市場分析や日々の業務に公開ウェブデータを活用しています（Thunderbit）。一方、JavaScriptで内容を後から描画するサイトでは、HTMLを取得するだけでは目的のデータを取り出せないことがあります。
こうした動的なページに対応する選択肢の一つがJavaScriptです。開発者は取得処理やブラウザ操作を細かく実装でき、営業・リサーチ担当者は用途に応じてノーコードツールも選べます。本記事では、JavaScriptウェブスクレイパーの基本構成、静的ページと動的ページの取得手順、ページネーションや保守の考え方、さらにThunderbitのようなAIツールを使う方法まで順に解説します。
スクレイピングを実施する際は、対象サイトの利用規約、著作権、個人情報の取り扱い、アクセス頻度を事前に整理する必要があります。取得できる技術的可能性と、取得・利用してよい範囲は同じではありません。
JavaScript スクレイパーの基本：JavaScript を使ったウェブスクレイピングとは？
データスクレイピングとは？2026年に実践する方法 Get Started Free
ウェブスクレイピングとは、サイト上の情報を自動で取得し、必要な項目を表やデータファイルに整理する仕組みです。複数ページを巡回し、指定した箇所から値を取り出す処理を組み合わせて実装します。
JavaScript スクレイパーは、JavaScriptで記述されたウェブスクレイパーです。実行方法は、大きく2通りに分けられます。
- ブラウザ内: コンソールでスクリプトを実行するか、拡張機能を使い、現在開いているページからデータを取得する方法。
- サーバーサイド（Node.js）: Node.js上でページを取得・解析し、プログラムからデータを抽出する方法。
代表的な用途には、名簿サイトから必要な連絡先を整理するリード獲得、競合商品の価格変化を追う価格監視、レビューやニュース、トレンドを集める市場調査があります。スクレイピングを使う人の48％は e コマース分野に集中しています（Thunderbit）。ただし、ブラウザに表示されている情報でも、ログイン状態、ページ構造、アクセス制御、利用条件によって取得方法や利用可否は異なります。
JavaScriptがウェブスクレイピングに向く理由と主な利点
JavaScriptを使う利点は、ブラウザ上の処理と同じ言語・実行環境を利用しやすいことです。読み込み後に内容を描画するページや、「もっと見る」、スクロールなどの操作をきっかけにデータを取得するページでは、ブラウザ自動化と組み合わせることで対応範囲を広げられます。
- 動的コンテンツに対応しやすい: ブラウザ上でスクリプトを実行し、描画後に現れる要素を取得できます。
- 操作手順を自動化できる: Puppeteerのようなツールを使うと、クリック、スクロール、権限のあるログイン操作などを実装できます。
- DOMを直接扱える: ページ構造へアクセスし、条件に合う要素から必要な値を取り出せます。
言語ごとの違いは、対象サイトと既存の開発環境を踏まえて比較すると判断しやすくなります。
| 要素 | JavaScript（Node.js） | Python | PHP |
|---|---|---|---|
| 動的コンテンツ | ブラウザ自動化ライブラリと組み合わせやすく、JavaScriptが多いサイトに対応しやすい | SeleniumやPlaywrightなどを追加して対応できる | 利用するライブラリや構成により、追加対応が必要 |
| 速度／並列処理 | 非同期I/Oを使った並列取得を組みやすい | asyncioやScrapyなどで並列処理を実装できる | 実装方法と実行環境によって異なる |
| 使いやすさ | Web開発者にはなじみやすい一方、非同期処理の理解が必要 | 入門資料が多く、データ処理と組み合わせやすい | 既存のPHP環境を活用しやすいが、用途に応じたライブラリ選定が必要 |
| ブラウザ自動化 | Puppeteer、Playwrightなどを利用できる | Selenium、Playwrightなどを利用できる | 選択肢は比較的限られる |
| 最適な用途 | 動的・インタラクティブなサイト、SPA、Web開発ワークフロー | データ分析との連携、静的サイト、短いスクリプト | 既存のPHPシステムと連携する静的ページ取得 |
対象がシングルページアプリである場合や、スクロールやクリック後にデータを読み込む場合は、JavaScriptが候補になります（Rayobyte）。
最初の JavaScript スクレイパーを準備する：ツールと環境
ここからは、フレームワークに頼らないシンプルなJavaScriptスクレイピング環境を準備します。
-
Node.js を入れる
nodejs.org から Node.js をダウンロードしてインストールします。これでブラウザの外でも JavaScript が走るようになります。 -
プロジェクトを立ち上げる
ターミナルを開き、以下を入力します。mkdir my-scraper cd my-scraper npm init -y -
必要なライブラリを揃える
手元にあると便利なのが、次の2つです。npm install axios cheerio -
狙うサイトを下調べする
Chrome DevTools を立ち上げ（右クリック > 検証）、目当てのデータが収まっている HTML 要素を見つけます。クラス名や ID、タグは控えておきましょう。
下に、もっともシンプルな雛形スクリプトを置いておきます。
const axios = require('axios');
const cheerio = require('cheerio');
async function scrapePage(url) {
try {
const { data: html } = await axios.get(url);
const $ = cheerio.load(html);
const pageTitle = $('head > title').text();
console.log("ページタイトル:", pageTitle);
} catch (err) {
console.error("スクレイピングに失敗しました:", err);
}
}
scrapePage('https://example.com');
node scrape.jsで実行すると、ページタイトルがコンソールに表示されます。
基本的な JavaScript ウェブスクレイパーを作る：ステップごとの解説
続いて、もう少し実戦的なものへ進みましょう。たとえば、練習用として定番の books.toscrape.com から、書籍のタイトルと価格を取り出すケースを考えます。
ステップ 1：ページを確認する
各書籍は <article class="product_pod"> の中にあります。タイトルは <h3><a title="Book Title"></a></h3>、価格は <p class="price_color"> にあります。
ステップ 2：スクレイパーを書く
const axios = require('axios');
const cheerio = require('cheerio');
async function scrapeBooks() {
const url = 'http://books.toscrape.com/';
const { data: html } = await axios.get(url);
const $ = cheerio.load(html);
const books = [];
$('article.product_pod').each((i, elem) => {
const title = $(elem).find('h3 a').attr('title');
const price = $(elem).find('.price_color').text();
books.push({ title, price });
});
console.log(books);
}
scrapeBooks();
このスクリプトの流れは、ページを取得し、HTML を解析し、書籍を一つずつたどって、タイトルと価格を抜き出す、というものです。出力として返ってくるのは、書籍オブジェクトがきれいに並んだ配列です。
[
{ "title": "A Light in the Attic", "price": "£51.77" },
{ "title": "Tipping the Velvet", "price": "£53.74" }
]
ステップ 3：ページネーションに対応する
複数ページを取得する場合は、「次へ」リンクのURLを読み取り、リンクがなくなるまでページを順番に処理します。各ページで同じ抽出処理を実行し、取得件数や重複の有無を記録すると、途中の欠損を見つけやすくなります。対象サイトの利用条件とサーバー負荷を踏まえ、同時実行数やアクセス間隔も設定します。
さらに進める：JavaScript で動的コンテンツとユーザー操作に対応する
動的ページでは、最初に返されるHTMLに必要な情報が含まれていないことがあります。読み込み後にJavaScriptで追加データを取得するページや、ボタン操作・スクロールをきっかけに残りの内容を表示するページが該当します。
Cheerio と Axiosは、HTTPレスポンスとして受け取ったHTMLの取得と解析には使えますが、ブラウザ上のJavaScriptを実行しません。初期HTMLに含まれない内容を取得する場合は、Puppeteerのようなヘッドレスブラウザを使い、描画完了や対象要素の出現を待つ方法が候補になります。
高度な JavaScript ウェブクロールに Puppeteer を使う
Puppeteerを使うと、Chrome（またはChromium）の操作をコードから制御できます。代表的な処理は次のとおりです。
- ページを開く
- 要素が読み込まれるのを待つ
- ボタンを押す、フォームを入力する、画面をスクロールする
- 描画後のページから必要な内容を抽出する
下に、ごく基本的なPuppeteerスクリプトを示します。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.waitForSelector('.dynamic-content');
const data = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.dynamic-content'))
.map(el => el.textContent.trim());
});
console.log(data);
await browser.close();
})();
権限のあるログイン操作や、「もっと見る」ボタンのクリック、無限スクロールも自動化できます。認証情報はコードへ直接書き込まず、対象サイトで許可された操作範囲を守ります。無限スクロールでは、前回からデータ件数が増えなくなった時点など、終了条件を決めておくと不要なアクセスを抑えられます（Browserless）。
Thunderbit：JavaScript スクレイピングを簡単に、そして強力にする
スクレイパーをゼロから実装すると、取得条件を細かく制御できる一方、開発時間と継続的な保守が必要です。Thunderbitは、非エンジニアがWebページ上の情報を短時間で表にしたい場合に向くAI搭載Chrome拡張機能です。公式の「2クリック」という操作フローを使い、抽出項目の提案から取得までをノーコードで進められます。
基本的な流れは次のとおりです。
- AI による項目提案: ThunderbitのAIがページを読み取り、「商品名」「価格」「メールアドレス」などの列候補を提案します。ページ構造によって候補や精度が異なるため、用途に必要な列へ調整してから取得します。
- 2クリックでスクレイピング: 提案された項目を確認して「スクレイプ」を押すと、データを表形式に整理します。ページ送りやサブページの取得可否は、ページ構造と設定によって異なります。
- サブページとページネーションへの対応: 商品詳細やプロフィールなどへのリンクをたどり、追加情報を元の表へまとめる用途に使えます。リンク構造やアクセス条件によっては設定の見直しが必要です。
- クラウドモードとブラウザモード: ログイン済みページなどをブラウザ内で処理する方法と、クラウドで処理する方法を選べます。対応するプラン・設定では一度に最大50ページを扱えますが、利用可能な範囲は契約条件や対象ページによって異なります。
- 構造化データのエクスポート: Excel、Google Sheets、Airtable、Notion、CSV、JSONへの書き出しに対応しています。利用できる出力先、上限、料金条件はプランや連携先によって異なります。
実践で見る Thunderbit：データ抽出からエクスポートまで
具体例として、利用条件を満たすビジネスディレクトリから連絡先情報を整理する場合を考えます。
- Thunderbit を入れる（Chrome 拡張機能）。
- ディレクトリのページを開く。
- 「AI による項目提案」を押す。 ThunderbitのAIが「氏名」「電話番号」「会社名」などの列候補を提示するため、必要な項目と表示内容が合っているか照合します。
- 「スクレイプ」を押す。 ページネーションの構造と設定が対応している場合は、複数ページのデータも取得できます。
- Sheets か Excel へ書き出す。 出力後に件数、空欄、重複を検証します。
対象ページと項目が明確であれば、従来は数時間かかっていた作業を数分で試せる場合があります。AIによる項目提案は初期設定を軽くできますが、サイトのレイアウト変更後も必ず同じ結果になるとは限りません。定期運用では、列のずれや欠損がないかを見直します（Thunderbit）。
旧来のJavaScriptスクレイピングとThunderbitでは、実装自由度と導入負荷が異なります。
| 比較項目 | 手動の JS スクレイパー | 高度な JS（Puppeteer） | Thunderbit AI スクレイパー |
|---|---|---|---|
| 必要スキル | コーディングが必要 | ブラウザ自動化を含む高度な実装知識が必要 | 基本操作はノーコード（対象ページや設定による） |
| 動的コンテンツ | 初期HTML中心で、追加実装が必要 | ブラウザ操作を実装すれば対応できる | ページ構成と実行モードにより対応 |
| セットアップ時間 | 目安は1サイトあたり数時間 | 要件によって数時間〜数日 | 小規模な検証は数秒〜数分で開始できる場合がある |
| 保守 | セレクタや取得処理の修正が必要 | ブラウザ操作を含む継続保守が必要 | AIが設定を支援するが、ページ変更後の検証は必要 |
| エクスポート方法 | カスタムコードで実装 | カスタムコードで実装 | Excel/Sheetsなどへの出力に対応 |
| コスト | ライブラリは無料でも開発時間がかかる | ライブラリは無料でもハードウェア・開発時間が必要 | 無料プランがあり、有料プランは契約・請求条件により月額$15〜 |
高度な手法：JavaScriptライブラリで認証・無限スクロールに対応する
基本的なHTML取得だけでは対応できない例として、認証後のページ、無限スクロール、アクセス制御のあるページがあります。
- ログイン／セッション: Puppeteerでは、フォーム入力やボタン操作を自動化し、認証済みの状態でデータを取得できます。自社アカウントなど、取得権限と自動操作の許可がある範囲に限定します。
- 無限スクロール: ページをコードから送り、新しい内容を待ちながら処理します。データ件数が増えなくなった時点など、終了条件を決めてアクセス回数を抑えます（Browserless）。
- アクセス制御: プロキシやユーザーエージェント変更を含む対策が使われる場合もありますが、アクセス制御の回避を目的にせず、利用規約、robots.txt、許可されたAPI、レート制限を優先します。スクレイピングが失敗する原因の95％超はボット対策に関連するとされています（Thunderbit）。
実装上のポイント: DevToolsのNetworkタブでJSONを返す通信先が見つかる場合があります。ただし、画面から見えるエンドポイントが公開APIとは限りません。認証や利用条件を照合し、利用が認められたAPIであれば、ブラウザを起動する方法より効率よく取得できる場合があります。
JavaScript ウェブクローラーの最適化と保守
スクレイパーを組み上げた時点で、片づいたのはまだ前半です。これを安定して走らせ続けることが、残りの半分です。
- 非同期処理: async/await でページを並行して取りに行きます（とはいえ、サーバーに負荷をかけすぎないこと）。
- バッチ処理: メモリを使い果たさないよう、データは細かく区切って処理します。
- エラーハンドリング: エラーを拾い、失敗したリクエストは再試行し、調査用にログを残します。
- ページネーション: 「次へ」のリンクやボタンを見つけて、ページを順送りします。
- セレクタの堅牢性: 一意の ID やクラスを使い、レイアウト変更で崩れやすいセレクタは避けます。
- 監視: 空データやエラーが返り始めたら、すぐ知らせが届くよう設定しておきます。
ベストプラクティス: スクレイパーは「一度作ったら放っておける」たぐいのものではありません。継続的な更新と監視を前提に設計しましょう（Octoparse）。
JavaScriptスクレイピング方法の比較：自作とThunderbit
実装自由度、導入速度、保守体制のどれを優先するかによって、適した方法は異なります。
| アプローチ | 価値が出るまでの速さ | 必要スキル | 動的コンテンツ対応 | 保守 | エクスポート方法 | 拡張性 |
|---|---|---|---|---|---|---|
| 手動 JS（Cheerio） | 実装範囲により時間がかかる | コーディングが必要 | 初期HTMLが中心で、追加実装が必要 | セレクタや処理の保守が必要 | 自分で実装する | 静的サイトや定型処理に向く |
| 高度な JS（Puppeteer） | 要件によって中程度 | ブラウザ自動化を含む実装知識が必要 | 操作を実装すれば対応できる | ブラウザ操作を含む保守が必要 | 自分で実装する | 複雑な処理に対応できるが、実行負荷を考慮する |
| Thunderbit | 小規模な検証を始めやすい | 基本操作はノーコード | ページ構成とモードにより対応 | AIが設定を支援するが、結果の検証は必要 | Sheets/CSVなどへの出力に対応 | クラウドまたはブラウザの対応範囲で利用 |
Cheerioは静的ページを自社要件に合わせて実装したい場合、Puppeteerはブラウザ操作を細かく制御したい場合に向いています。Thunderbitは、開発環境を用意せず、まずWebページのデータをスプレッドシートへ整理したいビジネスユーザーにとって候補になります。対象ページを1つ選び、必要な列、取得精度、出力形式を検証してから利用範囲を広げると判断しやすくなります。
まとめ：実装方法を選ぶための要点
JavaScriptウェブスクレイパーは、取得条件や処理を細かく制御したい場合に役立ちます。試行錯誤の末にたどり着いた指針を、最後に共有しておきます。
- 静的ページから始める: 初期HTMLに必要な情報が含まれる場合は、CheerioとAxiosが候補になります。
- ブラウザ操作が必要なら構成を変える: 動的・操作前提・ログイン必須のサイトでは、権限と利用条件を整理したうえでPuppeteerを検討します。
- ノーコードツールも比較する: 非エンジニアが表形式のデータを短時間で試したい場合は、Thunderbitが候補になります。対応範囲は対象ページ、設定、プランによって異なります。
- 保守を前提にする: サイトの変更に備え、取得件数、空欄、エラーを監視します。
- 利用条件を運用へ組み込む: 対象サイトの規約、著作権、個人情報、アクセス頻度を整理し、取得後の利用目的も記録します。
コードを用意せずに試す場合は、Thunderbit の Chrome 拡張機能をダウンロードし、まず1ページで必要な列、取得精度、出力形式を確かめると判断しやすくなります。別の実装例や活用方法は、Thunderbit ブログでも紹介しています。
AI ウェブスクレイパーを試す Get Started Free
よくある質問
1. JavaScript ウェブスクレイパーとは何ですか？
JavaScriptで記述し、Webページから必要なデータを自動取得するプログラムです。ブラウザ内またはサーバー側（Node.js）で実行でき、ブラウザ自動化ツールと組み合わせると、JavaScriptで描画される動的ページにも対応できます。
2. ウェブスクレイピングで Python ではなく JavaScript を選ぶ理由は何ですか？
JavaScriptは、ブラウザ上の処理と同じ言語でDOM操作やユーザー操作を実装しやすい点が特徴です。動的ページやWeb開発環境との連携を重視する場合に向いています。PythonもSeleniumやPlaywrightなどを組み合わせれば動的ページに対応でき、データ分析と一体で処理したい場合は有力な選択肢です。
3. JavaScript スクレイパーを作るには、どんなツールが必要ですか？
静的ページでは、Node.js、Axios（またはfetch）、Cheerioを組み合わせられます。動的ページでは、PuppeteerやPlaywrightなどのヘッドレスブラウザが候補になります。コードを書かずに表形式のデータを試したい場合は、Thunderbitも比較対象になります。
4. Thunderbit はウェブスクレイピングをどう簡単にしますか？
Thunderbitは、対応するWebページを読み取り、抽出する列の候補をAIで提案します。「AI による項目提案」と「スクレイプ」を使って、コードを書かずに表形式のデータを作成できます。抽出精度、ページネーション、ログイン後ページへの対応は、ページ構造、実行モード、設定によって異なります。
5. ウェブスクレイピングは合法で倫理的ですか？
ウェブスクレイピングの適法性は、国・地域、対象サイトの利用規約、取得するデータ、利用目的、アクセス方法によって異なり、一律には判断できません。公開情報でも自由に取得・再利用できるとは限らないため、著作権、個人情報、契約上の制限、サーバー負荷を検討する必要があります。商用利用や個人データを扱う場合は、必要に応じて法務・プライバシー担当者へ判断を引き継ぎます。
JavaScriptスクレイピングの操作例はThunderbitのYouTube チャンネルで、関連する実装ガイドはThunderbit ブログで確認できます。
さらに詳しく
