WebAssemblyでハローワールド #JavaScript

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をやってみました。

気が向いたらもっと複雑な演算処理もやってみてください。

以上です!