概要をつかんで遊ぶWebAssembly

この記事の目的

• WebAssemblyの概要を理解する
• WebAssemblyのデモで遊ぶ

WebAssemblyとは

ウェブブラウザ上で動的処理を実現する手段として，JavaScriptがデファクトスタンダードなことは皆さんご存知のとおりです．一方，多くの主要ブラウザでは，2017年頃からもう一つの実行環境が搭載されています．それが，WebAssemblyです．WebAssemblyはJavaScriptでは実現が難しい，ネイティブレベルの実行速度を実現するために導入されました¹．一方，公式FAQ が（またGoogleやMozillaが）強調しているように，WebAssemblyはJavaScriptの置き換えを企図しているわけではありません．JavaScriptはUI，WebAssemblyは高速処理と，互いに補い合うことを目的に開発されています．実際，これら二つの環境は隔離されて存在しているわけではなく，JavaScriptからWebAssemblyで書かれた機能をロードして呼び出すことができます（WebAssembly コードの読み込みと実行）．この連携は現在のところひと手間かかりますが，将来的にはJavaScriptのimport宣言でWebAssemblyをロードできるようにする提案も行われるなど，相互連携はより容易かつ密になっていくと思われます．

WebAssemblyの実行方式と表現

"Assembly"の名がついているものの，WebAssemblyはCPU上の機械語として実行されるわけではありません．WebAssemblyの実行環境はスタックベースの仮想マシンであり，ブラウザ上で実行されます．JavaScriptとは異なり，数値型として32bit/64bitの整数/浮動小数点型，また，ベクトル命令を意識した128bitベクトル型などが定義されています²．逆に言うと，文字列型などはありません（このあたりはCPUっぽいです）．

アセンブリ言語=機械語の関係と同様，人間が読みやすい形式（WebAssembly Text Format; wat）が用意されています．例えばC言語で書かれた関数

double add(double x, double y) {
  return x + y;
}

をWebAssemblyに翻訳³した結果は

(func $add (type 0) (param f64 f64) (result f64)
  (f64.add
    (local.get 0)
    (local.get 1)))

という"読みやすい"形で表現されます⁴．

しかし，アセンブリ言語を直接記述することが滅多にないのと同様，多くのケースでは高級言語からWebAssemblyへのコンパイラを利用することになるでしょう．WebAssemblyへのコンパイルができる言語として，C/C++やRustなどのネイティブコンパイル系言語がよく紹介されますが，その他様々な言語でのサポートも進んでいます．

デモ

この節ではC++で作ったWebAssemblyアプリの実例を紹介します（ソースコードはこちら）．題材は古典力学（天体）の数値シミュレーションです⁵．この題材を選んだ理由は

• そこそこヘビーな数値計算が必要なこと
• 最近筆者が中国発の某SF小説を読んだこと

です．C++ → WebAssemblyのコンパイラとしてはEmscriptenを使いました．
デモはこちらからご覧ください（マウスでグリグリできます）．

WebAssembly/Emscriptenのすごいところは，このアプリを作るために一行もJavaScriptを書いていないということです．書いたC++のソースコードはネイティブのアプリと全く同じようにmain関数から始まっています．さらにすごいことに，同じソースコードをLinuxアプリケーションとしてもコンパイル・実行できます：

単に高速であるだけでなく，既存のネイティブアプリのコードを高い互換性でWebAssemblyにコンパイルできる環境が精力的に開発されていることも特筆すべき点だと思います．

私見 ― WebAssemblyに期待すること

Web系の技術は栄枯盛衰が激しいことから，どんな技術が今後流行るかは予測が難しいです．しかし，今やブラウザ上でオフィスソフトが動いたりゲームが遊べたりするなど，ブラウザサイドの体験がよりリッチな方向へ進化するという点はほぼ確実であると考えられます．

個人的に期待している応用は以下の二点です：

• 数値解析を多用する分野；機械学習，統計分析，シミュレーションなど
• ネイティブアプリのウェブ化（CADアプリケーションなど）

特に前者については，C++やFortranのような高速な言語で数値計算を実装し，インターフェースをPythonなどの軽量な言語で公開するライブラリ・ツールが数多く存在していることを鑑みると，そのウェブ版類似物がもっと登場しても良い気がします⁶．Web系エンジニアの新しい選択肢としてはもちろん，より科学・工学領域に近いソフトウェアを書いているエンジニアにとっても，WebAssemblyは新たなソリューションを生み出す基盤になっていくと期待しています．

1. ここに至るには紆余曲折の歴史があったようです ↩

2. WebAssembly Specification ↩

3. ClangとWABTがあれば次のコマンドで翻訳できます：clang add.c -c -target wasm32 -O2 -o - | wasm2wat - ↩

4. Text Formatの表現はS式と呼ばれておりLispの文法としても知られています（Lisp星人にとって読みやすいの間違いなのでは...）．いずれにしてもC言語，Lisp，機械語がWebの世界で一堂に会する点は技術的ロマンにあふれていると思います ↩

5. ピタゴラス三体問題 ↩

6. 実例として，Tensor FlowをJavaScript環境に移植したTensorFlow.jsがWebAssemblyを用いて開発されています ↩