この記事について

この記事は、私のZennの投稿を管理しているリポジトリにおいて、JetBrainsのAIであるJunieに以下の指示をして生成したものです。

https://www.jetbrains.com/ja-jp/junie/

このリポジトリはzennという技術ブログプラットフォームの記事データです。package.jsonとarticlesディレクトリにある既存の記事を読み、新しい記事を1つ書いてみてください。その際、技術的にニッチで特定の読者に強く紐づく内容でありつつ、既存の記事から得られる人物像や文体に即した内容であり、かつ正確性を重視して記載してください。

私が行ったのは以下の3つのみです。

タイトルの編集
この節の追加
記事の公開

まさかのJunieがAll Products Packの一部として使えるとは思いませんでした。JetBrains派の私としてはすぐにでも使いたかったのですが、まったく適切なネタが浮かばず一旦Zennの記事を書かせてみようとなりました。

以降の節ではJunieの出力に対して一切手を加えていません。

一応試してみたのですが、以下の課題以外は全てちゃんとハンズオンできました。

こんなUIが表示され、実行時間の比較を行えます。記事に書かれている内容の通り、N=50程度でもWebAssemblyでは動作しますが、JavaScriptでは「ページが応答しません」となってしまいました。

ちゃんと興味がある分野の記事が出力されましたし、Junie君はなかなか賢いのではないでしょうか。

では、以下からJunieの出力をお楽しみください。

はじめに

Webアプリケーションの高速化は常に開発者の課題です。特にブラウザ上で動作するアプリケーションでは、JavaScriptの実行速度がボトルネックになることがあります。そこで注目されているのが**WebAssembly（Wasm）**です。

WebAssemblyは、ブラウザ上で動作する低レベルのバイナリフォーマットで、C/C++、Rust、Go、Assemblyscriptなど様々な言語からコンパイルすることができます。その中でも特にRustは、WebAssemblyとの相性が良いことで知られています。

この記事では、RustでWebAssemblyを書いて、Webアプリケーションに組み込む方法を解説します。SREの観点からも、パフォーマンスの向上は重要な要素ですよね。

Rustとは

Rustは、Mozilla Research発のシステムプログラミング言語で、以下のような特徴があります：

メモリ安全性：所有権システムによりガベージコレクションなしでメモリ安全性を実現
並行性：データ競合を防ぐ仕組みが言語レベルで組み込まれている
ゼロコスト抽象化：高レベルの抽象化を提供しつつも、低レベルの制御も可能
パフォーマンス：C/C++と同等の実行速度

これらの特徴から、WebAssemblyのコンパイルターゲットとして非常に適しています。

WebAssemblyとは

WebAssemblyは、ブラウザ上で動作するバイナリフォーマットで、以下のような特徴があります：

高速：ネイティブに近い実行速度
安全：ブラウザのサンドボックス内で実行される
互換性：主要なブラウザ（Chrome、Firefox、Safari、Edge）で対応
言語非依存：様々なプログラミング言語からコンパイル可能

JavaScriptと比較すると、特に計算集約型の処理で大幅なパフォーマンス向上が期待できます。

環境構築

まずは開発環境を整えましょう。

Rustのインストール

Rustは公式のインストーラーであるrustupを使ってインストールするのが一般的です。

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

インストール後、以下のコマンドでバージョンを確認できます。

rustc --version
cargo --version

wasm-packのインストール

RustのコードをWebAssemblyにコンパイルするために、wasm-packというツールを使います。

cargo install wasm-pack

プロジェクトの作成

それでは、実際にRustでWebAssemblyプロジェクトを作成してみましょう。

プロジェクトの初期化

cargo new --lib wasm-fibonacci
cd wasm-fibonacci

Cargo.tomlの設定

Cargo.tomlファイルを以下のように編集します。

[package]
name = "wasm-fibonacci"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2.84"

[profile.release]
opt-level = 3
lto = true

ここで重要なのは：

crate-type = ["cdylib", "rlib"]：WebAssemblyにコンパイルするために必要
wasm-bindgen：RustとJavaScriptの間のインターフェースを提供するライブラリ
opt-level = 3とlto = true：最適化レベルを最大にして、リンク時最適化を有効にする

フィボナッチ数列の実装

例として、フィボナッチ数列を計算する関数を実装してみましょう。フィボナッチ数列は再帰的に計算すると指数関数的に計算量が増えるため、パフォーマンスの違いが分かりやすい例です。

src/lib.rsの編集

use wasm_bindgen::prelude::*;

// JavaScriptから呼び出せるようにする
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    if n <= 1 {
        return n;
    }
    fibonacci(n - 1) + fibonacci(n - 2)
}

// 動的計画法を使った効率的な実装
#[wasm_bindgen]
pub fn fibonacci_dp(n: u32) -> u32 {
    if n <= 1 {
        return n;
    }
    
    let mut a = 0;
    let mut b = 1;
    
    for _ in 2..=n {
        let temp = a + b;
        a = b;
        b = temp;
    }
    
    b
}

ここでは2つの実装を用意しました：

単純な再帰実装（非効率）
動的計画法を使った効率的な実装

WebAssemblyへのコンパイル

次に、RustのコードをWebAssemblyにコンパイルします。

wasm-pack build --target web

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

Webアプリケーションへの組み込み

それでは、生成されたWebAssemblyをWebアプリケーションに組み込んでみましょう。

HTMLファイルの作成

プロジェクトのルートにindex.htmlファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rust WebAssembly Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
        }
        .card {
            flex: 1;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        input {
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        .result {
            margin-top: 15px;
            font-weight: bold;
        }
        .time {
            color: #666;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <h1>フィボナッチ数列計算 - Rust WebAssembly vs JavaScript</h1>
    
    <div class="container">
        <div class="card">
            <h2>JavaScript</h2>
            <label for="js-input">N値を入力:</label>
            <input type="number" id="js-input" value="30">
            <button id="js-recursive-btn">再帰で計算</button>
            <button id="js-dp-btn">動的計画法で計算</button>
            <div class="result" id="js-result">結果: </div>
            <div class="time" id="js-time">実行時間: </div>
        </div>
        
        <div class="card">
            <h2>Rust WebAssembly</h2>
            <label for="wasm-input">N値を入力:</label>
            <input type="number" id="wasm-input" value="30">
            <button id="wasm-recursive-btn">再帰で計算</button>
            <button id="wasm-dp-btn">動的計画法で計算</button>
            <div class="result" id="wasm-result">結果: </div>
            <div class="time" id="wasm-time">実行時間: </div>
        </div>
    </div>
    
    <script type="module">
        import init, { fibonacci, fibonacci_dp } from './pkg/wasm_fibonacci.js';
        
        // JavaScriptでの実装
        function jsFibonacci(n) {
            if (n <= 1) return n;
            return jsFibonacci(n - 1) + jsFibonacci(n - 2);
        }
        
        function jsFibonacciDP(n) {
            if (n <= 1) return n;
            let a = 0, b = 1;
            for (let i = 2; i <= n; i++) {
                const temp = a + b;
                a = b;
                b = temp;
            }
            return b;
        }
        
        async function run() {
            // WebAssemblyモジュールの初期化
            await init();
            
            // JavaScript実装のボタン
            document.getElementById('js-recursive-btn').addEventListener('click', () => {
                const n = parseInt(document.getElementById('js-input').value);
                const startTime = performance.now();
                
                try {
                    const result = jsFibonacci(n);
                    const endTime = performance.now();
                    
                    document.getElementById('js-result').textContent = `結果: ${result}`;
                    document.getElementById('js-time').textContent = `実行時間: ${(endTime - startTime).toFixed(2)}ms`;
                } catch (e) {
                    document.getElementById('js-result').textContent = `エラー: 計算に時間がかかりすぎます`;
                    document.getElementById('js-time').textContent = `実行時間: -`;
                }
            });
            
            document.getElementById('js-dp-btn').addEventListener('click', () => {
                const n = parseInt(document.getElementById('js-input').value);
                const startTime = performance.now();
                const result = jsFibonacciDP(n);
                const endTime = performance.now();
                
                document.getElementById('js-result').textContent = `結果: ${result}`;
                document.getElementById('js-time').textContent = `実行時間: ${(endTime - startTime).toFixed(2)}ms`;
            });
            
            // WebAssembly実装のボタン
            document.getElementById('wasm-recursive-btn').addEventListener('click', () => {
                const n = parseInt(document.getElementById('wasm-input').value);
                const startTime = performance.now();
                
                try {
                    const result = fibonacci(n);
                    const endTime = performance.now();
                    
                    document.getElementById('wasm-result').textContent = `結果: ${result}`;
                    document.getElementById('wasm-time').textContent = `実行時間: ${(endTime - startTime).toFixed(2)}ms`;
                } catch (e) {
                    document.getElementById('wasm-result').textContent = `エラー: 計算に時間がかかりすぎます`;
                    document.getElementById('wasm-time').textContent = `実行時間: -`;
                }
            });
            
            document.getElementById('wasm-dp-btn').addEventListener('click', () => {
                const n = parseInt(document.getElementById('wasm-input').value);
                const startTime = performance.now();
                const result = fibonacci_dp(n);
                const endTime = performance.now();
                
                document.getElementById('wasm-result').textContent = `結果: ${result}`;
                document.getElementById('wasm-time').textContent = `実行時間: ${(endTime - startTime).toFixed(2)}ms`;
            });
        }
        
        run();
    </script>
</body>
</html>

このHTMLファイルでは、JavaScriptとRust WebAssemblyの両方でフィボナッチ数列を計算し、その実行時間を比較できるようにしています。

ローカルサーバーの起動

WebAssemblyをロードするには、ローカルサーバーが必要です。簡単なHTTPサーバーを起動するには、以下のいずれかの方法が使えます。

Pythonを使う場合

# Python 3
python -m http.server

Node.jsを使う場合

# npxがインストールされている場合
npx serve

パフォーマンス比較

ブラウザでhttp://localhost:8000（または使用しているサーバーのポート）にアクセスすると、フィボナッチ数列の計算をJavaScriptとRust WebAssemblyで比較できます。

特に再帰実装では、N=30程度でもJavaScriptとWebAssemblyの間に明確な速度差が現れるはずです。さらに大きな値（N=40以上）では、JavaScriptの再帰実装はブラウザがフリーズするほど遅くなりますが、WebAssemblyの実装はより高速に動作します。

動的計画法の実装では、小さな値では差が少ないですが、大きな値（N=1000以上）でもWebAssemblyの方が高速に動作することが確認できます。

WebAssemblyの利点と欠点

利点

パフォーマンス: ネイティブに近い実行速度
型安全性: Rustの型システムによる安全性
メモリ効率: 効率的なメモリ使用
並行処理: Rustの並行処理機能を活用可能
既存のエコシステム: Rustのクレートを活用可能

欠点

開発の複雑さ: JavaScriptよりも学習曲線が急
デバッグの難しさ: ブラウザでのデバッグが複雑
バンドルサイズ: 小さなタスクでもある程度のサイズになる
DOM操作の複雑さ: DOMを直接操作するのは面倒

実際のユースケース

WebAssemblyは以下のような場面で特に効果を発揮します：

画像・動画処理: フィルター適用、エンコード/デコード
ゲーム: 物理演算、AI、レンダリング
暗号化: 暗号化/復号化処理
データ圧縮: 圧縮/解凍アルゴリズム
機械学習: モデルの推論処理

例えば、私が以前関わったプロジェクトでは、ブラウザ上で大量の時系列データを処理する必要がありました。JavaScriptでは処理に数秒かかっていましたが、Rust WebAssemblyに移行することで、処理時間を数百ミリ秒に短縮することができました。

SREの観点から見たWebAssembly

SRE（Site Reliability Engineering）の観点からも、WebAssemblyは興味深い技術です。

パフォーマンス向上: ユーザー体験の向上につながる
リソース効率: サーバーサイドの負荷を減らせる可能性
エラー率の低減: 型安全な言語による堅牢性
クライアントサイドSLI: クライアント側の処理時間をSLIとして測定可能

特に計算集約型の処理をクライアント側で行うことで、サーバーの負荷を減らし、全体的なシステムの信頼性を向上させることができます。

まとめ

この記事では、RustとWebAssemblyを使って高速なWebアプリケーションを作成する方法を紹介しました。フィボナッチ数列の計算を例に、JavaScriptとWebAssemblyのパフォーマンスの違いを確認しました。

WebAssemblyは万能ではありませんが、計算集約型の処理や、パフォーマンスが重要な部分に適用することで、Webアプリケーションの性能を大幅に向上させることができます。

Rustは安全性、パフォーマンス、並行性の面で優れており、WebAssemblyのコンパイルターゲットとして最適な言語の一つです。

みなさんもぜひRustとWebAssemblyを試してみて、Webアプリケーションのパフォーマンスを向上させてみてください！

参考リンク

Discussion