Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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