https://zenn.dev/wablerfam/articles/3f8453da0c7ff2

GoとDenoはシンプルでとても好きです。ReactもUIライブラリとして申し分無いスマートさでとても気に入っているのですが、いざ動かそうと思うとNodeが必要となってきます。それはそれで問題無いのですが、せっかくなら好きなDenoから利用したいので、今回はReactをDenoでバンドルし、Goでembedして動かします。

出来上がったものがこちらです。

以下で少し補足します。

esm.sh経由でReactを利用できるので、React+tsxをDenoで作成すること自体は問題ないはずですが、以下の検討も必要です。

• バンドラーをどうするか Nodeであればesbuild(Vite)やwebpackなど様々な候補があるので状況に応じて選別が可能ですが、Denoから利用するとなると限られてきます。幸いDenoは"deno.land/x"にesbuildと、esbuildをDeno経由で使うためのローダーが存在するのでそちらを利用します。
• バックエンド(Go)とフロントエンド(Deno(TypeScript))で型をどのように共有するか バックエンドもDenoで作る、もしくはGraphqlやOpenAPI、GPRCであれば定義ファイルからバックエンド、フロントエンドのコードを自動生成する方針が取れるのでそちらでもいいかなと思うのですが、Denoをどこまでサポートしているのか不明なことと、今回は簡単なアプリケーションであることから、Goのモデル定義を単にTypeScript用に変換したものをフロントエンドから利用することとします。変換には以下を利用することとしました。
• ゴールをどうするか フロントエンドからバックエンドに向けて最低限の型を意識しながらfetchし、取得した結果をスタイリングして表示するところまでを今回ゴールとします。

まずはtygoでの利用を意識しつつ、バックエンド側でjsonタグ付きのモデルを作成。

tygo用の設定ファイルを作成して、フロントエンド用のtsファイルを自動生成します。

単にfetchするだけでは寂しいのでReact Queryを利用します。スタイリングには公式にも記載のある、

twindを利用してTailwindな装飾を施すこととします。

Denoではモジュール管理についてdeps.tsやimport mapsによる方式がサポートされますが、個人的にimport mapsによる管理のほうがシンプルで好みなので、今回はこちらを利用します。

React Queryのdata型に、tygoから生成した型(User型)を定義したことによって、dataにUser型が付きキチンと補完が効くようになりました。これでバックエンドと連携する簡単なフロントエンドの作成は完了です。

次にesbuildを利用したバンドラーの作成です。まずバンドルファイルを呼び出すための簡単なHTMLを作成して、

バンドルツールを以下のように作成しました。

このとき、バンドルツール用にimport mapsに必要なモジュールを追加しています。

あとは作成したバンドルツールを実行すれば、