XPath基礎編（1）ー XPathの基本概念

**Webサイトからデータを自動取得する方法は主に2つあります。**

1つは、Pythonなどのプログラミング言語を使ってWebクローラーを作成する方法、もう1つは、[Octoparse](https://www.octoparse.jp/)のような[Webスクレイピングツール](https://www.octoparse.jp/blog/top-30-free-web-scraping-software/)を使用してデータを収集する方法です。

しかし、どれにしても、XPathは重要な役割を果たしています。XPathの書き方が分かれば、データをより正しくて効率的に取得できます。

そのため、このXPathシリーズでは、XPathの基本概念から書き方、さらには応用までを詳しくご紹介したいと思います。


# 1. XPathとは？

[XPath](https://www.octoparse.jp/blog/essential-for-web-scraping-xpath-introduction)(XML Path Language)とは、ツリー構造を持つXMLやHTMLドキュメントから、特定の要素や属性値を抽出するための簡潔な構文（言語）です。

Webページは通常HTMLで記述されているため、XPathはWebページの情報を取得する際によく利用されます。ブラウザ（ChromeやFirefoxなど）でWebページのHTMLを表示するには、F12キーを押すと、対応するHTMLドキュメントに簡単にアクセスできます。

![img_v3_02fs_1a11a43b-8273-4752-be6f-ee79bccfbcag.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/0648a9d4-3995-36ea-f133-6f6aceeefc38.jpeg)

 

 

# 2. XPathの仕組み
それでは、XPathが具体的にどのように動作するのかを見てみましょう。下記の画像はHTMLドキュメントの一部です。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/d6fd0c18-71b1-f57e-61b9-b0d70e6da0c5.png)

HTMLはツリー構造のようになっており、各要素が異なる階層を持っています。
例えば、この例では、レベル1は **[bookstore]** で、レベル2は **[book]** になります。
そして、**[Title]、[author]、[year]、[price]** などはすべてレベル3に該当します。


### ①山括弧
山括弧（例：`<bookstore>`）で囲まれたテキストは「タグ」と呼ばれます。HTMLの要素は、通常開始タグと終了タグで構成され、その間にコンテンツが挿入されます。
具体的には、以下のような形式になります。

**`<○○>(開始タグ)ここにコンテンツが入ります... </○○>(終了タグ) `**


### ②スラッシュ
さらに、XPathはスラッシュ`“/” `で区切りながら階層を記述し、基準となるノードから別のノードを指定できます。これはURLに似ています。
この例では、要素「author」を検索する場合、XPathは次のようになります。

**`/bookstore/book/author `**


それでは、以上の構造がどのように機能するかを理解するためには、コンピューター上で特定のファイルを探す方法を考えてみてください。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/a891e5cc-e885-d515-dafb-0639c1502d19.png)



例えば、「author」という名前のファイルを見つけるには、正しいファイルパスは **\ bookstore \ book \ author** です。

コンピューター上のすべてのファイルには独自のパスがあるように、Webページ上の要素にもそれぞれパスがあります。このパスはXPathで表現されています。


### ③絶対XPathと短いXPath
ルート要素（ドキュメントの一番上の要素）から始まり、その中にあるすべての要素を順にたどって目標の要素に到達するXPathは「絶対XPath」と呼ばれます。
絶対XPathは、ドキュメント全体の構造に基づいて要素を特定するため、特定の要素への道筋が明確に示されます。

**`例：　/html/body/div/div/div/div/div/div/div/div/div/span/span/span…`**

絶対XPathは、パスが長く複雑になることがあり、混乱を招く可能性があります。そのため、途中までのパスを省略してシンプルに記述するために、「//」を使用することができます。この省略形を「短いXPath」とも呼び、特定の要素に簡単にアクセスできるようになります。

短いXPathは、HTMLドキュメント内の要素を指定する際に、完全なパスを記述する代わりに一部を省略して、より簡潔に要素を見つける方法です。短いXPathを使うと、ドキュメント内のどの位置に要素があるかに関係なく、該当する要素を素早く検索することができます。

例えば：

**`絶対XPath：　/bookstore/book/author`**
**`短いXPath：　//author`**
 
 
 
 
 
 
# 3. XPathを表示・書くには


インターネット上のWebサイトは、HTMLやXMLなどのマークアップ言語で構成されています。ただし、Webスクレイピングを行うツールの中には、HTMLとXMLの両方に対応していないものもあります。

### **【Google Chromeの場合】**

Chromeでこのページを表示し、右クリックメニューから **「検証」** を選択して開発者ツールを開きます。ElementsタブのHTML表示で、対象の要素を右クリックし、メニューから **「Copy」→「Copy XPath」** を選択することで、その要素を取得するためのXPathがクリップボードにコピーされます。
![xpath-chrome2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/518378e7-7a8b-dd10-cacf-5d3ccc7bee95.png)



表示されている「Elements」タブのHTMLで **“Ctrl + F”** を押して検索バーを表示し、XPathを入力すると、該当する要素がハイライトされます。
![mceclip0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/1a64d8da-3181-47d8-5d14-89977697358d.png)

また、「XPath Helper」という拡張機能を追加すれば、XPathを入力するだけで一致する要素が表示されます。（[XPath Helperをインストールする](https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl?hl=zh-CN))
![img_v3_02fs_11214d40-3490-4830-a1db-fac43abaa05g.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/ee31b9fd-7391-43b8-efb8-4a344d6763ba.jpeg)





### **【Firefoxの場合】**　

Firefoxの旧バージョンでは、拡張機能「Firebug」を利用することができます。（[Firebug&FireXPath拡張機能をインストールする方法](https://support.mozilla.org/ja/kb/find-and-install-add-ons-add-features-to-firefox)

FirefoxでWebページを開く➡Firebugボタンをクリック➡ページ内の要素をクリック➡その要素のXPathが表示されます。
![mceclip3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/c0826ebe-de0d-5888-c568-4d13c066e2f4.png)

 

以上がXPathの基本的な概念でした。次回はXPathの書き方についてご紹介しますので、どうぞお楽しみに！

元記事：[【図解】XPathとは？基本概念から書き方までわかりやすく解説！](https://www.octoparse.jp/blog/xpath-introduction#1-contains-%E7%89%B9%E5%AE%9A%E3%81%AE%E6%96%87%E5%AD%97%E5%88%97%E3%81%8C%E5%90%AB%E3%81%BE%E3%82%8C%E3%82%8B%E8%A6%81%E7%B4%A0%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)