Shunsuke Kataoka Blog

ここからは、 Rust を使って WebAssembly（Wasm）をコンパイルし、実際に動かす ステップです。

1. Rust の環境を準備

✅ Rust をインストール

Rust がインストールされていない場合は、rustup を使用してインストールします：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Rust がインストールされていることを確認：

rustc --version

✅ WebAssembly 用のターゲットを追加

Rust の WebAssembly 用ターゲットを追加：

rustup target add wasm32-unknown-unknown

✅ `wasm-pack` のインストール

wasm-pack は、Rust で書いたコードを簡単に WebAssembly にコンパイルできるツールです：

cargo install wasm-pack

2. Rust の WebAssembly プロジェクトを作成

✅ 新規 Rust プロジェクトを作成

cargo new --lib my_wasm_project
cd my_wasm_project

✅ `Cargo.toml` を編集

以下のように Cargo.toml を編集し、wasm-bindgen を追加：

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

[dependencies]
wasm-bindgen = "0.2"

Wasm 用にコンパイルする場合、Rust クレートは「cdylib」形式でビルドする必要があります。つまり、Cargo.toml の [lib] セクションで crate-type を "cdylib" (または "cdylib" と "rlib" の両方) として指定する必要があります。

3. Rust で WebAssembly を書く

src/lib.rs を編集して、足し算の関数を作成します。

✅ Rust のコード

src/lib.rs:

use wasm_bindgen::prelude::*;

// JavaScript から呼び出せる関数
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[wasm_bindgen] を使うことで、Rust の関数を JavaScript から呼び出せるようになります。

4. Rust を WebAssembly にコンパイル

✅ `wasm-pack` を使ってビルド

以下のコマンドを実行：

wasm-pack build --target web

すると、pkg/ ディレクトリ内に my_wasm_project_bg.wasm というバイナリが生成されます。

5. JavaScript で Rust の WebAssembly を読み込む

Rust の WebAssembly を JavaScript から実行 します。

✅ `index.js` を作成

プロジェクトのルートに index.js を作成：

import init, { add } from "./pkg/my_wasm_project.js";

async function run() {
  await init(); // WebAssembly の初期化
  console.log("2 + 3 =", add(2, 3)); // Rust の関数を呼び出す
}

run();

✅ 簡単なHTMLを作成

index.html:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rust + Wasm</title>
</head>
<body>
  <h1>Rust + WebAssembly</h1>
  <script type="module" src="index.js"></script>
</body>
</html>

6. ローカルで実行

wasm-pack のビルドが完了したら、ローカルサーバーを立ち上げて実行してみます。

Node.js の http-server を使用する場合：

npx http-server

または

python -m http.server 8080

ブラウザで http://localhost:8080/ を開き、コンソールに 2 + 3 = 5 が表示されれば成功です！

✅ 次のステップ

📌 次は Rust + Wasm で、より実践的なプロジェクトを作成してみましょう！

Rust + WebAssembly を使うことで、ブラウザ上でネイティブ並のパフォーマンスを実現する ことが可能になります！