WebAssemblyというものを知ったのは数年前である。仕事で扱ったとあるライブラリ1がCで実装されていて、そのJavaScript環境向けラッパーにおいて利用されていたのだ。今日日そんなものがあるのか、と感心したものだが、軽く調べてみたら2015年には発表されていたらしい。周回遅れである。 developer.mozilla.org ja.wikipedia.org
ブログ副題で「雑記と思索、偏った技術の覚え書き」を名乗っているくせに、更に言えば.techドメインなど使っているくせに、久しく技術ネタを書いていないので、たまにはそういう話題も扱いたい所。丁度良いネタである。n番煎じも良い所であろうが。
WebAssembly
WebAssemblyが何であるかは上掲のサイト等で既に解説されているので、今更私が新たに書くようなことはない。MDNの解説によればこうである。
WebAssembly は現代のウェブブラウザーで実行できるコードの一種です。ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブリー風言語です。さらに、 C/C++、C# や Rust などの言語のコンパイル先となり、それらの言語をウェブ上で実行することができます。 また、JavaScript と並べて実行するように設計されており、両方を一緒に動作させることができます。 --MDN WebAssembly
要は、C等の一般にウェブブラウザ上で動作させる事が想定されない言語によるプログラムであっても、WebAssemblyにコンパイルしてやればウェブブラウザ上で実行可能になるのである。クロスコンパイルという言葉も昔からある訳で、道理ではある。一方で、ウェブにおける一昔前のクライアントサイド開発の世界から見たら、すごい事になっているな、という感想も持つ。今日日、幅広なブラウザがWebAssemblyの処理系を持っているようである。 caniuse.com
C等のソースコードをWebAssemblyのバイナリにコンパイルするクロスコンパイラには、Emscriptenというものを使うのが主流であるようだ。 emscripten.org
EmscriptenでHello worldする
初めて扱うプログラミング環境においては、何はともあれまず最初にHello worldせねばなるまい。以下のCによるソースコードを準備する。Cのソースコードとしては、極めて標準的なHello worldである。
#include <stdio.h> int main(){ printf("Hello world!\n"); return 0; }
これをEmscriptenを使ってコンパイルする。以下のようにコマンド実行する。尚、本エントリにおける検証環境はDebianであり、Emscriptenはaptで導入。%はプロンプト。
% emcc hello.c -o hello.html
これだけ見ると、emccコマンドの「なり」はgccに似ている。ソースコードを保存したファイルを引数に取り、-oオプションで出力先を指定する。ここに.htmlで終わるファイル名を指定すると、WebAssemblyのバイナリに加えてそれを呼び出すJavaScriptプログラム、また上記ファイル名のHTMLが出力される。上記例であれば、以下のようである。
% ls -l hello.* -rw-r--r-- 1 kolmas kolmas 72 5月 6 13:57 hello.c -rw-r--r-- 1 kolmas kolmas 22038 5月 6 13:58 hello.html -rw-r--r-- 1 kolmas kolmas 55140 5月 6 13:58 hello.js -rwxr-xr-x 1 kolmas kolmas 14508 5月 6 13:58 hello.wasm
WebAssemblyのバイナリである.wasmファイルはCORS2ポリシの適用対象であるため、ローカルに配置してアクセス3しても動作しない。適当に用意したウェブサーバに上記で出力されたファイルを公開して、それを介して件のHTMLにアクセスすると以下を得る。

ウェブページ上に作られたコンソール風画面に、先程Cで作成したプログラムが標準出力に対して出力している「Hello world!」が表示されている。
続・Cの関数をJavaScriptから呼ぶ
単にC言語で書かれたプログラムを実行する事は上記のように出来たが、私がWebAssemblyの事を知ったきっかけは冒頭で述べた通り、Cで実装されたライブラリをウェブ環境上に移植したものを見た事である。そのような場面では、Cのプログラムで定義されている関数を任意のタイミングでJavaScriptから呼び出さなければならない。これについては次エントリにまとめることにする。
余談 ー MDN
この手のことを調べたり勉強したりするのにあたっては、MDN Web Docsの資料は極めて役に立つ。 developer.mozilla.org MDN=Mozilla Developer Networkの事だと思っていたが、今はその頭文字であるという意味は持たないらしい。 ja.wikipedia.org
- コレ。github.com↩
- オリジン間リソース共有。↩
-
即ち
file:始まりのURLによるアクセス。↩



