コンテンツへスキップ

Rust/WASM/JavaScript/Viteを使ったプロジェクト管理でHello WASMをする。実行編

sample プロジェクトを作ってみる。

最初の確認

これまでの４つのスクリプトが必要なので、これまでの４つの記事をまず参考にしてそちらから街頭のスクリプトを~/binにコピーしておきます。とくに、セットアップ編で書いたように、 環境変数WAS_BASEと~/binが環境変数PATHに含まれていることを確認してください。これがスムーズに使うために必要です。

$ echo $WASM_BASE
/home/your_login_name/projects/wasm
$ ls ~/bin/wasm-*
/home/your_login_name/bin/wasm-build  /home/your_login_name/bin/wasm-git      /home/your_login_name/bin/wasm-setup
/home/your_login_name/bin/wasm-dev    /home/your_login_name/bin/wasm-project 
$ echo $PATH | rg ~/bin
(略):/home/your_login_name/bin:(略)
$Code language: PHP (php)

確認は済んだとして先に進めます。ここではrgというrust製の高速grepを使ってますが、標準に付属してるgrepを使っても構いません。今回はWSLやMacOS,linuxのシェルを使うことを前提で書いているので、シェル操作を意識した説明をしています。

作ってみよう

$ wasm-project sample
    Creating library package
note: see more `Cargo.toml` keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

> npx
> "create-vite" sample_js --template vanilla

│
◇  Use Vite 8 beta (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in /home/your_login_name/projects/wasm/sample/sample_js...
│
◇  Installing dependencies with npm...

added 13 packages, and audited 14 packages in 4s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> sample_js@0.0.0 dev
> vite


  VITE v7.3.1  ready in 98 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: JavaScript (javascript)

ここで create-viteがなくても、インストールをここで次のように促されることはあります。hを押すとヘルプが以下のように出ます。qで終了です。

  VITE v7.3.1  ready in 64 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
h

  Shortcuts
  press r + enter to restart the server
  press u + enter to show server url
  press o + enter to open in browser
  press c + enter to clear console
  press q + enter to quit
qCode language: JavaScript (javascript)
  Need to install the following packages:
  create-vite@8.3.0
  Ok to proceed? (y) yCode language: CSS (css)

この後にブラウザで localhost:5173 を見てみると次のようになります。

この状態でディレクトリ構造はこの様になっていますが、ビルド完了後の状況です。

~/projects/wasm$  tree -L 2 sample
sample
├── sample_js
│   ├── index.html
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   └── src
└── sample_rs
    ├── Cargo.lock
    ├── Cargo.toml
    ├── pkg
    ├── src
    └── target

9 directories, 5 filesCode language: HTML, XML (xml)

一度ビルドを動かす。

ここではCargo.tomlが何も含めてない状況でのビルドなのでエラーが出ます。トラブルシューティングも含めてそのまま再現していますが、スキップしたい方は、Cargo.tomlを直した後のビルド の項目に飛んでください。

$ wasm-build sample
=== Rust をビルドして WASM 出力 ===
~/projects/wasm/sample ~/projects/wasm/sample
Error: crate-type must be cdylib to compile to wasm32-unknown-unknown. Add the following to your Cargo.toml file:

[lib]
crate-type = ["cdylib", "rlib"]
Caused by: crate-type must be cdylib to compile to wasm32-unknown-unknown. Add the following to your Cargo.toml file:

[lib]
crate-type = ["cdylib", "rlib"]Code language: JavaScript (javascript)

rust側のプロジェクトはまっさらの状態なので上記のことがCargo.tomlに含まれてないためにエラーが出て止まります。この書いてるlibのところを$WASM_BASE/sample_rsの下にある Cargo.tomlに書き加えます。もう一度ビルドしてみましょう。

$ wasm-build sample
=== Rust をビルドして WASM 出力 ===
~/projects/wasm/sample/sample_rs ~/projects/wasm/sample/sample_rs
[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...
   Compiling sample_rs v0.1.0 (/home/your_login_name/projects/wasm/sample/sample_rs)
    Finished `release` profile [optimized] target(s) in 1.64s
Error: Ensure that you have "wasm-bindgen" as a dependency in your Cargo.toml file:
[dependencies]
wasm-bindgen = "0.2"
Caused by: Ensure that you have "wasm-bindgen" as a dependency in your Cargo.toml file:
[dependencies]
wasm-bindgen = "0.2"Code language: JavaScript (javascript)

また依存に関するエラーが出ます。このdependenciesも加えましょう。この時点でCargo.tomlは次のようになります。

~/projects/wasm/sample/sample_rs$ cat Cargo.toml
[package]
name = "sample_rs"
version = "0.1.0"
edition = "2024"

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

[dependencies]
wasm-bindgen = "0.2"Code language: JavaScript (javascript)

Cargo.tomlを直した後のビルド

もう一度ビルドしてみましょう。

$ wasm-build sample
=== Rust をビルドして WASM 出力 ===
~/projects/wasm/sample/sample_rs ~/projects/wasm/sample/sample_rs
[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...
   Compiling wasm-bindgen-shared v0.2.112
   Compiling proc-macro2 v1.0.106
   Compiling unicode-ident v1.0.24
   Compiling quote v1.0.44
   Compiling rustversion v1.0.22
   Compiling bumpalo v3.20.2
   Compiling cfg-if v1.0.4
   Compiling once_cell v1.21.3
   Compiling wasm-bindgen v0.2.112
   Compiling syn v2.0.117
   Compiling wasm-bindgen-macro-support v0.2.112
   Compiling wasm-bindgen-macro v0.2.112
   Compiling sample_rs v0.1.0 (/home/your_login_name/projects/wasm/sample/sample_rs)
    Finished `release` profile [optimized] target(s) in 3.20s
[INFO]: ⬇️  Installing wasm-bindgen...
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: ✨   Done in 4.93s
[INFO]: 📦   Your wasm pkg is ready to publish at /home/your_login_name/projects/wasm/sample/sample_rs/pkg.
[WARN]: ⚠️   There's a newer version of wasm-pack available, the new version is: 0.14.0, you are using: 0.13.1. To update, navigate to: https://rustwasm.github.io/wasm-pack/installer/
=== JS プロジェクトの同期 ===
[!] プラグインを追加インストールします...

added 10 packages, and audited 24 packages in 4s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully copied pkg to /home/your_login_name/projects/wasm/sample/sample_js/src/wasmCode language: PHP (php)

これでビルドは完了しました。同時にスクリプトwasm_buildによってjavascript側のプロジェクトへのコピーも完了するようになっています。まだwasm_dev sampleをしても最初の画像で見せた Hello, Viteが出てくるだけです。ここから、実際に簡単なrust, javascriptプログラムを作ってみましょう。

簡単なサンプルを作ってみましょう。

rust側のプロジェクトのsrcいかにあるlib.rsを作り変えましょう。

$ cd $WASM_BASE/sample/sample_rs/src
$ cat > lib.rsCode language: PHP (php)

とすると、シェルが次の動作を待機しますので、次のものをコピペしてみます。コピペの後はctrl-Dをしてください。別にエディタでコピペをしても構いませんが、この方法のほうが楽です。

// $WASM_BASE/hello/hello_rs/src/lib.rs

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}Code language: Rust (rust)

これはhello と引数をwasmでjavascriptサーバーの返すサンプルを意味しています。ViteはES Moduleを前提としているため、トップレベルawaitが利用できます。

次に、javascript側のプロジェクトに移動しましょう。

$ cd ../../sample_js/src
$ cat > main.js

として、次のスクリプトをコピペしてください。

// $WASM_BASE/sample/sample_js/src/main.js

import init, { greet } from "./wasm/pkg/sample_rs.js";

await init();

console.log(greet("WASM"));Code language: JavaScript (javascript)

これで、仕込みはOKです。

ビルドを再び

ビルドをしてみますね。

$ wasm-build sample
(結果略)
$ wasm-dev sample

  VITE v7.3.1  ready in 64 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: PHP (php)

となってローカルサーバーが起動しています。ここでブラウザで http://localhost:5173 をみてると、真っ白になってるはずです。

ここではchromeで説明してみます。そこでマウスの右ボタンクリックをするとメニューが出ますので、メニューの下部の検証を選びましょう。選ぶとDevToolsが開いてElementがその横のConsoleをみると良いです。

[vite] connecting...
Hello, WASM!
[vite] connected.Code language: CSS (css)

が表示されてるのを確認できればプロジェクトが動いてコンソールに表示されてることがわかります。これでサンプル動作が完全に完了したことをしましています。

最後に、次の一行を加えてみましょう。

$ cat >> main.js

のあとに、

document.getElementById("app").textContent = greet("WASM");Code language: JavaScript (javascript)

とやってみてください。ここで不等号２つで行ってるのは、main.jsにテキストを追加するときにコンソールで行う簡単な方法です。別にエディタで追加しても構わないですが、WSLやmacOSのコンソールを使うのでしたら、こういったlinux/unix系の簡単な方法は知っておけばいいです。

ここではgit管理は省いて書いていますが、プロジェクト作成時におまけに付けて書いたスクリプトを使い wasm-git sampleとしておくとgit管理をする場合も便利です。

プロジェクト管理のワークフロー

  1. wasm-project [name] で爆速生成
  2. lib.rs と main.js を編集
  3. wasm-build [name] で一発ビルド＆同期
  4. wasm-dev [name] で即座に確認

だいたいこの順番ですね。javascript側だけの修正の場合はwasm-buildは必要ありませんが、rustプロジェクトの場合はwas-buildからビルドをし直す必要があります。
あと、この記事では含めていませんが、typescriptでも同様に作れると思います。

最後に

これで、Rustでロジックを書き、Wasmとしてビルドし、Viteが提供するモダンなフロントエンド環境で動かすという最短ルートが開通しました。

ここからは、数学的な重い処理をRustに任せたり、複雑なアルゴリズムをWasm化したりと、可能性は無限大です。ぜひ、自分だけの『爆速Wasm開発環境』で色々なものを作ってみてください！

最終更新: 2026.02.26
タグ: