🎳

【React】scriptタグを埋め込んで動かしたい！！

2024/05/02に公開

HTML

はじめに

先日、4月頭にリリースしたサービスの広告審査が通りました。「よっしゃ、実装するぞ！」と意気込んだものの、対象画面内にscriptタグを埋め込む必要があり、どうやら単純に実装しても動かないようでした。
自分なりに色々調べて、ChatGPTやBardに聞いたりしてうまいこと動いたのでメモとして残します。あまり必要としないかもしれませんが、同じく悩んでいる方の力になればと思います。

ちょっと宣伝

審査が通ったサービスというのがこちらです。

https://wikimiru.com/

wikimiru（ウィキミル）という、時間経過でランダムに流れるWikipediaの情報を眺めることができるサービスです。

本当にただそれだけです。

通勤時間などに使ってもらえると嬉しいです（個人的には歯磨きをしながらよく見ています）！

実装

本題に入ります。
私の場合、以下のような構成にする必要がありました。

<div id="test">
  <script src="url" async></script>
  /* 実際はconsoleではありません。 */
  <script>console.log("動いた！")</script>
</div>

実現するためには以下のようにする必要がありました。

function Banner() {
  useEffect(() => {
    const div = document.getElementById("test");

    const script1 = document.createElement("script");
    script1.src = "url";
    script1.async = true;
    div.appendChild(script1);

    const script2 = document.createElement("script");
    script2.textContent = 'console.log("動いた！")';
    div.appendChild(script2);

    return () => {
      div.removeChild(script1);
      div.removeChild(script2);
    };
  }, []);

  return <div id="test" className="banner"></div>;
}
export default Banner;

createElementやcreateRootで設定するような記事をちらほらと見かけて、Reactだしそっちを使うか！と思って実装しても動きませんでした。何故かはわかりません。

また、console.log("test")をtextContentに設定しています。試していないですが、調べた限りではinnerHTMLでは動かないようです。

おわりに

生の？HTMLであればサクッと終わったと思うのですが、思ったより時間がかかりました。Reactを使うことで色々便利になっていますが、（今時滅多にないかもですが）今回のようなケースで扱いにくさを感じました。

どなたかの参考になりましたら幸いです。

はじめに

ちょっと宣伝

実装

おわりに

Discussion