概要

RustでWebAssemblyを開発するための手順をまとめています。
※ 備忘録も兼ねているので、メモ程度です。

インストール

必要なものをインストールしていきます。

Node（npm）

Wasmとは関係ないですが、確認するための環境をViteで作成するので、Nodeをインストールします。
Nodeをインストールすると、npm（Nodeのビルドシステム兼パッケージマネージャ）もインストールされます。

Rust（cargo）

Rustをインストールします。インストール手順はOSによってことなります。
Rustをインストールすると、cargo（Rustのビルドシステム兼パッケージマネージャ）もインストールされます。

wasm-pack

npmを使ってwasm-packをグローバルにインストールします。
※ npm経由じゃなくてもインストールできます。

npm install -g wasm-pack

セットアップ

プロジェクトを作成します。

1）プロジェクトの作成

任意のディレクトリで、以下のコマンドを実行します。

cargo new --lib [your_project_name]

2）パッケージの追加

設定ファイルに、必要なパッケージを追加します。
パッケージは、crate.ioで最新版を見つけることができます。パッケージの説明は、こちら。

Cargo.toml

[package]
name = "your_project_name"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.87"
js-sys = "0.3.64"

[dependencies.web-sys]
version = "0.3.64"
features = [
  "Window",
  'console'
]

3）テストコードの記述

js側からgreet()が呼ばれると、alertを表示します。

src/lib.rs

use wasm_bindgen::prelude::*;

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

#[wasm_bindgen]
pub fn greet() {
  alert("Hello wasm!");
}

4）ビルドコマンド等の追加

Nodeをインストールしているので、実行にnpmを使います。

package.json（追加）

{
	"scripts": {
		"web": "cd web && npm run dev",
		"start": "npm run build && cd web && npm run dev",
		"build": "wasm-pack build --target web --out-dir web/pkg",
		"login": "wasm-pack login",
		"pack": "wasm-pack pack web/pkg",
		"publish": "wasm-pack publish"
	}
}

command	summary
web	web階層に移動してdevコマンドを実行する
start	rust libをbuildして、localhost接続する
build	rust libをbuildして、wasmとして書き出す
login	npmにログインする
pack	パッケージを生成する
publish	パッケージをnpmに公開する

5）確認用のweb環境の作成

wasmはそもそもweb開発環境（html, css, js）からは切り離されている設計なので、WebpackやVite等どんな環境でもなんでもいいのですが、Viteが楽なのでViteを使います。

プロジェクトディレクトリで、Vite環境を作成します。
TypeScriptを使う人は、👇

npm create vite@latest web --template vanilla-ts

※ プロジェクト名をwebにしていますが、任意です。ただし、4）のRustディレクトリの方のpackage.jsonと整合性を合わせる必要があります。

その他はこちらを参照。

6）Rust libをビルド

プロジェクトディレクトリで以下を実行します。

npm run build
// 👇と同義で、web/pkgディレクトリにファイルを吐き出します。
// wasm-pack build --target web --out-dir web/pkg

7）TS（JS）の記述

スクリプトからgreet()を呼び出す。
ボタンを追加して、ボタンを押したらgreet()が呼ばれ、lib.rsで記述したalertが表示されます。

import init, { greet } from '../../pkg'

init()

const greetBtn = document.querySelector<HTMLButtonElement>('.greet')!
greetBtn.addEventListener('click', () => {
  greet()
})

実行は、プロジェクトディレクトリで、

npm start

雑感

cargo newでパッケージを作成したけど、wasm-pack new [project_name]でも作れるらしい。
けど、こっちの方はNode環境やブラウザでの仮想的なテストができるようになってるみたい。（理解が進んだら試す）

【Rust】WebAssembly開発セットアップ

概要