JavaScript で Web スクレイピングを始める

Web スクレイピングは、コーディングの世界で最も興味深いものの 1 つです。

Webスクレイピングとは何ですか?

なぜ存在するのでしょうか？

答えを見てみましょう。

Webスクレイピングとは何ですか?

Web スクレイピングは、Web サイトからデータを抽出する自動タスクです。

Webスクレイピングにはさまざまなアプリケーションがあります。商品の価格を抽出し、異なる電子商取引プラットフォームと比較します。ウェブから毎日の見積もりを取得します。 Google、Yahoo などの独自の検索エンジンを構築するなど、リストは続きます。

Web スクレイピングを使用すると、思っている以上のことができます。 Web サイトからデータを抽出する方法を理解したら、そのデータを使って何でもできるようになります。

Web サイトからデータを抽出するプログラムは Web スクレイパー と呼ばれます。 JavaScript で Web スクレイパーを作成する方法を学習します。

Webスクレイピングには主に2つの部分があります。

• リクエスト ライブラリとヘッドレス ブラウザを使用してデータを取得します。
• データを解析して、データから必要な正確な情報を抽出します。

さっそく始めましょう。

プロジェクトのセットアップ

Node がインストールされていると思いますが、インストールされていない場合は、NodeJS インストール ガイドを確認してください。

JavaScript での Web スクレイピングには node-fetch と cheerio パッケージを使用します。サードパーティのパッケージを使用できるように、npm を使用してプロジェクトをセットアップしましょう。

セットアップを完了する手順を簡単に見てみましょう。

• web_scraping というディレクトリを作成し、そこに移動します。
• コマンド npm init 実行してプロジェクトを初期化します。
• 好みに応じてすべての質問に答えてください。
• 次に、次のコマンドを使用してパッケージをインストールします

npm install node-fetch cheerio

インストールされたパッケージの概要を見てみましょう。

ノードフェッチ

パッケージ node-fetch window.fetch をnode js環境にもたらします。これは、HTTP リクエストを作成して生データを取得するのに役立ちます。

チェリオ

Cherio パッケージは、生データから必要な情報を解析して抽出するために使用されます。

JavaScript での Web スクレイピングには、 node-fetch と cheerio の 2 つのパッケージで十分です。パッケージが提供するすべてのメソッドを確認するわけではありません。 Webスクレイピングの流れとその中で最も役立つ方法を見ていきます。

実際にやってみるとWebスクレイピングが学べます。それでは、作業に移りましょう。

クリケットワールドカップリストの収集

このセクションでは、実際に Web スクレイピングを実行していきます。

何を抽出しているのでしょうか?

このセクションのタイトルから、簡単に推測できると思います。はい、あなたが考えていることはすべて正しいです。これまでのクリケットワールドカップの優勝者と準優勝者をすべて抽出してみましょう。

• プロジェクト内に extract_cricket_world_cups_list.js というファイルを作成します。
• 必要な情報を取得するには 、ウィキペディアのクリケット ワールド カップ ページを使用します。
• まず、 node-fetch パッケージを使用して生データを取得します。
• 以下のコードは、上記の Wikipedia ページの生データを取得します。

 const fetch = require("node-fetch");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// invoking the main function
getCricketWorldCupsList();

URLから生データを取得しました。次に、生データから必要な情報を抽出します。 Cherio パッケージを使用してデータを抽出しましょう。

Cheerio を使用して HTML タグを含むデータを抽出するのは簡単です。実際のデータに入る前に、 cheerio を使用したサンプルデータ解析を見てみましょう。

• cheerio.load メソッドを使用して HTML データを解析します。

 const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );

• 上記の HTML コードを解析しました。そこから p タグの内容を抽出するにはどうすればよいですか? JavaScript の DOM 操作におけるセレクターと同じです。

console.log(parsedSampleData("#title").text());


必要に応じてタグを選択できます。さまざまな方法は cheerio公式ウェブサイト から確認できます。

• 次に、ワールドカップのリストを抽出します。情報を抽出するには、ページ上にある情報の HTML タグを知る必要があります。 クリケット ワールド カップの Wikipedia ページ に移動し、ページを調べて HTML タグ情報を取得します。

完全なコードは次のとおりです。

 const fetch = require("node-fetch");
const cheerio = require("cheerio");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // parsing the data
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // extracting the table data
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Year --- Winner --- Runner");
   worldCupsDataTable.forEach((row) => {
      // extracting `td` tags
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

         const columns = row.children.filter((column) => column.name === "td");

         // extracting year
         const yearColumn = columns[0];
         if (yearColumn) {
            year = yearColumn.children[0];
            if (year) {
               year = year.children[0].data;
            }
         }

         // extracting winner
         const winnerColumn = columns[3];
         if (winnerColumn) {
            winner = winnerColumn.children[1];
            if (winner) {
               winner = winner.children[0].data;
            }
         }

         // extracting runner
         const runnerColumn = columns[5];
         if (runnerColumn) {
            runner = runnerColumn.children[1];
            if (runner) {
               runner = runner.children[0].data;
            }
         }

         if (year && winner && runner) {
            console.log(`${year} --- ${winner} --- ${runner}`);
         }
      }
   });
};

// invoking the main function
getCricketWorldCupsList();

そして、こちらがスクレイピングしたデータです。

 Year --- Winner --- Runner
1975 --- West Indies --- Australia
1979 --- West Indies --- England
1983 --- India --- West Indies
1987 --- Australia --- England
1992 --- Pakistan --- England
1996 --- Sri Lanka --- Australia
1999 --- Australia --- Pakistan
2003 --- Australia --- India
2007 --- Australia --- Sri Lanka
2011 --- India --- Sri Lanka
2015 --- Australia --- New Zealand
2019 --- England --- New Zealand

すごいですね😎、そうですか？

スクレイピングテンプレート

URL から生データを取得することは、すべての Web スクレイピング プロジェクトで一般的です。変更される唯一の部分は、要件に従ってデータを抽出することです。以下のコードをテンプレートとして試すことができます。

 const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL for data
const URL = "https://example.com/";
// start of the program
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // parsing the data
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // write code to extract the data
   // here
   // ...
   // ...
};
// invoking the main function
scrapeData();

結論

Webページをスクレイピングする方法を学びました。次は、あなたがコーディングを練習する番です。

また、人気のある Web スクレイピング フレームワークやクラウドベースの Web スクレイピング ソリューションを調べてみることをお勧めします。

コーディングを楽しんでください 🙂