Zenn
🦀

100日後にRustをちょっと知ってる人になる: [Day 26]3分で Wasm をブラウザで動かす

2022/09/19に公開
Rust
WebAssembly
WebAssembly
tech

Day 26 のテーマ

Day 25 で、cargo generate コマンドを使って Rust のプロジェクトテンプレートを作る事がえきるようになりした。
ということで、今日は 3分以内で WebAssembly をブラウザで動かすことができるくらいの内容を、cargo generate でプロジェクトを作るところからやってみようと思います。

Rust プロジェクト作成

まずは、cargo generate コマンドでプロジェクトを作ります。

  • --name オプションは、予めプロジェクト名を指定するオプションです。
cargo generate --git https://github.com/rustwasm/wasm-pack-template --name day_26_rust_wasm_tutorial
プロジェクト構成
day-26-rust-wasm-tutorial
├── Cargo.toml
├── LICENSE_APACHE
├── LICENSE_MIT
├── README.md
├── src
│  ├── lib.rs
│  └── utils.rs
└── tests
   └── web.rs

src/lib.rs は、WebAssembly にコンパイルする Rust クレートのルートです。JavaScript とのインターフェースにwasm-bindgenを使用しているのが分かります。

JavaScript の window.alert 関数をインポート

#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

メッセージを出力する greet 関数をエクスポート

#[wasm_bindgen]
pub fn greet() {
    alert("Hello, day-26-rust-wasm-tutorial!");
}

Rust プロジェクトビルド

wasm-pack build

以下のように pkg ディレクトリ配下にビルド成果物が出力されました。

pkg
pkg
├── day_26_rust_wasm_tutorial.d.ts
├── day_26_rust_wasm_tutorial.js
├── day_26_rust_wasm_tutorial_bg.js
├── day_26_rust_wasm_tutorial_bg.wasm
├── day_26_rust_wasm_tutorial_bg.wasm.d.ts
├── package.json
└── README.md
  • xxx.wasm
    • Rust コンパイラが生成した WebAssembly バイナリ
  • xxx.js
    • wasm-bindgen により生成された Rust と JavaScript を仲介するインターフェースを公開する JavaScript コード

JavaScript プロジェクト作成

WebAssebmly を Web ページ上で公開するために、次の JavaScprit テンプレートを使用します。

www という名前でプロジェクトを作成します。

npm init wasm-app www

次のような構成でプロジェクトが作成されます。

www
www
├── bootstrap.js
├── index.html
├── index.js
├── LICENSE-APACHE
├── LICENSE-MIT
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.js

JavaScript プロジェクトカスタマイズ

生成された package.json には、先にビルドした　WebAssebmly に対する依存関係が定義されていません。
そこで、dependencies フィールドを追加してます。

{
//...
//...

  "dependencies": {
    "day-26-rust-wasm-tutorial": "file:../pkg"
  }

//...
//...
}

次に、index.js でインポートしている対象を、先にビルドした WebAssebmply のパッケージに変更します。

import * as wasm from "day-26-rust-wasm-tutorial";

変更は以上です。

WebAssebly と JavaScript の実行

npm run start をして動作確認をしてみます。

cd www
npm install
npm run start

JavaScript によりアラートウィンドウが表示され、Rust で定義していたメッセージが表示されました。

Day 26 のまとめ

3 分以内に試せる WebAssebly と Node によるプロジェクトサンプルでした。

今日使ったポイントとなるコマンドやテンプレートなどは以下のものです。

GitHubで編集を提案

Discussion