【半自動スクレイピング】マックのバーガーメニュー全部取得してお昼を決める

# マック食べたい
何食べよう。今は何が売られてるんだろう・・・。
**そうだ、スクレイピングしよう**

## ⚠機械的なスクレイピングはグレーな行為⚠
スクレイピングは楽しいです。
ただ、実行規模や対象システム・サービスのスペック・仕様によっては負荷攻撃とみなされる可能性があります。
実際、QiitaやConnpassでは、お手製ツールでのスクレイピングを禁止しており、APIを経由した情報取得を推奨しています。

![cap1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/e3990053-2dc4-ff3e-50c1-a70b2d14974a.png)


## マックも

https://www.mcdonalds.co.jp/policy/

![cap.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/021a7979-fe93-fb6a-c9cc-1870556f4c83.png)

マックのサイトポリシーを見ると、「7.禁止事項」に以下の記載があります。
> 10.当サービスの運営を妨げるまたは妨げるおそれのあるような行為。
11.前各号に定める行為を助長する行為。
12.その他、当社が不適切と判断する行為。

一応、ツールを使ったスクレイピングはやめた方がよさそうです
そこで今回の記事の本題です！！！！！

# 半自動スクレイピング
ツールを使わず、また、サービスへの負荷も考慮しつつスクレイピングしていきます。
具体的には、chromeの機能でjsを実行し、DOM上の要素を収集・整形して出力してみます。

やってみます！

まずはマックのバーガー一覧画面に移動します

![cap2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/cee95e77-a524-a9f6-4d8b-a429c3f04643.png)

https://www.mcdonalds.co.jp/menu/burger/

## 開発者ツール
chromeには、開発者ツールという神機能が存在します。
Win、MACともにF12で表示できます。違ったらごめんなさい。

![cap3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/c88dfd9a-d290-d7e4-0a71-d28f876f6967.png)

こんな感じのが表示されます。
これが開発者ツールです。色んな便利機能があるのですが、今回は主に2つ使用します。

## 開発者ツール：コンソール
タブを選択し、コンソールを開きます。

![cap4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/7137df80-6eae-d4aa-e3b4-fd873d0a0066.png)

WarningやErrorなどがごちゃごちゃ出力されています。
コンソールの名の通り、これらはブラウザページ上で動いているjavascriptのコンソールログです。

また、一番下の部分にフォーカスインでき、javascriptを書くことができます。

![cap8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/4208ce7d-31af-623d-1a53-070f651f481e.png)

ここでjavascriptを記載し、画面上のバーガーの名前全てを取得しよう！ということですね！

## DOMを解析する
javascriptはDOMを結構自由に操作できます。
例えばですが、```querySelectorAll``` メソッドは、セレクタで一致した全要素を配列（っぽいもの）形式で取得できたりします。

![cap7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/1ba3115c-9e6f-bc43-0625-f8314d5e8976.png)

https://note.com/gorojy/n/n93ee919590d5

このメソッドでバーガー情報を扱うために、CSSの記述などを確認します。
これも開発者ツールで簡単に行えます。

## 開発者ツール：要素
タブを選択し、要素を開きます。
言葉で説明がムズイのでgifで説明しますｗ

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/ceba735e-9ad1-3166-f15f-9256fda19add.gif)

こんな感じで要素を一意に特定できるclass名を頑張って取得していきます！


## 作成したコード
コードはAIと適当に作ればいいので、作成過程はカットします。
今回は以下のようなコードを作成しました。

```script.js
const productClass = ".product-list"
const nameTag = "strong"
const priceClass = ".product-list-card-price-number"

// 商品リストの要素をすべて取得
const products = document.querySelectorAll(productClass);

// 商品情報を配列として収集
const productInfo = Array.from(products).map(product => {
    const name = product.querySelector(nameTag)?.textContent.trim() || "商品名なし";
    const price = product.querySelector(priceClass)?.textContent.trim().replace("~", "") || "価格なし";

    return { name, price };
});

// お値段順にソート
productInfo.sort((a, b) => a.price - b.price);

// ログ出力
console.log(productInfo);

for (const product of productInfo) {
    console.log(`✨: ${product.name} | 💰: ¥${product.price}`);
};
```

実行してみると・・・

![cap6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/397478a5-db88-9953-4021-f6b8faece923.png)

良い感じですね！！

chromeの開発者ツールは使いこなすととても便利なので、こんな感じで普段使いして、慣れていければ良いなーと思います。