Reactで<script>タグを生成しスクリプトを実行/外部スクリプトを読み込む方法

React に限った話ではないかもしれませんが、JavaScript(TypeScript)で <script>タグを動的に生成してスクリプトを実行したい、もしくは外部スクリプトを読み込みたいことは結構あると思います。

外部スクリプトを読み込む方法はネットを探せば結構見つかるのですが、<script>...</script>の内部のスクリプトを実行する方法を見つけることがほとんどできなかったので、その方法をご紹介します。

まず、React で外部スクリプトを読み込む方法です。useEffectを外せば普通の JavaScript(TypeScript) でも動作します。

useEffect(() => {
  const head = document.getElementsByTagName('head')[0] as HTMLElement;
  const scriptUrl = document.createElement('script');
  scriptUrl.type = 'text/javascript';
  scriptUrl.src = '<script url>';
  head.appendChild(scriptUrl);
  }, []);

これは問題ないですね。

それでは、スクリプトを実行する方法は以下のようになります。

useEffect(() => {
    const scriptAlert = document.createElement('script');
    scriptAlert.type = 'text/javascript';

    const textAlert = document.createTextNode(`alert('hello!')`);
    scriptAlert.appendChild(textAlert);

    const head = document.getElementsByTagName('head')[0] as HTMLElement;
    head.appendChild(scriptAlert);
  }, []);

ポイントは、document.createTextNodeで実行するスクリプトを作成することです。

scriptAlertには、innerHTML、innerText、textContent がありますがどれも動作せずエラーとなります。

唯一、document.createTextNode だけが有効な方法になります。