やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > WebAssembly > RustでWebAssembly：HelloWorld

RustでWebAssembly：HelloWorld

WebAssembly Rust JavaScript

　最小コードを書いてビルドし実行して結果が正しいことを確認した。

成果物

前回まで

やってみる

  1. プロジェクトを作る
  2. ビルドする
  3. WEBアプリを作る
  4. ローカルサーバで実行確認する

1. プロジェクトを作る

　テンプレートからプロジェクトを作成する。

cargo generate --git https://github.com/rustwasm/wasm-pack-template

　プロジェクト名を問われるので適当にhello-wasmとした。

🤷   Project Name : hello-wasm

　プロジェクトのディレクトリが作成される。カレントディレクトリをそこへ移動する。

cd hello-wasm

2. ビルドする

wasm-pack build

　./pkg配下にhello_wasm_bg.wasmファイルができているはず。ファイル名が謎。-が_になっていたり_bgがついていたり。

エラーになった

   Installed package `wasm-bindgen-cli v0.2.78` (executables `wasm-bindgen`, `wasm-bindgen-test-runner`, `wasm2es6js`)
warning: be sure to add `/home/pi/.cache/.wasm-pack/.wasm-bindgen-cargo-install-0.2.78/bin` to your PATH to be able to run the installed binaries
Error: no prebuilt wasm-opt binaries are available for this platform: Unrecognized target!
To disable `wasm-opt`, add `wasm-opt = false` to your package metadata in your `Cargo.toml`.

　以下を参考にしてCargo.tomlに追記した。

[package.metadata.wasm-pack.profile.release]
wasm-opt = false

　再ビルドする。

wasm-pack build

　成功。

[INFO]: :-) Your wasm pkg is ready to publish at /tmp/work/hello-wasm/pkg.

3. WEBアプリを作る

npm init wasm-app www
cd www
npm install

3-1. www/package.json

{
  ...
  "devDependencies": {
    "hello-wasm": "file:///tmp/work/hello-wasm/pkg", // 追記
    ...
  }
}

3-2. www/index.js

//import * as wasm from "hello-wasm-pack";
import * as wasm from "hello-wasm";

wasm.greet();

4. ローカルサーバで実行確認する

npm start

　ブラウザでhttp://localhost:8080/にアクセスする

　Hello, hello-wasm!というアラート表示がされたら成功。

所感

　できた。とりあえず呼び出すことができただけ。

　他にも確認したいことは山ほどある。でもあとは都度調べてやればいいか。

  • 引数や戻り値がある関数の定義と呼出
  • npmでなくCDN風に使う方法
  • 他のJavaScript APIを呼び出したい（customeElements()等）

対象環境

$ uname -a
Linux raspberrypi 5.10.52-v7l+ #1441 SMP Tue Aug 3 18:11:56 BST 2021 armv7l GNU/Linux