【海外記事紹介】Web開発者向けのWebAssembly活用法5選

2月17日、海外のテクノロジーメディア「The New Stack」が「Top 5 Uses of WebAssembly for Web Developers」と題した記事を公開した。この記事では、WebAssemblyがWeb開発にもたらすメリットと具体的な実装例を含む5つの活用法について詳しく紹介されている。以下に、その内容を紹介する。

1. ブラウザ内での高パフォーマンス演算

JavaScriptは柔軟性が高い反面、複雑な数値計算やアルゴリズムには不向きな場合がある。一方で、WebAssemblyはネイティブに近い速度を提供するので、大量のデータ処理やシミュレーション、機械学習などに適している。

以下は行列の積をCで実装し、WebAssembly経由でブラウザから呼び出す例である。

// matrix_multiply.c
#include &lt;stdint.h&gt;

void matrix_multiply(int32_t* result, const int32_t* matrix_a, const int32_t* matrix_b, int size) {
    for (int i = 0; i &lt; size; i++) {
        for (int j = 0; j &lt; size; j++) {
            int32_t sum = 0;
            for (int k = 0; k &lt; size; k++) {
                sum += matrix_a[i * size + k] * matrix_b[k * size + j];
            }
            result[i * size + j] = sum;
        }
    }
}

Emscriptenを使って以下のようにコンパイルする。

emcc matrix_multiply.c -O3 -o matrix_multiply.js -s EXPORTED_FUNCTIONS='["_matrix_multiply"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

そしてJavaScriptから呼び出す例は次の通りである。

const wasmModule = await import('./matrix_multiply.js');
const matrixMultiply = wasmModule.cwrap('matrix_multiply', null, ['number', 'number', 'number', 'number']);

const size = 4;
const matrixA = new Int32Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
const matrixB = new Int32Array([17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32]);
const result = new Int32Array(size * size);

matrixMultiply(result.byteOffset, matrixA.byteOffset, matrixB.byteOffset, size);
console.log(result); // Output: [250, 260, 270, 280, 618, 644, 670, 696, ...]

このように、計算量の多い処理だけをWebAssemblyに任せれば、JavaScriptとのシームレスな連携を保ちつつ大幅な高速化を期待できる。

2. 既存のアプリケーションをWebに移植する

2つ目の用途は、既存のC/C++やRustなどで書かれたアプリケーションをWebAssemblyにコンパイルしてブラウザ上へ移植する手法である。これによりレガシーアプリケーションやライブラリを大きく書き換えることなくWeb対応できる。

以下はC++で書かれた画像処理（グレースケール化）コードをWebAssemblyにコンパイルし、ブラウザで実行する例だ。

// grayscale.cpp
#include &lt;emscripten.h&gt;

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    void grayscale(uint8_t* pixels, int width, int height) {
        for (int i = 0; i &lt; width * height * 4; i += 4) {
            uint8_t r = pixels[i];
            uint8_t g = pixels[i + 1];
            uint8_t b = pixels[i + 2];
            uint8_t gray = (r + g + b) / 3;
            pixels[i] = pixels[i + 1] = pixels[i + 2] = gray;
        }
    }
}

Emscriptenで以下のようにコンパイルする。

emcc grayscale.cpp -O3 -o grayscale.js -s EXPORTED_FUNCTIONS='["_grayscale"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

コンパイル後はJavaScriptから呼び出して画像を処理できる。

const wasmModule = await import('./grayscale.js');
const grayscale = wasmModule.cwrap('grayscale', null, ['number', 'number', 'number']);

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

grayscale(imageData.data.byteOffset, canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);

こうした技術を使うことで、デスクトップで動いていた高機能アプリケーションをWeb環境へ簡単に移植し、ユーザにとってはインストール不要の手軽さを提供できる。

3. ECプラットフォームを拡張する

3つ目として、ECサイトやオンラインサービスへの適用例が紹介されている。たとえば商品カスタマイズ機能や3D表示、リアルタイム画像処理などは演算負荷が高く、JavaScriptだけでは処理が重くなりがちである。しかしWebAssemblyを使えば、クライアントサイドでスムーズな描画や変換処理を実現できる。

Rustを用いた簡易フィルタ適用の例を以下に示す。

// image_processor.rs
#[no_mangle]
pub fn apply_filter(image_data: &amp;mut [u8], width: u32, height: u32) {
    for y in 0..height {
        for x in 0..width {
            let index = ((y * width + x) * 4) as usize;
            image_data[index] = 255 - image_data[index]; // Invert colors
        }
    }
}

このコードをRustからWebAssemblyへコンパイルするには以下のコマンドを使う。

rustc --target wasm32-unknown-unknown -O image_processor.rs

そして、JavaScript側では次のように呼び出す。

const imageData = new Uint8Array([...]); // Image data from canvas
const wasmModule = await WebAssembly.instantiateStreaming(fetch('image_processor.wasm'));
wasmModule.exports.apply_filter(imageData, width, height);

こうしたアプローチにより、ECサイト上でも実時間でカスタマイズ画像を生成したり、ユーザ操作に即応したビジュアル変更を可能にする。

4. クロスプラットフォーム開発

4つ目は、WebAssemblyを利用することでブラウザだけでなくサーバーやエッジデバイスなど、さまざまな環境で同じバイナリを活用できるクロスプラットフォーム開発の例である。PythonのコードをPyodideなどでWasm化し、ブラウザ上で機械学習モデルを実行する取り組みも紹介されている。

# model.py
def predict(input_data):
    # AI model logic here
    return result

Pyodideを使ってブラウザ上でPythonコードを動かす例は以下の通りである。

const pyodide = await loadPyodide();
await pyodide.loadPackage('numpy');
pyodide.runPython(`
    from model import predict
    result = predict([1, 2, 3])
`);
console.log(result);

これにより、サーバー側と同じロジックをブラウザでも共通して実行でき、性能面でもネイティブに近い速度を得られる。

5. 開発者ツールの改善

最後の用途は、WebAssemblyを活用した開発者ツールの高速化・高機能化である。オンラインIDEやコードエディタ、リンタ、コンパイラなどをブラウザ内で動かす際に、Wasmによるパフォーマンス向上は大きな利点になる。

次の例はRustで書かれた簡単なリンタをWebAssemblyにコンパイルしてブラウザで実行するものである。

// linter.rs
#[no_mangle]
pub fn lint_code(code: &amp;str) -&gt; bool {
    // Linting logic here
    true
}

コンパイルしたwasmファイルをJavaScriptから呼び出す場合は、以下のようなコードになる。

const code = "function foo() { return 42; }";
const wasmModule = await WebAssembly.instantiateStreaming(fetch('linter.wasm'));
const isCodeValid = wasmModule.exports.lint_code(code);
console.log(isCodeValid); // Output: true or false

オンラインIDEやブラウザベースのツール上でネイティブレベルの速度を持つ処理が可能になれば、ユーザは環境構築の手間なく高度な機能を利用できるようになる。

まとめ

WebAssemblyはブラウザの枠を超えて、多種多様な開発領域で性能と柔軟性をもたらす技術である。性能が要求されるタスクの最適化、既存資産の移植、ECサイトでのリアルタイム処理、クロスプラットフォーム開発、そして開発者向けツールの刷新など、活用領域は非常に幅広い。

実際のコードサンプルやビルド手順からもわかるように、JavaScriptとのシームレスな連携が可能であり、多くの言語・フレームワークが既にWasmをサポートしている。こうした強みを活かせば、今後Webアプリケーションの可能性はさらに広がるだろう。

詳細はTop 5 Uses of WebAssembly for Web Developersを参照していただきたい。