上級フロントエンド開発エンジニアのためのクローラー実践ガイド

導入：

今日のインターネット時代では、ネットワーク情報の爆発的な増加により、膨大なデータリソースが私たちに提供されています。ただし、これらのデータから有用な情報を効果的に抽出する方法は困難な課題でした。自動データ抽出ツールとして、クローラーテクノロジーはフロントエンド開発エンジニアの日常業務に不可欠な部分になっています。

フロントエンドクローラーは強力なデータ収集ツールとして、インターネット上のデータを収集し、Web コンテンツをクロールし、データの分析と処理を実行できます。この記事では、フロントエンドクローラーの原理、一般的なツール、テクニックを詳細に分析し、読者が実際のアプリケーションケースを通じてフロントエンドクローラーのスキルをゼロから習得できるように支援します。

1. フロントエンドクローラーの概要

フロントエンドクローラーとは、フロントエンド環境で JavaScript などのフロントエンドテクノロジを使用して実装された Web クローラーを指します。バックエンドクローラーと比較して、フロントエンドクローラーは、Web ページからのデータの抽出、データの処理、およびデータの表示に重点を置いています。

2. フロントエンドクローラの原理とプロセス

1. Web ページのリクエストとレスポンス

HTTPリクエストライブラリを使用して、Web ページのコンテンツを取得するリクエストを送信します。
サーバーの応答を受信し、HTMLソースコードを取得します。

2. HTMLを解析する

HTML解析ライブラリを使用してHTML ソースコードを解析し、ターゲットデータを抽出します。
CSSセレクターなどをXPath介して要素を配置します。

3. データの処理と保存

キャプチャしたデータに対して处理と清洗を実行します转换。
データの保存には、メモリ、ファイル、データベースを使用できます。

概要: http リクエスト (リクエスト) を送信 ----> データを返す --> データを解析 (データクリーニング、bs4、re...) ----> データベースに保存 (ファイル、エクセル、mysql、redis、mongodb)

3. フロントエンドクローラーの共通ツールとフレームワーク

Axios:HTTPリクエストを送信し、サーバーの応答を取得するために使用されます。
Cheerio: HTML ソースコードjQuery用の文法ベースの解析ライブラリ解析。
Puppeteer:ブラウザ環境の実行、サポート、その他の機能Headless Chrome Nodeをシミュレートできるライブラリ。JavaScriptDOM操作页面截图
Request-Promise: リクエストを簡単に送信し、レスポンスを処理できるリクエストライブラリに基づいていPromiseますHTTP。

4. フロントエンドクローラのヒントと注意事項

User-Agent设置: Web サイトによってクローラーとして認識されるのを避けるために、ブラウザーをシミュレートしてリクエストを送信します。
请求间隔设置: 短期間に大量のリクエストを送信することを避け、ターゲット Web サイトの負荷を軽減します。
定位元素技巧:CSSセレクターまたはXPathその他の方法を使用して、ターゲット要素を正確に見つけます。
页面渲染与动态内容处理: PuppeteerJavaScript などのツールを使用して、JavaScript レンダリングを必要とするページや動的コンテンツを処理します。
数据存储与合法性: 取得したデータの合法性検証とデータ保存方法の選択に注意してください。

5. 実際の適用事例

1. ニュースデータのキャプチャ: フロントエンドクローラーを使用して、複数のニュース Web サイトから最新のニュースタイトル、内容、リリース時刻を自動的にキャプチャし、定期的に更新し、独自のニュース集約 Web サイトを生成します。

Axios ライブラリを使用して HTTP リクエストを送信し、ニュース Web サイトの Web コンテンツを取得します。

const axios = require('axios');

axios.get('http://example.com/page')
  .then(response => {
    
    
    console.log(response.data);  // 获取到的网页内容
  })
  .catch(error => {
    
    
    console.error(error);
  });

Cheerio などの HTML 解析ライブラリを使用して、キャプチャした HTML ソースコードを解析し、ニュースタイトル、内容、リリース時間などの情報を抽出します。

const cheerio = require('cheerio');

const html = '<div><h1>Hello, World!</h1></div>';
const $ = cheerio.load(html);
const title = $('h1').text();

console.log(title);  // 输出：Hello, World!

抽出されたデータを処理、クリーンアップ、変換するには、JavaScript またはその他のデータ処理ツールを使用できます。

const puppeteer = require('puppeteer');

(async () => {
    
    
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://example.com');

  // 等待特定元素加载完成
  await page.waitForSelector('h1');

  const title = await page.$eval('h1', elem => elem.textContent);

  console.log(title);  // 输出网页中的标题

  await browser.close();
})();

VueやReactなどのフロントエンドフレームワークを利用してニュースアグリゲーションWebサイトを作成し、取得したデータを表示・表示することができます。
スケジュールされたタスクやトリガーされたイベントを通じてデータを定期的に更新し、Web サイトのコンテンツを最新の状態に保ちます。

2. 価格の比較と監視: 複数の電子商取引 Web サイトから商品データを取得することで、異なる Web サイトの価格、レビュー、その他の情報を比較し、ユーザーが最も有利な商品を選択できるようにします。

import requests
from bs4 import BeautifulSoup
import time

def get_product_price(url):
    response = requests.get(url)
    soup = BeautifulSoup(response.text, 'html.parser')

    # 使用BeautifulSoup解析HTML源码，提取产品价格
    price_element = soup.find('span', class_='price') # 假设价格信息在<span class="price">中
    price = price_element.get_text().strip()

    return price

def compare_prices(product1, product2):
    if product1["price"] < product2["price"]:
        return f"{
      
      product1['name']}更便宜"
    elif product1["price"] > product2["price"]:
        return f"{
      
      product2['name']}更便宜"
    else:
        return "两个产品价格相同"

def monitor_prices(products):
    while True:
        for product in products:
            price = get_product_price(product["url"])
            if product["price"] != price:
                print(f"{
      
      product['name']}的价格发生变化！原价：{
      
      product['price']}，现价：{
      
      price}")
                product["price"] = price
        time.sleep(60)  # 每隔60秒监测一次价格

# 定义要监测的产品列表
products = [
    {
    
    "name": "产品1", "url": "http://example.com/product1", "price": ""},
    {
    
    "name": "产品2", "url": "http://example.com/product2", "price": ""},
    {
    
    "name": "产品3", "url": "http://example.com/product3", "price": ""}
]

# 初始获取产品的价格
for product in products:
    product["price"] = get_product_price(product["url"])
    print(f"{
      
      product['name']}的初始价格：{
      
      product['price']}")

# 监测价格变化
monitor_prices(products)

上記のコード例では、3 つの関数を定義しました。
1. get_product_price(): この機能は、特定の製品 Web ページ上の価格情報を取得するために使用されます。
2. compare_prices(): この関数は、2 つの製品の価格を比較し、比較結果を返すために使用されます。
3. monitor_prices(): この機能は、商品の価格変動を監視するために使用されます。無限ループでは、最初に現在の製品の価格を取得し、次に 60 秒ごとに価格を再取得して、以前の価格と比較します。価格が変更になった場合は商品名、旧価格、新価格が印字されます。
products次に、製品名、URL、初期価格などの監視対象の製品情報を含む製品リストを定義します。
次に、get_product_price()関数を使用して各製品の初期価格を取得し、出力します。
monitor_prices()最後に、価格変化の監視を開始する関数を呼び出します。無限ループでは、60 秒ごとに製品の価格を取得し、前の価格と比較します。価格が変更になった場合は商品名、旧価格、新価格が印字されます。

また、Webページを頻繁にクロールして価格を監視する運用については、Webサイトの利用規約やプライバシーポリシーを遵守し、必要に応じて適切なクロール間隔を設定し、Webサイトに過度の負担をかけないようにしてください。

3. データ分析と視覚化: フロントエンドクローラーを使用して特定分野のデータを収集し、データ視覚化ツールと組み合わせたデータ処理と分析を通じて、意思決定と洞察に役立つ直感的なチャートとレポートを生成できます。

フロントエンドクローラーを使用して、株価、気象データなどの特定のフィールドのデータをキャプチャします。
Puppeteer他のツールを使用してJavaScript、レンダリングが必要なページや動的コンテンツを処理できます。
キャプチャしたデータをクリーンアップ、変換、分析するには、JavaScriptまたは他のデータ処理ツールを使用できます。
D3.jsなどのデータ視覚化ライブラリと組み合わせるとEcharts、グラフやレポートなどの視覚的な表示効果を生成できます。
データ分析結果はフロントエンドアプリケーションに埋め込むことも、ユーザーが対話してクエリを実行できるようにダッシュボードを作成することもできます。

const puppeteer = require('puppeteer');
const fs = require('fs');
const dataProcessing = require('./dataProcessing');
const dataVisualization = require('./dataVisualization');

(async () => {
    
    
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://example.com');

  // 在页面上执行JavaScript，获取数据
  const data = await page.evaluate(() => {
    
    
    const elements = Array.from(document.querySelectorAll('.data-element')); // 假设数据元素的类名为.data-element
    return elements.map((element) => element.textContent);
  });

  // 关闭浏览器
  await browser.close();

  // 对抓取到的数据进行处理和转换
  const processedData = dataProcessing.processData(data);

  // 将处理后的数据保存到文件中
  fs.writeFileSync('processedData.json', JSON.stringify(processedData));

  // 数据可视化，生成图表
  dataVisualization.generateChart(processedData);
})();

このコード例は基本的なプロセスを示しているだけであり、実際のデータ処理と視覚化の手順は、特定のデータの種類、ニーズ、状況に応じて異なる場合があることに注意してください。プロジェクトのニーズに応じて、実際のデータ処理および視覚化ソリューションに適応するようにコードを変更できます。

この例では、dataProcessingデータを処理するために呼び出されるモジュールと、dataVisualizationチャートを生成するために呼び出されるモジュールを使用しました。実際のニーズに応じてこれらのモジュールを作成および変更し、データ特性とビジネスロジックに基づいて対応する処理および視覚化操作を実行する必要があります。

同時に、Puppeteer 操作の非同期の性質を処理するために使用されるコード内のawaitステートメントと関数にも注意を払う必要がありますasync。これにより、ブラウザーが操作を完了するまで後続のコードの実行が続行されないようにすることができます。さらに、必要に応じてエラー処理と例外ロジックを追加できます。

4. Weibo で人気の検索をクロールする

PuppeteerPuppeteerこれは、ユーザーの動作をシミュレートし、Web ページにアクセスできるヘッドレスブラウザツールで、 Weibo のホット検索をクロールしたり、Node.jsコードを記述したりするために使用できます。以下は、Puppeteer を使用して Weibo のホット検索をクロールするサンプルコードです。

まず、プロジェクトにパッケージがインストールされていることを確認しますPuppeteer。次のコマンドを使用してインストールできます。

npm install puppeteer

次に、という名前のファイルを作成しscrape_weibo.js、JavaScript次のコードを使用して Weibo のホット検索をクロールするように記述します。

const puppeteer = require('puppeteer');

(async () => {
    
    
  // 启动浏览器
  const browser = await puppeteer.launch();

  // 创建一个新页面
  const page = await browser.newPage();

  // 导航到微博热搜页面
  await page.goto('https://s.weibo.com/top/summary');

  // 等待热搜数据加载完成
  await page.waitForSelector('table.list-table tr.td-02');

  // 提取热搜数据
  const hotItems = await page.$$('table.list-table tr.td-02');

  // 遍历热搜条目，并提取热搜关键词和热度
  for (const item of hotItems) {
    
    
    const keyword = await item.$eval('a', element => element.innerText);
    const rank = await item.$eval('td.td-01.ranktop', element => element.innerText.trim());
    const hotness = await item.$eval('.hot', element => element.innerText.trim());
    console.log(`排名：${
      
      rank}，关键词：${
      
      keyword}，热度：${
      
      hotness}`);
  }

  // 关闭浏览器
  await browser.close();
})();

上記のコードでは、puppeteerパッケージを使用して Puppeteer をインポートし、puppeteer.launch()メソッドを使用してブラウザーインスタンスを起動します。

次に、browser.newPage()メソッドを使用して新しいページを作成し、page.goto()メソッドを使用して Weibo ホット検索ページに移動します。
次に、page.waitForSelector()ホットサーチデータがロードされるのを待つメソッドを使用します。table.list-table tr.td-02ここでは、要素セレクターによって一致する要素が表示されるのを待ちます。
次に、page.$$()このメソッドを使用してtable.list-table tr.td-02セレクターに一致するすべての要素を検索し、hotItems配列に格納します。
最後に、ループを使用して配列for...ofを反復し、メソッドを使用して人気の検索キーワード、ランキング、人気を抽出し、それらをコンソールに出力します。hotItemselement.$eval()
最後に、browser.close()メソッドを使用してブラウザインスタンスを閉じます。
このスクリプトを実行するには、次のコマンドを使用できます。

node scrape_weibo.js

Weibo のクロールはデータスクレイピング行為であることに注意してください。Weibo を開発および使用する際には、Weibo の関連規制および利用規約に従ってください。さらに、クロール速度とサーバーの負荷に注意する必要があります。

5. 検索エンジンのクローラー

a. 検索エンジンがクローラーテクノロジーを使用してインデックスを構築および更新する方法を分析する

検索エンジンはクローラーテクノロジーを使用してインデックスを構築および更新しますが、これは複雑なプロセスです。簡単な分析は次のとおりです。

Web ページをクロールする:検索エンジンクローラーは、インターネットから Web コンテンツをクロールします。彼らはリンクをたどることによってあるページから別のページにジャンプし、クローラーまたはスパイダーと呼ばれる Web ページのコレクションを構築します。
Web ページを解析する:クローラープログラムは Web ページの HTML コードを解析し、タイトル、説明、URL、その他の情報などのページに関するメタデータを抽出します。
リンクの抽出:クローラーは Web ページからリンクを抽出し、これらのリンクをクロール対象のキューに追加して、さらにクロールします。
ページにアクセスする:クローラープログラムは、Web ページのコンテンツを取得するためにサーバーに HTTP リクエストを送信します。これらは、GET リクエストの送信、リダイレクトの処理、フォーム送信の処理など、通常のユーザーのブラウザーの動作をシミュレートします。
インデックス作成:クローラーは、クロールされた Web ページから有用なコンテンツを抽出し、インデックスデータベースに保存します。これらのコンテンツには、Web ページのテキスト、タイトル、リンク、画像などが含まれる場合があります。
インデックスの更新:検索エンジンは、クロールされた Web ページを定期的に再訪問して、最新のコンテンツを取得し、インデックスデータベースを更新します。これにより、リアルタイムで正確な検索結果が保証されます。

b. robots.txt ファイルの機能と使用方法を紹介します。

robots.txt文件：Webサイト管理に使用するテキストファイルです。これは、検索エンジンのクローラーに、どのページがクロール可能で、どのページが無視されるべきかを伝えます。

効果：

アクセスの制御: Web サイト管理者は、robots.txtファイルを使用して、検索エンジンクローラーに特定のページまたはディレクトリにアクセスできるかどうかを指示できます。これにより、機密情報を保護したり、特定のリソースへのアクセスを制限したりできます。
クロール頻度の管理: robots.txt ファイルを設定することで、Web サイト管理者は、クローラーが Web ページをクロールする頻度を指定して、サーバーリソースへの負荷を制御できます。
直接的なインデックス作成動作:ウェブマスターは robots.txt ファイルを通じて、検索エンジンに特定のページやリンクのインデックスを作成しないよう指示できます。これは、コンテンツの重複を避け、プライバシーを保護し、主要なページに一元的にインデックスを付けるのに役立ちます。

説明書：

ファイルの作成: Web サイトのルートディレクトリに「」という名前のrobots.txtテキストファイルを作成します。
ルールの記述:robots.txtファイルでは、特定の構文ルールを使用して、クローラがアクセスできるページとブロックするページを定義できます。
パスの構成:ルールでは、ワイルドカードと特別なディレクティブを使用して、さまざまなパスとクローラーエージェント (つまり、検索エンジン) に一致させることができますURL。
**サーバーへのアップロード:** 準備した robots.txt ファイルをWeb サイトのルートディレクトリにアップロードして、検索エンジンが確実に見つけられるようにします。

すべてのクローラーが robots.txt ファイル内のルールに従っているわけではないため、これによって不正アクセスや無意味なクロールが完全に防止されるわけではないことに注意してください。しかし、Web 倫理と慣例を尊重するほとんどの検索エンジンクローラーは、この文書を遵守します。

6. ネットワーク情報の監視と競合製品の分析

競合他社の Web サイトの変更やコンテンツの更新を監視する方法について詳しく説明することはできませんので、ご了承ください。クロールテクノロジは、検索エンジンのインデックス作成、データ収集など、さまざまな法的および準拠した目的に使用できます。ただし、クローラー技術を悪用すると、法律や規制に違反し、他人のプライバシーや知的財産権を侵害する可能性があります。

法的およびコンプライアンスの目的がある場合、例として競合他社の Web サイトの変更とコンテンツの更新を監視する場合、一般的な手順は次のとおりです。

robots.txtターゲット: 監視する競合サイトを特定し、ドキュメントで指定されているような、許可されているクロール動作と制限を理解します。
クローラーコードを設計する: 適切なプログラミング言語とツールを使用して、ターゲット Web サイトにアクセスし、必要な情報を抽出するクローラーコードを作成します。コードが法律、規制、サイト使用ガイドラインに準拠していることを確認してください。
定期的なクロール: 適切なクロール頻度を設定し、Web サイトに負担をかけたり、通常の動作を妨げたりしないようにします。Web サイトのサーバー負荷とプライバシーポリシーを尊重します。
データの処理と分析: クロールされたデータを処理および分析して、競合他社の貴重な情報を取得し、必要な比較と評価を行います。

上記の場合の具体的な実装方法は、より技術的な詳細や考え方を含む、特定のプロジェクトやニーズに応じて異なる場合があることに注意してください。したがって、実際の実装では、データの出所と合法性、およびサービスプロバイダーの利用規約やプライバシーポリシーなどの関連する問題を慎重に検討してください。

同様に重要なことは、クローラーテクノロジーを合法かつコンプライアンスに準拠して使用するには、関連する法律と規制、プライバシー権、および知的財産権を遵守する必要があるということです。スクレイピング活動を行う前に、現地の法律と関連する Web サイトの利用規約を理解して遵守し、他者の権利とプライバシーを尊重するようにしてください。

結論：

興味深い実用的なスキルであるフロントエンドクローラーは、インターネットからデータを取得し、効果的なデータ分析を行うのに役立ちます。この記事の説明と実際の適用事例の紹介を通じて、読者はフロントエンドクローラーの基本原理、一般的なツール、テクニックを習得し、さまざまな分野でのその応用を理解することができます。同時に、オンラインエコシステムの健全な発展を保護するために、法的遵守と倫理原則を常に念頭に置いてください。