2024年版 Rust と WebAssembly のビルド手順とベストプラクティス

Contents

1 1️⃣ Rust ツールチェーンの準備
2 2️⃣ wasm-pack の導入
- 2.1 2.1 インストール方法（公式推奨）
- 2.2 2.2 2024 年版の主な変更点（v0.12 系）
3 3️⃣ Cargo プロジェクトの作成と依存クレート設定
- 3.1 3.1 ライブラリテンプレートの生成
- 3.2 3.2 必要なクレートを追加
4 4️⃣ Rust コード実装例と wasm-pack ビルド
- 4.1 4.1 基本的なエクスポート関数
- 4.2 4.2 推奨ビルドコマンド
5 5️⃣ JavaScript 側での利用
- 5.1 5.1 ESM インポート例（Vite 推奨）
- 5.2 5.2 CommonJS（Node.js 等）向け例
6 6️⃣ 開発サーバーの構築（Vite を例に）
- 6.1 6.1 Wasm パッケージの配置
7 7️⃣ 本番向け最適化と CI/CD
8 8️⃣ まとめ（チェックリスト）

スポンサードリンク

1️⃣ Rust ツールチェーンの準備

手順	内容
① rustup のインストール	`bash<br># 未インストールの場合のみ実行<br>curl https://sh.rustup.rs -sSf \| sh<br>source $HOME/.cargo/env`
② 安定版ツールチェーンの更新	`bash<br>rustup update stable # 例: rustc 1.78.0 (2024‑04‑01)`
③ WebAssembly ターゲットの追加	`bash<br># wasm32-unknown-unknown をインストール<br>rustup target add wasm32-unknown-unknown`

ポイント：上記コマンドは一度実行すれば以降のプロジェクトで再利用できます。

2️⃣ `wasm-pack` の導入

2.1 インストール方法（公式推奨）

方法	コマンド
Cargo 経由 (最もシンプル)	`bash<br>cargo install wasm-pack`
Homebrew (macOS / Linux)	`bash<br>brew install wasm-pack`

インストール後は必ずバージョンを確認し、公式リリースページと突き合わせます。

wasm-pack --version   # 例: wasm-pack 0.12.1

1 2	wasm-pack --version # 例: wasm-pack 0.12.1

2.2 2024 年版の主な変更点（v0.12 系）

--target bundler がデフォルトになる。
ビルド速度が約 10 % 向上（内部で Cargo のパラレル実行を最適化）。
wasm-opt への自動連携オプションが追加され、サイズ最適化が容易に。

参考: Rust and WebAssembly Book – https://rustwasm.github.io/book/

3️⃣ Cargo プロジェクトの作成と依存クレート設定

3.1 ライブラリテンプレートの生成

cargo new --lib my-wasm-app
cd my-wasm-app

cargo new --lib my-wasm-app

cd my-wasm-app

src/lib.rs がエントリーポイントになるので、#[wasm_bindgen] を直接記述できます。

3.2 必要なクレートを追加

# `cargo add` は Cargo の公式サブコマンドです
cargo add wasm-bindgen
cargo add web-sys --features Window,Document

# `cargo add` は Cargo の公式サブコマンドです

cargo add wasm-bindgen

cargo add web-sys --features Window,Document

Cargo.toml の抜粋

[dependencies]
wasm-bindgen = &quot;0.2&quot;
web-sys      = { version = &quot;0.3&quot;, features = [&quot;Window&quot;, &quot;Document&quot;] }

[dependencies]

wasm-bindgen = "0.2"

web-sys = { version = "0.3", features = ["Window", "Document"] }

ポイント: バージョンは cargo add が自動で最新の安定版を取得します。

4️⃣ Rust コード実装例と `wasm-pack` ビルド

4.1 基本的なエクスポート関数

use wasm_bindgen::prelude::*;
use web_sys::{Window, Document};

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -&gt; i32 {
    a + b
}

#[wasm_bindgen]
pub fn set_title(title: &amp;str) {
    let window: Window = web_sys::window().expect(&quot;no global `window`&quot;);
    let document: Document = window.document().expect(&quot;no document&quot;);
    document.set_title(title);
}

use wasm_bindgen::prelude::*;

use web_sys::{Window, Document};

#[wasm_bindgen]

pub fn add(a: i32, b: i32) -> i32 {

a + b

}

#[wasm_bindgen]

pub fn set_title(title: &str) {

let window: Window = web_sys::window().expect("no global `window`");

let document: Document = window.document().expect("no document");

document.set_title(title);

}

4.2 推奨ビルドコマンド

# デフォルト (2024 年時点) は bundler → ES モジュール向け最適化済み
wasm-pack build --target bundler   # 省略可: `--release` が暗黙的に付与されます

# デフォルト (2024 年時点) は bundler → ES モジュール向け最適化済み

wasm-pack build --target bundler # 省略可: `--release` が暗黙的に付与されます

生成物 (pkg/ ディレクトリ)

ファイル	内容
`my_wasm_app_bg.wasm`	実体 Wasm バイナリ
`my_wasm_app.js`	ES モジュールラッパー（デフォルトエクスポート）
`my_wasm_app_bg.js`	バインディング実装

5️⃣ JavaScript 側での利用

5.1 ESM インポート例（Vite 推奨）

// src/main.js
import init, { add, set_title } from &quot;./pkg/my_wasm_app.js&quot;;

async function run() {
  await init();               // Wasm のインスタンス化
  console.log(add(2, 3));     // → 5
  set_title(&quot;Rust + Wasm Demo&quot;);
}
run();

// src/main.js

import init, { add, set_title } from "./pkg/my_wasm_app.js";

async function run() {

await init(); // Wasm のインスタンス化

console.log(add(2, 3)); // → 5

set_title("Rust + Wasm Demo");

}

run();

5.2 CommonJS（Node.js 等）向け例

// index.cjs
const wasm = require(&quot;./pkg/my_wasm_app.js&quot;);

wasm.init().then(() =&gt; {
  console.log(wasm.add(4, 7));   // → 11
});

// index.cjs

const wasm = require("./pkg/my_wasm_app.js");

wasm.init().then(() => {

console.log(wasm.add(4, 7)); // → 11

});

結論：モダンフロントエンドは ESM が標準です。プロジェクト全体を ESM に統一すると、ツリ―シェイキングや HMR の恩恵が最大化します。

6️⃣ 開発サーバーの構築（Vite を例に）

# Vite プロジェクト作成 (vanilla テンプレート)
npm create vite@latest wasm-demo -- --template vanilla
cd wasm-demo
npm install

# Vite プロジェクト作成 (vanilla テンプレート)

npm create vite@latest wasm-demo -- --template vanilla

cd wasm-demo

npm install

6.1 Wasm パッケージの配置

# `my-wasm-app` のビルド結果を Vite の public ディレクトリへコピー
cp -r ../my-wasm-app/pkg ./public/

# `my-wasm-app` のビルド結果を Vite の public ディレクトリへコピー

cp -r ../my-wasm-app/pkg ./public/

vite.config.ts はデフォルト設定で問題ありませんが、MIME タイプの正しい配信を保証するため public/ 配下に配置しておくことがポイントです。

npm run dev   # http://localhost:5173 が自動で開きます

1 2	npm run dev # http://localhost:5173 が自動で開きます

ファイル保存 → Vite が自動リビルド → ブラウザが即時更新されます（HMR）。

7️⃣ 本番向け最適化と CI/CD

7.1 バイナリサイズの削減 (`wasm-opt`)

# macOS / Linux (Homebrew) で Binaryen をインストール
brew install binaryen   # Ubuntu は `apt-get install binaryen`

# サイズ優先最適化（-Oz）を実行
wasm-opt -Oz pkg/my_wasm_app_bg.wasm -o pkg/my_wasm_app_bg.opt.wasm

# macOS / Linux (Homebrew) で Binaryen をインストール

brew install binaryen # Ubuntu は `apt-get install binaryen`

# サイズ優先最適化（-Oz）を実行

wasm-opt -Oz pkg/my_wasm_app_bg.wasm -o pkg/my_wasm_app_bg.opt.wasm

pkg/ に上書きすれば、フロントエンドは自動的に圧縮版を利用します。

7.2 デバッグビルド

wasm-pack build --debug --target bundler   # ソースマップが生成されます

1 2	wasm-pack build --debug --target bundler # ソースマップが生成されます

開発時はデバッグ情報付きでビルドし、リリース時だけ最適化ビルドを行うとトラブルシューティングが楽になります。

7.3 GitHub Actions による自動ビルドパイプライン

# .github/workflows/wasm.yml
name: Build Wasm Package

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      # Rust と wasm-pack のセットアップ
      - name: Install toolchain
        run: |
          curl https://sh.rustup.rs -sSf | sh -s -- -y
          source $HOME/.cargo/env
          rustup target add wasm32-unknown-unknown
          cargo install wasm-pack

      # Wasm パッケージのビルド
      - name: Build with wasm-pack
        run: |
          cd my-wasm-app
          wasm-pack build --target bundler

      # アーティファクトとして保存（後続ジョブやデプロイに利用可能）
      - uses: actions/upload-artifact@v3
        with:
          name: wasm-pkg
          path: my-wasm-app/pkg/

# .github/workflows/wasm.yml

name: Build Wasm Package

on:

push:

branches: [ main ]

jobs:

build:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v3

# Rust と wasm-pack のセットアップ

- name: Install toolchain

run: |

curl https://sh.rustup.rs -sSf | sh -s -- -y

source $HOME/.cargo/env

rustup target add wasm32-unknown-unknown

cargo install wasm-pack

# Wasm パッケージのビルド

- name: Build with wasm-pack

run: |

cd my-wasm-app

wasm-pack build --target bundler

# アーティファクトとして保存（後続ジョブやデプロイに利用可能）

- uses: actions/upload-artifact@v3

with:

name: wasm-pkg

path: my-wasm-app/pkg/

このワークフローは push → ビルド → アーティファクト を自動化し、GitHub Pages や npm へのデプロイを追加ステップで拡張できます。

8️⃣ まとめ（チェックリスト）

✅ rustup と wasm32-unknown-unknown ターゲットをインストール
✅ 最新の wasm-pack（v0.12 系）を公式手段で取得し、バージョンを必ず確認
✅ Cargo で my-wasm-app を作成し、wasm-bindgen と web-sys を追加
✅ #[wasm_bindgen] による関数エクスポートを書き、wasm-pack build --target bundler でビルド
✅ ESM (import) 形式でフロントエンドに組み込み、Vite で HMR 開発環境を構築
✅ 本番は wasm-opt -Oz でサイズ最適化、デバッグ時は --debug オプションを活用
✅ GitHub Actions 等 CI にビルド工程を組み込み、成果物を自動配布

これらの手順を踏めば、Rust → WebAssembly → モダンフロントエンド の一連フローが 2024 年版の標準環境として確実に機能します。ぜひプロジェクトやポートフォリオで試してみてください！