WebAssemblyとは
ブラウザからアセンブリ言語を実行できるようにする技術。
高速化手段、あるいはJavaScriptの処理系にできないことをするといった目的で使用する。
2015年6月、Mozilla、Google、Microsoft、Appleが標準フォーマットとして開発することに合意している。
対応言語はC/C++、Rustなど。最近はGolangも使えるように。
Can I use WebAssembly?
現在IE以外のほどんどのブラウザでサポートされている。
アセンブリ言語とは
- マシン語(０と１の世界)と直接１対１に対応したプログラミング言語
- アセンブラともいう（これはアセンブリ言語をマシン語に変換するソフトのこともいう）
- 「アセンブル」：アセンブリ言語で記述したプログラムをマシン語のコードに変換すること
例として、C++で書いたHello Worldプログラムをアセンブリ言語で見てみます。
hello.cpp
# include <iostream>
using namespace std;
int main() {
cout << "Hello World!" << endl;
return 0;
}
g++にSオプションをつけることでアセンブリ言語を見ることができます。
$ g++ -S hello.cpp
とすると、hello.sというアセンブラファイルが生成されます。
1000行以上のファイルになるので、ここには最初の15行だけ載せてみます。
.section __TEXT,__text,regular,pure_instructions
.macosx_version_min 10, 13
.globl _main ## -- Begin function main
.p2align 4, 0x90
_main: ## @main
.cfi_startproc
## %bb.0:
pushq %rbp
.cfi_def_cfa_offset 16
.cfi_offset %rbp, -16
movq %rsp, %rbp
.cfi_def_cfa_register %rbp
subq $32, %rsp
movq __ZNSt3__14coutE@GOTPCREL(%rip), %rdi
leaq L_.str(%rip), %rsi
WebAssemblyでHello World
ここからが本題です。
Emscriptenをインストールする
最もポピュラーなEmscriptenを導入します。
git clone https://github.com/juj/emsdk.git
cd emsdk
# 最新のSDKツールをインストール
./emsdk install latest
# アクティベイト
./emsdk activate latest
# パスと環境変数を設定
source ./emsdk_env.sh
結構時間がかかるので、お茶でも飲んでまちます。
実行する
ビルド環境ができたので、早速コンパイルして実行します。
- Cのファイルを用意
hello.c
# include <stdio.h>
int main() {
printf("Hello World!\n");
return 0;
}
- ビルド＆実行
$ emcc -0 hello.js -O0 hello.c
$ node hello.js
Hello World!
出力ファイルを.htmlにする
$ emcc -o index.html hello.c
# ローカルサーバーを立てる
## Python3.x系
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 ...
## Python2.x系
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
http://localhost:8000/ にアクセスすると、
ちゃんとHello World!と表示されます。
終わりに
今回はWebAssemblyでHello Worldをやってみました。
気が向いたらもっと複雑な演算処理もやってみてください。
以上です!