Slide 1

Slide 1 text

0 WASM⼊⾨ 2025-01-17 第111回NearMe技術勉強会 @yujiosaka

Slide 2

Slide 2 text

1 WASMとは? • 低レベルのバイトコードフォーマット • C、C++、Rust等の⾔語のコンパイル対象 • ⾼性能なウェブアプリケーションを実現する • サーバーサイドでの利⽤が増加している

Slide 3

Slide 3 text

2 Write once, run anywhere Java バイトコード JVM ARM X86 中間表現

Slide 4

Slide 4 text

3 Write once, run anywhere WASM バイトコード WASM ランタイム ARM X86 中間表現

Slide 5

Slide 5 text

4 Write once, run anywhere WASM ランタイム WASM バイトコード ARM X86 Wasmtime 中間表現

Slide 6

Slide 6 text

5 WASMの特徴 • 性能 ‒ ほぼネイティブの速度で実⾏ • 多⾔語対応 ‒ 様々なプログラミング⾔語をサポート • クロスプラットフォーム ‒ ブラウザやネイティブのランタイムに対応 • セキュリティ ‒ サンドボックス環境で実⾏ • クロスアーキテクチャ ‒ 複数のCPUアーキテクチャで実⾏(例:ARM、x86)

Slide 7

Slide 7 text

6 Confidential 6

Slide 8

Slide 8 text

7 性能 7

Slide 9

Slide 9 text

8 検証

Slide 10

Slide 10 text

9 コラッツ問題 3 Step ステップ数 n 5 8 4 2 1 10 16 1. 任意の正の整数nで開始 2. nが偶数なら2で割る 3. nが奇数なら3倍して1を⾜す 4. nが1になるまでこのプロセスを繰り返す 9

Slide 11

Slide 11 text

10 JavaScript vs. Rust function collatzSteps(n) { let counter = 0; while (n !== 1) { if (n % 2 === 0) { n /= 2; } else { n = 3 * n + 1; } counter++; } return counter; } pub fn collatz_steps(mut n: u64) -> u64 { let mut counter = 0; while n != 1 { if n % 2 == 0 { n /= 2; } else { n = 3 * n + 1; } counter += 1; } return counter; }

Slide 12

Slide 12 text

11 n = 670617279 の場合(必要ステップ数:986) 関数 Opt/Sec JS 32,172 WASM 1,465,898

Slide 13

Slide 13 text

12 n = 7 の場合(必要ステップ数:16) 関数 Opt/Sec JS 21,627,204 WASM 77,805,618

Slide 14

Slide 14 text

13 多⾔語対応 13

Slide 15

Slide 15 text

14 WASMにコンパイル可能な⾔語

Slide 16

Slide 16 text

15 クロスプラットフォーム 15

Slide 17

Slide 17 text

16 フロント エンド バック エンド エッジ 2025年時点でのユースケース

Slide 18

Slide 18 text

17 セキュリティ 17

Slide 19

Slide 19 text

18 JavaScriptの関数をインポートする use wasm_bindgen::prelude::*; #[wasm_bindgen] extern “C” { #[wasm_bindgen(js_namespace = console)] fn log(s: &str) } #[wasm_bindgen] pub fn hello_world(name: &str) { log(&format!(“Hello, {}!”, name)); }

Slide 20

Slide 20 text

19 サンドボックスの実⾏環境 Shared Linear Memory hello_world(name: &str) log helloWorld(name: string) console.log エクス ポート イン ポート 書き 込む 読み 込む 呼び 出す WASMモジュール

Slide 21

Slide 21 text

20 クロスアーキテクチャ 20

Slide 22

Slide 22 text

21 Numpyのディストリビューションとの⽐較

Slide 23

Slide 23 text

22 Thank you