Slide 1
Slide 1 text
ウェブエンジニアでもWasmを
使いたい!
フロントエンドカンファレンス北海道 2024
1
Slide 2
Slide 2 text
WHOIS
2
株式会社モニクルに所属
- SWE/プロダクトSRE
- ウェブシステムの運用開発
Wasmの同人誌を書いてるWasm
の人!!!
次の技術書典ではモニクル技術部 と
しての参加予定してます!
asuka (@a_skua)
←今までに書いた同人誌たち
Slide 3
Slide 3 text
Wasm使ってますか?
3
Slide 4
Slide 4 text
Wasmのイメージ
4
速そう
凄そう
強そう
Slide 5
Slide 5 text
ウェブにおけるWasmのイメージ
5
速そう → JavaScriptも十分速くない?
凄そう → JavaScriptと比べて何がすごいの?
強そう → JavaScriptの方ができること多くない?
Slide 6
Slide 6 text
ウェブにおけるWasmのイメージ
6
速そう → JavaScriptも十分速くない?
凄そう → JavaScriptと比べて何がすごいの?
強そう → JavaScriptの方ができること多くない?
あれ? JavaScriptで良くない?
Slide 7
Slide 7 text
ウェブにおけるWasmの状況
とりあえずなんでもブラウザで動かしてみる
- PHPをブラウザで動かしてみた
- Javaをブラウザで動かしてみた
- Linuxをブラウザで動かしてみた
7
色々動いてすごい
Slide 8
Slide 8 text
ウェブにおけるWasmの状況
とりあえずなんでもブラウザで動かしてみる
- PHPをブラウザで動かしてみた
- Javaをブラウザで動かしてみた
- Linuxをブラウザで動かしてみた
JavaScript以外でのウェブアプリケーション開発
- Rust製のウェブアプリケーションフレームワーク
- DartやGoのWasm対応など
8
色々動いてすごい
JS以外の選択肢が出てきた
Slide 9
Slide 9 text
ウェブにおけるWasmの状況
とりあえずなんでもブラウザで動かしてみる
- PHPをブラウザで動かしてみた
- Javaをブラウザで動かしてみた
- Linuxをブラウザで動かしてみた
JavaScript以外でのウェブアプリケーション開発
- Rust製のウェブアプリケーションフレームワーク
- DartやGoのWasm対応など
→ まだJavaScriptで良いかもという空気
9
色々動いてすごい
JS以外の選択肢が出てきた
- 新しい言語覚えるの大変 😣
- JavaScript使っていてパフォーマンスに
困る場面がそれほど多くない
Slide 10
Slide 10 text
今一番Wasmが盛り上がっている場所
実行ファイルとしての Wasm
ウェブ云々ではなく，様々な言語で書かれたプログラムをWasmを通して実行するため
の仕様の策定が行われている
10
メインモジュール
(Rust)
サブモジュールA
(Go)
サブモジュールB
(Python)
サブモジュールC
(JavaScript)
近い将来，こういうことができるようになる
Slide 11
Slide 11 text
閑話休題
11
Slide 12
Slide 12 text
ウェブエンジニアでもWasmを使いたい!!
12
Slide 13
Slide 13 text
ウェブエンジニアでもWasmを使いたい!!
1. WebAssemblyとは
○ JavaScriptとWasmの違い
2. Wasmが速い理由
○ Wasmが期待するほどではなかったと言われる理由
○ 本当に期待するほどではなかったのか?
3. AssemblyScript
4. Wasmの使い所
話さないこと
- Wasmの最前線
- サーバーやOSでのWasmの活用
- 今後のWasmに期待していること
→ 懇親会などで話しましょう
!!!
13
このセッションを聞けば，
プロジェクトにWasmを導入できるようになる
Slide 14
Slide 14 text
WebAssemblyとは
14
Slide 15
Slide 15 text
WebAssemblyとは
15
WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン
ス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust
等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。
Mdn / WebAssembly の概要 / WebAssemblyとは何か
Slide 16
Slide 16 text
WebAssemblyとは
❌ WebAssemblyというプログラミング言語
⭕ コンパイル対象(ターゲット)とランタイムを含めた技術の総称
16
WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン
ス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust
等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。
Mdn / WebAssembly の概要 / WebAssemblyとは何か
Slide 17
Slide 17 text
JavaScriptとWasmの違い
17
Slide 18
Slide 18 text
JavaScriptとWasmの違い：フォーマット
18
export function add(a, b) {
return a + b;
}
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
テキストフォーマット バイナリフォーマット
JavaScript Wasm
Slide 19
Slide 19 text
JavaScriptとWasmの違い：フォーマット
19
export function add(a, b) {
return a + b;
}
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
テキストフォーマット
⭕ 人が読める
バイナリフォーマット
❌ 人が読めない
JavaScript Wasm
Slide 20
Slide 20 text
JavaScriptとWasmの違い：フォーマット
20
export function add(a, b) {
return a + b;
}
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
バイナリフォーマット
❌ 人が読めない
fn add(a: i32, b: i32) -> i32 {
a + b
}
Rustなどの言語からWasmをビルドする
テキストフォーマット
⭕ 人が読める
Slide 21
Slide 21 text
21
export function add(a, b) {
return a + b;
}
(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add
)
(export "add" (func $add))
)
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
人が読めるようにすると ...
JavaScriptとWasmの違い：フォーマット
WebAssembly Text Format
Slide 22
Slide 22 text
22
export function add(a, b) {
return a + b;
}
(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add
)
(export "add" (func $add))
)
なんとなく同じプログラムと
いうことがわかる
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
人が読めるようにすると ...
JavaScriptとWasmの違い：フォーマット
WebAssembly Text Format
Slide 23
Slide 23 text
23
export function add(a, b) {
return a + b;
}
(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add
)
(export "add" (func $add))
)
なんとなく同じプログラムと
いうことがわかる
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
人が読めるようにすると ...
1
local.get $a
1
local.get $b
2
3
i32.add
Wasmはスタックマシン
JavaScriptとWasmの違い：フォーマット
WebAssembly Text Format
Slide 24
Slide 24 text
Wasmの内容を読みたい場合
24
FirefoxやChromeのdevtoolsから読めるよ!!
Slide 25
Slide 25 text
25
JavaScriptを実行する方法
export function add(a, b) {
return a + b;
}
import { add } from "./main.js";
console.debug(add(1, 2)); // 3
HTML上にインポートするだけ
JavaScriptとWasmの違い：実行方法
Slide 26
Slide 26 text
JavaScriptとWasmの違い：実行方法
26
Wasmを実行する方法
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
const binary = await fetch(new URL("main.wasm", import.meta.url));
const module = await WebAssembly.compile(await binary.arrayBuffer());
const instance = await WebAssembly.instantiate(module);
console.debug(instance.exports.add(1, 2)); // 3
1. Wasmファイルをfetchする
2. WasmファイルをWasmモジュールに変換する
3. Wasmモジュールをインスタンス化する
→ Wasmの躓きポイントの一つ
現状はJavaScriptを介して
実行する必要がある
(少し面倒)
Slide 27
Slide 27 text
Wasmが速い理由
27
Slide 28
Slide 28 text
28
Wasmが速い理由
export function add(a, b) {
return a + b;
}
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
テキストフォーマット
⭕人が扱いやすい
バイナリフォーマット
❌人が扱いにくい
Slide 29
Slide 29 text
29
Wasmが速い理由
export function add(a, b) {
return a + b;
}
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
テキストフォーマット
❌計算機が扱いにくい
バイナリフォーマット
⭕計算機が扱いやすい
Slide 30
Slide 30 text
Wasmのバイナリは計算機が解釈しやすいよう設計されている
30
Wasmが速い理由
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
Slide 31
Slide 31 text
Wasmのバイナリは計算機が解釈しやすいよう設計されている
31
Wasmが速い理由
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
(type 0 (func (param i32 i32) (result i32))
(export "add" (func 0))
(func 0 (type 0)
local.get 0
local.get 1
i32.add
)
こう解釈できる
Slide 32
Slide 32 text
Wasmのバイナリは計算機が解釈しやすいよう設計されている
32
Wasmが速い理由
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
(type 0 (func (param i32 i32) (result i32))
(export "add" (func 0))
(func 0 (type 0)
local.get 0
local.get 1
i32.add
)
20 00
20 01
6a
20 → local.get
6a → i32.add
一意に解釈できる
こう解釈できる
Slide 33
Slide 33 text
JavaScript → インタプリタ（テキストの意味を解釈して実行する）
Wasm → コンパイル結果を実行する
33
インタプリタだから遅いよね〜
コンパイル言語だから速いよね〜
Wasmが速い理由
JavaScript
Wasm
コンパイル言語だから速い インタプリタだから遅い
Slide 34
Slide 34 text
Wasmが期待するほどではなかった
と言われる理由
34
Slide 35
Slide 35 text
JavaScript → インタプリタ（テキストの意味を解釈して実行する）
Wasm → コンパイル結果を実行する
35
インタプリタだから遅いよね〜
コンパイル言語だから速いよね〜
Wasmが期待するほどではなかったと言われる理由
JavaScript
Wasm
コンパイル言語だから速い インタプリタだから遅い
Slide 36
Slide 36 text
JavaScript → インタプリタ（テキストの意味を解釈して実行する）
Wasm → コンパイル結果を実行する
36
インタプリタだから遅いよね〜
コンパイル言語だから速いよね〜
Wasmが期待するほどではなかったと言われる理由
JavaScript
Wasm
コンパイル言語だから速い インタプリタだから遅い
JITコンパイルされて速い 多くのウェブアプリが
JITコンパイルで十分だった
Wasmって期待するほどでもなかった
Slide 37
Slide 37 text
本当に期待するほどではなかったのか?
37
Slide 38
Slide 38 text
JavaScript → インタプリタ（テキストの意味を解釈して実行する）
Wasm → コンパイル結果を実行する
38
インタプリタだから遅いよね〜
コンパイル言語だから速いよね〜
本当に期待するほどではなかったのか?
JavaScript
Wasm
コンパイル言語だから速い インタプリタだから遅い
JITコンパイルされて速い 多くのウェブアプリが
JITコンパイルで十分だった
Wasmって期待するほどでもなかった
Slide 39
Slide 39 text
JavaScript → インタプリタ（テキストの意味を解釈して実行する）
Wasm → コンパイル結果を実行する
39
インタプリタだから遅いよね〜
コンパイル言語だから速いよね〜
本当に期待するほどではなかったのか?
JavaScript
Wasm
コンパイル言語だから速い インタプリタだから遅い
JITコンパイルされて速い 多くのウェブアプリが
JITコンパイルで十分だった
Wasmって期待するほどでもなかった
ちょっと待った !!!
Slide 40
Slide 40 text
40
本当に期待するほどではなかったのか?
JavaScript
Wasm
コンパイル言語だから速い インタプリタだから遅い
JITコンパイルされて速い
この解釈が間違い !!!
多くのウェブアプリが
JITコンパイルで十分だった
Wasmって期待するほどでもなかった
Slide 41
Slide 41 text
41
本当に期待するほどではなかったのか?
JavaScript
インタプリタだから遅い
JITコンパイルされて速い
JITコンパイルされる処理とされない処理があり，
パフォーマンスが安定しないという課題
JITコンパイルされなかった処理
→ 遅い
JITコンパイルされた処理
→ 速い
JITコンパイルの有無で速度が変わるのでパフォーマンスが安定しない
Slide 42
Slide 42 text
42
本当に期待するほどではなかったのか?
JavaScript
Wasm
インタプリタだから遅い
JITコンパイルされて速い
JITコンパイルされる処理とされない処理があり，
パフォーマンスが安定しないという課題
初めからバイナリで良いんじゃない ?
JITコンパイルされなかった処理
→ 遅い
JITコンパイルされた処理
→ 速い
JITコンパイルの有無で速度が変わるのでパフォーマンスが安定しない
Slide 43
Slide 43 text
43
本当に期待するほどではなかったのか?
JavaScript
Wasm
コンパイル言語だから速い
インタプリタだから遅い
JITコンパイルされて速い
JITコンパイルされる処理とされない処理があり，
パフォーマンスが安定しないという課題
初めからバイナリで良いんじゃない ?
パフォーマンスが安定
JITコンパイルされなかった処理
→ 遅い
JITコンパイルされた処理
→ 速い
JITコンパイルの有無で速度が変わるのでパフォーマンスが安定しない
Slide 44
Slide 44 text
JavaScriptよりWasmの方が命令の実行速度が少し速い
本当に期待するほどではなかったのか?
44
// フィボナッチ数
export function fib(n: number): number {
if (n <= 1.0) {
return n;
}
return fib(n - 1.0) + fib(n - 2.0);
}
fib(15) → 1,973回
fib(30) → 約270万回
fib(35) → 約3千万回
fib(40) → 約3億3千万回
※ベンチマーク用に再帰関数を採用しています
※ランタイムによって差異はあります
Slide 45
Slide 45 text
JavaScriptよりWasmの方が命令の実行速度が少し速い
本当に期待するほどではなかったのか?
45
fib(15) → 1,973回
fib(30) → 約270万回
fib(35) → 約3千万回
fib(40) → 約3億3千万回
fib(40)
JavaScript → 741ms
Wasm → 378ms
Slide 46
Slide 46 text
計算量が少ない世界だと命令の実行速度の差は大きな問題ではない
本当に期待するほどではなかったのか?
46
fib(15) → 1,973回
fib(30) → 約270万回
fib(35) → 約3千万回
fib(40) → 約3億3千万回
fib(15)
JavaScript → 0.1ms
Wasm → 0ms
fib(30)
JavaScript → 6ms
Wasm → 3ms
Slide 47
Slide 47 text
計算量が少ない世界だと命令の実行速度の差は大きな問題ではない
本当に期待するほどではなかったのか?
47
fib(15) → 1,973回
fib(30) → 約270万回
fib(35) → 約3千万回
fib(40) → 約3億3千万回
Wasmのターゲット層
Slide 48
Slide 48 text
PCとモバイルの速度比較
本当に期待するほどではなかったのか?
48
fib(40)
JavaScript → 741ms
Wasm → 378ms
fib(40)
JavaScript → 1532ms
Wasm → 467ms
Slide 49
Slide 49 text
PCとモバイルの速度比較
本当に期待するほどではなかったのか?
49
fib(40)
JavaScript → 741ms
Wasm → 378ms
fib(40)
JavaScript → 1532ms
Wasm → 467ms
x2.1
x1.2
Wasmの方が速度劣化が少ない
Slide 50
Slide 50 text
PCとモバイルの速度比較
本当に期待するほどではなかったのか?
50
振れ幅が小さい 振れ幅が大きい
Slide 51
Slide 51 text
Wasmのメインターゲット層
→ 計算量を必要とする処理を速く実行したい
→ 安定したパフォーマンスを得たい
本当に期待するほどではなかったのか?
51
この悩みがなかった場合，
Wasmのメインターゲットから外れる
→ 期待するほどではなかったよね
Slide 52
Slide 52 text
Wasmで発生するオーバーヘッドはどうなの?
1. Wasmをロードする時間
2. データを共有する時間
本当に期待するほどではなかったのか?
52
const binary = await fetch(new URL("main.wasm", import.meta.url));
const module = await WebAssembly.compile(await binary.arrayBuffer());
const instance = await WebAssembly.instantiate(module);
// ...
直接Wasmをインポートすることができない
通信量増えて遅くならない?
Slide 53
Slide 53 text
Wasmで発生するオーバーヘッドはどうなの?
1. Wasmをロードする時間
2. データを共有する時間
本当に期待するほどではなかったのか?
53
デモ用のWasm
- ./release.js 2.7KB
- ./release.wasm 4.9KB
この程度のサイズ感であれば無視できるレベル
Slide 54
Slide 54 text
Wasmで発生するオーバーヘッドはどうなの?
1. Wasmをロードする時間
2. データを共有する時間
0061736d0100000001070160027f7f017f030201
000707010361646400000a09010700200020016a
0b0018046e616d65010601000361646402090100
02000161010162
本当に期待するほどではなかったのか?
54
function add(a, b) {↩
return a + b;↩
}
38バイト 9バイト
非常に小さなプログラムの場合，ビルド時の付加情報でJavaScriptよりファイルサイズが大きく見えるが...
JavaScriptよりWasmの方がプログラムの記述量は小さくできる
がっつり処理を書いた場合，
Wasmの方が実行ファイルサイズが
小さくなる可能性はある
Slide 55
Slide 55 text
Wasmで発生するオーバーヘッドはどうなの?
1. Wasmをロードする時間
2. データを共有する時間
本当に期待するほどではなかったのか?
55
WasmとJavaScriptはメモリーを共有していないため，データ
をコピーする必要がある
Slide 56
Slide 56 text
Wasmで発生するオーバーヘッドはどうなの?
1. Wasmをロードする時間
2. データを共有する時間
JavaScript
本当に期待するほどではなかったのか?
56
"Hello, world!"
Wasm
"Hello, world!"
(func (param $ptr i32) (param $len i32))
コピー
exports.foo(ptr, len);
実行
Web API
多くの場合はそれほど問題にならない
& あとは実装次第
Slide 57
Slide 57 text
本当に期待するほどではなかったのか?
57
ウェブアプリの計算量に課題を感じている Wasm
YES
ウェブアプリを安定して動作させたい Wasm
NO
Wasmの恩恵を受けれそう Wasm
YES
NO
NO
JavaScript
YES
Slide 58
Slide 58 text
AssemblyScript
58
Slide 59
Slide 59 text
AssemblyScript
AssemblyScriptは，TypeScriptをそのままWasmにコンパイルできる言語．
59
export function add(a: number, b: number): number {
return a + b;
}
./app/lib/calc.ts
import { add } from "~/lib/calc";
console.log(add(1, 2));
TypeScriptの場合
Slide 60
Slide 60 text
AssemblyScript
AssemblyScriptは，TypeScriptをそのままWasmにコンパイルできる言語．
60
export function add(a: number, b: number): number {
return a + b;
}
./app/lib/calc.ts
import { add } from "~/lib/calc";
console.log(add(1, 2));
import { add } from "~/asbuild/release";
console.log(add(1, 2));
TypeScriptの場合 AssemblyScriptの場合
↓ $ npm run asbuild
ESMと同じノリで扱うことができる
Slide 61
Slide 61 text
AssemblyScriptは，TypeScriptをそのままWasmにコンパイルできる言語．
AssemblyScript
61
export function add(a: number, b: number): number {
return a + b;
}
./app/lib/calc.ts
import { add } from "~/lib/calc";
console.log(add(1, 2));
import { add } from "~/asbuild/release";
console.log(add(1, 2));
TypeScriptの場合 AssemblyScriptの場合
↓ $ npm run asbuild
ESMと同じノリで扱うことができる
導入方法
$ npm install -D assemblyscript
Slide 62
Slide 62 text
AssemblyScriptは，TypeScriptをそのままWasmにコンパイルできる言語．
AssemblyScript
62
export function add(a: number, b: number): number {
return a + b;
}
./app/lib/calc.ts
import { add } from "~/lib/calc";
console.log(add(1, 2));
import { add } from "~/asbuild/release";
console.log(add(1, 2));
TypeScriptの場合 AssemblyScriptの場合
↓ $ npx asbuild
ESMと同じノリで扱うことができる
デモ：http://localhost:3000/add
Slide 63
Slide 63 text
AssemblyScript
AssemblyScriptの良いところ
1. TypeScriptのコードをほぼそのままWasmにコンパイルできる
a. オブジェクトの扱いには少し注意が必要
2. コンパイル後のファイルサイズが非常に小さい
a. GoやRustなどは処理系の実装が入るので Wasmファイルが大きくなりがち
63
export function add(a: number, b: number): number {
return a + b;
}
./app/lib/calc.ts
export * from "../app/lib/calc";
./assembly/index.ts
export
import { add } from "~/asbuild/release";
console.log(add(1, 2));
$ npm run asbuild
Slide 64
Slide 64 text
export function add(a: number, b: number): number {
return a + b;
}
AssemblyScriptの良いところ
1. TypeScriptのコードをほぼそのままWasmにコンパイルできる
a. オブジェクトの扱いには少し注意が必要
2. コンパイル後のファイルサイズが非常に小さい
a. GoやRustなどは処理系の実装が入るので Wasmファイルが大きくなりがち
AssemblyScript
64
./app/lib/calc.ts
./release.js → 653B
./release.wasm → 93B
Rustからビルドするよりも
コンパクトなWasmファイルになる
$ npm run asbuild
書いたままのコードが生成される
Slide 65
Slide 65 text
export function add(a: number, b: number): number {
return a + b;
}
AssemblyScriptの良いところ
1. TypeScriptのコードをほぼそのままWasmにコンパイルできる
a. オブジェクトの扱いには少し注意が必要
2. コンパイル後のファイルサイズが非常に小さい
a. GoやRustなどは処理系の実装が入るので Wasmファイルが大きくなりがち
AssemblyScript
65
./app/lib/calc.ts
./release.js → 653B
./release.wasm → 93B
Rustからビルドするよりも
コンパクトなWasmファイルになる
$ npx asbuild
書いたままのコードが生成される
既存のNode.js環境に組み込みやすい
👍👍👍
Slide 66
Slide 66 text
Wasmの使い所
66
Slide 67
Slide 67 text
Wasmの使い所
67
1. 何でもブラウザ上で動かしたい
2. 安定した計算速度を得たい
3. 安全に数値型を扱いたい
4. プラグイン機能を提供したい
これは紹介済み
Slide 68
Slide 68 text
Wasmの使い所
68
1. 何でもブラウザ上で動かしたい
2. 安定した計算速度を得たい
3. 安全に数値型を扱いたい
4. プラグイン機能を提供したい
WasmはIntを扱える
Slide 69
Slide 69 text
Wasmの使い所
Wasmで扱える数値型：
- i32 (u32)
- i64 (u64)
- f32
- f64
69
JavaScriptにはnumber (= f64)しかないが，
Wasmは整数，小数を扱うことができる
Slide 70
Slide 70 text
Wasmの使い所
Wasmで扱える数値型：
- i8 (u8)
- i16 (u16)
- i32 (u32)
- i64 (u64)
- f32
- f64
70
JavaScriptにはnumber (= f64)しかないが，
Wasmは整数，小数を扱うことができる
AssemblyScriptはi8 (u8), i16 (u16)型も用意し
ている
※ Wasm上の型としてはi32とi64の2つの型しかないが，
「i32.extend8_s」や「i32.extend16_s」といった命令が存在して
いるため，i8やi16も扱える
Slide 71
Slide 71 text
Wasmの使い所
Wasmで扱える数値型：
- i8 (u8)
- i16 (u16)
- i32 (u32)
- i64 (u64)
- f32
- f64
71
JavaScriptにはnumber (= f64)しかないが，
Wasmには整数，小数を扱うことができる
AssemblyScriptはi8 (u8), i16 (u16)型も用意し
ている
※ Wasm上の型としてはi32とi64の2つの型しかないが，
「i32.extend8_s」や「i32.extend16_s」といった命令が存在して
いるため，i8やi16も扱える
デモ：http://localhost:3000/calc
Slide 72
Slide 72 text
Wasmの使い所
72
1. 何でもブラウザ上で動かしたい
2. 安定した計算速度を得たい
3. 安全に数値型を扱いたい
4. プラグイン機能を提供したい Wasmは機能を制限するのに
適している
Slide 73
Slide 73 text
Wasmの使い所
プラグイン機能を提供したい
Wasm
- 実行時の権限を制限しやすい
73
AssemblyScript
- コンパイラがウェブでも動作する
Wasmだけだとホスト環境にアクセスできない
- 閲覧履歴を書き換えられる
- HTMLを書き換えられる
Wasmなら防ぐことができる
安全に実行できる → プラグイン機能に使える
Slide 74
Slide 74 text
Wasmの使い所
プラグイン機能を提供したい
Wasm
- 実行時の権限を制限しやすい
74
AssemblyScript
- コンパイラがウェブでも動作する
Wasmだけだとホスト環境にアクセスできない
- 閲覧履歴を書き換えられる
- HTMLを書き換えられる
Wasmなら防ぐことができる
安全に実行できる → プラグイン機能に使える
ブラウザ上でAssemblyScriptをビルドして
動作確認をすることができる
→ 書きやすい & 動作確認しやすい
Slide 75
Slide 75 text
Wasmの使い所
プラグイン機能を提供したい
Wasm
- 実行時の権限を制限しやすい
75
AssemblyScript
- コンパイラがウェブでも動作する
Wasmだけだとホスト環境にアクセスできない
- 閲覧履歴を書き換えられる
- HTMLを書き換えられる
Wasmなら防ぐことができる
安全に実行できる → プラグイン機能に使える
ブラウザ上でAssemblyScriptをビルドして
動作確認をすることができる
デモ：http://localhost:3000/plugin
Slide 76
Slide 76 text
Wasmの使い所
プラグイン機能を提供したい
Wasm
- 安全に実行できる
→プラグインを作るのに適している
76
AssemblyScript
- コンパイラがウェブでも動作する
課題：Wasmを何の言語でビルドする ?
他の言語を選ぶことへの心理的ハードル
TypeScriptで書くことができる
かつシンプルなWasmがビルドされる
→ AssemblyScriptはWasmの入門に適している
Slide 77
Slide 77 text
ウェブエンジニアでもWasmを使いたい!!
1. WebAssemblyとは
○ JavaScriptとWasmの違い
2. Wasmが速い理由
○ Wasmが期待するほどではなかったと言われ
る理由
○ 本当に期待するほどではなかったのか?
3. AssemblyScript
4. Wasmの使い所
77
プログラミング言語ではなく，コンパイルターゲット
環境に左右されにくい安定した実行速度
数値計算にWasmは強い
安全に実行するための仕組みを提供
計算量を必要とするプログラムほどWasmは輝く
Wasmは安定したパフォーマンスを得ることが目的
TypeScriptをWasmにビルドできる
既存のNode.js環境と共存できる
Slide 78
Slide 78 text
ウェブエンジニアでもWasmを
使いたい!!
$ npm install -D assemblyscript
fin
今すぐ
ご清聴ありがとうございました
Slide 79
Slide 79 text
リンク
- デモコード：https://github.com/a-skua/example-wasm
79