Contents
開発環境のインストール
1. rustup の導入
公式インストーラをシェルから実行します。
|
1 2 3 |
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y source $HOME/.cargo/env # シェルにパスを反映 |
インストールが完了したら、バージョンを確認してください（2026 年 4 月現在の最新版は rustc 1.76.0 (2025‑10‑10)）。
|
1 2 3 |
$ rustc --version rustc 1.76.0 (2025-10-10) |
| OS | 推奨インストール方法 |
|---|---|
| Windows | PowerShell で上記コマンド、または rustup-init.exe を公式サイトからダウンロード |
| macOS | 上記 curl コマンド、もしくは Homebrew (brew install rustup-init) |
| Linux | 同上の curl コマンドが最もシンプル |
2. 必要なコンポーネントの確認
|
1 2 |
rustup component list --installed |
rustccargorust-std（標準ライブラリ）
不足しているものは rustup component add <name> でインストールできます。
WASM 用ターゲットの追加
Rust のコードを WebAssembly にコンパイルするために、wasm32-unknown-unknown ターゲットを追加します。
|
1 2 |
rustup target add wasm32-unknown-unknown |
インストール後は以下で確認できます。
|
1 2 3 |
$ rustup show active-target wasm32-unknown-unknown |
ポイント
wasm32-unknown-unknownは「純粋」なバイナリを生成します。ブラウザだけでなく、Node.js や Cloudflare Workers でもそのまま実行できます。
wasm-pack と wasm-bindgen の導入
wasm-pack
wasm-pack は Cargo プロジェクトのビルド・テスト・公開を一括で管理できるツールです。公式リポジトリ（https://github.com/rustwasm/wasm-pack）から最新版を取得します。
|
1 2 |
cargo install wasm-pack --locked |
インストール後、バージョンは次のように確認できます。
|
1 2 3 |
$ wasm-pack --version wasm-pack 0.12.1 |
wasm-bindgen
wasm-bindgen は Rust と JavaScript の相互運用を支援するクレートです。プロジェクトの Cargo.toml に次のように記述します。
|
1 2 3 |
[dependencies] wasm-bindgen = "0.2" |
参考情報
MDN Web Docs の「Rust → Wasm ガイド」でも、wasm-packとwasm-bindgenの組み合わせが推奨されています（2024 年版の記述を踏襲）。
Cargo プロジェクトの作成とサンプルコード
1. プロジェクト雛形の生成
|
1 2 3 |
cargo new --lib rust_wasm_demo cd rust_wasm_demo |
--lib オプションにより、WASM 用のライブラリクレートが作成されます。
2. 実装例：文字列逆転とフィボナッチ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// src/lib.rs use wasm_bindgen::prelude::*; /// 受け取った文字列を逆順にして返す。 #[wasm_bindgen] pub fn reverse(input: &str) -> String { input.chars().rev().collect() } /// n 番目のフィボナッチ数を計算する（u32 → u64）。 #[wasm_bindgen] pub fn fib(n: u32) -> u64 { match n { 0 => 0, 1 => 1, _ => (2..=n).fold((0_u64, 1_u64), |(a, b), _| (b, a + b)).1, } } #[cfg(test)] mod tests { use super::*; #[test] fn test_reverse() { assert_eq!(reverse("wasm"), "msaw"); } #[test] fn test_fib() { assert_eq!(fib(10), 55); } } |
3. テストの実行
|
1 2 3 |
cargo test --target wasm32-unknown-unknown # ブラウザでのテストは次節の `wasm-pack test` を参照 |
フロントエンドへの組み込みとローカルテスト
1. ビルド（Web ターゲット）
|
1 2 3 |
wasm-pack build --target web # 出力先: pkg/ |
--target web はブラウザ向けの ES モジュール形式で生成します。
2. Vite プロジェクトの作成
|
1 2 3 4 |
npm create vite@latest demo-web -- --template vanilla cd demo-web npm install |
src/main.js に WASM パッケージを組み込む
|
1 2 3 4 5 6 7 8 9 10 |
import init, { reverse, fib } from 'rust_wasm_demo'; async function run() { await init(); // .wasm のロード待ち console.log(reverse('hello')); // => "olleh" console.log(fib(12)); // => 144 } run(); |
3. ローカルサーバで動作確認
|
1 2 |
npm run dev # Vite が http://localhost:5173 を起動 |
ブラウザのコンソールに期待した出力が表示されれば成功です。
デバッグは Chrome DevTools の Sources タブから .wasm ファイルを確認できます。
GitHub Actions を使った CI/CD パイプライン
以下は 2026 年版の公式ドキュメント（https://rustwasm.github.io/wasm-pack/tutorials/github-actions.html）に基づくサンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
# .github/workflows/wasm.yml name: Build & Deploy Rust WASM on: push: branches: [ main ] pull_request: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 # Rust ツールチェーンとターゲットをセットアップ - name: Install Rust toolchain uses: actions-rs/toolchain@v1 with: toolchain: stable target: wasm32-unknown-unknown override: true # wasm-pack のインストール（最新版取得） - name: Install wasm-pack run: cargo install wasm-pack --locked # プロジェクトディレクトリへ移動してビルド - name: Build WASM package working-directory: rust_wasm_demo run: | wasm-pack build --target web --release # ビルド成果物をアーティファクトとして保存 - uses: actions/upload-artifact@v3 with: name: wasm-pkg path: rust_wasm_demo/pkg/ deploy: needs: build runs-on: ubuntu-latest permissions: contents: read pages: write id-token: write steps: - uses: actions/download-artifact@v3 with: name: wasm-pkg path: ./pkg # Vite のビルド（デモ用フロントエンド） - name: Build demo site working-directory: demo-web run: | npm ci npm run build # dist/ に出力 # GitHub Pages へデプロイ - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./demo-web/dist |
補足ポイント
| プラットフォーム | 主な設定項目 | 注意点 |
|---|---|---|
| GitHub Pages | publish_dir に Vite の dist/ を指定 |
.wasm の MIME type が自動で application/wasm になるが、CORS が必要ならヘッダーを追加 |
| Cloudflare Workers | wrangler publish コマンド実行 |
Workers KV と組み合わせる場合はキャッシュ TTL を適切に設定 |
| Netlify | netlify deploy --dir=dist |
_redirects で SPA ルーティングを有効化し、.wasm の MIME type が正しく配信されているか確認 |
WIT と wasm-tools による次世代コンポーネントモデル（オプショナル）
WebAssembly Interface Types（WIT）は、言語間の型安全なインターフェースを標準化する試みです。Rust エコシステムでは wit-bindgen クレートと wasm-tools CLI が提供されています。
|
1 2 |
cargo install wasm-tools wit-bindgen-cli --locked |
- WIT ファイル (
example.wit) に関数シグネチャや構造体を記述 wit-bindgenで Rust のバインディングコードを自動生成wasm-tools component newでコンポーネント形式の.wasmを作成
現時点（2026 年）ではプレビュー段階ですが、主要フレームワーク（React, Svelte, Yew 等）が順次サポートを拡充しています。公式リポジトリと MDN の「WebAssembly Interface Types」ページをご参照ください。
まとめと次のステップ
- 開発環境
rustupとwasm32-unknown-unknownターゲットだけで即座に開始可能。- ビルドツールチェーン
wasm-pack+wasm-bindgenが提供するコマンド一式で、ローカルテスト・パッケージ化・公開までシームレスに行える。- サンプルコード
- 文字列逆転とフィボナッチ計算は、WASM のデータ受け渡しの基本を学ぶ最適教材。
- フロントエンド統合
- Vite と組み合わせることで、開発サーバで即時に結果確認が可能。
- CI/CD
- GitHub Actions のテンプレートに従えば、ビルド・アーティファクト保存・GitHub Pages への自動デプロイまでワンパイプラインで完結。
- 次世代コンポーネント（任意）
- WIT と
wasm-toolsを活用すれば、言語横断的なモジュール再利用が容易になる。
今すぐやってみよう
|
1 2 3 4 5 6 7 8 9 |
# 1️⃣ リポジトリをクローン git clone https://github.com/rustwasm/rust-wasm-demo.git cd rust-wasm-demo # 2️⃣ ビルド & Vite 起動 wasm-pack build --target web npm create vite@latest demo-web -- --template vanilla cd demo-web && npm install && npm run dev |
ブラウザで http://localhost:5173 を開き、コンソールに正しい結果が出力されれば環境構築は完了です。
次のステップとして WIT と wasm-tools に挑戦し、複数言語間で安全にインターフェースを共有できるモジュール化を体験してください。
Happy coding! 🚀