ウェブエンジニアでもWasmを使いたい!

フロントエンドカンファレンス北海道 2024

Transcript

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