2022-12-29
ブラウザ上で動くプログラミング言語の代表はJavaScriptですが、もう2つあります。GPUを使うGLSLと、仮想CPU上で動くマシン語WebAssemblyです。WebAssemblyにコンパイルする言語Laze対応をきっかけに、WebAssemblyのアセンブラをESモジュール化して、サンプルアプリを作ってみました。
「WebAssembly playground」
src on GitHub
たった55行でできた遊び場的、シンプルな開発環境です。JavaScript部分はこんな感じ。ボタンが押されたらアセンブルして実行して結果をセットしているだけです。 import { WABT } from "https://code4fukui.github.io/WABT-es/WABT.js"; const wabt = await WABT(); btnrun.onclick = () => { const src = tasrc.value; const module = wabt.parseWat("test.wast", src); const mbin = module.toBinary({ log: true }); talog.value = mbin.log; const wasm = new WebAssembly.Module(mbin.buffer); const instance = new WebAssembly.Instance(wasm, {}); const { main } = instance.exports; inres.value = main(); }; ESモジュールなので、Denoでもサクッと使えます!(サンプル、WABT.example.js


「code4fukui/WABT-es: The WebAssembly Binary Toolkit」

WebAssembly/wabt」をフォークして、docs/demo/libwabt.js に数行追加して、ESモジュール化するようMakefileに追記する形で対応しています。

parseWatとreadWasmで相互に変換できるWebAssemblyのテキスト形式watとバイナリ形式wasm。watのコンパクトなS式表現がいい感じですね!

links
- ES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS