RustでWebassemblyのHello World!をやってみた

5665 ワード
WebAssembly Rust Rust テキストリンク

RustでWebassemblyのHello World!を参考に書いてる通りに実行して言っただけの投稿です。
初心者です。よろしくお願いいたします。

参考
https://rustwasm.github.io/book/game-of-life/hello-world.html

プロジェクトのテンプレートを作成

cargo generate --git https://github.com/rustwasm/wasm-pack-template
#※プロジェクト名を聞かれるので `wasm-game-of-life` と設定
cd wasm-game-of-life #プロジェクトのディレクトリに移動

.wasm ファイルにコンパイルする

wasm-pack build

pkgフォルダができて、↓の内容となっていました

$ ls ./pkg
README.md                       wasm_game_of_life.d.ts          wasm_game_of_life_bg.d.ts
package.json                    wasm_game_of_life.js            wasm_game_of_life_bg.wasm

wasmを読み込むためにwebページを用意する

npm init wasm-app www

wwwフォルダができるので、そこにあるpackage.jsonに./pkgフォルダを含める

www/package.json
{
  // ...
  "devDependencies": {
    "wasm-game-of-life": "file:../pkg", // 追加
    // ...
  }
}

index.js での読込先を変更する

www/index.js
- import * as wasm from "hello-wasm-pack";
+ import * as wasm from "wasm-game-of-life";

  wasm.greet();

依存関係をインストールする

cd www
npm i

サーバー起動

npm start

http://localhost:8080/ を開いて、wasmが実行できていることを確認できました

引数を渡すようにする

lib.rsのgreetに引数を渡すようにする

src/lib.rs
#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

変更したので、wasm-game-of-life/ フォルダで再度wasm-pack buildを実行

greetに引数を渡すように変更し、再度npm startととすると、変更が反映されました

www/index.js
import * as wasm from "wasm-game-of-life";

wasm.greet("hanako");

引数を渡せるように変更できました。

見ていただいてありがとうございました。m(_ _)m