基本的なHTMLスクレイピング：最初のステップ

Feb 23, 2025

Webスクレイピングは最初は威圧的に感じるかもしれませんが、他のスキルと同様に、実践的な練習を通じて最もよく習得できます。最初の3つの章では、静的HTMLページからデータを抽出する基本的な方法を探求します。

第1章：HTMLスクレイパーチャド

私たちの旅は最もシンプルなシナリオから始まります - 基本的なHTMLページからテキストを抽出することです。この章では、以下の核となる概念を紹介します：

  • Webページを取得するためのHTTPリクエストの作成
  • HTMLコンテンツをパーサーに読み込む
  • CSSセレクタを使用した基本的なDOM選択

例は些細に見えるかもしれません（結局のところ、これは「hello world」に過ぎません！）が、この後に続くすべての基盤を確立します。

<!-- HTMLの構造例 -->
<div class="content">
  <p>抽出したいテキスト</p>
</div>

私たちが扱っているもののサンプルは次のとおりです：

// 基本的な概念（解決策ではありません！）
import * as cheerio from 'cheerio';

// HTMLコンテンツの読み込み
const $ = cheerio.load(htmlContent);

// CSSセレクタの使用
const text = $('p').text();  // すべての<p>タグを選択
const specific = $('.content p').text();  // より具体的な選択

第2章：構造化データ

模擬ECサイトの商品ページに深く入ると、事態はより興味深くなります。ここでは、類似した構造を持つ複数の要素に直面します：

<!-- 商品構造の例（簡略化） -->
<div class="product">
  <h2>商品名</h2>
  <span class="price">$99.99</span>
  <div class="specs">
    <ul>
      <li>サイズ: M</li>
      <li>色: 青</li>
    </ul>
  </div>
</div>

このような構造化データを扱う際は、以下について考える必要があります：

// 概念的なアプローチ（解決策ではありません！）
$('.product').each((index, element) => {
  // 各商品について、以下を行いたい場合があります：
  // 1. 基本情報の抽出
  const name = $(element).find('h2').text();

  // 2. ネストされたデータの解析
  const specs = $(element).find('.specs li');

  // 3. 出力の構造化
  const data = {
    name,
    specs: specs.map(/* ... */),
  };
});

プロのヒント：コードを書く前に、HTML構造を分析する時間を取りましょう。データがどのように整理されているかのパターンを探してください - 一貫したクラス名はありますか？親要素と子要素はどのように関連していますか？

第3章：AI支援スクレイピング

ここで面白くなります！前の課題では従来のスクレイピング技術を学びましたが、第3章では現代的なアプローチを紹介します：AI支援Webスクレイピング。私たちは悪夢のようなシナリオに直面します - 一貫性のないHTML構造、難読化されたクラス名、そして複数のフレームワークパターンがすべて混在している状況です。

この課題を特別なものにする要因を見てみましょう：

<!-- 従来の商品構造 -->
<div data-testid="product-container-1" class="_3xj_item">
  <h2 data-qa="name">赤いスニーカー</h2>
  <span data-price-current="5999">$59.99</span>
</div>

<!-- Reactスタイルのコンポーネント -->
<div class="ProductCard-root-1a2b3c">
  <div class="ProductCard-title-4d5e6f">ピンクのウォーキングシューズ</div>
  <div class="ProductCard-pricing-7g8h9i">$84.99</div>
</div>

<!-- Vueスタイルのテンプレート -->
<div data-v-abcdef class="product">
  <h2 data-v-abcdef>紺色のボートシューズ</h2>
  <span data-v-abcdef>$79.99</span>
</div>

従来のスクレイピングアプローチでは、以下の理由で困難になります：

  • クラス名がランダム化またはフレームワーク固有
  • 商品間でデータ構造が異なる
  • 異なるフレームワークが異なるパターンを使用
  • マークアップでセマンティックな意味が失われる

ここでAIが救いの手を差し伸べます。脆弱なセレクタを書く代わりに、自然言語で何が欲しいかを記述し、AIにパターンマッチングを処理させることができます。この章の主要な概念には以下が含まれます：

  • Webスクレイピングのためのプロンプトエンジニアリング
  • セマンティックな意味を理解するためのAIの使用
  • 一貫性のないデータ構造の処理
  • フレームワーク固有のマークアップの処理
  • 異なるパターン間でのデータ一貫性の維持

AIは魔法ではありませんが、パターン認識と適応を必要とするタスクに優れています。これにより、一貫したマークアップパターンが保証されない現代のWebアプリケーションをスクレイピングする際に特に価値があります。

AI使用に関する注意

AI支援は完全に自動化された解決策を意味するものではないことを覚えておいてください。最良の結果は以下を組み合わせることから得られます：

  • 明確な問題定義
  • よく構造化されたプロンプト
  • データ検証
  • 人間の監視

あなたの課題は、AIが抽出しようとしているものの構造と意図の両方を理解するのに役立つプロンプトを作成することです。

従来のWebスクレイピングの知識と現代のAI機能を組み合わせる準備はできましたか？AIが最も厄介なHTMLにも対処するのにどのように役立つかを理解しましょう！

ヒント

  1. 異なるCSSセレクタを試してみる：
// 要素を選択する異なる方法
$('.class')           // クラスによる
$('#id')             // IDによる
$('div > p')         // 直接の子要素
$('div p')           // すべての子孫
$('[data-type="x"]') // 属性による
  1. 出力形式の変更を試す
  2. エラーハンドリングとエッジケースについて考える
  3. あなたの解決策がより大きなデータセットでどのようにスケールするかを考慮する

開始するために必要なすべてのコードはプロジェクトリポジトリにあります。クローンして、環境を設定し、スクレイピングを開始しましょう！

git clone https://github.com/jonaylor89/housefly.git
cd hosuefly

ヒントをお探しですか？各課題のソースHTMLはapps/chapter{n}/ディレクトリで利用できます。そして、動作する解決済みの例も_solved/chapter{n}/で利用できます。構造を研究し、アプローチを計画し、覚えておいてください - すべての専門家はかつて初心者でした。

リクエストを責任を持って処理することを忘れずに：

// 基本的なエラーハンドリングの例
async function fetchPage(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTPエラー！ステータス: ${response.status}`);
    }
    return await response.text();
  } catch (error) {
    console.error('ページの取得に失敗しました:', error);
    throw error;
  }
}

ハッピースクレイピング！