Contents
Rust WebAssembly 入門 やり方：ステップバイステップで学ぶ実践ガイド
プログラミング初心者や中級者がRustとWebAssembly（WASM）を組み合わせて動かす方法を、具体的な手順で解説します。この記事では、開発環境の構築からブラウザへの埋め込みまで、Rust WebAssembly 入門 やり方として必要な知識を段階的に紹介します。
RustとWebAssemblyの関係性を理解する
RustとWebAssemblyはどのように連携し、どのような利点があるのか？
Rustはメモリ安全性とパフォーマンスが高く、WebAssemblyはブラウザ内での実行環境として広く採用されています。両者の組み合わせにより、ブラウザで高速かつ安全な処理を実現できます。
なぜRustでWebAssemblyが注目されているのか
Rustの特徴とWebAssemblyの適応性を以下に比較しました：
| 項目 | Rust | WebAssembly (WASM) | 組み合わせによる利点 |
|---|---|---|---|
| メモリ管理 | 所有権システムで安全性確保 | スタック/ヒープ制御必要 | クラッシュ防止とパフォーマンス向上 |
| 実行環境 | 任意のプラットフォーム | ブラウザやサーバーなど | 複数環境での再利用性 |
| 開発効率 | 高い | 中程度 | ハイパフォーマンスかつ柔軟性 |
注意：WebAssembly自体は言語に依存せず、Rustはその中でも特に安全で信頼性の高い選択肢です。
WebAssembly実行環境（ブラウザ vs WASI）の違いを理解する
WebAssemblyはブラウザとWASI環境で異なる挙動を持つことを知っておく必要があります。
ブラウザではJavaScriptとの連携が基本で、ファイル操作やネットワークアクセスに制限があります。一方、WASI（WebAssembly System Interface）はサーバーやネイティブ環境での実行をサポートし、標準入出力やファイル操作が可能です。以下に具体的な違いをまとめます：
| 項目 | ブラウザ | WASI |
|---|---|---|
| メモリモデル | スクリプトによる制御 | システムリソースへのアクセス可能 |
| ファイル操作 | 制限あり（一部APIのみ） | 完全サポート |
| ネットワーク | JavaScript経由での利用 | ネイティブなAPIが利用可能 |
| 用途例 | コンピュテーション処理 | サーバーアプリケーションやツール |
重要なポイント：ブラウザではWebAssemblyの制限を理解し、WASI環境でより多くの機能を活用することが可能です。
開発環境の構築方法
rustupとwasm32-wasiターゲットをインストールする手順をステップバイステップで解説します。
rustupとwasm32-wasiターゲットのインストール手順
開発環境を整えるには、以下のように実行してください：
-
rustupをインストール
まだ導入していない場合は、公式サイトからrustup-initをダウンロードし、コマンドラインで実行します。 -
wasm32-wasiターゲットを追加
ツールチェーンの追加には以下を実行：
bash
rustup target add wasm32-wasi -
ターゲットが正しくインストールされたか確認する
bash
rustc --target wasm32-wasi --version
これでWebAssembly向けのコンパイルが可能になります。
トラブルシューティング例：
No such targetというエラーが出る場合は、rustup updateを実行し、ターゲットの再追加を試してください。
Hello Worldの実装と動作確認
RustコードからWebAssemblyへのコンパイル手順と簡単なサンプルコードを紹介します。
RustコードからWebAssemblyへのコンパイル手順
-
Cargoプロジェクトを作成
bash
cargo new hello_wasm --lib
cd hello_wasm -
src/lib.rsに以下のように記述
rust
#[no_mangle]
pub extern "C" fn greet() -> *const u8 {
let s = "Hello, WebAssembly!";
s.as_ptr()
}この関数は、JavaScriptから呼び出すためのエクスポートされたC関数です。
as_ptr()によって文字列をポインタとして返しています。 -
WebAssemblyへコンパイル
bash
cargo build --target wasm32-wasi --release
target/wasm32-wasi/release/hello_wasm.wasmが生成されます。
確認方法：WASMファイルはブラウザのJavaScriptから読み込むことで動作を検証できます（後述）。
WASIとの連携実装
RustでWASIを活用した標準入出力や環境変数取得の例を解説します。
標準入出力のWebAssemblyへの適用例
WASIは、WebAssemblyにファイル操作や環境変数などの機能を提供します。以下は環境変数取得の一例です：
|
1 2 3 4 5 6 7 8 9 10 11 |
use std::env; #[no_mangle] pub extern "C" fn get_env() -> *const u8 { let key = "TEST_ENV"; match env::var(key) { Ok(val) => val.as_ptr(), Err(_) => "NOT FOUND".as_ptr(), } } |
このコードは、
env::var()を用いて環境変数を取得し、存在しない場合にデフォルト値を返します。WASI環境でのみ動作します（ブラウザでは不可）。
ブラウザへの埋め込み方法
JavaScriptとの連携により、WebAssemblyをHTMLに組み込む手順を解説します。
JavaScriptとの連携によるWebAssembly呼び出し
- HTMLファイルを作成（
index.html）：
html
- JavaScriptファイルを作成（
hello_wasm.js）：
javascript
export function greet() {
const wasm = await WebAssembly.instantiateStreaming(fetch('hello_wasm.wasm'), {});
return wasm.instance.exports.greet();
}instantiateStreaming()は、WebAssemblyモジュールを効率的に読み込むためのAPIです。
WASMファイルのブラウザでの読み込み方法
WASMファイルをJavaScriptから読み込んで動かす具体的な手順を紹介します。
ステップバイステップで動作検証する
- HTMLとJavaScriptファイルを作成（上記の手順参照）
hello_wasm.wasmファイルを同じディレクトリに配置- ブラウザでHTMLファイルを開く
- ChromeやFirefoxなどの現代ブラウザを使用してください。
- コンソールで
Hello, WebAssembly!が表示されることを確認します。
補足：
.wasmファイルは通常のテキストファイルではないため、直接開くことはできません。JavaScript経由での読み込みが必須です。
実践プロジェクトのダウンロードと手順
記事で解説した内容を統合したサンプルプロジェクトを提供します。
Rust + WebAssemblyで作る簡単なプロジェクト
下記リンクから、すべてのコードが含まれたZIPファイルをダウンロード可能です（※実際は公式リポジトリなどに置く必要があります）：
【ダウンロード】Rust + WebAssembly プロジェクト
このプロジェクトには、以下の内容が含まれます：
Cargo.tomlによる環境構築設定- サンプルコード（Hello WorldとWASI連携）
- HTML/JavaScriptの埋め込み例
実行方法：ZIPファイルを解凍後、
cd hello_wasm && cargo build --target wasm32-wasi --releaseでコンパイルし、HTMLファイルを開くことでブラウザ上での動作確認が可能です。
まとめと今後の学習アドバイス
RustとWebAssemblyの連携は、現代のウェブ開発やクラウド環境における重要な技術です。
本記事では、基本的な知識と手順を解説しましたが、実際には以下のような課題にも注意が必要です：
- ブラウザ vs WASI環境の選択肢: 実行したい機能に応じて適切な環境を選びましょう。
- セキュリティとパフォーマンスのバランス: Rustのメモリ管理がWebAssemblyの安全性に大きく寄与します。
- コミュニティとツールの活用: ライブラリやIDEのサポートも積極的に利用してください。
おすすめ学習ステップ：
- 基本的なRust構文を学ぶ（公式ドキュメント）
- WebAssemblyの仕組みを理解する（MDNやW3Cの資料）
- プロジェクトで実装し、動作検証を行う
- 実際のアプリケーションに応用する（例：データ処理ツールなど）