（wasm-bindgen の仕組みも解説）
前回は Rust/WASM の最小デモとして「Hello, WASM!」を表示するところまで作りました。 今回はその続きとして、JavaScript から文字列を渡し、Rust/WASM 側で加工して返すデモを VS Code 上で作ってみました。
このステップは、Rust/WASM を使った Web アプリ開発の基礎となる 「JS → WASM → JS」のデータの流れを理解するために最適です。
1. VS Code で Rust コードを編集する
（まずは実際に動くものを作る）
前回作成した hello_wasm プロジェクトの src/lib.rs に、 新しい関数 hello_name() を追加します。
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn hello() -> String {
"Hello, WASM!".to_string()
}
#[wasm_bindgen]
pub fn hello_name(name: String) -> String {
format!("Hello, {}!", name)
}✔ ポイント
#[wasm_bindgen]を付けることで JS から呼び出せるようになりますStringを受け取り、Stringを返すだけのシンプルな関数です- wasm-bindgen が JS ↔ Rust の文字列変換を自動で行います
2. wasm-bindgen とは何か
（Rust と JavaScript をつなぐ橋渡し）
ここで、先ほど使った #[wasm_bindgen] の意味を整理します。
Rust を WebAssembly にコンパイルしただけでは、JavaScript と直接やり取りすることはできません。 そこで必要になるのが wasm-bindgen です。
✔ wasm-bindgen の役割
- Rust の関数を JavaScript から呼び出せるようにします
- JavaScript の値を Rust に渡せるようにします
- Rust の値を JavaScript に返せるようにします
- WASM のメモリ管理を安全に扱えるようにします
- wasm-pack と連携して JS ラッパーコード（hello_wasm.js）を生成します
つまり、Rust と JavaScript の間の型変換・関数公開・メモリ管理をすべて肩代わりしてくれるライブラリです。
今回の「引数つき Hello」が簡単に作れるのも、wasm-bindgen が内部で 文字列の受け渡しを自動で処理してくれているためです。
3. wasm-pack でビルドする
VS Code のターミナルで以下を実行します。
wasm-pack build --target web
４.デモ用フォルダを作成する（VS Code 上で）
wasm/
├── index.html
├── hello/
└── hello_name/
└── index.html5. HTML（hello_name/index.html）を作成する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello Name (WASM)</title>
</head>
<body>
<h1>引数つき Hello (Rust/WASM)</h1>
<input id="name" placeholder="名前を入力" />
<button id="run">挨拶する</button>
<p id="msg"></p>
<script type="module">
import init, { hello_name } from "../pkg/hello_wasm.js";
async function main() {
await init();
const input = document.getElementById("name");
const button = document.getElementById("run");
const msg = document.getElementById("msg");
button.addEventListener("click", () => {
const name = input.value || "WASM";
msg.textContent = hello_name(name);
});
}
main();
</script>
</body>
</html>
6. トップページにカードを追加する
<a href="./hello_name/index.html" class="card">
<h2>Hello Name</h2>
<p>文字列を Rust/WASM に渡して挨拶を返します。</p>
</a>7. ロリポップにアップロードする
- SSH FS → 保存するだけで反映
- 手動 →
hello_name/とpkg/をアップロード
/WASM/
├── index.html
├── hello/
│ └── index.html
├── hello_name/
│ └── index.html
└── pkg/
├── hello_wasm_bg.wasm
├── hello_wasm_bg.wasm.d.ts
├── hello_wasm.d.ts
└── hello_wasm.jsブラウザで /WASM/ にアクセスすると、トップページから各デモを選択できます。
8. 動作確認
https://wasm.kajiblo.com/hello_name/- 名前を入力
- 「挨拶する」をクリック
- Rust/WASM が
Hello, {name}!を返す
✨ まとめ
- まず VS Code で Rust コードを追加
- その後 wasm-bindgen の役割を理解すると流れがつかみやすい
- wasm-bindgen が JS ↔ Rust の橋渡しを担当
- 文字列の受け渡しも自動で処理
- VS Code だけで簡単にデモを追加できる
コメント