WebAssembly

WebAssembly とは

WebAssembly（ウェブアセンブリ）は、ウェブ上でパフォーマンスを重視したプログラムを動かすための新しい形式なんですね。一言で言うと、これはウェブブラウザ上で動く「高速なバイナリフォーマットのプログラム」を指します。

バイナリフォーマットと言うと聞きなれないかもしれませんが、つまりこれはコンピュータが直接理解できる形式で書かれたプログラムなんですね。これまでウェブブラウザ上で動くプログラムといえば JavaScript が一大勢力を占めていましたが、WebAssembly の登場でその状況に風穴を開けたわけです。

JavaScript は強力な言語で、ウェブ上の多くの動的な機能を担当していますが、パフォーマンス上の制限もありますよね。それに対して WebAssembly は、JavaScript よりも直接的にマシンレベルで動作するため、ゲームや画像処理、複雑な計算などの高性能が求められるタスクには特に力を発揮するんです。

Rust で WebAssembly を書いてみる

ここでは Rust 言語を用いて WebAssembly のサンプルコードを記述してみます。

なぜ Rust で書くのかというと、Rust 自体がメモリ安全な言語であり、WebAssembly と非常に相性が良いからです。なお、このコードは、WebAssembly の基本的な動作を理解するためのものであり、具体的なアプリケーション開発にはより複雑なコードが必要となることをご了承ください。

まずは、次のコードを src/lib.rs ファイルに記述します。

// 外部からアクセス可能な関数を定義
#[no_mangle]
pub extern "C" fn add(a: i32, b: i32) -> i32 {
    // 二つの整数を足す
    return a + b;
}

この add 関数は、二つの整数を引数に取り、それらの和を返す非常にシンプルな関数です。ここで、#[no_mangle] 属性と extern "C" 宣言が WebAssembly で必要となる特別な部分です。これらにより、Rust 関数が WebAssembly から正しく呼び出せる形になります。

次に、この Rust コードを WebAssembly にコンパイルします。Rust のパッケージマネージャーである Cargo を使用して行います。

cargo build --target wasm32-unknown-unknown --release

コンパイルが完了すると、target/wasm32-unknown-unknown/release/ ディレクトリ下に .wasm ファイルが生成されます。これが WebAssembly のバイナリファイルです。

生成された WebAssembly ファイルをウェブページから読み込んで、その add 関数を JavaScript から呼び出すことが可能です。

const wasmModule = new WebAssembly.Module(wasmBinary)
const wasmInstance = new WebAssembly.Instance(wasmModule)
console.log(wasmInstance.exports.add(1, 2)) // 3 が出力される

上記の JavaScript のコードは、WebAssembly バイナリ（wasmBinary）を読み込み、その中の add 関数を呼び出しています。これにより、JavaScript 上で Rust 言語で書かれた関数が実行され、その結果が表示されます。

WebAssembly の歴史的変遷

WebAssembly の歴史は、2015 年に初めて公開され、その後 2017 年にはすべての主要なウェブブラウザ（Firefox、Chrome、Safari、Edge）でのサポートが発表されました。

このプロジェクトの背後には、Mozilla、Google、Microsoft、Apple といった大手テクノロジー企業が関わっています。WebAssembly がもたらすパフォーマンスの向上は、ウェブ自体の可能性を広げる大きなステップとなっています。

WebAssembly と Jamstack の関係

WebAssembly と Jamstack の関係は、主にパフォーマンスとセキュリティの面でつながっています。Jamstack は JavaScript、API、Markup の略で、ウェブ開発の新しいパラダイムを示しています。

Jamstack の中心的な概念は、ウェブサイトのビルドを事前に行うことで、リアルタイムのサーバ処理を必要とせず、パフォーマンスを向上させ、セ

キュリティを強化することです。ここで、WebAssembly がその一部として登場します。

WebAssembly が実行できる高性能なタスクをクライアント側で処理できるようになると、バックエンドの負荷を軽減し、さらに Jamstack のパフォーマンスを向上させることが可能になるんですね。

WebAssembly を使うメリット

高パフォーマンス

WebAssembly は、ウェブアプリケーションにとって画期的なパフォーマンス向上をもたらします。JavaScript よりもマシンコードに近いため、実行速度が早いんですね。

言語の選択肢

C/C++や Rust など、多くの言語が WebAssembly へコンパイルできます。これにより、ウェブ上で動作させることができるプログラムの範囲が広がります。

セキュリティ

WebAssembly は独自のセキュリティサンドボックス内で実行されるため、ウェブアプリケーションの安全性を高めます。

WebAssembly を学ぶ