楽しい 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/

楽しい WebAssembly

楽しい WebAssembly

ひろましゃ

Other Decks in Programming

Featured

Transcript