JavaScriptとNode.jsで始めるウェブスクレイピング完全ガイド

少し前のことですが、コーヒーを片手にデスクで空っぽのスプレッドシートを眺めていたんです。営業チームからは「競合の価格データが欲しい」、マーケティングからは「新しいリードが必要」、オペレーションからは「複数サイトの商品リストを“昨日までに”集めて」と頼まれる。ネット上にデータは溢れているのに、集める作業は本当に骨が折れる。もしあなたもコピペ作業に追われているなら、安心してください、同じ悩みを持つ人はたくさんいます。

でも、今は状況が大きく変わりました。ウェブスクレイピングは一部のエンジニアの趣味から、ビジネスのど真ん中に進化。JavaScriptやNode.jsは、ちょっとした自動化から本格的なデータパイプラインまで、あらゆる自動化の中心的な存在です。ただ、ツールが進化しても「最初の一歩」はやっぱりハードルが高い。ビジネス担当、データ好き、手作業にうんざりしている人、どんな人にも役立つように、このガイドではエコシステムや主要ライブラリ、よくある課題、AI活用のメリットまで分かりやすくまとめました。

JavaScriptとNode.jsでウェブスクレイピングがビジネスに欠かせない理由

まず「なぜ必要なのか」から。2025年にはウェブデータは「あれば便利」じゃなく「なきゃ困る」存在に。最新の調査では、と回答し、がウェブデータ収集に使われています。ウェブスクレイピングを含むオルタナティブデータ市場はすでにで、今後もどんどん成長していく見込みです。

なぜここまで注目されているのか？主なビジネス活用例を挙げてみます：

競合価格調査・EC: 小売業者は競合サイトの価格や在庫を自動で取得し、。
リード獲得・営業支援: 営業チームはディレクトリやSNSからメール・電話番号・企業情報を自動収集。
市場調査・コンテンツ集約: アナリストはニュースやレビュー、口コミデータを集めてトレンド分析や予測に活用。
広告・アドテク: 広告業界では広告掲載状況や競合キャンペーンをリアルタイムで監視。
不動産・旅行: 物件リストや価格、レビューを収集し、査定や市場分析に利用。
データ集約プラットフォーム: 複数ソースからデータを集め、比較ツールやダッシュボードを構築。

こうした用途で、JavaScriptやNode.jsは特に動的なウェブサイトに強く、非同期処理が得意なので大規模なスクレイピングにもピッタリ。豊富なライブラリが揃っているので、簡単なスクリプトから本格的なシステムまで柔軟に作れます。

基本ワークフロー：JavaScriptとNode.jsでウェブスクレイピングする流れ

ウェブスクレイピングの基本的な流れを整理しましょう。シンプルなブログでも、JavaScriptで描画されるECサイトでも、基本のステップは同じです：

リクエスト送信: HTTPクライアント（axios、node-fetch、gotなど）でページを取得
レスポンス受信: サーバーからHTMLやJSONを受け取る
動的コンテンツ対応: JavaScriptで描画される場合はPuppeteerやPlaywrightなどのヘッドレスブラウザで最終的な内容を取得
HTML/DOM解析: cheerioやjsdomでHTMLをパースし、扱いやすい構造に変換
データ抽出: セレクタや正規表現で必要な情報を抜き出す
データ保存: ファイル、データベース、クラウドなどに保存

それぞれのステップに最適なツールやコツがあります。次の章で詳しく見ていきましょう。

JavaScriptで使える主なHTTPリクエストライブラリ

スクレイピングの最初の一歩はHTTPリクエスト。Node.jsにはいろんな選択肢があります。代表的なものを紹介します：

1. Axios

PromiseベースのHTTPクライアント。多機能で幅広く使えます。

1const axios = require('axios');
2const response = await axios.get('https://example.com/api/items', { timeout: 5000 });
3console.log(response.data);

メリット: 機能が豊富、async/await対応、自動でJSONパース、インターセプターやプロキシも簡単

デメリット: やや重め、データ処理がブラックボックス化しやすい

2. node-fetch

Node.jsでfetch APIを実装。シンプルでモダンな書き心地。

1import fetch from 'node-fetch';
2const res = await fetch('https://api.github.com/users/github');
3const data = await res.json();
4console.log(data);

メリット: 軽量、フロントエンドJS経験者に馴染みやすい

デメリット: 機能は最小限、エラー処理やプロキシ設定は手動

3. SuperAgent

老舗のHTTPライブラリ。チェーン式APIが特徴。

1const superagent = require('superagent');
2const res = await superagent.get('https://example.com/data');
3console.log(res.body);

メリット: 実績豊富、フォーム送信やファイルアップロードも対応

デメリット: APIがやや古め、依存関係が大きい

4. Unirest

シンプルで言語非依存のHTTPクライアント。

1const unirest = require('unirest');
2unirest.get('https://httpbin.org/get?query=web')
3  .end(response => {
4    console.log(response.body);
5  });

メリット: 書き方が簡単、サクッとスクリプトを作りたい時に最適

デメリット: 機能は限定的、コミュニティは小さめ

5. Got

高機能・高速なHTTPクライアント。大規模用途にも対応。

1import got from 'got';
2const html = await got('https://example.com/page').text();
3console.log(html.length);

メリット: 高速、HTTP/2やリトライ、ストリーム対応

デメリット: Node専用、APIがやや複雑

6. Node標準のhttp/https

昔ながらの方法も健在：

1const https = require('https');
2https.get('https://example.com/data', (res) => {
3  let data = '';
4  res.on('data', chunk => { data += chunk; });
5  res.on('end', () => {
6    console.log('Response length:', data.length);
7  });
8});

メリット: 追加依存なし

デメリット: コールバック多用、冗長、Promise非対応

プロジェクトに合ったHTTPクライアントの選び方

選ぶポイントは以下の通り：

使いやすさ: AxiosやGotはasync/await対応で書きやすい
パフォーマンス: Gotやnode-fetchは高速・高並列処理に強い
プロキシ対応: AxiosやGotはプロキシ設定が簡単
エラー処理: AxiosはデフォルトでHTTPエラーをthrow、node-fetchは手動チェックが必要
コミュニティ: AxiosやGotは事例やサポートが豊富

おすすめの使い分け：

簡単なスクリプトや試作: node-fetchやUnirest
本番運用: Axios（多機能）またはGot（高性能）
ブラウザ自動化: PuppeteerやPlaywrightが内部でリクエスト処理

HTML解析・データ抽出：Cheerio、jsdomなど

HTMLを取得したら、次は解析。ここでパーサーの出番です。

Cheerio

サーバーサイド版jQueryのような存在。静的HTMLの解析に最適。

1const cheerio = require('cheerio');
2const $ = cheerio.load('<ul><li class="item">Item 1</li></ul>');
3$('.item').each((i, el) => {
4  console.log($(el).text());
5});

メリット: 超高速、jQueryライクなAPI、崩れたHTMLも扱える

デメリット: JavaScript実行不可、HTMLのみ解析

jsdom

Node.js上でブラウザのDOMを再現。簡単なスクリプト実行も可能。

1const { JSDOM } = require('jsdom');
2const dom = new JSDOM(`<p id="greet">Hello</p><script>document.querySelector('#greet').textContent += ", world!";</script>`);
3console.log(dom.window.document.querySelector('#greet').textContent);

メリット: スクリプト実行可、DOM APIが充実

デメリット: Cheerioより重く遅い、完全なブラウザではない

正規表現やその他の解析手法の使いどころ

正規表現は「ピンポイント抽出」に便利ですが、HTML全体の解析には不向き。主な用途：

テキストからパターン抽出（メール、電話番号、価格など）
データのクリーニングやバリデーション
scriptタグやテキストブロックからのデータ抽出

例：テキストから数値を抽出

1const text = "Total sales: 1,234 units";
2const match = text.match(/([\d,]+)\s*units/);
3if (match) {
4  const units = parseInt(match[1].replace(/,/g, ''));
5  console.log("Units sold:", units);
6}

HTML全体の解析には必ずDOMパーサーを使いましょう。

動的サイト対応：Puppeteer、Playwright、ヘッドレスブラウザ

最近のウェブサイトはJavaScriptで描画されることが多く、欲しいデータが初期HTMLに含まれていない場合も。そんな時はヘッドレスブラウザの出番です。

Puppeteer

Google製のNode.jsライブラリ。Chrome/Chromiumを自動操作。

1const puppeteer = require('puppeteer');
2const browser = await puppeteer.launch();
3const page = await browser.newPage();
4await page.goto('https://example.com');
5const title = await page.$eval('h1', el => el.textContent);
6console.log(title);
7await browser.close();

メリット: Chrome完全再現、APIが分かりやすい、動的コンテンツに強い

デメリット: Chromium限定、リソース消費大

Playwright

Microsoft製の新しいライブラリ。Chromium、Firefox、WebKit対応。

1const { chromium } = require('playwright');
2const browser = await chromium.launch();
3const page = await browser.newPage();
4await page.goto('https://example.com');
5const content = await page.textContent('h1');
6console.log(content);
7await browser.close();

メリット: 複数ブラウザ対応、並列処理が得意、自動待機機能

デメリット: 学習コストやや高め、インストールサイズ大

Nightmare

Electronベースの古い自動化ツール。APIは簡単ですが、今はメンテナンスされていません。レガシー用途のみ推奨。

ヘッドレスブラウザの比較

項目	Puppeteer (Chrome)	Playwright (マルチブラウザ)	Nightmare (Electron)
対応ブラウザ	Chrome/Edge	Chrome, Firefox, WebKit	Chrome（旧）
パフォーマンス・拡張性	高速だが重い	高速・並列処理に強い	遅め・安定性低い
動的スクレイピング	優秀	優秀＋多機能	シンプルなサイト向け
メンテナンス状況	活発	非常に活発	廃止予定
おすすめ用途	Chrome専用スクレイピング	複雑・マルチブラウザ対応	レガシー・簡易用途

アドバイス: 新規・複雑案件はPlaywright推奨。Chrome専用ならPuppeteerも有力。Nightmareは古いスクリプトの保守用。

補助ツール：スケジューリング、環境管理、CLI、データ保存

実際のスクレイピングは「取得・解析」だけじゃありません。以下の補助ツールも活用しましょう：

スケジューリング：node-cron

定期実行を自動化。

1const cron = require('node-cron');
2cron.schedule('0 9 * * MON', () => {
3  console.log('毎週月曜9時にスクレイピング実行');
4});

環境管理：dotenv

APIキーや設定値をコード外で管理。

1require('dotenv').config();
2const apiKey = process.env.API_KEY;

CLIツール：chalk, commander, inquirer

chalk: コンソール出力の色付け
commander: コマンドライン引数の解析
inquirer: 対話式プロンプト

データ保存

fs: ファイル（JSON, CSV）への書き出し
lowdb: 軽量JSONデータベース
sqlite3: ローカルSQLデータベース
mongodb: 大規模用途のNoSQLデータベース

例：JSONファイルに保存

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

JavaScript/Node.jsによる従来型ウェブスクレイピングの課題

正直なところ、従来のスクレイピングには悩みも多いです。主な課題は：

学習コストが高い: DOMやセレクタ、非同期処理、ブラウザの癖まで理解が必要
保守が大変: サイト構造の変化でスクリプトが壊れやすい
拡張性に限界: サイトごとに個別スクリプトが必要で「万能」は難しい
データ整形が手間: 取得データのクリーニングや重複排除が大仕事
パフォーマンス制約: ブラウザ自動化は大規模処理に不向き
ブロック・対策: サイト側のbot対策やCAPTCHA、ログイン制限
法的・倫理的リスク: 利用規約やプライバシー、コンプライアンスの確認が必須

Thunderbitと従来型ウェブスクレイピングの違い：生産性が劇的に変わる

ここで本題。もしコードもセレクタも保守も不要だったら？

それを実現するのがです。私自身が共同創業者として開発したサービスですが、ビジネスユーザーが「データだけ欲しい」を叶えるために作りました。

Thunderbitの強み

項目	Thunderbit (AIノーコード)	従来型JS/Nodeスクレイピング
セットアップ	2クリック・ノーコード	スクリプト作成・デバッグ
動的コンテンツ	ブラウザ内で自動対応	ヘッドレスブラウザで手動対応
保守性	AIが自動で変化に追従	コードを都度修正
データ抽出	AIが項目を提案	手動でセレクタ指定
サブページ取得	1クリックで自動	サイトごとにループ処理
エクスポート	Excel, Sheets, Notion等	ファイル/DB連携を手動実装
後処理	要約・タグ付け・整形も自動	追加コードや外部ツール必要
利用者層	ブラウザが使えれば誰でも	開発者限定