理系公務員のプログラミング日記

node.jsでWebスクレイピング

Webスクレイピングをしてみます。

1.puppeteerをインストールする

まず、適当なフォルダを作りその直下でpuppeteerをインストールします。

npm install puppeteer

ESModuleでコードを書くので、package.jsonに「"type":"module"」を追加します

{
  "type": "module",
  "dependencies": {
    "puppeteer": "^23.7.1"
  }
}

2. getリクエストを送りデータを取得する

適当なWebページにアクセスし、そのページのtitle,h1とスクリーンショットを取得します。

サンプルではexample.comにアクセスしてみます。

import puppeteer from 'puppeteer'


const sleep = milliseconds =>
  new Promise(resolve =>
    setTimeout(resolve, milliseconds)
  );


const getWebPage = async () => {
    // ブラウザを起動
    const browser = await puppeteer.launch({ headless: 'new' });
    const page = await browser.newPage();

    // 指定したURLに移動
    await page.goto('https://example.com');

    // 少し待つ
    await sleep(2000);
    
    // ページのタイトルを取得
    const title = await page.title();
    console.log('Page Title:', title);

    // 任意のセレクタからテキストを取得（例: h1タグ）
    const heading = await page.evaluate(() => {
        const element = document.querySelector('h1');

        return element.textContent
    })

    console.log(heading)
    // スクリーンショットを撮る（任意）
    await page.screenshot({ path: 'example.png' });

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

await getWebPage();

動作が完了すると、同じフォルダにスクリーンショットが表示されるはずです。

3.Reactで指定したページの情報を画面に表示する

このままでもOKですが、せっかくなので取得したデータをReactで画面に表示しましょう。

------- 以下は後ほど追加します。