Rust から WebAssembly にコンパイルする のチュートリアルを行いました

下記のチュートリアルを行いました。

目次

環境構築

下記の環境で動作検証をしました。

  • Windows11
  • WSL2
  • Ubuntu 20.04.4 LTS

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 で使用」を試すと、エラーが出て正常に動作しません。動作するようになったら、追記します。

よかったらシェアしてね!

この記事を書いた人

次男が高校ラグビー部での活動を終え、卒部を迎えました。これで、長男、次男ともに中学での野球部、高校でのラグビー部の活動が全て終わりました。9年間怪我をしながらも無事にやり切りました。小学校のソフトボールも入れると15年にもなりました。息子たちも大変でしたが、親も休日は部活動の送迎、応援、動画撮影、編集にと忙しくも楽しい時間を過ごすことができました。

目次
閉じる