第3章: PythonでのHTML構造の理解と解析

3.1 HTMLとは何か

まず、Webスクレイピングを行う際に理解しておくべき基本概念として、HTML（HyperText Markup Language）があります。HTMLは、Webページを構成するためのマークアップ言語です。HTMLドキュメントは、Webブラウザによって解釈され、テキストや画像、リンク、フォームなど、私たちがブラウザで見ているページがレンダリングされます。Pythonを使ってWebページの情報を取得するためには、まずこのHTMLの基本構造を理解することが重要です。

3.1.1 HTMLの基本構造

HTMLドキュメントは、基本的に「タグ（タグペア）」と「テキスト」から成り立っています。これを理解するために、簡単なHTMLの例を見てみましょう。

<!DOCTYPE html>
<html lang=”ja”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>HTMLの基本構造</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これは基本的なHTMLページの例です。</p>
    <a href=”https://example.com”>Example.comへ移動</a>
</body>
</html>

このHTMLコードは非常にシンプルですが、これを分解して見ていくことで、HTMLの基本構造がどのように機能しているかを理解できます。

<!DOCTYPE html>：HTML5ドキュメントであることを宣言するための文です。
<html> タグ：HTMLドキュメント全体を囲むタグです。lang=”ja”という属性により、ドキュメントが日本語を基準に書かれていることを示しています。
<head> タグ：ページのメタ情報を含む部分です。例えば、文字エンコーディング（<meta charset=”UTF-8″>）やページのタイトル（<title>）がここに書かれます。
<body> タグ：Webページの内容そのものが書かれる部分です。ページの見出し（<h1>）や段落（<p>）、リンク（<a>）が含まれます。

これがHTMLの基本構造です。これを理解していれば、どのWebページでもその内容を構成している要素を理解できるようになります。

3.1.2 HTML要素の構成

HTMLの要素は、通常、開始タグと終了タグのペアで構成されます。例えば、<p>これは段落です。</p> という要素では、<p> が開始タグ、</p> が終了タグ、そしてその間にあるテキストが「コンテンツ」です。

一部のHTML要素は、終了タグを持たずに「自己完結型」として動作します。例えば、<img> タグや <meta> タグがその例です。これらは単一のタグだけで機能します。

3.1.3 属性について

HTML要素には「属性」を持つことがあります。属性は要素に追加の情報を提供するもので、タグ内に書かれます。例えば、次のような形です：

ここで、<a> タグはリンクを作成するための要素であり、href 属性でリンク先のURLを指定しています。また、target=”_blank” はリンクを新しいタブで開くことを示しています。このように、属性は要素に機能やスタイルを追加するために使われます。

属性は名前=”値” の形式で書かれ、複数の属性を持つこともできます。

3.2 HTMLの構造を視覚化する

HTMLは「木構造（DOM：Document Object Model）」として表現されます。DOMはHTMLの文書構造を視覚的に示したもので、要素同士の親子関係を反映しています。

例えば、次のようなHTMLを見てみましょう：

<!DOCTYPE html>
<html>
<body>
    <div>
      <h1>見出し1</h1>
      <p>これは段落です。</p>
   </div>
    <div>
      <h2>見出し2</h2>
      <ul>
        <li>リスト項目1</li>
        <li>リスト項目2</li>
      </ul>
    </div>
</body>
</html>

このHTMLは、次のようなDOMツリーに変換されます：

html
└── body
    ├── div
    │   ├── h1
    │   └── p
    └── div
        ├── h2
        └── ul
            ├── li
            └── li

<html> 要素が最上位にあり、<body> の中に2つの <div> が含まれていることが分かります。それぞれの <div> の中にはさらに見出しや段落、リストが含まれています。このように、HTMLは「ネストされた構造」を持っており、各要素は親要素と子要素の関係を形成しています。

PythonでHTMLを解析するときには、このツリー構造をたどって、目的のデータを効率的に抽出することが重要です。

3.3 CSSセレクタとXPathの基本

HTMLドキュメントの要素を取得するために、特定の要素や属性を指定する方法として、CSSセレクタとXPathの2つの主要な技術があります。

3.3.1 CSSセレクタ

CSSセレクタは、要素のスタイルを適用するために使われますが、スクレイピングでは、特定の要素を選択するためにも利用されます。CSSセレクタの使い方をいくつか見ていきましょう。

基本的なセレクタ

タグ名セレクタ：特定のタグ名に基づいて要素を選択します。例えば、すべての段落要素を選択するには、次のように指定します：

p {
/* すべての段落に適用される */
}

IDセレクタ：特定のIDを持つ要素を選択します。IDは一意である必要があります。次の例では、id=”main-content” の要素を選択します：

#main-content {
/* このIDを持つ要素に適用される */
}

クラスセレクタ：特定のクラスを持つ要素を選択します。クラスは複数の要素に適用できます。例えば、クラスhighlightを持つすべての要素を選択するには、次のようにします：

.highlight {
/* このクラスを持つ要素に適用される */
}

複合セレクタ

子孫セレクタ：特定の要素の中に含まれる要素を選択します。例えば、div 内のすべての p 要素を選択するには：

div p {
/* div内のp要素に適用される */
}

直子セレクタ：特定の要素の直下にある要素を選択します。例えば、div の直下にある p 要素だけを選択するには：

div > p {
/* 直下のp要素に適用される */
}

属性セレクタ：特定の属性を持つ要素を選択します。例えば、href 属性にhttps://を含むすべてのリンクを選択するには：

a[href^=”https://”] {
/* hrefがhttps://で始まるリンクに適用される */
}

3.3.2 XPathの基本

XPathは、XMLやHTML文書内の特定の要素を指定するための強力なクエリ言語です。スクレイピングでは、より複雑な要素選択が必要な場合に、CSSセレクタの代わりとしてよく使用されます。

XPathでは、ドキュメント内の要素をパスとして表現し、ツリー構造をたどることで要素を選択します。基本的なXPathの構文をいくつか見てみましょう。

基本構文

絶対パス：ドキュメントのルートから要素を指定します。たとえば、<html> タグから始まる絶対パスは次のようになります：

/html/body/div/p

これは、<html> 内の <body> 内の <div> 内の <p> 要素を選択します。

相対パス：現在の要素を基準に要素を選択します。たとえば、<div> 内のすべての <p> 要素を相対パスで選択するには：

//div/p

これは、ドキュメント内のすべての <div> 要素の中にある <p> 要素を選択します。

フィルタリングと条件指定

XPathでは、要素をフィルタリングするための条件を指定できます。たとえば、特定のクラスを持つ要素や、特定のテキストを含む要素を選択することができます。

特定の属性を持つ要素を選択：例えば、class=”example” を持つすべての <div> 要素を選択するには：

//div[@class=”example”]

特定のテキストを持つ要素を選択：例えば、<a> 要素の中で “Click here” というテキストを持つものを選択するには：

//a[text()=”Click here”]

複数条件のフィルタリング：複数の条件を組み合わせることも可能です。例えば、id=”main” かつクラスが highlight の要素を選択するには：

//div[@id=”main” and @class=”highlight”]

3.3.3 CSSセレクタとXPathの使い分け

CSSセレクタとXPathはどちらも強力なツールですが、それぞれの長所と短所があります。

CSSセレクタの利点：
- 簡潔で直感的な記述が可能
- 多くのブラウザ開発ツールでサポートされている
- 簡単な選択には最適
XPathの利点：
- より複雑な条件を指定できる
- 属性やテキストのフィルタリングが容易
- 要素間の関係を詳細に指定可能

一般的には、簡単な要素選択にはCSSセレクタを、複雑な選択やフィルタリングにはXPathを使用するのが効果的です。

HTMLの基本構造を理解し、それを解析するためのCSSセレクタとXPathの使い方を詳しく解説しました。これらの技術をマスターすることで、次に学ぶPythonを使ったスクレイピングの実践にスムーズに移行できるでしょう。

初心者におすすめ！プログラミングスクールのススメ

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

プログラミングを始めたいと思っているそこのあなた、独学よりもプログラミングスクールが断然おすすめです！理由は簡単、続けやすさです。

独学の挫折率、驚きの87.5％！

独学でプログラミングを続けるのは、実はかなりハードルが高いんです。データによると、なんと87.5％もの学習者が途中で挫折しているとか。一方、各プログラミングスクールが公表しているデータによると、受講生の約95％が最後までやり抜いているとのこと。数字を見れば一目瞭然、プログラミングスクールの方が圧倒的に続けやすいんです。