Cheerioへようこそ！
5分足らずでCheerioの概要をざっと見ていきましょう。
はじめに
Cheerioとその依存関係をインストールしましょう。
Node.jsのセットアップ
Cheerioをインストールするには、システムにNode.jsがインストールされている必要があります。
- Node.jsの最新版をダウンロードしてください
- Node.jsをインストールする際は、依存関係に関するすべてのチェックボックスをオンにすることをお勧めします。
Cheerioのインストール
Node.jsをセットアップしたら、次のコマンドを使用してCheerioをインストールできます。
- npm
- Yarn
- pnpm
npm install cheerio
yarn add cheerio
pnpm add cheerio
Cheerioのインポート
Cheerioがインストールされたら、importステートメントを使用してJavaScriptコードにインポートできます。
import * as cheerio from 'cheerio';
古い環境（またはCommonJSの使用を好む場合）では、require関数を使用できます。
const cheerio = require('cheerio');
Cheerioの使い方
Cheerioをインポートしたら、それを使用してWebページデータを操作およびスクレイピングできます。
ドキュメントの読み込み
HTMLを読み込む最も簡単な方法は、load関数を使用することです。
const $ = cheerio.load('<h2 class="title">Hello world</h2>');
これにより、HTML文字列がCheerioに読み込まれ、Cheerioオブジェクトが返されます。その後、このオブジェクトを使用してDOMをトラバースし、データを操作できます。
ドキュメントの読み込みの詳細はこちら。
CheerioはWebブラウザではありません。 Cheerioはマークアップを解析し、結果のデータ構造をトラバース/操作するためのAPIを提供します。結果をWebブラウザのように解釈することはありません。具体的には、視覚的なレンダリング、CSSの適用、外部リソースの読み込み、またはSPA（シングルページアプリケーション）で一般的なJavaScriptの実行は行いません。これにより、Cheerioは他のソリューションよりもはるかに高速になります。ユースケースでこれらの機能が必要な場合は、PuppeteerやPlaywrightなどのブラウザ自動化ソフトウェア、またはJSDomなどのDOMエミュレーションプロジェクトを検討する必要があります。
要素の選択
ドキュメントを読み込んだら、返された関数を使用してドキュメントから要素を選択できます。
ここでは、クラスtitleを持つh2要素を選択し、そこからテキストを取得します
$('h2.title').text(); // "Hello world"
要素の選択の詳細はこちら。
DOMのトラバース
$関数は、DOM要素の配列に似たCheerioオブジェクトを返します。このオブジェクトを開始点として、さらにDOMをトラバースできます。たとえば、find関数を使用して、選択した要素内の要素を選択できます。
$('h2.title').find('.subtitle').text();
DOMをトラバースするために使用できる他の多くの関数があります。DOMのトラバースの詳細はこちら。
要素の操作
要素を選択したら、Cheerioオブジェクトを使用して要素を操作できます。
ここでは、クラスtitleを持つh2要素を選択し、その中のテキストを変更します。また、ドキュメントに新しいh3要素を追加します。
$('h2.title').text('Hello there!');
$('h2').after('<h3>How are you?</h3>');
要素の操作の詳細はこちら。