Puppeteer + Node.js + Typescriptでサイトのデータを取得してみる
3119 ワード
下記のようにサイトに存在する文字列を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()
参考にした記事やサイト
Author And Source
この問題について(Puppeteer + Node.js + Typescriptでサイトのデータを取得してみる), 我々は、より多くの情報をここで見つけました https://zenn.dev/tamu17/articles/a37d742424f2d2著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol