N5T / Feb 23 2024 AssemblyScriptではじめる WebAssembly入門 1

自己紹介 asuka 今年は仕事でWasm使いたいよね! SNS - X @a_skua - GitHub @a-skua - Zenn @askua - Blog www.askua.dev 2 去年は技術書典14, 15などに参加

WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン ス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。 なんだか良さそう WebAssembly 3 WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン ス向上を提供する新しい種類のコード です。基本的に直接記述ではなく、C、C++、 Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されていま す。 †1 WebAssembly の概要 †1 😎

WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン ス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。 コンパイル対象なんて言い出したぞ? WebAssembly 4 WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマン ス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象 となるように設計されています。 †1 WebAssembly の概要 †1 🤯

WebAssembly 5 コンパイル言語から，Wasmにビルドして... JSでWasmをロードして起動 ね?簡単でしょ?

Dartの例 6 main.wasm main.mjs deno run --allow-read main.ts dart compile wasm main.dart DartからWasmにビルドして... JSでWasmをロードして起動

Dartの例 7 main.wasm main.mjs deno run --allow-read main.ts dart compile wasm main.dart DartからWasmにビルドして... JSでWasmをロードして起動 このJSは何? え，そのまま実行できないの ?

WebAssembly 8 コンパイル言語から，Wasmにビルドして... JSでWasmをロードして起動 ね?簡単でしょ? コンパイラ怖いよう Wasmをロードって何??

もう少しこう何というか 手心というか 9

AssemblyScriptからはじめてみない? 10

AssemblyScriptからはじめてみない? 11 AssemblyScript とは TypeScriptの構文でWasmをビルドできる言語． 準備が必要なのはこれだけ †2 AssemblyScript †2

AssemblyScript入門 12 asinit を実行すると，assembly/index.ts などのファイルが作成される． build/release.wasm build/release.js npm run asbuild deno run --allow-read main.ts

AssemblyScript入門 13 asinit を実行すると，assembly/index.ts などのファイルが作成される． build/release.wasm build/release.js npm run asbuild deno run --allow-read main.ts 知ってる書き方! 知ってる書き方!! 面倒なことは全部ここ (読まなくて良い)

AssemblyScriptはTypeScriptで構文解析の処理が書かれている． AssemblyScriptの仕組み 14 assembly/index.ts build/release.wasm build/release.js †3 Binaryen tokenizer.ts parser.ts Binaryen AST Wasm †3 Binaryen IR

- 開発は停滞気味だが - ウェブ環境で部分的に Wasmを試してみたいというニーズには応えられそう． - Wasmの制約がASで使える型や構文に影響を与えている - TSではエラーにならないが， ASでは構文エラーになるケースがある． - タイプエイリアスやオブジェクト型に注意． - 構文を確認するには， ASのドキュメントとパーサーテストを見ると良い 😆 AssemblyScriptの現状 15

AssemblyScriptの例 16

AssemblyScriptの例 17

AssemblyScriptの例 18 benchmark time (avg) p75 p99 p995 p999 js n=92 4.864316037 4.625 5.7875 6.0958 19.5542 js(bigint) n=92 18.13722707 18.0625 19.6333 20.1334 20.9333 wasm n=92 22.57033527 22.8042 26.3 28.8375 42.3042 wasm(iterative) n=92 33.56680893 33.6042 36.1875 36.6709 37.25 js(iterative) n=92 112.3810171 112.7625 117.3709 118.0959 118.7458 js(iterative, bigint) n=92 340.2484605 339.7541 385.5333 410.1375 410.1375 wasm(n=92) : 7540113804746346429n js (n=92) : 7540113804746346000 (誤差) js (n=92, bigint): 7540113804746346429n

AssemblyScriptの例 19

AssemblyScriptの例 20 最速ではないが，安定している

AssemblyScriptの例 21 書き方によってパフォーマンスが大 きく異なる

数値計算 - 64bitsの整数を扱える - BigIntよりも速い 数値の繰り返し計算はWasmの得意分野 SIMD(v128型)もあるよ! WebでのWasmはすでに実用の域にあるよ !! (すでにWasmCGの関心はWebの外を向いている) WebAssemblyの使い所 22 引用元 実践入門WebAssembly

その他 - ユーザー向けプラグインのインターフェースを定義したい - JS以外の言語で書かれたプログラムをウェブ上で動かしたい WebAssemblyの使い所 23

Wasmの入門に AssemblyScript 24