DocsPricingBlog
Contact Us
Log inSign up for FREE
Back to Tech Articles

WebAssemblyでRustのパフォーマンスをWebにもたらす

Aug 05, 2025
# Misc

Takashi Yamamoto

Infrastructure Engineer · Leapcell

This post is also available in English, 한국어, and Deutsch
Cover of "WebAssemblyでRustのパフォーマンスをWebにもたらす"

はじめに

Webプラットフォームは、静的なドキュメントからリッチでインタラクティブなアプリケーションへと劇的に進化しました。ユーザーが応答性や計算能力に対して高い期待を寄せるにつれて、JavaScriptは汎用性は高いものの、CPU負荷の高いタスク、複雑なシミュレーション、または高性能グラフィックスの要求を満たすのに苦労することがあります。ここで、RustとWebAssembly（WASM）の強力な組み合わせが登場します。速度、メモリ安全性、並行性で名高いRustは、ブラウザで可能なことの限界を押し広げる理想的な候補となります。RustコードをWebAssemblyにコンパイルすることで、ネイティブライクなパフォーマンスを解除し、Rustの堅牢な型システムと恐れを知らない並行性をWebアプリケーション内で直接活用し、要求の厳しいWebベースの体験のための新しい地平を切り開くことができます。

RustとWebAssemblyの相乗効果を理解する

実用的な内容に入る前に、いくつかのコアコンセプトを明確にしましょう。

Rust: Rustは、安全性、パフォーマンス、並行性に焦点を当てたシステムプログラミング言語です。所有権システムを通じてガベージコレクションなしでメモリ安全性を実現しており、コンパイル時のメモリ保証を確保します。パフォーマンスへの注力は、ゲームエンジン、オペレーティングシステム、そしてますますWebアプリケーションコンポーネントのような速度が重要なタスクに適しています。

WebAssembly (WASM): WebAssemblyは、スタックベースの仮想マシンのバイナリ命令フォーマットです。C、C++、Rustのような高水準言語のポータブルなコンパイルターゲットとして設計されており、クライアントおよびサーバーアプリケーションのためにWeb上でのデプロイを可能にします。WASMは高速、安全、効率的であり、Webアプリケーションにネイティブに近いパフォーマンスを提供します。ホストシステムから隔離されたサンドボックス化された環境で実行され、セキュリティを確保します。

原則: アイデアは単純です。パフォーマンスが重要なコードをRustで記述し、WebAssemblyにコンパイルし、ブラウザのJavaScript環境内でそのWASMモジュールをロードして実行します。JavaScriptは、DOMとのやり取りを処理し、WASMモジュールの実行を調整する「グルーコード」として機能します。

仕組み：ステップバイステップの概要

WebAssemblyを介してRustをブラウザにもたらすプロセスは、通常、これらのステップを含みます：

  1. Rustコードの記述: アプリケーションロジック、アルゴリズム、または計算負荷の高い部分をRustで開発します。
  2. WASMへのコンパイル: Rustのwasm-packツール（またはwasm32-unknown-unknownターゲットを持つcargo）を使用して、Rustコードを.wasmバイナリとJavaScriptの「グルー」ファイルにコンパイルします。グルーファイルは、コンパイルされたWASMモジュールをロードして対話するために必要なJavaScriptバインディングを提供します。
  3. ブラウザでのロード: WebアプリケーションのJavaScriptコードで、生成されたグルーコードを使用して.wasmモジュールをロードします。これにより、Rust関数がJavaScript関数として利用可能になります。
  4. JavaScriptとの対話: 生成されたグルーコードを使用して.wasmモジュールをロードします。これにより、Rust関数がJavaScript関数として利用可能になります。

実践的な例：フラクタルマンデルブロ集合ジェネレーター

この概念を、マンデルブロ集合の計算という簡単な例で説明しましょう。これは、Rustのパフォーマンスから大幅に恩恵を受けるCPU負荷の高いタスクです。

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

cargo new --lib mandelbrot-wasm
cd mandelbrot-wasm

JavaScriptとRust間の対話を容易にするために、Cargo.tomlにwasm-bindgenを追加します：

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

次に、src/lib.rsで、基本的なマンデルブロ集合計算関数を実装しましょう。この関数は、画像寸法と最大反復回数を受け取り、色の配列（Vec<u8>として表現）を返します。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn generate_mandelbrot(width: u32, height: u32, max_iterations: u32) -> Vec<u8> {
    let mut pixels = vec![0; (width * height * 4) as usize]; // RGBA
    let zoom_factor = 2.0 / width as f64;

    for y in 0..height {
        for x in 0..width {
            let cr = (x as f64 * zoom_factor) - 1.5;
            let ci = (y as f64 * zoom_factor) - 1.0;

            let mut zr = 0.0;
            let mut zi = 0.0;
            let mut iterations = 0;

            while zr * zr + zi * zi < 4.0 && iterations < max_iterations {
                let temp = zr * zr - zi * zi + cr;
                zi = 2.0 * zr * zi + ci;
                zr = temp;
                iterations += 1;
            }

            let index = ((y * width + x) * 4) as usize;
            if iterations == max_iterations {
                pixels[index] = 0;     // R
                pixels[index + 1] = 0; // G
                pixels[index + 2] = 0; // B
                pixels[index + 3] = 255; // A
            } else {
                let color_val = (iterations as f64 / max_iterations as f64 * 255.0) as u8;
                pixels[index] = color_val;
                pixels[index + 1] = color_val / 2;
                pixels[index + 2] = 255 - color_val;
                pixels[index + 3] = 255;
            }
        }
    }
    pixels
}

次に、wasm-packを使用してこのRustコードをWebAssemblyにコンパイルします：

cargo install wasm-pack
wasm-pack build --target web

これらのコマンドは、pkgディレクトリを作成し、その中にはmandelbrot_wasm_bg.wasm（WASMモジュール）とmandelbrot_wasm.js（JavaScriptグルーコード、およびその他のメタデータ）が含まれます。

次に、このWASMモジュールをロードして使用するためのindex.htmlとindex.jsを作成します：

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Rust Mandelbrot WASM</title>
    <style>
        body { font-family: sans-serif; text-align: center; }
        canvas { border: 1px solid black; margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Mandelbrot Set in Rust & WebAssembly</h1>
    <canvas id="mandelbrotCanvas" width="800" height="600"></canvas>
    <script type="module" src="./index.js"></script>
</body>
</html>

index.js:

import { generate_mandelbrot } from './pkg/mandelbrot_wasm.js';

async function run() {
    const canvas = document.getElementById('mandelbrotCanvas');
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    const maxIterations = 500;

    console.time('Mandelbrot generation in Rust WASM');
    const pixelData = generate_mandelbrot(width, height, maxIterations);
    console.timeEnd('Mandelbrot generation in Rust WASM');

    const imageData = new ImageData(
        new Uint8ClampedArray(pixelData),
        width,
        height
    );
    ctx.putImageData(imageData, 0, 0);
}

run();

これを実行するには、簡単なHTTPサーバー（例：npx http-server または Pythonの http.server）が必要です。ブラウザでindex.htmlを開いてください。マンデルブロ集合が表示され、コンソールにはRust WASM関数にかかった時間が表示され、その効率が実証されます。

アプリケーションシナリオ

Rust + WASMの組み合わせは、数多くのWebアプリケーションシナリオで信じられないほど強力です：

  • 高性能コンピューティング: 科学シミュレーション、データ処理、暗号化、ビデオ/オーディオエンコーディング/デコーディング。
  • ゲーム開発: 既存のC/C++ゲームエンジンの移植、または新しい高性能Webベースゲームの開発。
  • 画像およびビデオ編集: 複雑なフィルター、ブラウザ内でのリアルタイムエフェクト。
  • 拡張現実/仮想現実: サーバーサイド処理にのみ依存することなく、AR/VR体験のための重い計算を実行。
  • コーデックとパーサー: 特定のデータ形式のカスタムで効率的なコーデックまたはパーサーの実装。
  • ライブラリとフレームワーク: パフォーマンスが重要なコンポーネントを、どのJavaScriptフレームワークからでも利用できるWASMモジュールとして提供。

結論

RustとWebAssemblyは強力なペアであり、開発者がJavaScriptのパフォーマンスの限界を克服し、真にネイティブライクな体験をブラウザで提供できるようにします。Rustの安全性と速度を活用し、ポータブルで効率的なWASMモジュールにコンパイルすることで、より高速で、より信頼性が高く、ますます複雑な計算タスクを処理できるWebアプリケーションを構築できます。この相乗効果はWeb開発にとって大きな進歩であり、ブラウザ環境で直接達成可能なことの限界を押し広げます。

Share this article

HackerNews

More Posts from Leapcell

Popular Posts