楽しい WebAssembly

2 自己紹介 @h1romas4

3 WebAssembly 第４のウェブの要素（ 2019/12 W3C 勧告） ・ HTML （ .html ） ・ CSS （ .css ） ・ JavaScript （ .js ） ・ WebAssembly （ .wasm ） ← NEW!

4 Ready to GO! 主要ブラウザで既に実装済み iOS Safari / node.js / Electron.. 含む Figma 、 Google Earth 、 Unity （ゲーム）などで既に活用されています。

5 何をするもの？ WebAssembly は、 ・ウェブブラウザー等で JavaScript 以外の言語を動かす技術 ・ Flash Player / Java Applet など (NPAPI) と異なり 　　安全で W3C 標準 ・速い（所感では JS の 3 〜 5 倍、 x20 の事例も） ・小さい

6 ブラウザでどんな言語が動くの？ (1) .wasm ファイルに直接コンパイルできる言語 　・ C / C++ 　・ Rust 　・ AssemblyScript （ TypeScript サブセット） 　・ Go 　・ etc....

7 ブラウザでどんな言語が動くの？ (2) .wasm にコンパイルされた 　インタープリタやランタイムで動作する言語 　・ C# （ .dll ） 　・ Python （ .py ） 　・ Ruby/mRuby （ .rb ） 　・ etc...

8 JavaScript と WebAssembly JavaScript と WebAssembly はお友達です

9 JS と WASM は協調して動作 WebAssembly から直接ブラウザーにアクセスはできない ウェブブラウザー (DOM / HTML5 API) JavaScript WebAssembly OS だめ 現在のところ

10 どうやって使うの？ JavaScript から import して、計算ライブラリとして利用

11 計算だけ？ JavaScript に入出力を委譲し、 JS で書きづらかったり 　遅くなる処理の置き換えや、他言語で成長しているライブラリーを 　ブラウザー内でそのまま活用できます。 ・データーの圧縮伸張（ .gz や .zip の展開） ・ PDF や Excel などオフィスファイルの生成 ・画像処理（リサイズや高度なフィルター） ・音声処理（音声合成、スクリーンリーダー） ・仮想 DOM の差分など JS だと遅い処理の高速化

12 音声処理（デモ） シンセサイザー（電子楽器）をリアルタイムに演奏する例。 ・ WebAssembly （ Rust 言語）担当 　音声波形生成 　圧縮ファイルの展開 / ファイルから曲名などをバイナリー解析 ・ JavaScript 担当 　音声出力（ WebAudio API ） 　ビジュアライザー（ Canvas API ） 　ユーザーインターフェース（ドラッグアンドドロップ）

13 音声処理（デモ）

14 画像・音声処理（デモ） ゲーム機のエミュレーションをする例。 ・ WebAssembly （ C 言語）担当 　ゲーム機のエミュレーションを行い、 1/60 秒ごとの 　　出力用のグラフィック・音声のメモリー領域を生成 ・ JavaScript 担当 　画面出力（ requestAnimationFrame / Canvas API ） 　音声出力（ WebAudio API ） 　ジョイパッド入力（ GamePad API ）

15 画像・音声処理（デモ）

16 その他の例 Flash Player を WebAssembly 化した例 　 ruffle 　 ruffle is a Flash Player emulator 　　 built in the Rust programming language. WebAssembly でブラウザーに SQL データベースを実装した例 WebAssembly で JavaScript インタープリタを実装した例 WebAssembly で WebAssembly インタープリタを実装した例 等々、、入出力を JavaScript に外だしに修正できれば 　基本的に何でも動作しますので、詳しい方はチャレンジしてみてください！

17 ご清聴ありがとうございました！ @h1romas4 デモのソースコードや詳細 https://another.maple4ever.net/archives/2770/