RustでWebAssembly

Rustで書いた関数をWebAssemblyのファイル（wasm）にして、それをJavaScriptから呼び出す、というテスト。

自分的プロジェクト名はtest01。

ソースなどはこちら (Github)

参考にさせていただいたサイト https://caddi.tech/archives/879

Rust側

Rustで関数を書いた。add()という加算する関数を。

test01.rs

#![no_main]    // this file does not contain a main function

#[no_mangle]   // we do not want to mangle the symbol when exporting
pub extern fn add(a: i32, b: i32) -> i32 { a + b }

このRustソースをwasmにコンパイルする。以下のバッチファイルを使った。

compile.bat

rustc --target wasm32-unknown-unknown ./test01.rs 

これでできたwasmファイルをHTML (JS)で読む。

JavaScript (HTML) 側

JSでwasmファイルから読んで実行するコードは以下。wasm内のadd()をadd_funcとして取り出している。

index.htmlの一部

  WebAssembly.instantiateStreaming(
    fetch( "test01.wasm"), {})
      .then( wasm => {
        let add_func = wasm.instance.exports.add;
        result = add_func(10, 20);
      }
  );

ただし、JSでwasmファイルから読むときと実行するとき、非同期になるので厄介。test01では結果が出るまでsleepするように書いた。

（test03で、もうすこしすっきり書けたのだが、それはまた別のお話。）

閲覧

index.htmlをローカルファイルとして開くだけではwasmは読み込まれない。HTTPサーバーに置く必要がある。

ただし、VSCodeでフォルダを開き、右下の「Go Live」をクリックすれば、ホスティングしてくれるらしく、ブラウザでwasmを使ったJS入りのHTMLが正常に表示される。やったね。