Contents
RustとWebAssembly入門: ツールチェーンの最新情報を活用したプロジェクト構築の基本
RustとWebAssembly（Wasm）は、軽量で高速な実行環境を必要とする現代のWeb開発において注目されています。wasm-pack 3.xやRust 1.78といった最新ツールが登場し、開発効率が大幅に向上しています。本記事では、これらのツールを用いて「即日でWasmプロジェクトを立ち上げる」ためのステップバイステップガイドをお届けします。読者が持つ疑問に直接応えつつ、実際のコード例を通じて理解を深めていきます。
RustとWebAssemblyの開発環境構築
RustとWasmを開発するにはまず、Rustツールチェーンとwasm-pack 3.xの導入が必要です。これらは、Wasmモジュールの作成とJavaScriptとの連携を実現するための基盤となります。
Rustツールチェーンのインストール
Rustの公式パッケージマネージャーであるrustupを使用して、最新バージョン（1.78）をインストールします。以下に手順を示します：
重要: 新しいプロジェクトでは
rustup default stableで安定版を明示的に設定すると良いです。
-
Rustのインストール:
bash
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
これにより、rustc（コンパイラ）とcargo（パッケージマネージャー）がインストールされます。 -
バージョン確認とツールチェーン設定:
bash
rustc --version
cargo --version
rustup default stable
出力例:
rustc 1.78.0 (abc123456)
cargo 1.78.0 (def789012)
wasm-pack 3.xの導入確認
RustからWasmをビルドするためには、wasm-packが必須です。最新バージョン（3.x）をグローバルでインストールします。
|
1 2 |
cargo install wasm-pack --version 3.0.0 |
インストール後は以下のようにバージョンを確認できます：
|
1 2 |
wasm-pack --version |
出力例:
|
1 2 |
3.0.0 |
最初のWebAssemblyモジュールの作成（Hello World）
RustとWasmの基本的なプロジェクト構築フローを理解するためには、最初に「Hello World」レベルのモジュールを作成してみましょう。
Cargoプロジェクト初期化
cargo newコマンドで新しいライブラリプロジェクトを作成します：
|
1 2 3 |
cargo new wasm-hello --lib cd wasm-hello |
このとき、Cargo.tomlにwasm-bindgenとwasm-packの依存関係が自動的に追加されます。
Wasm対応のコード構造
ライブラリプロジェクトでは、src/lib.rsにロジックを記述します。以下は、JavaScriptから呼び出せる関数を作成する例です：
|
1 2 3 4 5 6 7 |
use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn greet(name: &str) -> String { format!("Hello, {}!", name) } |
このコードでは#[wasm_bindgen]アトリビュートが使われており、JavaScript側からこの関数を呼び出す準備を行います。
JavaScriptとのインターフェース設計と通信方法
Rustで書いたWasmモジュールをJavaScriptから使いやすくするには、関数のエクスポートやデータ型の相互運用が不可欠です。
関数エクスポートの仕組み
上で作成したgreet()関数は、JavaScript側で以下のように呼び出せます：
|
1 2 3 4 5 6 |
import init, { greet } from './pkg/wasm_hello'; init().then(() => { console.log(greet("Rust")); // "Hello, Rust!" }); |
このように、wasm-pack build --target webで生成されるJavaScriptラッパーを使えば、簡単に関数をエクスポートできます。
複雑なデータ型の相互運用
JavaScriptとRustではデータ型が異なるため、以下のような対応が必要です：
| JavaScript 型 | Rust 型 | 注意点 |
|---|---|---|
string |
&str or String |
wasm-bindgenで自動変換される |
number |
i32, f64 |
数値の範囲に注意 |
object |
JsValue or Struct |
JavaScriptオブジェクトを扱うための型。JsValue::from()やserde_wasm_bindgenで構造体と相互変換可能 |
補足:
JsValueはJavaScriptオブジェクトを任意にラップできますが、Rust側での処理にはwasm-bindgenのJsValue::as_ref()やserde_wasm_bindgenライブラリで構造体への変換が必要な場合があります。
ブラウザでWebAssemblyを動かしてみる
Wasmモジュールを作成した後は、ブラウザ上で実行して動作確認をします。
HTMLファイルでのWasm読み込み
wasm-pack build --target webコマンドで出力されるpkg/ディレクトリからJavaScriptラッパーを使います。以下は簡単なHTMLの例です：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head><title>Wasm Hello</title></head> <body> <script type="module"> import init, { greet } from './pkg/wasm_hello.js'; init().then(() => { console.log(greet("World")); }); </script> </body> </html> |
このHTMLファイルをブラウザで開くと、JavaScriptコンソールに"Hello, World!"が出力されます。
TauriでのWebAssemblyモジュールの利用例
TauriはRustとJavaScriptを組み合わせてデスクトップアプリを開発するフレームワークです。Wasmモジュールも簡単に統合できます。
Tauriプロジェクトとの連携手順
-
Tauriプロジェクト作成:
bash
cargo tauri init --with-wasm確認事項:
cargo tauri initのオプションはバージョンごとに変化するため、公式ドキュメントで最新情報を確認することを推奨します。 -
Wasmモジュールを呼び出すコード（Rust側）:
rust
#[tauri::command]
pub fn say_hello(name: String) -> Result<String, String> {
Ok(greet(&name))
} -
JavaScript側で呼び出し:
javascript
window.__TAURI__.invoke('say_hello', { name: 'Tauri' });
このように、Wasmモジュールと連携させることで高性能なデスクトップアプリを構築できます。
即日実行！あなたのWasmプロジェクト開始ガイド
本記事で作成したコードは、読者が自身のWasmプロジェクト立ち上げに直接活用できるよう設計されています。以下の手順を参考にしてください：
- Rustとwasm-packの環境構築を行います。
hello worldレベルのプロジェクトを作成し、JavaScriptとの連携を確認します。- 必要であれば、Tauriのようなデスクトップアプリフレームワークに統合します。
すべてを実行すれば、すぐにWasmプロジェクトが開始できます。手を動かして体験することが、最も効果的な学習方法です。