WebAssembly入門してみた

ふと，WebAssemblyを試してみようと思い立ち，やってみました．

WebAssemblyとは

WebAssemblyはブラウザでコードを高速で動かすものです．Webのフロント側で動作する言語といえばjavascriptでした．javascriptは動的型付け言語でインタプリタ型なので，直観的で簡単に記述できる反面，型推論しながら実行するため，遅いというような特徴があります．そこで出てきたのがWebAssemblyで，これは静的型付け言語を中間コードにコンパイルし，そして，バイナリフォーマットに変換します．このバイナリフォーマットを使うことでファイルサイズの縮小と構文解析の処理を短縮することによる実行速度の高速化を実現する技術という理解でいます．（30分ほど勉強した理解）

まだ読んでないですが，下の記事WebAssemblyの理解を深めるのに良さそうです．
https://qiita.com/ShuntaShirai/items/3ac92412720789576f22

入門

実行OSはUbuntu 18.04.4でやりました．Ubuntu 16.04が一番良いらしい．
下記のサイトの通りに動かしてみました．
https://webassembly.org/getting-started/developers-guide/

まずはじめに，

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest

emsdkというのをinstallする手順ですね，Githubからcloneしてきて，install．
あとは

source ./emsdk_env.sh --build=Release

でパスを通して，コマンド実行の準備完了．
ここからがメインで，C言語でWeb APIを作ります．
新しくhelloディレクトリを作成してあげて，その直下に以下の内容のhello.cを作成します．

#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}

hello.cができれば，

emcc hello.c -o hello.html

を実行してあげて，hello.cをコンパイル．
コンパイル後，ディレクトリには，

ll
total 256
drwxr-xr-x 2 kerneltyu kerneltyu   4096  5月 10 02:37 ./
drwxr-xr-x 3 kerneltyu kerneltyu   4096  5月 10 02:35 ../
-rw-r--r-- 1 kerneltyu kerneltyu     84  5月 10 02:37 hello.c
-rw-r--r-- 1 kerneltyu kerneltyu 102675  5月 10 02:37 hello.html
-rw-r--r-- 1 kerneltyu kerneltyu 115460  5月 10 02:37 hello.js
-rw-r--r-- 1 kerneltyu kerneltyu  21716  5月 10 02:37 hello.wasm

というようなファイルができます．javascriptファイルとhtmlとバイナリフォーマットのwasmができています．

emrun --no_browser --port 8080 .

で立ち上げて，localhost:8080にアクセスすると

このような画面が表示されます．
以上，WebAssemblyの入門をしてみました！

疑問点

よく分からないところがあったので，記録として残しておきます．
1. 今回の例だとjavascriptを使うよう部分がなかったように思う．（生成されたhtmlやjsには結構な量のコードが書かれてたけど）いまいち利点が良く分からない．たぶんもっとjsを使うようなもので実験してみる必要がありそう．
2. ブラウザでデバッグするときはどうするんだろう？ログ吐き出しながらになるのかな．jsほどリッチなデバッグ環境ではなさそう．
3. htmlとwasmをどう対応付けているのかが分からなかった．

感想

C言語でWebアプリ開発ができる時代が迫っていているんだなと実感できたのは良かったです．どんどんWebアプリがリッチになってきていることやエッジでの実行の需要の高まりといった背景をひしひしと感じます．自分的にはエッジでの活用を深ぼっていきたいかなと思いました．
ふと思い立って書き始めましたが，さらに興味がわいてきました．もう少し勉強してみよう．

参考

WebAssemblyとRustが作るサーバーレスの未来
WebAssembly