1

React.js を用いて Web サイトを開発しています。

モジュール形式で提供されていない、<script> タグで読みこんでグローバルオブジェクト(window)に追加されたオブジェクトを利用するタイプの外部スクリプトを、React.js でうまく扱う方法についての質問です。

たとえば、決済代行業者 PAY.JP が提供する payjp.js はまさにそのパターンで、素の HTML の場合は以下のようにして利用できます:

<!-- 外部スクリプトのロード -->
<script src="https://js.pay.jp/v2/pay.js"></script>
<!-- ロードしたスクリプトを用いて各種処理を実行 -->
<script>
// スクリプトによってグローバル空間に定義された `Payjp` を用いる
const payjp = Payjp('API キー')
payjp.foo() // 何らかの処理
</script>

こういった外部スクリプトを React.js で扱う場合、以下のような問題点があると考えます:

  1. <script> を書く位置を気を付けないと、コンポーネントのライフサイクルの中でスクリプトが二重にロードされることがある
  2. グローバル空間にロードが完了したタイミングを動的に検知する必要がある

1 については、コンポーネントではなくテンプレート HTML 側に <script> を記述したり、Next.js のようなテンプレートがないフレームワークでは Layout コンポーネントの中で <script> を記述することで、何とかなると思っています。

問題は 2 の方です。 このような React の制御外にあるイベントを上手く検知するにはどうすれば良いのでしょうか。よろしくお願いします。

1 件の回答 1

1

質問中の1の方法

グローバルに定義するしか無いようなライブラリがあった場合、基本的にはこの戦略を取ることが多いです。
まさにReactやReactDOMをアプリケーションのコードから分離するような場合と同様に扱うことで依存関係を解決します。

<!-- 外部スクリプトはアプリケーションのコードより前に読み込む -->
<script src="react.js" >
<script src="react-dom.js" >
<script src="https://js.pay.jp/v2/pay.js" >
<!-- 実装本体は外部スクリプトが読み込み終わってから実行する -->
<script src="application.js" >

この順序で読み込むことが確実であればapplicatino.jsでglobalに定義された変数にアクセスしても問題ないでしょう。

を書く位置を気を付けないと、コンポーネントのライフサイクルの中でスクリプトが二重にロードされることがある

HTMLに直書きであればReactのライフサイクル外なので気にしなくても良いと思います。

質問中の2の方法

問題として扱ってる2の方はReactで外部ライブラリをロードする場合に扱うパターンになりますが、この場合は以下のように記述することができます。

const loadScript = async (url) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = url;
    script.addEventListener("load", function() {
      resolve();
    });
    script.addEventListener("error", function(e) {
      reject();
    });
    document.body.appendChild(script);
  });
};

export default function App() {
  const onClick = async () => {
    await loadScript("https://js.pay.jp/v2/pay.js"); // 動的にライブラリを読み込む
    console.log("Loaded: ", window.Payjp);           // 読み込み後に利用可能
  };
  return (
    <div className="App">
      <button onClick={onClick}>Load dynamic library</button>
    </div>
  );
}

ロードが完了したタイミングを動的に検知する必要がある

上記のloadScriptの挿す場所次第ですか、Promiseが解決した後でglobalの変数にアクセスすれば問題ないでしょう。

その他方法1

payjp.jsはnpmライブラリとしても提供されているようです。おそらくこれを利用するのが最も簡単でしょう。

コード中でimportもしくはrequireすれば利用可能です。

その他方法2

https://js.pay.jp/v2/pay.js自体を直接ダウンロードしてきて、import/requireする方法です。つまり、自前で管理してしまうパターンです。

pay.jsとしてダウンロードしてきたものを保存すると、

const onCLick = async () => {
    await import("./pay.js");
    // window.Payjp にアクセス可能
}

というようにDynamic Loadできます。

参考

これはnext.jsを利用中であればdynamic-importが利用できます。

3
  • 非常に的確でご丁寧な回答、ありがとうございました。非常に勉強になりました。 回答いただいた内容を参考に、最終的に usePayjp() のようなカスタムフックを作成し、利用したいコンポーネント内で呼び出すようにしました。 フックの内部で、「質問中の2の方法」で書いてくださったスクリプトの動的ロード&イベントリスナによる検知を行っています。
    – hiroyuki
    Commented 2020年6月1日 12:38
  • 【補足】その他方法1 の npm モジュールについて :ご指摘の npm モジュールなのですが、これは今回の payjp.js で生成したトークンを受け付けるサーバサイド用のモジュールなんです。自分も探したのですが、フロント用の npm モジュールは公開されていないようでして、、今回質問させていただいたという経緯です。
    – hiroyuki
    Commented 2020年6月1日 12:42
  • サーバーサイド用のモジュールでしたか。なるほど。dynamic importの方法について追記しました。今回の用途では余り向いていない(公式が更新する可能性があるので)ので参考までに。
    – himenon
    Commented 2020年6月1日 13:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。