始める前に、現地の法律や規制を遵守し、許可なく公開されたデータをスクレイピングしないでください。
このチュートリアルには次のものが必要です。
Cheerio は Node.js で HTML と XML を解析するためのツールで、GitHub で非常に人気があり、23,000 個以上のスターが付いています。
高速かつ柔軟で使いやすいです。 Cheerio は JQuery のサブセットを実装しているため、JQuery に慣れている場合は簡単に使い始めることができます。
Cheerio と Web ブラウザーの主な違いは、cheerio はビジュアル レンダリングの生成、CSS の読み込み、外部リソースの読み込み、JavaScript の実行を行わないことです。マークアップを解析し、結果のデータ構造を操作するための API を提供するだけです。これは、なぜこれが非常に速いのかを説明しています - Cherio のドキュメント。
Cherio を使用して Web ページを取得したい場合は、まず axios や Node-fetch などのパッケージを使用してタグを取得する必要があります。
この例では、この Wikipedia ページにリストされているすべての国およびその他の管轄区域の ISO 3166-1 alpha-3 コードをクロールします。これは、ISO 3166-1 alpha-3 ページの現在のコードセクションにあります。
国/管轄区域とそれに対応するコードのリストは次のようになります。
このステップでは、ターミナルで次のコマンドを実行して、プロジェクトのディレクトリを作成します。このコマンドは、 learn-cheerioという名前のファイルを作成します。必要に応じて、別の名前を付けることができます。
mkdir learn-cheerio
learn-cheerio上記のコマンドを正常に実行すると、作成されたという名前のフォルダーが表示されるはずです。
次のステップでは、作成したばかりのディレクトリをお気に入りのテキスト エディタで開き、プロジェクトを初期化します。
このステップでは、プロジェクト ディレクトリに移動し、プロジェクトを初期化します。前の手順で作成したディレクトリを任意のテキスト エディタで開き、次のコマンドを実行してプロジェクトを初期化します。
npm init -y
上記のコマンドが正常に実行されると、プロジェクト ディレクトリのルートにファイルpackage.jsonが作成されます。
次のステップでは、プロジェクトの依存関係をインストールします。
このステップでは、次のコマンドを実行してプロジェクトの依存関係をインストールします。これには数分かかりますので、しばらくお待ちください。
npm i axios Cheio pretty
上記のコマンドを正常に実行すると、フィールドpackage.jsonの下のファイルに 3 つの依存関係が登録されます。 dependencies最初の依存関係はaxios 、2 番目はcheerio 、3 番目はprettyです。
axios は、ノードおよびブラウザーで実行できる非常に人気のある http クライアントです。 Cherio はトークンパーサーであるため、これが必要です。
Cheerio がタグを解析して必要なデータをクロールするには、Web サイトからタグを取得するためのaxios必要です。必要に応じて、別の HTTP クライアントを使用してトークンを取得できます。 axiosである必要はありません。
pretty はマークアップを美しくするための npm パッケージであり、端末上で印刷したときに読みやすくなります。
次のセクションでは、データがスクレイピングされるタグを調べます。
Web ページからデータをスクレイピングする前に、ページの HTML 構造を理解することが重要です。
このステップでは、データをスクレイピングする Web ページの HTML 構造を調べます。
Wikipedia の ISO 3166-1 alpha-3 コードのページに移動します。 「現在のコード」セクションには、国とそれに対応するコードのリストがあります。 CTRL + SHIFT + I Chrome でキーの組み合わせを押すか、右クリックして [検査] オプションを選択すると、DevTools を開くことができます。
これは Chrome DevTools のリストです。
次のセクションでは、Web をクロールするコードを作成します。
このセクションでは、関心のあるデータをスクレイピングするコードを作成します。まず、次のコマンドを実行してapp.jsファイルを作成します。
touch app.js
上記のコマンドが正常に実行されると、プロジェクト ディレクトリのルート ディレクトリにファイルapp.jsが作成されます。
他の Node パッケージと同様に、使用を開始する前に、まずaxios 、 cheerio 、および axios を必要とする必要があります。これを行うには、作成したばかりのprettyファイルの先頭に次のコードを追加します。 app.js
const axios = require("axios");
const チェリオ = require("チェリオ");
const pretty = require("pretty");データをスクレイピングするコードを記述する前に、 cheerio学習する必要があります。以下のマークアップを解析し、結果のデータ構造を操作してみます。これは、Cheerio の構文とその最も一般的に使用されるメソッドを学習するのに役立ちます。
以下のマークアップは、要素を含むul li要素です。
const マークアップ = ` <ul class="フルーツ"> <li class="fruits__mango"> マンゴー </li> <li class="fruits__apple"> アップル </li> </ul> `;
上記の変数宣言をapp.jsファイルに追加
cheerio.loadメソッドを使用してタグを読み込むことがcheerioます。このメソッドはマーカーをパラメーターとして受け取ります。また、2 つの追加のオプションのパラメーターも必要です。興味があれば、ドキュメントで詳細を読むことができます。
以下では、最初で唯一の必須パラメータを渡し、戻り値を$変数に格納します。 Cherio が Jquery $に似ているため、この変数を使用します。必要に応じて、別の変数名を使用できます。
次のコードをapp.jsファイルに追加します
。 console.log(pretty($.html()));
ターミナル上でコマンドapp.jsを実行してファイルnode app.js内のコードを実行すると、ターミナル上でマークアップを確認できるはずです。端末には次のように表示されます。
Cheerio は、 class 、 id 、 elementセレクターなど、最も一般的な CSS セレクターをサポートしています。以下のコードでは、 fruits__mangoクラスの要素を選択し、選択した要素をコンソールに記録します。次のコードをapp.jsファイルに追加します。
const mango = $(".fruits__mango");
console.log(mango.html()); // Mangoコマンド実行を使用する場合、上記のコード行はターミナル上のテキストをMango記録します。 app.js``node app.js
要素を選択して、 class 、 idまたはすべての属性とそれらに対応する値などの特定の属性を取得することもできます。
次のコードをapp.jsファイルに追加します。
const apple = $(".fruits__apple");
console.log(apple.attr("class")); //上記のコードは、 fruits__appleターミナルにログインします。 fruits__apple 、選択した要素のクラスです。
Cheerio には、選択した複数の要素をループする.eachメソッドが用意されています。
以下では、すべての要素を選択し、メソッドli使用してループします。 .each端末上の各リスト項目のテキスト内容をログに記録します。
次のコードをapp.jsファイルに追加します。
const listItems = $("li");
console.log(listItems.length); // 2
listItems.each(function (idx, el) {
console.log($(el).text());
});
//マンゴー
//上記の Apple のコードは、リスト項目の長さである2記録し、テキストMangoがターミナルに表示されます。 Apple``app.js
Cheerio は、マークアップに要素を追加または追加する方法を提供します。
appendメソッドは、パラメータとして渡された要素を、選択した要素の最後の子要素の後に追加します。一方、 prepend選択された要素の最初の子の前に、渡された要素を追加します。
次のコードをapp.jsファイルに追加します。
const ul = $("ul");
ul.append("<li>バナナ</li>");
ul.prepend("<li>パイナップル</li>");
console.log(pretty($.html()));マークアップに要素を追加した後、 $.html()ターミナルにログインすると次のように表示されます。
これらは、Web スクレイピングを始めるための Cheerio の基本です。 この記事の冒頭で説明した Wikipedia からデータをスクレイピングするには、次のコードをコピーしてapp.jsファイルに貼り付けます。
// 依存関係を読み込む必要はありません。
// ターミナルに HTML を記録しないため
const axios = require("axios");
const チェリオ = require("チェリオ");
const fs = require("fs");
// スクレイピングしたいページの URL
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
// データをスクレイピングする非同期関数
非同期関数scrapeData() {
試す {
// スクレイピングしたいページの HTML を取得します
const { data } = await axios.get(url);
// 前の行で取得した HTML をロードします
const $ = Cheerio.load(データ);
// plainlist クラスのリスト項目をすべて選択します
const listItems = $(".plainlist ul li");
// すべての国のデータを保存します
const 国 = [];
// .each メソッドを使用して、選択した li をループします。
listItems.each((idx, el) => {
// 国/管轄区ごとのオブジェクト保持データ
const 国 = { 名前: ""、iso3: "" };
// a 要素とspan要素のテキスト内容を選択します
// textcontent を上記のオブジェクトに格納します
country.name = $(el).children("a").text();
country.iso3 = $(el).children("span").text();
// 国の配列に国データを入力します
国.プッシュ(国);
});
// 国の配列をコンソールに記録します
console.dir(国);
// 国の配列をcountrys.jsonファイルに書き込む
fs.writeFile("coutries.json", JSON.stringify(countries, null, 2), (err) => {
if (エラー) {
コンソール.エラー(エラー);
戻る;
}
console.log("ファイルへのデータの書き込みに成功しました");
});
} キャッチ (エラー) {
コンソール.エラー(エラー);
}
}
//上記の関数を呼び出します
scrapeData();コードを読んで、何が起こっているか理解できましたか?そうでない場合は、今から詳しく説明します。理解を助けるために、コードの各行にコメントも付けました。
上記のコードでは、ファイルapp.jsの先頭にあるすべての依存関係が必要であり、その後、 scrapeData関数を宣言します。関数内では、スクレイピングする必要があるページのフェッチされた HTML が、 axios使用してcheerioにロードされます。
国とそれに対応するiso3コードのリストは、クラスplainlistのdiv要素にネストされます。 li要素が選択され、 .eachメソッドを使用してそれらの要素をループします。各国のデータが収集され、配列に保存されます。
node app.jsコマンドを使用して上記のコードを実行すると、キャプチャされたデータがcountries.jsonファイルに書き込まれ、端末に出力されます。これは端末に表示される内容の一部です。
この記事を読んでいただきありがとうございます！ cheerioの使用方法についてはすでに説明しました。さらに詳しく知り、その仕組みを完全に理解したい場合は、Cheerio のドキュメントを参照してください。