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

初めてウェブサイトから商品データを抜き出そうとしたときのこと、今でも鮮明に覚えています。ランニングシューズがずらっと並ぶページを見て、「これくらいなら名前と値段をスプレッドシートにまとめるのは楽勝だろう」と思っていました。でも、数時間後にはJavaScriptのエラーや複雑なセレクタに頭を抱え、ウェブスクレイパーを一から作った経験のある人たちを心からリスペクトしていました。

もしあなたも同じような経験があるなら——営業やEC、オペレーションの現場で「リアルタイムのデータをサクッと集めて業務に活かしたい」と思ったことがあるなら——それは全然珍しいことじゃありません。最近はウェブスクレイピングのニーズが爆発的に増えています。実際、で、2030年にはさらに倍増する見込みです。ただ、従来のスクレイピングツールはある程度のITスキルが必要なのも事実。そこで今回は、ガチなエンジニア向けの（Cypress）と、ノーコードでAIが全部やってくれるの2つの方法を紹介します。題材はです。

JavaScriptで腕試ししたい人も、コードはちょっと…というビジネスユーザーも、このガイドを読めば週末を潰さずに必要なデータを手に入れられます。

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

まずは基本から。ウェブスクレイピングとは、ウェブサイトからデータを自動で抜き出す技術のこと。商品名や価格、連絡先などを手作業でコピペする代わりに、専用のソフトがその作業を全部やってくれます。

じゃあ、なぜビジネスで重要なのか？今やデータは「新しい石油」とも言われています。営業やEC、オペレーションの現場では、ウェブスクレイピングを使ってこんなことができます：

• リード獲得：ディレクトリやSNSから連絡先を自動収集
• 競合価格や商品動向のチェック：実際、
• 顧客の声の分析：レビューや評価を抜き出して傾向をつかむ
• 面倒なリサーチ作業の自動化：本来なら何時間もかかる作業が一瞬で終わる

しかも、その効果はバッチリ。が「公開ウェブデータの活用で意思決定が速く、正確になった」と答えています。つまり、ウェブスクレイピングを使わないのは、ビジネスチャンスや洞察をみすみす逃しているのと同じなんです。

Cypressとは？人気のウェブスクレイピングツールを紹介

ここからはツールの話。CypressはもともとウェブアプリのE2Eテスト用に作られたオープンソースのフレームワーク。ボタンをクリックしたり、フォームに入力したり、ウェブサイトの動作確認を自動化できる「ロボット」みたいな存在です。でも、Cypressは実際のブラウザ上で動くので、JavaScriptで動的に生成されるページにも強く、ウェブスクレイピングにもよく使われています。

Python製のBeautifulSoupやScrapyなど、他のスクレイピングツールと比べるとどうでしょう？

• Cypress：動的なJavaScriptコンテンツの抽出が得意。JavaScriptやNode.jsの知識が必要で、エンジニア向け。
• Python系スクレイパー：BeautifulSoupやScrapyは静的なHTMLの大量クロールに最適。エコシステムも豊富だけど、JavaScriptで生成されるページはちょっと苦手。

JavaScriptやQAテストに慣れている人なら、Cypressはかなり頼れる選択肢。でも、コードが苦手な人も大丈夫。ノーコードの方法も後で紹介します。

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

それでは、を例に、Cypressでスクレイパーを作ってみましょう。目標は、商品名・価格・画像・リンクをきれいにまとめて抜き出すことです。

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

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

1mkdir adidas-scraper
2cd adidas-scraper
3npm init -y
4npm install cypress --save-dev

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

1npx cypress open

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

2. サイトの構造を調べて、抜き出す対象を特定

次は調査タイム。を開いて、商品部分を右クリックして「検証」を選びます。各商品はカード状の要素で、名前・価格・画像・リンクが入っています。

例えば、こんなHTML構造が見つかるはず：

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

.gl-priceみたいなクラス名や、HTMLのパターンをよく観察しましょう。ここでCypressに「どの情報を取るか」を指示します。

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

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

1// cypress/e2e/adidas-scraper.cy.js
2describe('Scrape Adidas Running Shoes', () => {
3  it('collects product name, price, image, and link', () => {
4    cy.visit('<https://www.adidas.com/us/men-running-shoes>');
5    const products = [];
6    cy.get('a[href*="/us/"][href*="running-shoes"]').each(($el) => {
7      const name = $el.find('*:contains("Running Shoes")').text().trim();
8      const price = $el.find('.gl-price').text().trim();
9      const imageUrl = $el.find('img').attr('src');
10      const link = $el.attr('href');
11      products.push({ name, price, image: imageUrl, link: `https://www.adidas.com${link}` });
12    }).then(() => {
13      cy.writeFile('cypress/output/adidas_products.json', products);
14    });
15  });
16});

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

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

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

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

スクリプトを実行（CypressのGUIまたはnpx cypress run）すると、cypress/output/adidas_products.jsonにデータが保存されます。中身はこんな配列です：

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

このJSONをCSVに変換したり、Excelで分析したり、BIツールに取り込んだりできます。自動化すれば、毎日価格を監視することも可能です。

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

正直、ウェブスクレイピングは簡単じゃありません。Cypressでよくある課題と対策をまとめました：

• JavaScriptで生成されるコンテンツ：Cypressは動的な要素にも対応しますが、要素の読み込み待ちやページのスクロールが必要な場合も。cy.wait()やスクロールコマンドを活用しましょう。
• ボット対策：一部のサイトはユーザーエージェントのチェックやリクエスト制限でボットをブロックします。Cypressは実ブラウザで動くので比較的回避しやすいですが、厳しい対策にはプロキシやヘッダー偽装など高度な工夫が必要です。
• セレクタの不安定さ：AdidasのHTML構造やクラス名が変わると、スクリプトが動かなくなることも。定期的なメンテナンスが必要です。
• ページネーション：多くの商品ページは複数ページに分かれています。「次へ」ボタンをクリックし、全ページのデータを集約するロジックが必要です。
• エラーハンドリング：Cypressはテスト用ツールなので、要素が見つからないとエラーで止まりがち。存在しない要素への対応も考慮しましょう。

「ただ靴のリストが欲しいだけなのに、まるで情報工学の授業みたい…」と感じた人もいるはず。そんなときはThunderbitの出番です。

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

Node.jsやセレクタ、JavaScriptのデバッグに悩みたくない人には、のAIウェブスクレイパーChrome拡張がぴったり。ビジネスユーザー向けに作られていて、コードも設定も一切不要。欲しいデータをすぐにゲットできます。

Thunderbitのポイント：

• コーディングやセレクタ設定不要：クリックするだけでAIが自動で抽出
• 1つのテンプレートで色々なサイトに対応：AIがページレイアウトを自動で認識
• ブラウザ・クラウド両対応：用途に合わせて使い分けOK
• ページネーションやサブページも自動処理：複数ページや商品詳細ページも一括で取得
• 無料エクスポート：Excel、Google Sheets、Airtable、Notionなどにワンクリックで出力。追加料金なし

それでは、ThunderbitでAdidasページをスクレイピングする流れを見てみましょう。

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

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

まずはしましょう。30秒もかからず完了します。

無料アカウントを作れば、トライアル（10ページ分）や無料プラン（月6ページ分）で、すぐに実務で使えます。クレジットカードも不要です。

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

• を開く
• ブラウザのThunderbitアイコンをクリックしてサイドバーを表示
• **「AIサジェストフィールド」**を押すと、AIがページを解析し、商品名・価格・画像・リンクなどの項目を自動で検出。プレビュー表で内容を確認できます
• 列名の変更や新しい項目の追加もワンクリック。たとえば「カラー数も抽出して」と自然な日本語で指示することも可能
• **「スクレイピング開始」**をクリック。Thunderbitが全データを抜き出し、複数ページも自動で巡回。商品詳細ページの情報もサブページ機能で取得できます

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

抽出が終わったら、Thunderbitサイドバーの表で内容を確認できます。

• Excel、Google Sheets、Airtable、Notionへワンクリックでエクスポート
• CSVやJSON形式でダウンロードもOK
• 画像、メールアドレス、電話番号など色々なデータ型に対応

もちろん、エクスポートは完全無料。「途中で有料化」なんて心配もありません。

さらに詳しい使い方はやのチュートリアルも参考にしてください。

CypressとThunderbitを比較：どちらのウェブスクレイピングツールが最適？

CypressとThunderbitを比べてみましょう。下の表にまとめました：

まとめると、Cypressは細かい制御ができ、Thunderbitはスピードと手軽さが魅力です。開発者でカスタマイズ重視ならCypress、すぐにデータが欲しい・上司に急ぎで頼まれた…という人にはThunderbitが最適です。

まとめ：自分に合ったウェブスクレイピング手法を選ぼう

• ウェブスクレイピングは現代ビジネスに不可欠。競合調査、リード獲得、市場分析など幅広く活用できます。
• Cypressは開発者向けの強力なツール。動的サイトやカスタムワークフローに最適ですが、学習コストやメンテナンスが必要です。
• Thunderbitは誰でも使えるAI搭載Chrome拡張。2クリックでスクレイピングが完了し、ページネーションやサブページも自動対応。主要ツールへのエクスポートも無料です。
• Cypressがおすすめなのは、柔軟性を重視し、コードを書くのが苦でない方。
• Thunderbitがおすすめなのは、時間を節約したい、技術的な手間を避けたい、営業・EC・マーケ・オペレーション担当の方。

もっと詳しく知りたい人は、でやなどのチュートリアルもチェックしてみてください。

もしランニングシューズの一覧を前に「このデータ、どうやって表にまとめよう…」と悩んだら、もう選択肢はあります。ハッピー・スクレイピング！

よくある質問

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

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

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

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

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

はい、ThunderbitはAI搭載のChrome拡張で、数クリックでデータを抽出できます。コードやセレクタ設定は一切不要です。

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