Webアプリのさらなる高速化を求める中で、注目を集める技術 WebAssembly (Wasm)。従来の JavaScript に加え、ブラウザ上でネイティブアプリに近い処理速度でバイナリを実行できる新しい規格です。

そして、この WebAssembly の開発言語として最も適しているのが、優れたメモリ安全性と実行パフォーマンスを誇るシステムプログラミング言語 Rust です。今回は、Rustを使ってWebAssemblyプロジェクトを立ち上げ、ブラウザから呼び出すまでの簡単なステップを解説します。

なぜ WebAssembly に Rust なのか？

  1. ガベージコレクタがない：GoやJavaなどの言語と異なり、Rustには実行時のGCがないため、生成されるWasmファイルが非常に軽量（数KB程度）です。
  2. 圧倒的な速度と安全性：メモリ安全性をコンパイル時に保証しつつ、C/C++と同等の超高速な実行速度を提供します。
  3. 優れたツールチェーン：wasm-pack という強力なツールが用意されており、JavaScript パッケージ（npm）としてのビルドが極めて簡単です。

実践：ブラウザ上で Rust コードを実行する

1. プロジェクトの作成と Cargo.toml の設定

まず、新しいライブラリプロジェクトを作成します。

1
2
cargo new --lib hello-wasm
cd hello-wasm

次に、Cargo.toml に WebAssembly ビルドに必要なクレート（ライブラリ）と設定を追加します。

1
2
3
4
5
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

2. Rust コードの記述

src/lib.rs に、ブラウザから呼び出したい Rust の関数を記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
use wasm_bindgen::prelude::*;

// JavaScript の window.alert を呼び出すための宣言
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}

// JavaScript 側から呼び出せる Rust 関数
#[wasm_bindgen]
pub fn greet(name: &str) {
    let message = format!("こんにちは、{}さん！RustからWebAssemblyの世界へようこそ！", name);
    alert(&message);
}

3. ビルドと呼び出し

wasm-pack コマンドを使用して、ブラウザ（または npm 向け）のモジュールとしてビルドします。

1
wasm-pack build --target web

ビルドが完了すると、pkg/ ディレクトリ配下に JavaScript ラッパーファイルと Wasm バイナリが自動生成されます。これを HTML から以下のようにインポートして呼び出すだけで、ブラウザ上で Rust のロジックが瞬時に実行されます！

1
2
3
4
5
6
7
8
9
10
<script type="module">
  import init, { greet } from './pkg/hello_wasm.js';

  async function run() {
    await init(); // WebAssemblyモジュールの初期化
    greet("ユーザー"); // Rustの関数を呼び出し
  }

  run();
</script>

まとめ

WebAssembly を使えば、画像処理、暗号化アルゴリズム、ゲーム物理演算など、CPU負荷の重い処理をブラウザ上でラグなく快適に実行できます。Rust と Wasm の強力な組み合わせを学び、一歩先を行く Web アプリケーションの開発に挑戦してみましょう。