メモ置き場

WebAssemblyメモ

2022-08-13

WebAssembly
JavaScript

WebAssembly

構成要素など

Module
- WebAssemblyのデプロイ、読み込み、コンパイルの単位
  - wasmのバイナリファイルに相当
- 内部にtype, function, table, memory, globalの定義を含む
Type
- 関数の型定義
Function
- 関数定義
Table
- 関数参照のテーブル
- elemで初期化できる
- import/exportして動的リンクに利用される
Memory
- wasmから読み書きできるメモリ領域
- 1ページ64KiBでページ単位で確保する
- dataで初期化できる
- import/exportしてデータの共有や受け渡しに利用される。
Global
- グローバル変数

import/export

Function, Table, Memory, Globalはexport指定してwasm外からの参照、importを指定してwasmへ値を渡すことができる

テキストフォーマット・バイナリフォーマット

WebAssemblyにはテキストフォーマット(.wat)とバイナリフォーマット(.wasm)が存在
相互の変換はWABTのwat2wasm, wasm2watコマンドで可能
- WABT(The WebAssembly Binary Toolkit): WebAssemblyのCLIツール群。wabbitと読む
  - https://github.com/webassembly/wabt

テキストフォーマットからバイナリフォーマットの変換

$ brew install wabt
$ wat2wasm sample1.wat -o sample1.wasm
$ wat2wasm simple.wat -v  # バイトごとの出力の確認

参考

JavaScriptからの利用

WebAssemblyの構成要素?がそれぞれWebAssembly JavaScript APIで提供されるオブジェクトと対応している
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly
基本的な実行の流れはwasmバイナリからModuleを生成、インポートするオブジェクトを渡してInstance化し、Instanceのエクスポートされたオブジェクトを利用する形になる
- WebAssembly.instantiateStreaming()でwasmバイナリを渡してインスタンス化できるので、通常はこちらを利用する
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming

(module
  (func (export "add")
    (param $p1 i32) (param $p2 i32)
    (result i32)
    local.get $p1
    local.get $p2
    i32.add
  )
)

$ wat2wasm sample1.wat -o sample1.wasm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebAssembly sample1</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

WebAssembly.instantiateStreaming(fetch("sample1.wasm"))
  .then(res=>{
    console.log(res.instance.exports.add(1, 2)); // => 3
  });

参考

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