WebAssemblyざっくり概要

2019/5/24

動機

kansai.ts (6/10) で何を発表するか迷ってる

コンパイラなど言語処理系周り

Reactなど実践的なもの

○○作ってみた

etc.

WebAssemblyあまりしらないので調べてみた

WebAssemblyの概要

ブラウザ上で動作する低水準言語

主要ブラウザベンダーが協働で使用策定

Google, MS, Mozilla, Apple, LLVM, Unityなど

WebAssemblyをサポートした言語で書かれたコードをWebブラウザ上で実行できる

関連

歴史

JavaScriptが遅いと言われた

WebAssemblyが登場

JavaScriptが遅いと言われた

動的型付け

実行前にコンパイルできず、実行時に逐一

フェッチ時間やコンパイル時間が大きくなった

JS自体の最適化の難しさが顕在化

2013年

上の問題を解決するためにMozillaが開発

JavaScriptのサブセット

型の付け方が面白い

頑張れば手書きもできる

ファイルサイズ増大による

通信量の増加

構文解析時間の増加

ネイティブコードへのコンパイル時間の増加

Mozilla以外も頑張ってた

etc.

そして、所要ブラウザベンダーが協力してWebAssemblyの仕様を策定した

FireFox 52, Google Chrome 57でサポートされた

たしか、EdgeやSafariもすでに動くはず

コードを見てみる

アセンブリ言語よりも可読性がある

Lispのような括弧でノードを表すS式

code:wast

(func $func (param i32 i32) (result i32) (local.get 0))

(type $check (func (param i32 i32) (result i32)))

(table funcref (elem $func))

(func (export "as-call_indirect-first") (result i32)

(block (result i32)

(call_indirect (type $check)

(loop (result i32) (i32.const 1)) (i32.const 2) (i32.const 0)

)

)

)

スタックマシン

全てに型がある

型は4種類のみ

整数、浮動小数点数

それぞれ32bit, 64bit

goto命令がない

if, elseで条件分岐

単位はmodule

JSとwasmで相互にやりとりができる

なんで速いのか

ファイルサイズが軽量

バイナリ形式で配布する

構文解析をする時間がいらない

ロードタイムを速くする

事前にコンパイル

事前に型が決まるので高速

この過程で最適化ができる

用途

JS以外の言語のプログラムをブラウザで実行したい

フロント、バックエンドを同じ言語で書ける

再利用とかうれしい

Rustのyewというフレームワークを使ってフロントもバックもRustで作ったものの記事

重たい計算処理

圧縮、暗号、画像処理

ゲームプラットフォームのブラウザ上への構築

サポートしている言語

C, C++

Rust

rustc

Swift

C#

Go

Kotlin]Native

TypeScript

Python

関連ツール

以下を比較できる

C, C++のコード

wast

FireFox x86 アセンブリ言語

LLVM x86 アセンブリ言語

JSとwasmを実行して比較する

つまりコンパイルしてwasmを吐けるビジュアルプログラミング言語

TypeScriptのコードをWebAssemblyに変換できる

TypeScriptのサブセット

AssemblyScriptを試す

$ npm install --save-dev github:AssemblyScript/assemblyscript

$ npm run asbuild

$ npm run server

おわり