［制作ログ］jsのplaygroundのようなものを作りたい
作っているもの
https://taga3s-js-playground.vercel.app/
環境 / TechStack
bun
preact
quickjs-emscripten
css modules
codemirror
2024/09/24
web側のプロジェクトセットアップをした。react-iconsが思ったよりも色々なアイコンを提供しており、便利だと思った。とりあえず、codemirrorはレンダリングできた。System Guideを読むのが良さそう。
2024/09/26
ひとまず、codemirrorを用いて、エディター自体は簡易的なものではあるが実装できた。
参考にした記事：https://zenn.dev/team_zenn/articles/zenn-markdown-editor-by-cm6
こんなもん↓
https://scrapbox.io/files/66f5518d3588ea001d2c3123.png
ので、jsのコードを実行して結果を取得するという実装に移りたいところ。
手っ取り早くやってみるならこれかな
https://github.com/justjake/quickjs-emscripten
というのと、Service Workerの利用を検討してみる
参考になる：https://zenn.dev/steelydylan/articles/serviceworker-and-wasm
2024/10/01
quickjs-emscriptenを用いて、軽量なJSエンジンを利用するという方向性で実装を行い、ES2023までの構文とconsole.log()までは実行できるようにした。console.log()はブラウザのUIでLoggingされるように調整した。
このように動いている↓
https://scrapbox.io/files/66fbf13d97c918001c627ef6.png