第1回 TypeScript×Puppeteerで始めるスクレイピング – 環境構築

キジです｡こんばんわ｡
今回は､TypeScriptでスクレイピングをやってみたいと思います｡
TypeScriptの環境構築は以下で解説してます｡先に見ていただけるとスムーズに進められると思います｡

Node.js × TypeScript 環境構築手順

@kijiです｡今回は､TypeScirptの環境構築､テストコードの実施までをまとめていきます｡主に､バッチやスクレイピングなどの単発なプロジェクトの環境を想定しています｡ 本記事の環境は以下のようになっています｡ MacOS Big S

www.libetech.info

TypeScirptでスクレイピングをするには､｢Puppeteer｣というモジュールを使います｡
今回はPuppeteerを使うための環境構築､及びプログラムでスクリーンショットを取るまでを実施します｡

環境

$ node -v
v14.17.3

モジュールのインストール

$ npm install puppeteer @types/puppeteer puppeteer-core

tsconfig.jsonの設定

tsconfig.json

    "types": ["node", "jest", "puppeteer"],    ･･･ puppeteerを追加

ソースコード

index.ts

const puppeteer = require('puppeteer');

(async () => {
    // browserを立ち上げる
    const browser = await puppeteer.launch();
    // page(tab)を生成する
    const page = await browser.newPage();
    // 特定のURLへ移動する｡
    await page.goto('https://google.com');
    // スクリーンショット作成
    await page.screenshot({ path: 'output/sample.png' });
    // browserを閉じる
    await browser.close();
})();

実行と結果

$ npm run start

まとめ

はい｡プログラムで､Googleの検索画面を表示して､スクリーンショットを取るところまでやりました｡
しかし､Puppeteerはもっとたくさんのことをすることができます｡

入力欄に文字を入力したり､特定の値(例えば､株価など)を取得したりすることができます｡
別記事でPuppeteerのもっと踏み込んだ使い方を解説したいと思います｡

Puppeteer マニュアル

参考書籍