参考

Wasm is 何?

Wasm及びWebAssemblyは、 MDN 曰く次のように記されています。

WebAssembly は現代のウェブブラウザーで実行できる新しい種類のコードです。ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブリー風言語です。さらに、 C/C++、C# や Rust などの言語のコンパイル先となり、それらの言語をウェブ上で実行することができます。 WebAssembly は JavaScript と並行して動作するように設計されているため、両方を連携させることができます。

https://developer.mozilla.org/ja/docs/WebAssembly

WebAssembly を用いて、WordPressのバックエンドを構築し動作させる「Client-side WebAssembly WordPress」や、WebAssembly にコンパイルしたPostgres など、多数の実用例を探すことができます。 make.wordpress.org

pglite.dev

また本サイトでも、過去にWebAssembly 連載企画が行われていました。よければこちらもご覧ください。

toranoana-lab.hatenablog.com

wasmファイルの作り方

docs.deno.com では、wasmファイルの作成例が掲載されています。

docs.deno.com

wabtを使った方法です。簡単に内容を示します。(wabt自体の導入については、READMEを参照ください。)

multi.watを用意します。

;; multi.wat
(module
  (func (export "multi") (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.mul
  )
)

multi.watをコンパイルします

$ wat2wasm multi.wat -o multi.wasm

このように、wasmを作成することができます。

Deno 2.1 で導入されたファーストクラス Wasm サポート

本リリース前での、wasmの利用方法として、リリースノートには以下の方法が示されています。

const wasmInstance = WebAssembly.instantiateStreaming(fetch("./add.wasm"));
const { add } = wasmInstance;

console.log(add(1, 2));

また、次のような利用もできました。先に作ったmulti.wasmを読み込む場合、以下のように記述できます。

const wasmCode = Deno.readFileSync("./wasm/multi.wasm");
const wasmModule = new WebAssembly.Module(wasmCode);
const wasmInstance = new WebAssembly.Instance(wasmModule);
const wasm = wasmInstance.exports

console.log(wasm.mul(2, 2));

筆者は、後者の方法でRustで提供されるライブラリをベースにwasm化し、ソースコードに展開することでJavaScriptのimportのみでwasmを使えるようにし、deno.land/xでモジュール公開をしていた経験もあります。

github.com

そして、Deno 2.1から以下のように読み込むことができます。

import { mul } from "./wasm/multi.wasm";

console.log(mul(2, 2));

非常に簡便な記述ができるようになりました。 wasm import された wasm モジュールは、モジュールグラフの一部となり、キャッシュし高速な動作がされるようになります。さらに、型チェックの対象になり、deno checkを実行するとエラーを返します。

//usewasm.ts
const wasmCode = Deno.readFileSync("./wasm/multi.wasm");
const wasmModule = new WebAssembly.Module(wasmCode);
const wasmInstance = new WebAssembly.Instance(wasmModule);
const wasm = wasmInstance.exports
console.log(wasm.mul(2, "A"));


import { mul } from "./wasm/multi.wasm";
console.log(mul(2, "A"));

$ deno check usewasm.ts 
Check file:///hoge/usewasm.ts
error: TS2349 [ERROR]: This expression is not callable.
  No constituent of type 'ExportValue' is callable.
console.log(wasm.mul(2, "A"));
                 ~~~
    at file:///Users/1068/dev/deno-test/usewasm.ts:12:18

TS2345 [ERROR]: Argument of type 'string' is not assignable to parameter of type 'number'.
console.log(mul(2, "A"));
                   ~~~
    at file:///Users/1068/dev/deno-test/usewasm.ts:18:20

Found 2 errors.