#102 WebAssembly

2023年11月5日 23:53

　バックエンドもフロントエンドもJavaScriptのWebアプリが流行りですが、WebAssemblyという技術を使えば、CやC++でもWebアプリが作れます。

JavaScriptでいいじゃんとも思いますが、なぜあえてWebAssemblyを使うのか。

Mozillaのドキュメントでは、パフォーマンス上の利点が強調されています。WebAssemblyは、事前にプログラムを特殊なバイトコードにコンパイルして、JavaScript VM上で実行します。コンパイル言語の強みを取り入れつつ、長年強化されてきたJavaScript VMで動かすことでセキュリティと互換性を保っています。

RustやAssemblyScript（JavaScriptの甥っ子）でもコンパイルできるようです。とりあえず、C++でHello Worldまで。

Emscripten

Emscriptenは、C/C++でWebAssemblyをコンパイルするためのツールです。GitHubからSDKを取得して、ちょちょいと設定すればコンパイルできます。Python3とNodeJsに依存しているので、こちらもインストールが必要です。

aptでインストールする場合は、特に設定の必要なくコンパイルまでできました。

sudo apt install emscripten

Hello World

hello.cpp

#include <iostream>
#include <string>

using namespace std;

int main() {
  cout << "Hello World!" << endl;
  return 0;
}

コンパイルはem++コマンドでできます。

em++ hello.cpp

すると、a.out.jsとa.out.wasmというファイルが生成されます。jsファイルには、WebAssemblyを実行したり、JavaScriptとWebAssemblyの橋渡しをするための処理が含まれています。実際のバイトコードはwasmファイルに書き込まれています。

HTMLで、jsファイルを読み込めば、wasmが実行されます。

index.html

<html>
  <head>
    <script src="/a.out.js"></script>
  </head>
  <body>
    <h1>test</h1>
  </body>
</html>

テスト

pythonでサーバーを立てて、確認してみます。

python3 -m http.server 8080

http://localhost:8080

コンソールにHello World出力されています！

まとめ

　WebAssemblyという形で、ブラウザでバイナリを実行できました。まだまだ発展途上の技術ですが、ちょっとセキュリティ面で不安な気もします。クロスサイトバッファオーバーフローなんてでてきたりして…もうちょっと深堀するのもおもしろそうです！

EOF

この記事が気に入ったらサポートをしてみませんか？