RustでWebAssembly開発環境を構築する手順【rustup・wasm-pack】

2026年6月16日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 1. Rust の基本的な開発環境を整える
2 2. WebAssembly 向けの追加セットアップ
3 3. Hello WASM アプリの実装とビルド
4 4. ローカルサーバとデバッグ環境の整備
- 4.1 4.1 簡易 HTTP サーバの起動例
- 4.2 4.2 VSCode 用 WebAssembly デバッガの設定
5 5. よくあるエラーとパフォーマンス最適化
- 5.1 5.1 代表的なエラーパターンと対処法
- 5.2 5.2 リリースビルドとサイズ削減テクニック
6 6. 次のステップと参考資料
- 6.1 公式・有用リンク集

スポンサードリンク

1. Rust の基本的な開発環境を整える

Rust をローカルで快適に利用するための最低構成です。rustup が提供するツールチェーン管理とエディタ連携だけで、以降のアップデートやターゲット追加がシンプルになります。

1.1 rustup によるツールチェーンのインストール

rustup は公式インストーラ（https://rustup.rs) から取得でき、stable チャンネルのコンパイラ・Cargo が自動でセットアップされます。

# macOS / Linux （シェル）
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Windows（PowerShell）※管理者権限は不要
iwr https://win.rustup.rs -UseBasicParsing | iex

# macOS / Linux （シェル）

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Windows（PowerShell）※管理者権限は不要

iwr https://win.rustup.rs -UseBasicParsing | iex

インストール時にパスが通っていない場合は、シェルの再起動か source $HOME/.cargo/env を実行してください。

1.2 インストール確認とアップデート方法

以下のコマンドで現在のツールチェーンを確認し、必要に応じて最新バージョンへ更新できます。

rustc --version   # 例: rustc 1.77.0 (2024‑09‑10)
cargo --version   # 例: cargo 1.77.0 (2024‑09‑10)

# ツールチェーン全体を最新にする
rustup update

rustc --version # 例: rustc 1.77.0 (2024‑09‑10)

cargo --version # 例: cargo 1.77.0 (2024‑09‑10)

# ツールチェーン全体を最新にする

rustup update

バージョン番号は rustup が自動で取得するため、記事の執筆時点と将来の差異を心配する必要はありません。公式リリースノートは https://blog.rust-lang.org を参照してください。

1.3 エディタと LSP の設定（VSCode + rust-analyzer）

Rust コードの補完・診断・自動リファクタリングを利用したい場合は、Visual Studio Code に rust‑analyzer 拡張機能をインストールします。拡張機能パネルで「rust-analyzer」を検索し、インストール後に VSCode を再起動してください。

設定例（settings.json）

{
  &quot;rust-analyzer.cargo.loadOutDirsFromCheck&quot;: true,
  &quot;rust-analyzer.checkOnSave.command&quot;: &quot;clippy&quot;,
  &quot;editor.formatOnSave&quot;: true
}

{

"rust-analyzer.cargo.loadOutDirsFromCheck": true,

"rust-analyzer.checkOnSave.command": "clippy",

"editor.formatOnSave": true

}

公式拡張ページ: https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer

2. WebAssembly 向けの追加セットアップ

Rust の環境が整ったら、ブラウザ上で実行できる wasm32-unknown-unknown ターゲットと、開発支援ツールを導入します。これにより cargo build と同様の感覚で WASM バイナリを生成できます。

2.1 wasm32‑unknown‑unknown ターゲットの導入

このターゲットは「ブラウザが直接ロードできる」純粋な WebAssembly を出力します。以下の一行でローカルにインストール可能です。

rustup target add wasm32-unknown-unknown

1 2	rustup target add wasm32-unknown-unknown

rustup show でインストール済みターゲットを確認できます。

2.2 補助ツール：wasm-pack と cargo-generate のインストール

ツール	主な役割	推奨インストール方法
wasm‑pack	ビルド・テスト・デプロイを統合的に支援。`wasm-bindgen` と連携し、JavaScript 用ラッパーを自動生成します。	`cargo install wasm-pack`（Cargo）または `npm i -g wasm-pack`（Node）
cargo‑generate	GitHub 上のテンプレートリポジトリからプロジェクト雛形を即座に作成できます。	`cargo install cargo-generate`

公式ページ
- wasm‑pack: https://github.com/rustwasm/wasm-pack
- cargo‑generate: https://github.com/cargo-generate/cargo-generate

2.3 テンプレートからプロジェクトを作成（Seed / Yew）

実務でよく利用されるフロントエンドフレームワーク Seed と Yew の公式テンプレートは、cargo generate 経由で簡単に取得できます。ここでは Seed を例示しますが、Yew でも同様の流れです。

cargo generate \
  --git https://github.com/seed-rs/seed-template.git \
  --name my-wasm-app

cargo generate \

--git https://github.com/seed-rs/seed-template.git \

--name my-wasm-app

生成されたディレクトリは次のような構成になります（重要ファイルだけ抜粋）。

ファイル	説明
`src/lib.rs`	Rust 側エントリポイント。`#[wasm_bindgen]` で公開関数を記述します。
`index.html`	ブラウザに読み込ませる HTML。モジュール方式で生成された JS をインポート。
`Cargo.toml`	`crate-type = ["cdylib"]` と `wasm-bindgen` 依存が設定済み。
`package.json`	npm スクリプト（`npm start`）やビルドツールの定義が含まれます。

公式テンプレートリポジトリ
- Seed: https://github.com/seed-rs/seed-template
- Yew: https://github.com/yewstack/yew-wasm-pack-template

3. Hello WASM アプリの実装とビルド

ここでは「Hello, WebAssembly!」という最小サンプルを作り、wasm-pack を使ってブラウザで動かすまでの手順を示します。

3.1 Rust コードの記述

src/lib.rs に以下を書き込みます。#[wasm_bindgen] が付いた関数は JavaScript から呼び出せるようになります。

use wasm_bindgen::prelude::*;

/// ブラウザ側から呼び出すシンプルな文字列返却関数
#[wasm_bindgen]
pub fn greet() -&gt; String {
    &quot;Hello, WebAssembly!&quot;.into()
}

use wasm_bindgen::prelude::*;

/// ブラウザ側から呼び出すシンプルな文字列返却関数

#[wasm_bindgen]

pub fn greet() -> String {

"Hello, WebAssembly!".into()

}

3.2 wasm‑pack によるビルド手順

デバッグビルドとリリースビルドの両方を示します。--target web はブラウザ向けに最適化されたモジュール形式です。

# デバッグビルド（開発中は速さ優先）
wasm-pack build --target web

# 本番用リリースビルド（最適化レベルが高い）
wasm-pack build --release --target web

# デバッグビルド（開発中は速さ優先）

wasm-pack build --target web

# 本番用リリースビルド（最適化レベルが高い）

wasm-pack build --release --target web

ビルド成功後、pkg/ ディレクトリに以下が生成されます。

my_wasm_app_bg.wasm – 実体バイナリ
my_wasm_app.js – JavaScript ラッパー（ESモジュール）

3.3 HTML 側でモジュールをロードする方法

index.html に ESモジュールとしてインポートし、ページ表示時に関数を呼び出す例です。

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Rust + WASM Hello&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1 id=&quot;msg&quot;&gt;Loading...&lt;/h1&gt;

  &lt;script type=&quot;module&quot;&gt;
    import init, { greet } from &quot;./pkg/my_wasm_app.js&quot;;

    async function run() {
      await init();                // .wasm のロードと初期化
      document.getElementById('msg').textContent = greet();
    }

    run();
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Rust + WASM Hello</title>

</head>

<body>

<h1 id="msg">Loading...</h1>

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

async function run() {

await init(); // .wasm のロードと初期化

document.getElementById('msg').textContent = greet();

}

run();

</script>

</body>

</html>

init() が内部で import.meta.url を利用し、正しい相対パスの .wasm ファイルを取得します。

4. ローカルサーバとデバッグ環境の整備

WASM バイナリは HTTP 経由でしかブラウザがロードできないため、簡易的なローカルサーバが必要です。また VSCode の拡張機能を使うと Rust ソースレベルでブレークポイントを設定できます。

4.1 簡易 HTTP サーバの起動例

方法	前提条件	起動コマンド
npm http‑server	Node.js がインストール済み	`npx http-server . -c-1` （キャッシュ無効）
Python 3 の組込みサーバ	Python がインストール済み	`python -m http.server 8080`

どちらもプロジェクトルートで実行すれば、ブラウザは http://localhost:8080（またはポート番号）にアクセスできます。

4.2 VSCode 用 WebAssembly デバッガの設定

VSCode Marketplace から WebAssembly Debugger（別名 wasm-debugger）をインストールします。続いてプロジェクトルートに .vscode/launch.json を作成し、以下を記述してください。

{
  &quot;version&quot;: &quot;0.2.0&quot;,
  &quot;configurations&quot;: [
    {
      &quot;type&quot;: &quot;wasm&quot;,
      &quot;request&quot;: &quot;launch&quot;,
      &quot;name&quot;: &quot;Launch Chrome with WASM&quot;,
      &quot;url&quot;: &quot;http://localhost:8080&quot;,
      &quot;webRoot&quot;: &quot;${workspaceFolder}&quot;
    }
  ]
}

{

"version": "0.2.0",

"configurations": [

{

"type": "wasm",

"request": "launch",

"name": "Launch Chrome with WASM",

"url": "http://localhost:8080",

"webRoot": "${workspaceFolder}"

}

]

}

src/lib.rs の greet() 行にブレークポイントを設定。
デバッグパネルから Launch Chrome with WASM を実行すると、Chrome が起動しブレーク時に変数の中身やスタックが確認できます。

拡張機能ページ: https://marketplace.visualstudio.com/items?itemName=webassembly.debug

5. よくあるエラーとパフォーマンス最適化

実装途中で遭遇しやすい問題と、プロダクション向けにバイナリサイズを削減するテクニックをまとめました。

5.1 代表的なエラーパターンと対処法

エラーメッセージ	主な原因	推奨対策
`error: target 'wasm32-unknown-unknown' not installed`	ターゲット未追加	`rustup target add wasm32-unknown-unknown` を実行
`wasm-bindgen 0.2.xx requires crate version >= 0.2.yy`	Cargo.toml と `wasm-bindgen-cli` のバージョン不一致	`cargo update -p wasm-bindgen`、または `cargo install -f wasm-bindgen-cli --version <同一>`
`Uncaught (in promise) TypeError: fetch failed`	`.wasm` を file:// で直接読もうとしている	ローカル HTTP サーバ経由でアクセス（前節参照）
`error: linking with`cc`failed`	ネイティブライブラリが不足	macOS では Xcode Command Line Tools、Linux では `build-essential` をインストール

エラーメッセージはそのまま検索すると公式 Issue がヒットしやすいので、Rust Users Forum や GitHub Discussions も併せて活用してください。

5.2 リリースビルドとサイズ削減テクニック

Release ビルドの実行
bash wasm-pack build --release --target web
--release は Cargo の最適化フラグ（-C opt-level=z）を自動付与し、デバッグ情報が省かれます。
Binaryen の wasm-opt でさらに圧縮
bash # macOS (brew) / Linux (apt) などでインストール可能 wasm-opt -Oz pkg/my_wasm_app_bg.wasm -o pkg/my_wasm_app_bg_opt.wasm
-Oz は「サイズ最優先」の最適化モードです。圧縮後は数百 KB 程度にまで削減できることが多いです。
不要機能の除外
Cargo.toml でデフォルト機能を無効にし、必要な機能だけを有効化します。例:
toml [dependencies] wasm-bindgen = { version = "0.2", default-features = false, features = ["serde-serialize"] }
余計なコードがリンクされず、結果的にバイナリサイズが小さくなります。
wee_alloc の利用（メモリアロケータ最適化）
rust #[global_allocator] static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
wee_alloc は軽量なアロケータで、WASM 用に特化しています。サイズ削減効果は数十 KB 程度です。

6. 次のステップと参考資料

この記事を通じて Rust の開発環境 → WASM ターゲット追加 → Hello World アプリ まで構築できました。次に挑戦すべきこととしては:

UI フレームワークで本格的な SPA を作る
Seed、Yew、Leptos のいずれかを選び、コンポーネント駆動開発を体験する。
CI/CD パイプラインに wasm-pack と wasm-opt を組み込む
GitHub Actions で自動ビルド・デプロイ（GitHub Pages、Cloudflare Workers 等）を設定。
Rust のエコシステムを広げる
cargo test --target wasm32-unknown-unknown でユニットテスト、wasm-bindgen-test を使ったブラウザテスト、criterion によるベンチマークなど。

公式・有用リンク集

項目	URL
Rust 公式サイト（日本語）	https://www.rust-lang.org/ja
rustup ドキュメント	https://rust-lang.github.io/rustup/
Cargo パッケージレジストリ (crates.io)	https://crates.io
wasm‑pack GitHub リポジトリ	https://github.com/rustwasm/wasm-pack
cargo‑generate GitHub リポジトリ	https://github.com/cargo-generate/cargo-generate
Seed 公式テンプレート	https://github.com/seed-rs/seed-template
Yew 公式ドキュメント	https://yew.rs/docs
WebAssembly Debugger 拡張 (VSCode)	https://marketplace.visualstudio.com/items?itemName=webassembly.debug
Rust Users Forum	https://users.rust-lang.org/
Rust & WASM Book（英語）	https://rustwasm.github.io/docs/book/

これらのリソースをブックマークし、定期的にバージョン情報やベストプラクティスを確認すれば、常に最新かつ安全な開発が可能です。

Happy coding! 🚀

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Rust

comment コメントをキャンセル

: Rust

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

Rust と WebAssembly をブラウザに組み込むための2024年最新ビルド手順をステップバイステップで紹介します。

: Rust

Rust Cargo パッケージ管理の完全ガイド：依存解決・ワークスペース・CI/CD対策

Rust 開発で Cargo を正しく使いこなす方法を、依存関係の追加・更新・削除から Workspace 構成、CI/CD 再現性、crates.io 公開まで実務シナリオ別に解説します。

: Rust

Rust と WebAssembly エコシステム最新概況とベンチマーク徹底解説

Rust と WebAssembly の最新ツール群とベンチマーク結果を紹介し、実運用での高速化手法を解説します。

: Rust

2026年のRustエコシステムと業界別採用事例まとめ

Rust 1.78の性能向上と企業のオープンソース活動により、金融・ロボティクス・AI領域での採用が急速に広がり、実践的な導入手順が提示されています。

: Rust

Rust ゲームPC 推奨設定比較 2026年版ベンチマークと購入ガイド

Rustの快適プレイに必要なPCスペックをGPU・CPU別に比較し、コスパモデルからハイエンドまで最適構成と設定方法をご紹介します。

PythonでAI画像生成｜基礎から実装まで完全ガイド

PythonでTableau代替のダッシュボードを作るメリットと方法 | オープンソース活用

RustでWebAssembly開発環境を構築する手順【rustup・wasm-pack】

1. Rust の基本的な開発環境を整える

1.1 rustup によるツールチェーンのインストール

1.2 インストール確認とアップデート方法

1.3 エディタと LSP の設定（VSCode + rust-analyzer）

2. WebAssembly 向けの追加セットアップ

2.1 wasm32‑unknown‑unknown ターゲットの導入

2.2 補助ツール：wasm-pack と cargo-generate のインストール

2.3 テンプレートからプロジェクトを作成（Seed / Yew）

3. Hello WASM アプリの実装とビルド

3.1 Rust コードの記述

3.2 wasm‑pack によるビルド手順

3.3 HTML 側でモジュールをロードする方法

4. ローカルサーバとデバッグ環境の整備

4.1 簡易 HTTP サーバの起動例

4.2 VSCode 用 WebAssembly デバッガの設定

5. よくあるエラーとパフォーマンス最適化

5.1 代表的なエラーパターンと対処法

5.2 リリースビルドとサイズ削減テクニック

6. 次のステップと参考資料

公式・有用リンク集

3. Hello WASM アプリの実装とビルド