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

2022年5月15日

WebAssembly(wasm)の作成には色んな方法がありますがここでは出来るだけシンプルな方法をご紹介します。

一番簡単なwasmの作成

ここではwasm-packを使って、一番簡単な方法でwasmを作成したいと思います。

用語解説

wasm-pack

WebAssemblyを作成するためのビルドツールです。

これは npm 向けに正しくパッケージングをすることだけでなく、WebAssembly にコードをコンパイルするのにも役立ちます。

mdn web docs

実行環境

  • 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
用語解説

rustc

Rustのソースコードをコンパイルして実行可能ファイル(バイナリファイル)を作成します。
(ここで直接使用することはありません)

作成手順

主な工程は次の三つです。

  1. プロジェクトの作成(wasm-pack new)
  2. プロジェクトのビルド(wasm-pack build –target web)
  3. JavaScript(index.html)の作成
  4. (確認作業)サーバーを起動して動作確認

それでは順番に見ていきましょう。

1.プロジェクトの作成

プロジェクトの作成には、wasm-pack newコマンドを使います。

wasm-pack new wproject1
cd wproject1
コマンド解説

wasm-pack new プロジェクト名

新しいプロジェクトの作成を行います。

プロジェクト内に作成される主なテンプレートファイルは次の通りです。

Cargo.tomlRustのパッケージマネージャーです。
src/lib.rsメインで使うRustのソースファイル
src/utils.rswasm用のデバック関数が用意されています。
tests/web.rsヘッドレスブラウザのテストに対応したテスト用のファイル

wasm-pack new 公式

ここで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ディレクトリです。主なファイルは次の通りです。

プロジェクト名.jswasm-bindgenによって作られたwasmを使う為のファイル。初期化処理(wasmファイルの取得)やRustで定義した関数が収められています。基本的にはこれを呼び出して使います。
プロジェクト名_bg.wasmRustのソースからコンパイルされて出来たバイナリファイルです。
プロジェクト名.d.tsJavaScriptの代わりにTypeScriptを使う場合はこのファイルを使います。
package.jsonnpmやwebpackなどのバンドラを用いる際に使います(今回は使用しません)。

wasm-pack build 公式

用語解説

wasm-bindgen

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を入力して動作を確認してください。

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

RustWebAssembly

Posted by Bright_Noah