以前の記事でmicroCMS+Next.js+Reactの構成からEmDash+Astro+Reactの構成に移行したことを説明しましたが、その後ウェブサイトの開発を続ける中で、Reactを使うたびに毎度毎度only:client=”react”を宣言するのが嫌になってきたので、Reactも消し去ろうという気になりました。破壊神です。
React島
AstroでReactを使うと、ReactコンポーネントはIslandになります。
必要な場所だけJavaScriptを載せられるので、仕組みとしては合理的だと思います。ただ、もともとNext.js+ReactだったものをAstro+Reactに無理やり移行したわけなので、Islandの量がめちゃめちゃ多くなってしまいました。SSRとCSRをいちいち気にしてやるのも面倒になってきました。
このサイト、そこまでしてReactいるか？結論いらない。
では移行。
Liquid Glass←ダルすぎ
Reactを消すにあたって一番の課題はLiquid Glassをどう移行するか、でした。もともとはReact製のライブラリを使っていたので、Reactを消すとなれば完全に自前で実装する必要が出てきます。
どうもCodexはLiquid Glassを実装するのが苦手みたいです。
半透明の板を置いて誤魔化してみたり、blurが効いているつもりで効いていなかったり、変なシミみたいなものだけ残したり。とにかくLiquid Glassを実装するにあたっては全く役に立ちませんでした。
結局私がもとのライブラリのコードを読んで、どういう感じで実装しているのかを確認したうえで、Codex君に説明するハメになりました。
どのレイヤーで合成しているのかを説明して、SVGフィルタを使う実よう指示して、既存実装から変なのがついてこないように1から作り直すよう指示して、ようやくうまくいきました。
おお
Liquid Glassさえ終わらせればあとはこっちのものです。独自実装していたブログ系ページもEmDashのページ機能に近づけて、OGPやEmDashの編集機能が使えるようにしました。
結果として、ブログも実績もEmDashのデータをそのまま使い、Astro側で表示を調整するスタイルになりました。
実はReact残っている
これでReactとおさらば！と思ってnpmパッケージを消したらうごかなくなりました。どうやらEmDashのAdminページはReactで構成されているようです。なんやねん。
結局Reactと完全にお別れとはいきませんでしたが、少なくともユーザーが閲覧する場所からはReactがなくなりました。めでたしめでたし。