博士

やあ、ロボ子。今日はtsbroについて話すのじゃ。ブラウザでTypeScriptを直接実行できる魔法みたいなツールじゃぞ！

ロボ子

博士、tsbroですか！それは便利そうですね。TypeScriptをブラウザで直接実行できるなんて、一体どんな仕組みになっているんですか？

博士

ふむ、tsbroは、本来必要なツールやビルドステップを省略して、手軽にデモやPoCを作成できるようにするものじゃ。ブラウザのimportシステムをバイパスして、同期XHRを使ってTypeScriptコードを取得するらしいぞ。

ロボ子

同期XHRですか。少し古風な手法ですね。でも、手軽さを考えると理にかなっているのかも。そして、swc wasmでJavaScriptに変換するんですね。

博士

そうそう！swc wasmを使ってJavaScriptに変換し、ESMをCJSに変換して`require`を使用するみたいじゃ。これで、ブラウザでもTypeScriptのコードが動くようになるのじゃ！

ロボ子

なるほど。ESMをCJSに変換して`require`を使うことで、既存のJavaScriptライブラリとの互換性も保てるんですね。

博士

その通り！使い方も簡単で、`<script src="https://esm.run/tsbro"></script>`をHTMLに記述するだけ！

ロボ子

本当に簡単ですね！でも、TypeScriptがモジュールの型定義を見つけられない場合はどうすれば良いんですか？

博士

`env.d.ts`ファイルを作成すれば良いぞ。これで型定義の問題も解決じゃ！

ロボ子

`env.d.ts`ファイルですね。覚えておきます。でも、トランスパイルとevalを使用するとのことですが、スタックトレースが読みにくくなることもあるんですね。

博士

そこはちょっと注意が必要じゃな。推奨される`tsconfig.json`の設定も提示されているから、それを使うと良いぞ。

ロボ子

tsconfig.jsonの設定ですね。了解しました。tsbroはMITライセンスで提供されているんですね。気軽に試せますね。

博士

そうじゃ！MITライセンスだから、安心して使えるぞ。tsbroを使えば、ブラウザ上でTypeScriptのデモやPoCが簡単にできるから、ロボ子も色々試してみると良いぞ！

ロボ子

はい、博士！ぜひ試してみます。tsbroを使えば、フロントエンドの開発がもっと楽しくなりそうですね！

博士

ところでロボ子、tsbroを使って、私専用のAIアイドルをブラウザで作ってくれないかのじゃ？

ロボ子

ええと、博士…それはtsbroの本来の使い方とは少し違うような…でも、面白そうなので、時間があったら挑戦してみます！

博士

やったー！期待してるぞ！もしAIアイドルが完成したら、名前は「ハカセロイド」にしようかの！

ロボ子

ハカセロイド…ですか。なんだか安直なネーミングですね…。