👋

Rust & WebAssembly 構築メモ

に公開
Rust
WebAssembly
tech

はじめに

Rust を使ってWebAssemblyアプリを開発した時の備忘録メモです。
作業時に、構築手順を更新するようにしています。

対象バージョン

  • rustc 1.89.0
  • cargo 1.89.1
  • rustup 1.28.2
  • pnpm 10.12.2 // $ pnpm add -g pnpm

参考

[Rust and WebAssembly[(https://rustwasm.github.io/docs/book/game-of-life/hello-world.html)
This project and website is no longer maintained😢

Rust開発環境をセットアップする

rustup is an installerを参照

$ node -v
  v20.12.2
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source "$HOME/.cargo/env"
$ rustup -V
  rustup 1.27.1 (2024-08-01)
$ rustc -V
  rustc 1.82.0 (2024-08-01)
$ cargo -V
  cargo 1.89.0 (be19eda0d 2025-06-22)
$ rustup update // Version Up

Hello Wasm!

// プロジェクト作成
$ mkdir myapp
$ cd myapp
$ pnpm init
$ pnpm add -D vite wasm-pack 
$ cargo new --lib src/wasm
$ vi package.json ※"script"を変更
---
  "scripts": {
    "dev": "vite",
    "build": "wasm-pack build ./src/wasm --target web && vite build",
    "build-wasm": "wasm-pack build ./src/wasm --target web --out-dir ../../js/",
    "preview": "vite preview"
  },
---
./src/wasm/Cargo.toml
[package]
name = "wasm"
version = "0.1.0"
edition = "2024"

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

[dependencies]
wasm-bindgen = "0.2.92"
./index.html
<html>
  <head>
    <script type="module" src="./js/main.js"></script>
  </head>
  <body></body>
</html>
./js/main.js
import init, { main } from "./wasm.js";
init().then(() => main("Hello World!!"));
./src/wasm/src/lib.rs
// Hello World準備
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}
#[wasm_bindgen]
pub fn main(name: &str) {
    alert(&format!("{}!", name));
}

$ pnpm build-wasm ※ wasmがビルドされる。
$ pnpm dev --open ※ ブラウザーにalert()が表示される。

rust-analyzer 設定

vscode/setting.json に以下の設定を追加する

    "rust-analyzer.linkedProjects": [
        "src/wasm/Cargo.toml"
    ],

Serena

コーディングエージェント拡張ツール"Serena"をインストールした時の手順

https://github.com/oraios/serena

1 uv コマンドインストール

curl -LsSf https://astral.sh/uv/install.sh | sh

2. serena 起動

claude mcp add serena -- cmd /c "uv tool run --from git+https://github.com/oraios/serena serena start-mcp-server --context ide-assistant --project %cd%"

 uvx --from git+https://github.com/oraios/serena serena start-mcp-server

以下の画面が表示され、"serena.mcp:server_lifespan:221 - MCP server lifetime setup complete"が確認できれば準備完了

Discussion