React時代のブログパーツについて考えたことメモ

昔は適当なJavaScriptを貼ると自分のサイトに機能を足せるようなブログパーツと呼ばれるものが広く使われていた。

当時はjQueryみたいなのが主流で、DOMを書き換えるとしても一部のみでページ遷移をする場合はサーバーからHTMLが新規で送られてくる挙動が普通だった。なので送られてきたHTMLのDOMを適当に書き換えても困ることは少なかった。

しかし世はReact全盛である。ReactはすべてのDOMを掌握（もちろんReactの設定次第だが）しており、SPAを使えばReactがすべてのDOMを書き換える。この挙動に以前のブログパーツ的なものが入り込む余地はない。

しかしブログパーツみたいなものの需要は存在している。ということでReact全盛の時代にブログパーツをどうすれば提供できるのか先日考えたのでメモ的に書いておきます。

まずReactにはブログパーツ的なものを貼ることを想定した機能としてcreatePortalというのがある。この機能を使えばReact管轄外のDOMを用意することができるので、その管轄外のDOMは書き換え放題になる。

ということで以下のような実装をすれば良い。

• React管轄外のDOMを用意する
  • idつきのdivタグが良いと思うので、以下はそれを使う前提
    • もちろんidはサービス名をprefixにつけるなど被らない工夫をする
  • createPortalを使っても良いし、Reactが特定のdivタグしか管理してないなら、その外に作るでも良い
• ブログパーツは特定のidの中身のみを書き換える実装にする
  • idが存在してなければReactとかを使ってない実装とみなして、適当にDOMを追加するという仕様にしても良い
  • SPAとかでページ遷移が発生しても管轄外のDOMは書き換えられないので残り続けることができる

知っている人には当たり前のことなのかもしれないですが、ChatGPTと相談しながら考えた結果、割と現実的な作戦ができたのでメモとして残しておきます。