DenoでReact

DenoはJavaScriptやTypeScriptを解釈して走らせるランタイムであるが、コードをbundleする手段を持っているのでポータブルなJavaScriptコードを吐き出せる。

また、この際Denoが内蔵しているtscやswcはReactのDSLであるJSX/TSXを扱える(おそらく型検査のため)のでReact用トランスパイラとしても使える。

機能としては十分なのだが、一番の障壁になるのがReactを含むフロントエンド用ライブラリのほとんどがNode.js向けに提供されていることだ。

これらのライブラリの様式はDenoが採用しているブラウザ由来であるexact nameのES Modulesとは異なる(CommonJS由来のため拡張子を省略する文化が残ってしまっている)

これを解決するために偉人達がesm.sh等のCDNを作ってくれている

esm.shはOSSなので手元で動かせて便利である。Deno用Reactフレームワークであるaleph.jsのために作られたようなので、まあそういうことであろう

そこからimportしてJSXを書いてbundleしたらいい感じにブラウザで実行できるJavaScriptソースが完成する

最低限動くことを確かめるには以下のコードをdeno run main.tsxのように走らせる

このページに限って言えばScrapboxのAPI経由で直接走らせることも可能

deno run https://scrapbox.io/api/code/kuuote/DenoでReact/main.tsx

code:main.tsx

// 例えばこれはDenoでそのまま実行できる

// 仮想DOMがコンソールに吐き出されるはずだ

console.log(<div></div>);