Web スクレイピングは、プログラムによって Web サイトからデータを抽出するプロセスです。一般的な Web スクレイピング ツールの多くは Python や Node.js などのサーバー側テクノロジーを利用していますが、クライアント側 JavaScript のみを使用して Web をスクレイピングすることも可能です。この投稿では、Vanilla JS に関する既存の知識を活用して、新しいフレームワークを学習せずにスクレイピングを開始する方法を検討します。
なぜバニラ JavaScript でスクレイピングするのか?
Vanilla JS を使用したスクレイピングの主な利点のいくつかを以下に示します。
入場障壁が低い – すでに JavaScript を知っている場合は、新しい言語を学習しなくても、すぐに Web スクレイピングを始めることができます。 Vanilla JS スクレイピングの学習曲線は緩やかです。
フロントエンド重視 – 主にフロントエンド プロジェクトに取り組んでいる開発者にとって、Vanilla JS スクレイピングを使用すると、既存のスキルを再利用できます。
軽量 – クライアント側のスクレイピングにより、スクレイパーを実行するためのサーバーのセットアップと保守のオーバーヘッドが回避されます。
携帯性 – Vanilla JS スクレイパーはブラウザーで直接実行できるため、スクレイパーの共有とデプロイが簡単になります。
Stealth – クライアント側のスクレイピングは、サーバー側のスクレイピングと比較して、Web サイトによる検出とブロックが困難になる可能性があります。
したがって、JavaScript を使用して Web からデータの抽出を開始する簡単な方法が必要な場合は、Vanilla JS スクレイピングが最適なオプションです。次に、内部でどのように機能するかを見てみましょう。
クライアントサイド Web スクレイピングの仕組み
Vanilla JS を使用した Web スクレイピングの基本的な手順は次のとおりです。
fetch()ページの HTML をダウンロードします。DOM API を使用して HTML を解析し、必要なデータを抽出します。
抽出したデータを変換して保存します。
追加のページについては、手順 1 ～ 3 を繰り返します。
重要なのは、すべてがサーバー上ではなくブラウザ内で直接行われるということです。の fetch() このメソッドを使用すると、HTML をダウンロードするリクエストを行うことができ、DOM API には次のようなメソッドが提供されます。 document.querySelector() HTML を分析して必要なデータを取り出します。
JavaScript スクレイパー コードを実行することで、いつでもスクレイピング プロセスを開始できます。スクレイピング ロジックはクライアント側で実行され、セキュリティのために Web ページの残りの部分からサンドボックス化されます。
次に、動作する Vanilla JS スクレイパーの簡単な例を見てみましょう。
簡単な例
e コマース Web サイトからいくつかの商品データをスクレイピングしたいとします。プレーンな JavaScript を使用してそれを行う方法は次のとおりです。
// Fetch the HTML of the product page
fetch(‘https://example.com/products/1‘)
.then(response => response.text())
.then(html => {
// Parse the HTML with the DOM
const doc = new DOMParser().parseFromString(html, ‘text/html‘);
// Extract the product title
const title = doc.querySelector(‘h1.product-title‘).textContent;
// Extract the product description
const description = doc.querySelector(‘div.product-description‘).textContent;
// Extract the product price
const price = doc.querySelector(‘span.price‘).textContent;
// Store the data somewhere, e.g. log to console
const product = {
title,
description,
price
};
console.log(product);
});必要なのはこれだけです。 Vanilla JS のわずか数行で、製品ページから重要なデータをスクレイピングすることができました。
このアプローチの優れた点は、フロントエンド開発者がすでに使い慣れている標準的な Web プラットフォーム API を直接活用していることです。特別なスクレイピング ライブラリは必要ありません。
重要な手順をもう少し詳しく見てみましょう。
ページの取得
最初のステップは、スクレイピングするページの HTML をダウンロードすることです。 JavaScript から HTTP リクエストを行う最新の方法は、 APIをフェッチ.
我々は使用することができます fetch() パブリック URL の HTML をダウンロードするには:
fetch(‘https://example.com‘)
.then(response => response.text())
.then(html => {
// now we have the HTML of the page in the html variable
}); fetch() メソッドは、応答データを含む Response オブジェクトに解決される Promise を返します。電話をかける .text() 応答では、コンテンツをテキストとして解決する Promise を返します。
コールバックを提供します .then() HTML の準備ができたらいつでもスクレイピング ロジックを実行します。
HTMLの解析
HTML を取得したら、次のステップはそれを解析して必要なデータを抽出します。ブラウザーで HTML ドキュメントをプログラム的に分析するための最適な API は、 ドム API.
を使用して、HTML 文字列を解析してドキュメントを作成できます。 DOMParser クラス：
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html‘);この doc 変数には、解析された HTML を表すドキュメント オブジェクトが含まれるようになりました。
次のような DOM メソッドを使用できます querySelector() ドキュメントからデータを分析して抽出するには:
// Select elements
const headers = doc.querySelectorAll(‘h2‘);
// Get text content
const headerText = headers[0].textContent;
// Get attribute values
const linkUrl = doc.querySelector(‘a.link‘).getAttribute(‘href‘);DOM API は非常に広範であり、人間がブラウザーで Web ページを分析する方法をプログラムでシミュレートできます。
見る このガイド DOM API を使用して HTML ドキュメントを解析および走査する方法の詳細については、「DOM API を使用した HTML ドキュメントの解析と走査」を参照してください。
スクレイピングされたデータの保存
ページから必要なデータを抽出したら、次のステップはそれをどこかに保存することです。簡単なオプションには次のものがあります。
- コンソールへのログ – デバッグに適しています
- JavaScript 変数またはデータ構造への保存
- に保管する ローカルストレージ – セッション間で持続します
- AJAX 経由でサーバーに送信 – たとえば、スクレイピングされたデータをデータベースに保存するため
例：
// Log to console
console.log(extractedData);
// Store in memory
let scrapedData = [];
scrapedData.push(extractedData);
// Save to localStorage
localStorage.setItem(‘data‘, JSON.stringify(extractedData));
// Send to server
fetch(‘/api/data‘, {
method: ‘POST‘,
body: JSON.stringify(extractedData)
});これらは、スクレイピングされたデータをクライアント側で保持するための一般的なパターンです。
複数のページのスクレイピング
複数のページをスクレイピングするには、スクレイピング ロジックを繰り返し呼び出しできる関数でラップします。
async function scrapePage(url) {
// Fetch HTML
// Parse HTML
// Extract data
// Store data
}
const urls = [
‘https://example.com/page1‘,
‘https://example.com/page2‘,
// ...
];
// Sequentially scrape each page
for (const url of urls) {
await scrapePage(url);
}
// Or scrape multiple pages concurrently
await Promise.all(urls.map(scrapePage));各ページを順番にループしてスクレイピングすることも、次を使用することもできます。 Promise.all() 複数のページを同時にスクレイピングします。
これにより、Web サイト全体をプログラムでスクレイピングできるようになります。
より大規模なヘッドレス化へ
これまでの例では、スクレイピング ロジックをブラウザ内で直接実行しています。スケールとランタイムの制御をさらに強化するには、次のようなツールを使用して、ヘッドレス ブラウザ環境で JavaScript スクレイパーを実行できます。 人形.
Puppeteer は、DevTools プロトコルを介してプログラムで Chrome (または Chromium) を制御するための Node.js API を提供します。これにより、最新のブラウザ レンダリング エンジンを活用しながら、サーバー上でスクレイピング スクリプトを実行できるようになります。
以下は Puppeteer スクリプトの例です。
const puppeteer = require(‘puppeteer‘);
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘https://example.com‘);
// Extract data from page with page.$eval()
await browser.close();
})();そのため、Puppeteer がブラウザ環境を管理することで、クライアント側のスクレイパーをスケールアップし、クラウド内のサーバーで実行できます。
といったサービスもあります アピファイ & 劇作家クラウド 大規模なスクレイピング ジョブの実行に最適化されたホスト環境を提供します。
よくある落とし穴
Vanilla JS でページをスクレイピングするときに注意すべき一般的な課題をいくつか示します。
同一生成元ポリシー – 異なるドメイン上のページの応答データにはアクセスできません。プロキシや Apify などのサービスが役に立ちます。
非同期実行 – JavaScript の実行は非同期であるため、スクレイピング手順を適切に順序付ける必要があります。
動的ページコンテンツ – JavaScript 経由で読み込まれたコンテンツは、最初のページ読み込み時には存在しない可能性があります。次のようなイベントを待つ必要がある場合があります
DOMContentLoaded.ブラウザの違い – スクリプトはブラウザごとに異なる方法で実行される場合があります。複数のブラウザをテストすることをお勧めします。
スクレーパーの検出 – Web サイトは、ブラウザー フィンガープリンティングなどの方法でスクレイパーを検出してブロックしようとする場合があります。プロキシ/ユーザー エージェントをローテーションすると役に立ちます。
ロボット排除基準 – スクレイパーは robots.txt のような標準を尊重する必要があります。 RobotJS などのブラウザ拡張機能が役に立ちます。
したがって、これらは注意すべき点です。ただし、全体としては、Vanilla JavaScript は、Web のスクレイピングを開始するための非常に便利でアクセスしやすい方法を提供します。
スクレイピングの倫理
Web スクレイピング自体は一般的に合法ですが、スクレイピングされたデータを使用して行うことは合法ではない可能性があることに注意することが重要です。
倫理的かつ責任を持ってスクレイピングを行ってください。 Web サイトに過剰な負荷がかかることを避け、robots.txt および UI の制限を尊重し、Web サイトの利用規約に違反しないようにしてください。
公的にアクセス可能なデータのみを収集し、スクレイピングされた Web サイトからの個人データを決して共有しないでください。スクレイピングされたデータは、商業的利益ではなく、個人または研究目的にのみ使用してください。
これらの倫理原則を遵守することは、Web スクレイピングを有用な技術として確実に長持ちさせるのに役立ちます。
まとめ
クライアントサイド JavaScript を使用した Web スクレイピングについて説明した重要なポイントをいくつか示します。
Web スクレイピングには、Web サイトからプログラムによってデータを抽出することが含まれます。
Vanilla JavaScript は、標準のブラウザ API を使用してスクレイピングを開始するためのアクセス可能な方法を提供します。
Fetch API はページ HTML を取得でき、DOM API はデータを解析して抽出します。
保存、変換、反復により、Web サイトを大規模にスクレイピングできます。
Puppeteer のようなヘッドレス ブラウザは、より強力なパワーと制御を提供します。
Web スクレイピングでは倫理原則に従うことが重要です。
したがって、既存の Vanilla JS スキルを活用することは、Web ページから有用なデータの抽出を開始する簡単な方法です。基本的なテクニックを理解すれば、限界は無限です!
幸せな（倫理的な）スクレイピングを！
