ふと,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の入門をしてみました!
疑問点
よく分からないところがあったので,記録として残しておきます.
- 今回の例だとjavascriptを使うよう部分がなかったように思う.(生成されたhtmlやjsには結構な量のコードが書かれてたけど)いまいち利点が良く分からない.たぶんもっとjsを使うようなもので実験してみる必要がありそう.
- ブラウザでデバッグするときはどうするんだろう?ログ吐き出しながらになるのかな.jsほどリッチなデバッグ環境ではなさそう.
- htmlとwasmをどう対応付けているのかが分からなかった.
感想
C言語でWebアプリ開発ができる時代が迫っていているんだなと実感できたのは良かったです.どんどんWebアプリがリッチになってきていることやエッジでの実行の需要の高まりといった背景をひしひしと感じます.自分的にはエッジでの活用を深ぼっていきたいかなと思いました.
ふと思い立って書き始めましたが,さらに興味がわいてきました.もう少し勉強してみよう.