WebAssembly をご存知でしょうか？2年前に突然発表された新しい仕様です。まだ登場して間もないため、実際に本格的に利用しているサービスは数えるほどしかありませんが、Twitter 等を見ているとじわりじわりと評判になっており、技術としての勢いを感じます。

一方で、WebAssembly について言及された資料がまだまだ少なかったり、技術のレイヤーが一般的なフロントエンドエンジニアの技術セットとは大きくかけ離れているなどの理由により、WebAssembly について誤解されていることも多々あることを感じました。

そこで今回、あまり技術的に詳細な所まで深入りせず、「専門外の方でもこの程度知っておけば良い」よりちょっと詳しいくらいの内容を目標にして WebAssembly を解説してみたいと思います。

WebAssembly（wasmとも呼ばれます）とは、ざっくり言うとブラウザでプログラムを高速に動かすための仕様です。JavaScript で出来ることが複雑化してくるに従い、JavaScript の実行スピードの遅さが課題になることが増えてきました。WebAssembly はその課題の解決を目的にしています。

過去にも、実行スピードの改善を目的として ActiveX や Dart、PNaCl など色々な仕様があったのですが、WebAssembly は主要なブラウザベンダーの合意のもと作成された仕様であるのが特徴です。先月 Edge がデフォルトの設定で動作するようになったので、現在はモバイルブラウザを含めたほとんど全てのブラウザで動作します（ただしIEは除く）。

WebAssembly はバイナリ表現なので、プログラムのファイルサイズは JavaScript よりも小さく、読み込み（パース）にかかる時間も短いことが期待されます。また、あらかじめ高速に動作することを念頭に仕様が考えられているので、JavaScript よりは断然速く、ネイティブアプリの速度と比較しても遜色ない動作速度が期待されます。現在のところ大体ネイティブアプリの 60% 〜 80% くらいの速度ですが、将来的には 90% 程度まで高速化することを目標にしているようです。

まとめると、WebAssembly は

という特徴を持っています。

さて、WebAssembly は HTML でどのように呼び出されるのでしょうか。

WebAssembly のバイナリファイルは、.wasm という拡張子で用意されることが多いです。HTML ファイル側では、JavaScript で wasm ファイルをダウンロードし、そこから WebAssembly の関数を取り出して呼び出す、というのが基本になります。

実際のプログラムで具体的に説明しましょう。大変シンプルな WebAssembly のサンプルを用意しました。よくある足し算をするサンプルです。

https://github.com/tkihira/wasm-simple-sample

HTML ファイルと wasm ファイルのみのシンプルな構成です。HTML の内容は次の通りです。arrow functions を使っていないのは、WebAssembly よりも arrow functions のサポート時期が後のブラウザがあるためです。気にしすぎかとは思いますが一応。