WebAssemblyとRust：ブラウザでRustを使うための環境構築

**WebAssembly（Wasm）**は、ブラウザ上で高性能なコードを実行するためのバイナリフォーマットで、Rustのようなシステムプログラミング言語と相性が非常に良い技術です。

WebAssemblyを使えば、Rustで書いたコードをブラウザ上で動かすことができ、パフォーマンスの高いWebアプリケーションを構築することができます。

この記事では、RustをWebAssemblyにコンパイルして、ブラウザで実行する基本的な手順を学びます。

WebAssemblyとRustの基礎

**WebAssembly（Wasm）**は、CやRustなどの低レベル言語をブラウザ上で実行するために設計されたバイナリフォーマットです。

これにより、JavaScriptでは得られないネイティブに近いパフォーマンスを提供します。

Rustは、メモリ管理やコンパイラの最適化が優れているため、WebAssemblyとの統合に適しています。

WebAssemblyの特徴

  • 高速: WebAssemblyは、ブラウザでの実行に最適化されており、高速なパフォーマンスを実現します。
  • クロスプラットフォーム: すべての主要なブラウザ（Chrome, Firefox, Safari, Edge）がWebAssemblyをサポートしており、プラットフォームに依存しません。
  • 安全性: WebAssemblyはサンドボックス内で実行されるため、外部の脅威から守られます。

RustとWebAssemblyの環境構築

RustでWebAssemblyを利用するためには、いくつかのツールをインストールして準備を行う必要があります。

RustのWasmターゲットのインストール

まず、RustにWebAssemblyターゲットを追加します。

これは、RustのコードをWebAssemblyにコンパイルするためのものです。

$ rustup target add wasm32-unknown-unknown

このコマンドで、wasm32-unknown-unknown というターゲットをRustに追加し、WebAssembly向けにコンパイルできるようになります。

wasm-pack のインストール

次に、RustからWebAssemblyをビルドするためのツール wasm-pack をインストールします。

wasm-pack は、RustのプロジェクトをWebAssemblyに変換し、ブラウザやNode.jsで使えるようにパッケージ化します。

$ cargo install wasm-pack

npm の準備

WebAssemblyをブラウザ上で動かすためには、npm（Node.jsのパッケージ管理ツール）が必要です。

npmを使ってJavaScriptとWebAssemblyを連携させるパッケージを管理します。

RustプロジェクトをWebAssemblyに変換

次に、RustのプロジェクトをWebAssemblyに変換する手順を説明します。

Rustプロジェクトの作成

まず、新しいRustプロジェクトを作成します。

$ cargo new wasm_example --lib
$ cd wasm_example

このプロジェクトは、ライブラリとしてRustの関数を定義し、それをWebAssemblyとしてエクスポートする構成です。

WebAssembly用コードの記述

RustのコードをWebAssembly向けにエクスポートします。

Rustの関数をWebAssemblyで使用できるようにするには、wasm-bindgen クレートを使います。

Cargo.toml の設定

まず、Cargo.toml に wasm-bindgen の依存を追加します。

[dependencies]
wasm-bindgen = "0.2"

Rustコードの実装

次に、src/lib.rs にRustのコードを実装します。

use wasm_bindgen::prelude::*;

// WebAssemblyにエクスポートする関数
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("こんにちは、{}！", name)
}

#[wasm_bindgen] 属性を使うことで、この関数はWebAssemblyとしてエクスポートされ、JavaScriptから呼び出すことができるようになります。

WebAssemblyのビルド

次に、wasm-pack を使ってプロジェクトをWebAssemblyにビルドします。

$ wasm-pack build --target web

このコマンドを実行すると、pkg というディレクトリが生成され、その中にWebAssemblyバイナリ（.wasm ファイル）とJavaScriptのラッパーが含まれています。

ブラウザでWebAssemblyを実行

WebAssemblyをブラウザで実行するためのHTMLとJavaScriptのコードを用意します。

HTMLファイルの作成

次に、プロジェクトルートに index.html を作成し、WebAssemblyを実行するための基本的なHTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RustとWebAssembly</title>
</head>
<body>
    <h1>Rust + WebAssembly Example</h1>
    <input type="text" id="name-input" placeholder="名前を入力">
    <button id="greet-button">挨拶</button>
    <p id="greet-result"></p>

    <script type="module">
        import init, { greet } from './pkg/wasm_example.js';

        async function run() {
            await init();
            const button = document.getElementById('greet-button');
            button.addEventListener('click', () => {
                const name = document.getElementById('name-input').value;
                const result = greet(name);
                document.getElementById('greet-result').textContent = result;
            });
        }

        run();
    </script>
</body>
</html>

ローカルサーバーの起動

ブラウザでWebAssemblyを実行するために、ローカルサーバーを起動します。

ここでは、npm を使って簡単なHTTPサーバーをセットアップします。

$ npm install -g serve
$ serve .

このコマンドでローカルサーバーが起動し、ブラウザで index.html を開いてWebAssemblyを実行できます。

実践的なWebAssemblyの活用

WebAssemblyは、パフォーマンスが要求されるWebアプリケーションで非常に有用です。

例えば、画像処理や暗号化処理など、計算量の多い処理をWebAssemblyで行い、ブラウザ上で高速に実行することが可能です。

画像処理の例

Rustで画像フィルタをWebAssemblyを通してブラウザで実行することもできます。

以下はその簡単な例です。

use wasm_bindgen::prelude::*;
use image::GenericImageView;

#[wasm_bindgen]
pub fn grayscale(image_data: &[u8]) -> Vec<u8> {
    let img = image::load_from_memory(image_data).unwrap();
    let mut grayscale_img = img.to_luma8();
    grayscale_img.into_raw()
}

これにより、ブラウザ上で画像データを読み込み、Rustで画像処理を行い、WebAssemblyを通して結果を表示することが可能です。

練習問題

練習問題1: WebAssemblyとRustの連携

次の手順に従って、RustとWebAssemblyを使った簡単なWebアプリケーションを作成してください。

  1. 新しいRustプロジェクトを作成し、wasm-bindgen を追加します。
  2. Rustで計算処理（例：フィボナッチ数列）を実装し、WebAssemblyとしてエクスポートします。
  3. ブラウザで結果を表示できるように、HTMLとJavaScriptのファイルを作成してください。

まとめ

今回の記事では、RustとWebAssemblyを使ってブラウザ上でRustのコードを実行する方法を学びました。

WebAssemblyは、Webアプリケーションで高パフォーマンスを発揮するための強力なツールです。

Rustとの相性が非常に良く、Webアプリケーションのパフォーマンスを最適化するために広く利用されています。

次回予告のデザイン

次回予告

次回は「Rustのマクロとコード生成」をテーマに、Rustのマクロ機能とコード生成の仕組みについて学びます。

Author

kotaro