下記のチュートリアルを行いました。
Rust から WebAssembly にコンパイル – WebAssembly | MDN
Rust のコードがあれば、それを WebAssembly (Wasm) にコンパイルすることができます。このチュートリアルでは、Rust プロジェクトを WebAssembly にコンパイルし、既存の…
目次
環境構築
下記の環境で動作検証をしました。
- Windows11
- WSL2
- Ubuntu 20.04.4 LTS
Rustの環境構築
Rustの公式サイトの「Rustをインストール」のページに従い、インストールを行います。
Rust をインストール
効率的で信頼性のあるソフトウェアを書く力を与える言語
バージョン確認
$ rustc -V
rustc 1.59.0 (9d1b2106e 2022-02-23)
# Rustのビルドツールおよびパッケージ管理ツール
$ cargo --version
cargo 1.59.0 (49d8809dc 2022-02-10)
# 管理ツール
$ rustup -V
rustup 1.24.3 (ce5817a94 2021-05-31)
info: This is the version for the rustup toolchain manager, not the rustc compiler.
info: The currently active `rustc` version is `rustc 1.59.0 (9d1b2106e 2022-02-23)`
# 有効なツールチェインの確認
$ rustup show
Default host: x86_64-unknown-linux-gnu
rustup home: /home/ariki/.rustup
installed targets for active toolchain
--------------------------------------
wasm32-unknown-unknown
x86_64-unknown-linux-gnu
active toolchain
----------------
stable-x86_64-unknown-linux-gnu (default)
rustc 1.59.0 (9d1b2106e 2022-02-23)
wasm-packのインストール
cargo install wasm-pack
WebAssembly パッケージのビルド
Rust で新しいパッケージを作ります。任意の階層で下記のコマンドを実行します。
$ cargo new --lib hello-wasm
Created library `hello-wasm` project
Rustのコードを作成します。src/lib.rs
に下記の内容を書き込みます。
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
pub fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!("Hello, {}!", name));
}
コードを WebAssembly にコンパイルするために、Cargo.toml の必要箇所を修正して作成します。
[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["Your Name <you@example.com>"]
description = "A sample project with wasm-pack"
license = "MIT/Apache-2.0"
repository = "https://github.com/yourgithubusername/hello-wasm"
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
パッケージをビルドします。
wasm-pack build --target web
ブラウザでの動作確認
プロジェクトのルートに index.html
というファイルを作成します。
プロジェクトのルートディレクトリーで、Pythonを使って、ローカルのウェブサーバーを起動します。
$ python3 -m http.server
ブラウザで、http://localhost:8000 にアクセスすると、JavaScriptのアラートが表示され、正常に動作していることが確認できます。
チュートリアルの続きの「WebAssembly モジュールを npm で使用」を試すと、エラーが出て正常に動作しません。動作するようになったら、追記します。