wasm-bindgenでHello,Worldできたという記事は多いが、wasmを本格的に扱うならVue.jsでJSONをやりとりするところまでテンプレにしておきたい。wasmのモジュールを読み込む前にvar app = new Vue()をやっても意図したとおりに動いてくれないからasync/awaitなど工夫が必要だ。

まず、下記の記事を参考にwasm-pack build --target webでpkgディレクトリにwasmファイルができたところまで確認する。

ここで生成されたpkgディレクトリに適当なJSONファイルを置く。

monster.json

{
    "monsters":[
        {"name":"ピカチュウ","value":10},
        {"name":"イーブイ","value":8}
    ]
}

参考記事のlib.rsを、こんな感じに書き換えて、into_serde()でMonsters型に取り込み、最もvalueが大きいモンスターの値をMonster型で出力する。

lib.rs

use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};

# [derive(Serialize, Deserialize)]
pub struct Monster {
    name: String,
    value: usize
}

impl Monster{    
    fn new() -> Self {
        Monster {name: String::new(), value: 0} // 名前のない怪物を生成
    }
    pub fn set_monster(&mut self, name: String, value: usize){
        self.name = name;
        self.value = value;
    }
}

# [derive(Serialize, Deserialize)]
pub struct Monsters {
    monsters: Vec<Monster>
}

# [wasm_bindgen]
pub fn return_max_monster(val: &JsValue) -> JsValue {
    let monsters: Monsters = val.into_serde().unwrap();
    let mut max_monster = Monster::new();
    for monster in monsters.monsters {
        if monster.value > max_monster.value {
            max_monster.set_monster(monster.name,monster.value);
        }
    }
    JsValue::from_serde(&max_monster).unwrap()
}

続けてVueでwasmとの入出力を書く。htmlではボタンのみ用意する。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello-wasm example</title>
  </head>
  <body>
    <div id="app">
      <input v-on:click="returnMaxMonster" type="button" value="Max">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="monster.js" type="module"></script>
</body>
</html>

monster.jsで(プロジェクト名).jsをimportする。（自分の場合はcargo new --lib wasmでプロジェクトを作ったので、wasm-pack build --target webでpkgディレクトリにwasm.jsが生成されている）

async/awaitでwasmのモジュールを初期化してからnew Vue()して、lib.rsで書いたreturn_max_monster()を呼び出す。

monster.js

import * as mod from "./wasm.js";
(async () => {
    await mod.default();
    var app = new Vue({
      el: '#app',
      data: {
        monsters: null,
      },
      mounted: function(){
        axios.get("./monster.json").then(
            response => ( this.monsters = response.data )
        );
      },
      methods:{
        returnMaxMonster: function(){
          let s = mod.return_max_monster(this.monsters);
          alert(s.name);
        }
      }
    })
})();

ここまで書けたら、サーバを立ち上げて画面上のボタンをクリックしたらJSONがwasmで処理され、最も値が大きいモンスターの名前が表示される。

この仕組みを使って、ドラクエウォークのモンスターの最適な組み合わせを計算するサイトを作ったので、参考にしていただきたい。