Cypressを使ったウェブスクレイピング徹底ガイド

商品情報をウェブサイトから表にまとめる作業は、対象件数が少なく見えても、JavaScriptで生成されるページや複雑なセレクタがあると想定以上に時間がかかります。営業、EC、オペレーションの担当者にとっては、商品名や価格を継続的に取得し、スプレッドシートで扱える状態にすることが課題になりやすいところです。

私も初めてウェブサイトから商品データを抽出したとき、ランニングシューズの名前と価格をまとめるだけなら簡単だと考えていました。しかし、実際にはJavaScriptのエラーやセレクタの調整が必要になり、スクレイパーを一から構築する難しさを実感しました。

ウェブデータを業務で活用する需要は拡大しており、ウェブスクレイピングソフトの市場規模はすでに10億ドル超えで、2032年にはさらに倍増する見込みです。一方、従来型のツールを使うには、一定の開発知識が必要になる場合があります。

そこで本記事では、JavaScriptで処理を細かく制御できるCypressと、AIの支援を受けながらノーコードで抽出項目を設定できるThunderbitの2つの方法を紹介します。題材はAdidasのメンズランニングシューズページです。

Cypressの環境構築からJSONへの出力までを順に説明し、後半ではビジネス担当者がThunderbitで同じ種類のデータを取得する流れと、両者を選ぶ際の判断基準を整理します。

ウェブスクレイピングとは？ビジネスで欠かせない理由

ウェブスクレイピングとは、ウェブサイト上の商品名、価格、連絡先などの情報を自動で抽出し、表やファイルとして扱える形に整理する技術です。手作業でのコピー＆ペーストを減らし、繰り返し発生するデータ収集を効率化できます。

AIであらゆるウェブサイトからデータを抽出 Get Started Free

ビジネスでは、取得するデータと利用目的を決めておくことで、次のような業務に活用できます。

リード獲得：ディレクトリやSNSから、営業対象の整理に必要な連絡先を収集
競合価格や商品動向のチェック：実際、EC企業の約50%が実践中
顧客の声の分析：レビューや評価を抽出し、傾向を把握
リサーチ作業の自動化：定型的な収集作業にかかる時間を短縮

また、企業の73%が「公開ウェブデータの活用で意思決定が速く、正確になった」と回答しています。ただし、成果は取得元、データ品質、更新頻度、社内での検証方法によって異なります。重要なのは、データを集めること自体ではなく、業務上の判断に使える状態で継続的に管理することです。

Cypressとは？ウェブスクレイピングに利用する際の特徴

Cypressは、もともとウェブアプリのE2Eテスト向けに開発されたオープンソースのフレームワークです。ボタンのクリック、フォーム入力、画面遷移など、ブラウザ上の操作を自動化できます。実際のブラウザ環境で動作するため、JavaScriptによって動的に生成されるページの確認やデータ抽出にも利用できます。

Python製のBeautifulSoupやScrapyなどと比較すると、主な違いは次のとおりです。

Cypress：動的なJavaScriptコンテンツを扱いやすく、ブラウザ操作を含む処理に向いています。JavaScriptやNode.jsの知識が必要なため、主に開発者向けです。
Python系スクレイパー：BeautifulSoupやScrapyは、静的なHTMLの解析や多数のページを処理する構成に向いています。JavaScriptで生成されるページを扱う場合は、別のブラウザ自動化手段との組み合わせが必要になることがあります。

JavaScriptやQAテストに慣れており、処理を細かく制御したい場合は、Cypressが候補になります。コードを使わずに一覧データを取得したい場合は、後半で紹介するノーコードの方法も比較できます。

実践編：CypressでAdidasランニングシューズのデータを抜き出す

ここからは、Adidasのメンズランニングシューズページを例に、Cypressでスクレイパーを構築します。取得する項目は商品名・価格・画像・リンクで、最終的にJSONファイルへ書き出すことを目標とします。

実行前には、対象サイトの利用規約、取得データの利用目的、著作権や個人情報の有無、アクセス頻度を整理しておくことが重要です。テスト時もリクエストを必要以上に繰り返さず、対象サイトの運用を妨げない条件で進めます。

1. Cypress環境のセットアップ

まずはNode.jsとnpmをインストールしましょう。準備ができたら、ターミナルで以下を実行します：

mkdir adidas-scraper
cd adidas-scraper
npm init -y
npm install cypress --save-dev

これで新しいプロジェクトができて、Cypressがローカルにインストールされます。初回起動は：

npx cypress open

Cypressがcypress/ディレクトリとサンプルテストを作ってくれます。不要なサンプルは消して、cypress/e2e/adidas-scraper.cy.jsみたいなテストファイルを作りましょう。

2. サイト構造を調べ、抽出対象を特定する

次に、Adidasのページを開き、商品部分を右クリックして「検証」を選びます。開発者ツールで各商品カードを確認し、商品名・価格・画像・リンクに対応する要素と属性を特定します。

以下は、構造を説明するためのHTML例です。実際のタグ、クラス名、商品名、価格はページの更新によって異なる場合があります。

<div class="product-card">
   <a href="/us/adizero-sl2-running-shoes/XYZ123.html">
      <img src="..." alt="Adizero SL2 Running Shoes"/>
      <div class="product-price">$130</div>
      <div class="product-name">Adizero SL2 Running Shoes -- Men's Running</div>
   </a>
</div>

.gl-priceのようなクラス名だけに依存せず、商品リンクのURLパターンや画像属性など、対象ページで継続して識別できる要素を比較します。ここで特定した構造が、次のCypressスクリプトで指定するセレクタの入力になります。

3. Cypressでデータを抜き出すコード例

以下はCypressのサンプルスクリプトです：

// cypress/e2e/adidas-scraper.cy.js
describe('Scrape Adidas Running Shoes', () => {
  it('collects product name, price, image, and link', () => {
    cy.visit('<https://www.adidas.com/us/men-running-shoes>');

    const products = [];
    cy.get('a[href*="/us/"][href*="running-shoes"]').each(($el) => {
      const name = $el.find('*:contains("Running Shoes")').text().trim();
      const price = $el.find('.gl-price').text().trim();
      const imageUrl = $el.find('img').attr('src');
      const link = $el.attr('href');
      products.push({ name, price, image: imageUrl, link: `https://www.adidas.com${link}` });
    }).then(() => {
      cy.writeFile('cypress/output/adidas_products.json', products);
    });
  });
});

このスクリプトのポイントは：

cy.visit()でページを開く
cy.get()でAdidasのURLパターンに合う商品リンクを取得
.each()で各商品をループし、名前・価格・画像・リンクを抜き出す
データを配列にまとめて、JSONファイルに書き出す

Adidasのサイト構造が変わったら、セレクタを調整してください。

4. データのエクスポートと活用

CypressのGUIまたはnpx cypress runでスクリプトを実行すると、設定したcypress/output/adidas_products.jsonにデータが保存されます。以下は出力形式の例です。

[
  {
    "name": "Adizero SL2 Running Shoes Men's Running",
    "price": "$130",
    "image": "<https://assets.adidas.com/images/w_280,h_280,f_auto,q_auto:sensitive/.../adizero-SL2-shoes.jpg>",
    "link": "<https://www.adidas.com/us/adizero-sl2-running-shoes/XYZ123.html>"
  },
  ...
]

このJSONは、必要に応じてCSVへ変換し、ExcelやBIツールで分析できます。定期実行の仕組みを用意すれば価格監視にも利用できますが、実行間隔、サイト側の更新時刻、取得失敗時の再処理を決め、前回結果との差分を検証できるようにしておくことが重要です。

Cypressでウェブスクレイピングする際のよくある課題

Cypressでウェブスクレイピングを運用する際は、ページの読み込み方法やサイト構造の変化を前提に設計する必要があります。主な課題と対策は次のとおりです。

JavaScriptで生成されるコンテンツ：要素の遅延読み込みやスクロール後の描画があるページでは、cy.wait()やスクロールコマンドが必要になる場合があります。固定時間の待機だけでなく、対象要素が表示されたことを条件に次の処理へ進む設計も検討します。
ボット対策：一部のサイトでは、ユーザーエージェントのチェックやリクエスト制限によって自動アクセスが制限されます。Cypressが実ブラウザで動作しても、アクセスが許可されるとは限りません。プロキシやヘッダー偽装による制限回避を前提にせず、対象サイトの利用規約と許容されるアクセス方法を照合し、頻度を抑えて運用します。
セレクタの不安定さ：AdidasのHTML構造やクラス名が変わると、スクリプトが動かなくなることがあります。失敗を検知できるテストを残し、ページ変更時にセレクタを見直します。
ページネーション：商品ページが複数ページに分かれている場合は、「次へ」ボタンの終了条件を決め、重複を除きながら各ページのデータを集約するロジックが必要です。
エラーハンドリング：Cypressはテスト用ツールのため、要素が見つからないと処理が停止することがあります。欠損値の扱い、再試行の条件、失敗時に残すログを事前に決めておきます。

このような実装や保守に時間をかけにくい場合は、次に紹介するThunderbitのようなノーコードツールも比較対象になります。

難しすぎる？Thunderbitなら2クリックでウェブスクレイピング

Node.js、セレクタ、JavaScriptのデバッグを避け、商品一覧などの定型データを短時間で表にしたい場合は、ThunderbitのAIウェブスクレイパーChrome拡張が候補になります。ビジネスユーザー向けに設計されており、対象ページでAIが提案した抽出項目をプレビューし、必要に応じて列を調整してから実行できます。

Thunderbitの主な機能は次のとおりです。

コーディングやセレクタ設定不要：標準的な抽出では、AIが提案する項目を利用でき、手作業でコードを書く工程を減らせます
1つのテンプレートで色々なサイトに対応：AIがページレイアウトを解析しますが、サイト構造や取得項目によって列の調整が必要になる場合があります
ブラウザ・クラウド両対応：利用できる実行方式は、対象ページ、処理量、プラン条件に応じて選択します
ページネーションやサブページも自動処理：対応するページ構造と設定では、複数ページや商品詳細ページの情報をまとめて取得できます
無料エクスポート：対象プランで利用できる範囲内で、Excel、Google Sheets、Airtable、Notionなどへ出力できます

次に、ThunderbitでAdidasページからデータを抽出する具体的な流れを説明します。

実践編：ThunderbitでAdidasデータを抜き出す手順

1. Thunderbit Chrome拡張のインストール

最初に、ChromeウェブストアからThunderbitをインストールします。通信環境や端末によって異なりますが、インストール操作自体は30秒程度で完了します。

無料アカウントでは、トライアル（10ページ分）と無料プラン（月6ページ分）が案内されており、対象プランではクレジットカードなしで開始できます。利用できるページ数や登録条件はプラン改定の影響を受けるため、利用時に表示される条件と照合します。

Thunderbitでウェブスクレイピングを無料体験

2. AIサジェスト機能でデータ抽出

Adidasのメンズランニングシューズページを開く
ブラウザのThunderbitアイコンをクリックしてサイドバーを表示
**「AIサジェストフィールド」**を押すと、AIがページを解析し、商品名・価格・画像・リンクなどの候補項目を提示します。プレビュー表で元ページと照合し、不要な列や誤認識された値を修正します
列名の変更や新しい項目の追加にも対応しています。たとえば「カラー数も抽出して」と自然な日本語で指示できますが、ページ構造や項目の表記によってはプロンプトや列設定の調整が必要です
**「スクレイピング開始」**をクリックして抽出を実行します。ページネーションや商品詳細ページのサブページ取得は、対象ページの構造と設定が対応している場合に利用できます。完了後は件数、欠損、重複を見直します

3. データのエクスポートと活用

抽出が終わったら、Thunderbitサイドバーの表で件数、欠損、重複を見直してから出力します。

Excel、Google Sheets、Airtable、Notionへのエクスポートは、現在のプランと接続設定で利用できる出力先から選択
CSVやJSON形式は、画面上で利用できる形式に応じてダウンロード
画像、メールアドレス、電話番号などのデータ型は、対象ページの記載内容と抽出設定に応じて処理

エクスポートの料金条件や利用上限は、プランや出力先によって異なる場合があります。運用前に、必要な形式、件数、更新頻度と現在のプラン条件を比較します。

さらに詳しい使い方はThunderbitクイックスタートガイドやThunderbitブログのチュートリアルも参考にしてください。

CypressとThunderbitを比較：用途別の選び方

CypressとThunderbitは、必要な制御範囲、担当者の技術スキル、処理量によって向いている場面が異なります。主な判断材料を次の表に整理します。

項目	Cypress（コード型スクレイパー）	Thunderbit（ノーコードAIスクレイパー）
セットアップ難易度	Node.jsやnpm、JavaScriptの知識が必要。非エンジニアにはややハードル高め。	Chrome拡張をインストールしてログインし、対応するページで抽出項目を設定する。基本操作ではコード不要。
必要な技術スキル	JavaScriptやDOM/CSSセレクタの理解が必要になる。	標準的な抽出ではコーディング不要。自然言語やクリック操作を使い、結果に応じて列を調整する。
導入スピード	要件に応じたスクリプト作成やデバッグに数時間かかることも。	対象ページと項目が標準的であれば数クリックで開始できる。ページネーションやサブページの利用可否はページ構造と設定による。
柔軟性	ロジックの自由度が高く、ログインやAPI連携を含む処理を実装できる。CAPTCHAがあるサイトでは、利用規約とアクセス制御に沿った設計が必要。	標準的なパターンに最適化。AIが多くのサイトに対応するが、特殊なワークフローは手動調整が必要な場合も。
変化への強さ	サイトのHTMLが変わるとスクリプト修正が必要。	AIがレイアウトの小さな変化への対応を支援するが、変更内容によっては項目や設定の見直しが必要。Thunderbitのモデルは随時アップデート。
スケーラビリティ	中規模まで対応可能だが、ブラウザベースは大規模にはやや不向き。	クラウド実行に対応し、対象サイトとプラン条件が合えば数百ページの処理も検討できる。利用量はクレジット条件に従う。
おすすめユーザー	精密な制御やカスタムロジックが必要な開発者・技術者向け。単発のデータ収集や複雑なワークフローを設計したい場合に向いている。	価格調査やリード獲得、リスト抽出などの反復作業を効率化したいビジネスユーザー向け。ECやディレクトリ、レビューサイトで小規模に検証したい場合に向いている。

細かな処理条件や外部システムとの連携を実装したい場合はCypress、コードを書かずに一覧データの取得方法を検証したい場合はThunderbitが候補になります。実際の選定では、対象ページで取得精度、保守工数、処理量、プラン条件を比較します。

AIを使って2025年にAmazonの商品とレビューをスクレイピングする方法 Get Started Free

まとめ：用途に合ったウェブスクレイピング手法を選ぶ

ウェブスクレイピングは、競合調査、リード獲得、市場分析など、繰り返し発生するデータ収集を効率化したい場合に役立ちます。
Cypressは、動的サイトやカスタムワークフローをコードで細かく制御したい開発者向けです。導入時には学習コストと継続的なメンテナンスを見込みます。
Thunderbitは、非エンジニアが商品一覧などを表にしたい場合に向くAI搭載Chrome拡張です。対応するページでは2クリックで抽出を開始でき、ページネーション、サブページ、主要ツールへのエクスポートはページ構造、設定、プラン条件に応じて利用できます。
Cypressが向いているのは、柔軟性を重視し、コードで例外処理や連携を実装したい場合です。
Thunderbitが向いているのは、営業・EC・マーケティング・オペレーションの担当者が、技術的な準備を抑えて定型データの取得を試したい場合です。

さらに詳しい手順は、ThunderbitブログのAIを使って2025年にAmazonの商品とレビューをスクレイピングする方法やAIを使ってWebサイトのデータをExcelに取り込む方法でも紹介しています。

選定に迷う場合は、まず同じ1ページをCypressまたはThunderbitで処理し、取得できた列、欠損や重複、出力形式、設定と保守にかかった時間を比較すると判断しやすくなります。

ThunderbitでAdidas商品データを抽出

よくある質問

1. Cypressとは？ウェブスクレイピングにどう使える？

CypressはJavaScriptベースのテストツールで、動的なウェブサイトともやり取りできるため、JavaScriptで生成されるコンテンツの抽出にも適しています。

2. Cypressでウェブスクレイピングする際の主な課題は？

HTML構造の変化、遅延読み込み、ボット対策、複雑なページでのページネーションや要素欠損への対応などが挙げられます。

3. コーディング不要でウェブサイトを簡単にスクレイピングする方法は？

ThunderbitはAI搭載のChrome拡張で、対象ページが標準的な構造であれば、数クリックでデータ抽出を開始できます。基本的な抽出ではコードやセレクタを手作業で設定する必要はありませんが、AIが提案した列と元ページを照合し、必要に応じて項目を調整します。

さらに詳しく知りたい方はこちら：

AIウェブスクレイパーを試す Get Started Free

AIでデータを抽出

Google Sheets、Airtable、Notionへ簡単にデータを移行できます

Chrome Store Rating

PRODUCT HUNT#1 Product of the Week