0Pricing
R Academy · レッスン

HTML構造とCSSセレクター

DOMツリーを理解し、要素を対象にするCSSセレクターを書きます。

「HTML構造とCSSセレクター」はCoddyKit上の無料R Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはR Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 R Academyコースには全4レッスンが含まれています。

HTML DOMツリー

すべてのWebページはDocument Object Model（DOM）ツリーとして構造化されています。HTML要素は互いに入れ子になり、親子階層を形成します。Webスクレイピングでは、このツリーをたどってデータを抽出します。

# HTML structure conceptually:
# <html>
#   <body>
#     <div class='container'>
#       <h1 id='title'>Hello</h1>
#       <p class='text'>World</p>
#     </div>
#   </body>
# </html>

# rvest lets us query this tree with CSS selectors
library(rvest)
html <- read_html('<div><h1>Title</h1><p class="info">Text</p></div>')
html_text(html_element(html, 'h1'))

CSSセレクター：タグセレクター

最も単純なCSSセレクターは、タグ名で要素を指定します。pと書くと、すべての段落要素が選択されます。h1と書くと、すべてのレベル1見出しが選択されます。

library(rvest)
html <- read_html('
  <div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <h2>A heading</h2>
  </div>
')
# Tag selector: selects all <p> elements
nodes <- html_elements(html, 'p')
html_text2(nodes)
# Returns: c('First paragraph', 'Second paragraph')

CSSセレクター：クラスとID

.classnameを使うとクラスで要素を選択でき、#idnameを使うとIDで一意の要素を選択できます。クラスはページ内に複数回登場できますが、IDは一意である必要があります。

library(rvest)
html <- read_html('
  <div>
    <p class="highlight">Important text</p>
    <p class="normal">Regular text</p>
    <span id="price">$9.99</span>
  </div>
')
# Class selector (prefix with .)
html_text2(html_element(html, '.highlight'))
# ID selector (prefix with #)
html_text2(html_element(html, '#price'))

子孫セレクターと子セレクター

div pは、div内の（深さを問わず）任意のpを選択します。div > pは直接の子要素だけを選択します。h1 + pは、h1の直後にあるp（隣接する兄弟要素）を選択します。

library(rvest)
html <- read_html('
  <div class="outer">
    <p>Direct child</p>
    <section>
      <p>Nested deeper</p>
    </section>
  </div>
')
# Descendant: both paragraphs
all_p <- html_elements(html, 'div p')
length(all_p)  # 2

# Direct child only
direct_p <- html_elements(html, 'div.outer > p')
length(direct_p)  # 1

属性セレクター

CSS属性セレクターを使うと、HTML属性で絞り込めます。[attr]は属性の存在を確認し、[attr='val']は値が完全に一致するかを確認し、[attr*='val']は値に部分文字列が含まれるかを確認します。

library(rvest)
html <- read_html('
  <div>
    <a href="https://example.com">External</a>
    <a href="/about">Internal</a>
    <a>No href</a>
  </div>
')
# Select only anchors that have an href attribute
with_href <- html_elements(html, 'a[href]')
length(with_href)  # 2

# Select anchors with href starting with https
external <- html_elements(html, 'a[href^="https"]')
html_text2(external)  # 'External'

XPathの基礎

XPathはCSSセレクターの代替手段で、複雑なクエリではより強力です。rvestではhtml_element(html, xpath='//tag')を使います。//pは場所を問わず任意のpを意味し、/html/body/pは絶対パスです。

library(rvest)
html <- read_html('
  <html><body>
    <table>
      <tr><td class="price">10.99</td></tr>
      <tr><td class="price">5.50</td></tr>
    </table>
  </body></html>
')
# XPath: select all td with class price
nodes <- html_elements(html, xpath = '//td[@class="price"]')
html_text2(nodes)
# c('10.99', '5.50')

# XPath text() function
nodes2 <- html_elements(html, xpath = '//td[contains(@class,"price")]')
html_text2(nodes2)

セレクターを組み合わせる

セレクターは、より正確に指定するために組み合わせられます。div.card h2は、cardクラスを持つdiv内のh2を選択します。カンマで複数の独立したセレクターを区切れます。h1, h2, h3は3つすべての見出しレベルを選択します。

library(rvest)
html <- read_html('
  <div class="card">
    <h2>Card Title</h2>
    <p class="desc">Description here</p>
    <span class="price">$19</span>
  </div>
  <div class="footer">
    <h2>Footer Heading</h2>
  </div>
')
# Only h2 inside .card
card_h2 <- html_element(html, 'div.card h2')
html_text2(card_h2)  # 'Card Title'

# Multiple selectors with comma
price_desc <- html_elements(html, '.price, .desc')
html_text2(price_desc)

SelectorGadgetツール

SelectorGadgetは、CSSセレクターを対話的に見つけるのに役立つブラウザーブックマークレットです。対象の要素（緑色でハイライト）と対象外の要素（赤色でハイライト）をクリックすると、最小限のCSSセレクターが自動的に生成されます。

# SelectorGadget workflow:
# 1. Open target page in Chrome/Firefox
# 2. Activate SelectorGadget bookmarklet
# 3. Click element you want -> turns green, selector appears
# 4. Click elements you DON'T want -> turns red, selector narrows
# 5. Copy the selector shown at the bottom
# 6. Use in rvest:

library(rvest)
# Example: SelectorGadget found '.product-title' for us
# page <- read_html('https://books.toscrape.com')
# titles <- html_elements(page, '.product_pod h3 a')
# html_text2(titles)
cat('SelectorGadget is available at selectorgadget.com')

DevToolsでページを調査する

ブラウザーのDevTools（F12）を使うと、DOMを直接調査できます。任意の要素を右クリックしてInspectを選ぶと、ElementsパネルにHTMLが表示されます。要素にカーソルを合わせるとページ上でハイライトされるため、対象にする正確なタグ、クラス、IDを特定できます。

# DevTools workflow for finding selectors:
# 1. F12 -> Elements tab
# 2. Click the cursor icon (Inspector)
# 3. Click the element on the page
# 4. Right-click highlighted HTML -> Copy -> Copy selector
# 5. Paste selector into rvest

# The copied selector might look like:
# '#main > div.results > article:nth-child(1) > h3'
# Simplify it: usually '.results h3' works just as well

# Validate your selector in the Console with:
# document.querySelectorAll('.results h3')
library(rvest)
cat('Always verify selectors return the elements you expect')

疑似クラスとnth-child

:first-child、:last-child、:nth-child(n)などのCSS疑似クラスを使うと、親要素内での位置に基づいて要素を選択できます。要素を区別するクラスがない場合に便利です。

library(rvest)
html <- read_html('
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
')
# First item
first <- html_element(html, 'li:first-child')
html_text2(first)  # 'First'

# Third item
third <- html_element(html, 'li:nth-child(3)')
html_text2(third)  # 'Third'

# Even items
evens <- html_elements(html, 'li:nth-child(even)')
html_text2(evens)  # c('Second', 'Fourth')

セレクターの詳細度のルール

複数のセレクターが一致する可能性がある場合、どれが優先されるかは詳細度によって決まります。IDはクラスより優先され、クラスはタグより優先されます。スクレイピングでは重要度はやや低くなりますが、詳細度を理解すると、誤った一致を避ける正確なセレクターを書けるようになります。

library(rvest)
html <- read_html('
  <div id="header" class="top">
    <p class="title">Main Title</p>
  </div>
  <div class="content">
    <p class="title">Content Title</p>
  </div>
')
# Overly broad: gets BOTH titles
broad <- html_elements(html, 'p.title')
html_text2(broad)

# Specific: only header title
specific <- html_element(html, '#header p.title')
html_text2(specific)  # 'Main Title'

# Be as specific as needed but not more
content_title <- html_element(html, '.content .title')
html_text2(content_title)

クイックチェック

rvestでのWebスクレイピングに使用するCSSセレクターの理解度を確認しましょう。

まとめ：HTMLとCSSセレクター

重要なポイント： DOMはツリー構造であり、CSSセレクターでその中を移動できます。要素の種類にはtag、クラスには.class、一意の要素には#id、直接の子要素には>、属性には[attr]を使用します。SelectorGadgetとDevToolsを使うと、セレクターを対話的に見つけられます。CSSだけでは対応しにくい場合は、XPath（//tag[@attr]）を使用します。

# Summary of key CSS selectors for web scraping:
# 'p'            -> all <p> elements
# '.price'       -> elements with class='price'
# '#main'        -> element with id='main'
# 'div > p'      -> direct child p of div
# 'a[href]'      -> a elements that have href attr
# 'a[href*=http] -> a elements where href contains 'http'
# 'li:nth-child(2)' -> second li in its parent
# 'h1, h2'       -> both h1 and h2 elements
# xpath='//td[@class="price"]' -> XPath alternative
library(rvest)
cat('Selectors are the foundation of reliable web scraping')

よくある質問

「HTML構造とCSSセレクター」レッスンは無料ですか？

はい。「HTML構造とCSSセレクター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、R Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 R Academyコースには全4レッスンが含まれています。

「HTML構造とCSSセレクター」で何を学びますか？

DOMツリーを理解し、要素を対象にするCSSセレクターを書きます。 ブラウザで直接実行するハンズオンコードでR Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

R Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのR Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「HTML構造とCSSセレクター」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このR Academyレッスンでコードを書いて実行できますか？

はい。すべてのR Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. HTML構造とCSSセレクター
  2. html_element()とhtml_text()の基礎
  3. テーブルとリンクのスクレイピング
  4. ページネーションと複数ページの処理
← R Academyに戻る