pupeteer内のReactコンポーネントに変数を渡す

こんにちは、@p1assです。

タイトルの通り「pupeteer を動かしている Node が持っている変数を、pupeteer 内で動いている React コンポーネントに渡したい」という状況が発生したので、やり方をメモしておきます。

モチベーション

GCP の Cloud Functions で、「既に React で実装されている複雑な UI コンポーネントを使った OGP を生成したい」という要望がありました。また、そのコンポーネントに渡す Props はデータサイズが大きく、React 側で API を叩たかなくても済む方法を探していました。

具体的にはこのサービスで使っています。

生活習慣の乱れを可視化するやつ

ツイートを使って生活習慣の乱れを可視化するWebアプリです。カレンダーUIで直感的に起床・就寝時間の変化を見ることが出来ます。

midare.p1ass.com

やり方

Page.exposeFunction 関数を使います。

公式リファレンス - page.exposeFunction

この関数は pupeteer 内の window オブジェクトに任意の関数を生やすことが出来る関数です。

次のようにコードを書けば、pupeteer 内の React コンポーネント側で window オブジェクトを操作して値を取得することができます。

// pupeteer 側
const data = ["a", "b"];
await page.exposeFunction("getData", () => data);

// React 側
await window.getData();

実際のコードはここで確認できます。

• pupeteer 側
• React 側

注意する点

window.getData を呼ぶのが早いと、undefinedになる場合があります。

現在は React 側で 600ms スリープした後にwindow.getData() を実行しています。このあたりの秒数は環境差があると思うので、それぞれのプロジェクトで確認することをオススメします。

感想

正直 window オブジェクト使いたくない、、、