本記事の内容はあまり実用的ではないもののとりあえずブラウザでWebAssemblyが動くのを確認したい人向け
前提
Rustの最新版がインストールされていること
本記事を執筆時点では1.31.1が最新だった
ビルドターゲットの確認
ターミナルで以下のコマンドを打つとビルドターゲット一覧が確認できる
# rustup target list
この中でWebAssemblyに関係しているのは以下の三つ
asmjs-unknown-emscripten
wasm32-unknown-emscripten
wasm32-unknown-unknown
今回はwasm32-unknown-unknownを使って話を進めるものとする
ビルドターゲット追加のコマンドは以下の通り
# rustup target add wasm32-unknown-unknown
今回の簡易な方法ではcargoは利用せず直接rsファイルを生成、コンパイルする
実行例として1から10までの和を返す関数
test.rs
# [no_mangle]
pub fn sum_from1_to10() -> i32 {
let mut sum = 0;
for i in 1..=10 {
sum += i;
}
sum
}
これに対してのコンパイルは以下のコマンドで行う
rustc --target wasm32-unknown-unknown -O test.rs --crate-type=cdylib
コンパイル後test.wasmというファイルができるのでこれを適当なWebサーバーのドキュメント配下に配置し
同じ場所に以下のhtmlファイルを用意する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script>
fetch('test.wasm')
.then((response) => response.arrayBuffer())
.then((bytes) => WebAssembly.instantiate(bytes, {}))
.then((results) => {
const instance = results.instance;
console.log(instance.exports.sum_from1_to10());
});
</script>
</head>
<body>
</body>
</html>
ブラウザからアクセスした際にコンソールに以下のように55が表示されればひとまず成功
