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=”https://example.com” target=”_blank”>リンク</a>
ここで、<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%が最後までやり抜いているとのこと。数字を見れば一目瞭然、プログラミングスクールの方が圧倒的に続けやすいんです。
有料と無料、スクールの違いは?
プログラミングスクールには有料と無料のタイプがありますが、その違いは次の通りです:
- 受講条件が異なる
- 学べるスキルやカリキュラム内容が異なる
- 就職や転職のサポート内容が異なる
どちらが自分に合っているか、よく考えて選ぶのが大事です。
サブスク型プログラミングスクール『FREEKS(フリークス)』に注目!
プログラミング初心者でも学びやすいと評判の『FREEKS』、その特徴は以下の通り:
- 未経験者向けのわかりやすいカリキュラム
- 経験豊富なエンジニアのサポート
- オンラインで自分のペースで学習可能
なんと、月会費のみで全カリキュラムが受け放題!Java、PHP、HTML/CSS、JavaScriptなど、多彩なプログラミング言語が学べるんです。しかも、AIが質問に自動で答えてくれるシステムも導入済み。
終了後は副業もサポート!
カリキュラムを終了した後には、Freeks経由で未経験者でも取り組める副業案件の受注が可能。実務を通じてスキルを磨き、市場価値の高いエンジニアへの道が開けます。
独学で悩むくらいなら、まずはプログラミングスクールをチェックしてみるのもアリかもしれませんよ!
↓ ↓ こちらをクリック ↓ ↓