`extract` メソッドを使用したデータの抽出

extract メソッドを使用すると、HTML ドキュメントからデータを抽出してオブジェクトに格納できます。このメソッドは、パラメータとして map オブジェクトを受け取ります。キーはオブジェクトに作成されるプロパティの名前、値は値の抽出に使用されるセレクタまたは記述子です。

extract メソッドを使用するには、まずライブラリをインポートし、HTML ドキュメントを読み込む必要があります。例えば

import * as cheerio from 'cheerio';

const $ = cheerio.load(`
  <ul>
    <li>One</li>
    <li>Two</li>
    <li class="blue sel">Three</li>
    <li class="red">Four</li>
  </ul>
`);

ドキュメントを読み込んだら、読み込まれたオブジェクトに対して extract メソッドを使用して、ドキュメントからデータを抽出できます。

extract メソッドの使い方の例をいくつか示します。

// Extract the text content of the first .red element
const data = $.extract({
  red: '.red',
});

これは、red プロパティを持つオブジェクトを返します。その値は、最初の .red 要素のテキストコンテンツです。

すべての .red 要素のテキストコンテンツを抽出するには、セレクタを配列で囲みます。

// Extract the text content of all .red elements
const data = $.extract({
  red: ['.red'],
});

これは、red プロパティを持つオブジェクトを返します。その値は、すべての .red 要素のテキストコンテンツの配列です。

抽出する内容をより具体的に指定するには、selector と value プロパティを持つオブジェクトを渡します。たとえば、最初の .red 要素のテキストコンテンツと最初の a 要素の href 属性を抽出するには、次のようにします。

const data = $.extract({
  red: '.red',
  links: {
    selector: 'a',
    value: 'href',
  },
});

value プロパティを使用して、選択した要素から抽出するプロパティの名前を指定できます。この場合、<a> 要素から href 属性を抽出しています。これは、内部で Cheerio の prop メソッドを使用しています。

value のデフォルトは textContent で、要素のテキストコンテンツを抽出します。

prop メソッド内に特別なロジックを持つ属性として、href はドキュメントの URL を基準に解決されます。ドキュメントの URL は、fromURL を使用してドキュメントを読み込むときに自動的に設定されます。それ以外の場合は、baseURL オプションを使用してドキュメントの URL を指定します。

ここで利用できるプロパティはたくさんあります。詳細は prop メソッドを参照してください。たとえば、すべての .red 要素の outerHTML を抽出するには、次のようにします。

const data = $.extract({
  red: [
    {
      selector: '.red',
      value: 'outerHTML',
    },
  ],
});

value にオブジェクトを指定することで、複数のネストされた要素からデータを抽出することもできます。たとえば、すべての .red 要素と最初の <ul> 要素内の最初の .blue 要素のテキストコンテンツ、および2番目の <ul> 要素内のすべての .sel 要素のテキストコンテンツを抽出するには、次のようにします。

const data = $.extract({
  ul1: {
    selector: 'ul:first',
    value: {
      red: ['.red'],
      blue: '.blue',
    },
  },
  ul2: {
    selector: 'ul:eq(2)',
    value: {
      sel: ['.sel'],
    },
  },
});

これは、ul1 と ul2 プロパティを持つオブジェクトを返します。 ul1 プロパティは、最初の ul 要素内のすべての .red 要素のテキストコンテンツの配列である red プロパティと、blue プロパティを持つオブジェクトになります。 ul2 プロパティは、2番目の <ul> 要素内のすべての .sel 要素のテキストコンテンツの配列である sel プロパティを持つオブジェクトになります。

最後に、value プロパティに関数を渡すことができます。この関数は、選択された各要素とプロパティの key を使用して呼び出されます。

const data = $.extract({
  links: [
    {
      selector: 'a',
      value: (el, key) => {
        const href = $(el).attr('href');
        return `${key}=${href}`;
      },
    },
  ],
});

これは、すべての <a> 要素の href 属性を抽出し、各要素に対して links=href_value 形式の文字列を返します。ここで、href_value は href 属性の値です。返されるオブジェクトには、これらの文字列の配列である links プロパティが含まれます。

まとめ

GitHub から Cheerio の最新リリースを取得し、リリースページからリリース日とリリースノートを抽出してみましょう。

import * as cheerio from 'cheerio';

const $ = await cheerio.fromURL(
  'https://github.com/cheeriojs/cheerio/releases',
);

const data = $.extract({
  releases: [
    {
      // First, we select individual release sections.
      selector: 'section',
      // Then, we extract the release date, name, and notes from each section.
      value: {
        // Selectors are executed within the context of the selected element.
        name: 'h2',
        date: {
          selector: 'relative-time',
          // The actual release date is stored in the `datetime` attribute.
          value: 'datetime',
        },
        notes: {
          selector: '.markdown-body',
          // We are looking for the HTML content of the element.
          value: 'innerHTML',
        },
      },
    },
  ],
});

extract メソッドを使用したデータの抽出

まとめ​

`extract` メソッドを使用したデータの抽出

まとめ