Rust & WebAssembly 構築メモ

履歴

2026.04.14 rustのバージョンをアップしました。
2026.05.10 rustのバージョンをアップしました。

はじめに

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

対象バージョン

• rustc 1.95.0
• cargo 1.95.0
• rustup 1.29.0
• pnpm 10.28.2

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

rustup is an installerを参照

$ node -v
  v24.13.0
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source "$HOME/.cargo/env"
$ rustup -V
  rustup 1.29.0 (2026-05-10)
$ rustc -V
  rustc 1.95.0 (2026-05-10)
$ cargo -V
  cargo 1.95.0 (be19eda0d 2026-05-10)
$ 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 Code に Serenaを登録

 $ claude mcp add serena -- uvx --from git+https://github.com/oraios/serena serena-mcp-server --context ide-assistant --project $(pwd)
 $ claude mcp list
 // プリプロセスの実行。.serena/cache/.. にプロジェクトインデックスが作成されます。
 $ uvx --from git+https://github.com/oraios/serena index-project $(pwd)

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

serena オンボーディングを始めてください