WebAssemblyの環境を整えた。最低何を記述すれば動くのか。asm.jsからwasm生成

こちらの記事で書きましたが、チュートリアルの通りCからwasmに変換して実行する事は出来た。

<a href="./24" target="_blank">最低何を記述すれば動くのか。Cからwasm生成</a>

ただし、色々安全機能がある為かファイルサイズが大きい。<br>
よって、今回は asm.js から wasm を生成する手順で最小ファイルサイズのバイナリで動作させてみることにした。

## 開発環境

「開発環境はCからwasm生成」で実施した手順で用意できていた。<br>
asm2wasm.exe と wasm-as.exe を見つけることが出来るだろう。

## asm.jsの記述

```javascript
function asm(stdlib, foreign, heap) {
	'use asm';
	const imul = stdlib.Math.imul;
	var aa = 0;
	function mul(a) {
		a = a | 0;
		aa = imul(a,a);
		return aa;
	}
	return { mul: mul };
}
```

mulという関数を作成。与えられた数値を2乗して返すものである。

## asm.js から wast 生成

コマンドラインは以下の通り

```
asm2wasm.exe mul.js > mul.wast
```

生成されたwast(S式)は以下の通り。

```
(module
 (import "env" "memory" (memory $0 256 256))
 (import "env" "table" (table 0 0 anyfunc))
 (import "env" "memoryBase" (global $memoryBase i32))
 (import "env" "tableBase" (global $tableBase i32))
 (global $aa (mut i32) (i32.const 0))
 (export "mul" (func $mul))
 (func $mul (param $a i32) (result i32)
  (set_global $aa
   (i32.mul
    (get_local $a)
    (get_local $a)
   )
  )
  (return
   (get_global $aa)
  )
 )
)
```

import文が幾つかあり、このまま進むと<br>
TypeError: import object field 'env' is not an Object<br>
と、実行時エラーが出る。<br>
Emscriptenに関係する物か不明ですが、以下の通り削除して進めます。

```
(module
 (global $aa (mut i32) (i32.const 0))
 (export "mul" (func $mul))
 (func $mul (param $a i32) (result i32)
  (set_global $aa
   (i32.mul
    (get_local $a)
    (get_local $a)
   )
  )
  (return
   (get_global $aa)
  )
 )
)
```

## wast から wasm 生成

コマンドラインは以下の通り

```
wasm-as.exe mul.wast -o mul.wasm
```

生成されるwasmはバイナリ。わずか80バイト。

```
00,61,73,6D,01,00,00,00,01,86,80,80,80,00,01,60,
01,7F,01,7F,03,82,80,80,80,00,01,00,06,86,80,80,
80,00,01,7F,01,41,00,0B,07,87,80,80,80,00,01,03,
6D,75,6C,00,00,0A,95,80,80,80,00,01,8F,80,80,80,
00,00,02,7F,20,00,20,00,6C,24,00,23,00,0F,0B,0B,
```

## htmlの記述

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="run">実行</button>
<div id="result"></div>
<script>
const module = fetch('mul.wasm')
	.then(x => x.arrayBuffer())
	.then(x => WebAssembly.compile(x));

HTML読み込み、Scriptの実行でmul.wasmが読み込まれ準備が整う。<br>
[実行]ボタンをクリックするとwasmのmul関数へ数値の7が渡され、結果が返り、表示される。<br>
7×7の49が表示されれば成功である。

WebAssemblyの環境を整えた。最低何を記述すれば動くのか。asm.jsからwasm生成

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他