Rustで一番簡単なWebAssemblyを書いてみる

WebAssembly(wasm)の作成には色んな方法がありますがここでは出来るだけシンプルな方法をご紹介します。
一番簡単なwasmの作成
ここではwasm-packを使って、一番簡単な方法でwasmを作成したいと思います。
WebAssemblyを作成するためのビルドツールです。
これは
mdn web docsnpm
向けに正しくパッケージングをすることだけでなく、WebAssembly にコードをコンパイルするのにも役立ちます。
実行環境
- Vagrant 2.2.3
- CentOS 7.9
- Rust(rustc) 1.58.1
- wasm-pack 0.10.2
- wasm-bindgen 0.2.63
- Python(動作確認用webサーバーとして使用) 3.6.8
Rustのソースコードをコンパイルして実行可能ファイル(バイナリファイル)を作成します。
(ここで直接使用することはありません)
作成手順
主な工程は次の三つです。
- プロジェクトの作成(wasm-pack new)
- プロジェクトのビルド(wasm-pack build –target web)
- JavaScript(index.html)の作成
- (確認作業)サーバーを起動して動作確認
それでは順番に見ていきましょう。
1.プロジェクトの作成
プロジェクトの作成には、wasm-pack newコマンドを使います。
wasm-pack new wproject1
cd wproject1
wasm-pack new プロジェクト名
新しいプロジェクトの作成を行います。
プロジェクト内に作成される主なテンプレートファイルは次の通りです。
Cargo.toml | Rustのパッケージマネージャーです。 |
src/lib.rs | メインで使うRustのソースファイル |
src/utils.rs | wasm用のデバック関数が用意されています。 |
tests/web.rs | ヘッドレスブラウザのテストに対応したテスト用のファイル |
ここでsrc/lib.rsのの中身を確認してみましょう。
mod utils;
use wasm_bindgen::prelude::*;
// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
// allocator.
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
extern {
fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet() {
alert("Hello, wproject1!");
}
コードの中には既にgreet()関数が定義されています。今回はこの関数をJavaScriptから呼び出してみましょう。
2.プロジェクトのビルド
プロジェクトのビルドには、wasm-pack buildコマンドを使います。
wasm-pack build --target web
wasm-pack build –target web
プロジェクトのビルドを行います。
ビルドが終了すると新たにpkgディレクトリとtargetディレクトリが作成されます。使用するファイルが配置されているのはpkgディレクトリです。主なファイルは次の通りです。
プロジェクト名.js | wasm-bindgenによって作られたwasmを使う為のファイル。初期化処理(wasmファイルの取得)やRustで定義した関数が収められています。基本的にはこれを呼び出して使います。 |
プロジェクト名_bg.wasm | Rustのソースからコンパイルされて出来たバイナリファイルです。 |
プロジェクト名.d.ts | JavaScriptの代わりにTypeScriptを使う場合はこのファイルを使います。 |
package.json | npmやwebpackなどのバンドラを用いる際に使います(今回は使用しません)。 |
WebAssemblyとJavaScript間のデータ・関数・クラスなどの受け渡しを行うライブラリです
それではpkgディレクトリ内にあるJavaScriptファイルを見てみましょう。(ここではプロジェクト名をwproject1としたので、ファイル名はwproject1.jsとなっています。)
let wasm;
let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
cachedTextDecoder.decode();
let cachegetUint8Memory0 = null;
function getUint8Memory0() {
if (cachegetUint8Memory0 === null || cachegetUint8Memory0.buffer !== wasm.memory.buffer) {
cachegetUint8Memory0 = new Uint8Array(wasm.memory.buffer);
}
return cachegetUint8Memory0;
}
function getStringFromWasm0(ptr, len) {
return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
}
/**
*/
export function greet() {
wasm.greet();
}
async function load(module, imports) {
if (typeof Response === 'function' && module instanceof Response) {
if (typeof WebAssembly.instantiateStreaming === 'function') {
try {
return await WebAssembly.instantiateStreaming(module, imports);
} catch (e) {
if (module.headers.get('Content-Type') != 'application/wasm') {
console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
} else {
throw e;
}
}
}
const bytes = await module.arrayBuffer();
return await WebAssembly.instantiate(bytes, imports);
} else {
const instance = await WebAssembly.instantiate(module, imports);
if (instance instanceof WebAssembly.Instance) {
return { instance, module };
} else {
return instance;
}
}
}
async function init(input) {
if (typeof input === 'undefined') {
input = new URL('wproject1_bg.wasm', import.meta.url);
}
const imports = {};
imports.wbg = {};
imports.wbg.__wbg_alert_1092d02eaf73fbfe = function(arg0, arg1) {
alert(getStringFromWasm0(arg0, arg1));
};
if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
input = fetch(input);
}
const { instance, module } = await load(await input, imports);
wasm = instance.exports;
init.__wbindgen_wasm_module = module;
return wasm;
}
export default init;
初期化処理用の関数としてinit()が一番下に記載されています。asyncで定義されているので非同期で動作させます。またRustで定義してあったgreet()関数が、export function greet()という関数名で掲載されているのが確認できます。
3.JavaScriptの作成
まずはindex.htmlを作成して、その中にJavaScriptの処理を記載します。
ファイルの作成には次のコマンドを使います。
touch index.html
touch ファイル名
指定したファイル名でファイルを作成します。
ファイルの中に記載するJavaScriptのコードは次の通りです。
// wproject1.jsファイルから初期化用init()関数とgreet()関数取得
import init, { greet } from './pkg/wproject1.js';
// init()はasyncで定義されているので非同期で動作させます
async function run() {
await init();
greet();
}
run();
JavaScriptの処理はこれだけです。
htmlを含めた全コードは次の通りです。
注:html内に記載する場合は<script type="module">を記載する必要があります。
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<script type="module">
import init, { greet } from './pkg/mdn_hello_wasm.js';
async function run() {
await init();
greet('青木');
console.log('確認');
}
run();
console.log('もう一度確認');
</script>
</body>
</html>
4.動作確認
Pythonのウェブサーバーを起動して動作確認を行います。
python -m http.server 8080
python -m http.server ポート番号
python3 -m http.server ポート番号
指定したポート番号でウェブサーバーを起動
pythonのバージョンが複数インストールされている場合、python3で起動してください。
ブラウザを開いてlocalhost:8080を入力して動作を確認してください。

以上です。お疲れさまでした。