puppeteer + jsdomでTableを取得して加工する

puppeteer + jsdomでTableを取得して加工する方法についてのメモです。

例

例として、以下の気象庁のページを使います。

上のぺージを開くと、以下のような画面が開くのですが

ここではtableを取得して、赤枠部分だけが表示されるように加工します。

以下、ソースです。

これを実行すると、以下のようなtableのHTMLを取得できます。

以下、ソースについての補足です。

Array.fromでHTMLCollectionなchildrenを配列に変換しているのは、ループ文を使うためです。

jsdomを使わなくても

await page.$eval("#tablefix1", (e) => e.outerHTML);

の部分で

await page.$eval("#tablefix1", (e) => {
  //ここでtableを取得＆加工する処理をすべて書いてしまう
);

という感じに書くことでjsdomを使わずに書けます。

ただ、この方法だと（おそらく）事前に定義した関数などが使えなくなってしまうというデメリットがあると思われます。
（もし間違ってる場合はご指摘いただけると非常に嬉しいです･･･！）

今回の例のように、行や列を結合されていると、加工するのがちょっとややこしいです。

なので今回は事前に設定した「行」「列」だけが抜き出されるようにしています。

それを設定しているのがtargetRowsAndColumnsという変数です。

tableを抜き出す方法としては

の2種類があると思うのですが、今回は前者です。

削除するデータが少ない場合は、後者の方が良いかもしれません。

おわり