👋

Puppeteer + Node.js + Typescriptでサイトのデータを取得してみる

2022/03/19に公開

Node.js

TypeScript

Puppeteer

tech

下記のようにサイトに存在する文字列をpuppeteerを用いて取得することを目的としたコードを書いたのでアウトプットします。

取得したかどうかはターミナルにlogとして出力しました。

所感

puppeteerのライブラリを使用すること事態は調べながら感覚を掴むことができました。
その中でも、メソッドの中でlogが出力できなかったため、なぜ出力できないのかを理解するのに時間がかかりました。evaluateメソッドで記述するコールバック関数は、ブラウザ内で実行されるため意図してターミナルにlogを出力することができないということが原因だったのかなと考えています。
そのため、取得したいデータの取得に時間がかかりましたが実装はできました。
Documentオブジェクトを用いてデータを取得する際はTypeScriptで型アサーションの方法をとらなくてはいけないので注意。

サイトに存在する文字列

取得した文字列

ソースコード

import puppeteer from "puppeteer";
const getSiteData = () => {
 // ブラウザを開く
 const browser = await puppeteer.launch();
      // ページを作成する
      const page = await browser.newPage();
      // URLを準備
      const url = "サイトのURL";

      // サイトに進む
      await page.goto(url);
      // evaluateメソッドでサイト内のデータを取得する関数を取得する
      const datas = await page.evaluate(() => {
        // 配列を用意する(今回はanyの配列にする)
        const dataList: any[] = [];
	
	// Web APIであるDocumentオブジェクトのメソッドを利用してnodeのデータを取得
        const nodeListData = document
          .querySelector(".recruit-info")
          ?.querySelectorAll("h2") as NodeListOf<HTMLHeadingElement>;
	  
	// 標準組み込みオブジェクトのArrayクラスを用いてArrayインスタンスを作成
        const nodeList = Array.from(nodeListData);
	// Arrayを回して必要なプロパティを定義した配列に格納
        nodeList.forEach((_node) => {
          dataList.push(_node.innerText);
        });
	
	// データが格納された配列を返す。
        return dataList;
      });
      // 取得したデータの表示
      console.log("datas: " + datas);

      // ブラウザを閉じる
      await browser.close();

      return "成功";
    } catch (error) {
      console.log(error);

      return "失敗";
    }
 }
getSiteData()

参考にした記事やサイト

下記のようにサイトに存在する文字列をpuppeteerを用いて取得することを目的としたコードを書いたのでアウトプットします。

Discussion