OCHaCafe S11 #2 LT： WASM基礎〜丸腰で最前線に行かないために〜

Transcript

1. WASM基礎 〜丸腰で最前線に行かないために〜 Oracle Cloud Hangout Cafe S11 LT Mamiko Sasakawa 日本オラクル株域会社
2. Agenda 2 Copyright © 2026, Oracle and/or its affiliates 1 2 3 4 5 WASM is 何？ WASMの特徴 どうやって使う？ Get start Wasm まとめ
3. 3 Copyright © 2026, Oracle and/or its affiliates Mamiko Sasakawa 日本オラクル新卒入社3年目 Oracle Digital Solution Architect ◆好きな言葉は「爆誕」と「死ぬこと以外かすり傷」 ◆技術に行き詰まると物理的に海外へ逃亡する癖あり • 最近の逃避先はパキスタン、キルギス、カザフスタン X :msasakaw GitHub：msasakaw（これから頑張る） Qiita ：msasakaw （ちゃんと書いてる） 危険地 20カ国/year 4 yama/year 4 sake/day
4. WASM is 何？
5. Copyright © 2026, Oracle and/or its affiliates 5 Wasmって何ぞ？
6. 実際にWebAssemblyが活用されている事例 意外と身近なWasm Copyright © 2026, Oracle and/or its affiliates 6 https://research.google/blog/background-features-in-google-meet- powered-by-web-ml/ Google Meet • 背景のぼかし・仮想背景の処理 https://www.amazon.science/blog/how-prime-video-updates-its-app-for-more-than-8- 000-device-types Amazon prime • 8000種類以上ものデバイスへの対応を可能に • レンダリングやアニメーションなどの処理
7. W3C※ WebAssembly Core Specificationより Wasmの概要 Copyright © 2026, Oracle and/or its affiliates 7 WebAssemblyは、高速・安全・高い移植性を備えた低レベルの実行形式。 Web向けに設計されたが特定の環境に依存せず、ブラウザ以外のサーバーや各種実行環境でも利用できる 公開標準仕様である。 https://www.w3.org/TR/2026/CRD-wasm-core-2-20260212/
8. ブラウザやサーバ上で高速・安全に実行できるバイナリ形式のこと ① Wasmは「実行形式」 • プログラミング言語ではない • Rust/ Go/ C#/C++ などで書いたコードを 変換した後の形（バイナリ） ② 特定の環境に依存しない公開標準仕様 • 当時Webブラウザ向けに設計されたが、サーバーや エッジでも動作する • W3Cという国際標準化団体が仕様を策定・公開 Wasm is 何？ Copyright © 2026, Oracle and/or its affiliates 8 … .wasmファイル コンパイル Webブラウザ サーバー エッジ
9. Webブラウザでもネイティブ並みの処理速度が求められたから • ブラウザはJavaScriptの実行が主 • 重い計算処理が苦手（画像処理・暗号化など） Why Wasm? Copyright © 2026, Oracle and/or its affiliates 9 Before：これまでのWeb • アプリをインストールする手間をかけたくない (-”-) • ブラウザで3Dゲーム / VR / 動画編集 をしたいぜ！
10. Webブラウザでもネイティブ並みの処理速度が求められたから • ブラウザはJavaScriptの実行が主 • 重い計算処理が苦手（画像処理・暗号化など） • ブラウザの中で JavaScript と Wasm の両方が 動くようになった • 高負荷な処理は Wasm • UI の制御は JavaScript が担当 Why Wasm? Copyright © 2026, Oracle and/or its affiliates 10 https://developer.mozilla.org/en-US/docs/WebAssembly/Guides/Concepts Before：これまでのWeb After：Wasm登場後のWeb • アプリをインストールする手間をかけたくない (-”-) • ブラウザで3Dゲーム / VR / 動画編集 をしたいぜ！
11. WASMの特徴
12. Fast • コンパイル済みのバイナリが実行される Safe • サンドボックス内で実行される • プログラムがパソコンのファイルやOSに直接アクセスできない Portable • C・C++・Rust・Go などの言語からWasmにコンパイルできる • 既存のコードをWebに持ち込める Wasmの特徴 Copyright © 2026, Oracle and/or its affiliates 12
13. あらかじめコンパイル済みのバイナリ形式で配布される→ブラウザ側の処理ステップが少なく高速 ブラウザ：JavaScript の実行フローの例 ブラウザ： Wasmの実行フローの例 Wasmの特徴 - Fast Copyright © 2026, Oracle and/or its affiliates 13 1. ソースコード読み込み 2. パース 文字列からプログラムが扱える形に分解・変換 3. バイトコードに変換 中間形式 4. 最適化の判断 より速く処理できる形へ書き換える余地があるか 5. コンパイル 機械語へ変換 6. 実行 CPU が機械語を直接処理 1. バイナリ読み込み ※すでにコンパイル済み・最適化済み 2. デコード 3. 検証 構造が正しいか安全チェック 4. コンパイル 機械語への変換のみ（最適化不要） 5. 実行 時間がかかる処理 中程度 高速な処理 ほぼ同時に実行
14. • サンドボックス内で実行される。 専用メモリが割り当てられ、その外には出られない • OS・他プロセスのメモリには触れない。 ファイル・通信・時刻取得なども直接は不可能。 • 外部へのアクセスは WebAssembly System Interface(WASI) 経由でのみ許可される。 Wasmの特徴 - Safe Copyright © 2026, Oracle and/or its affiliates 14 OS/CPU 直接アクセス不可
15. Wasmが外部とやり取りするためのインタフェース なぜ必要か Wasmは単体ではファイル操作や通信などの外部アクセスができないため それらを安全に利用できる仕組みとしてWASIが必要となる 特徴 WASIはOSの差異を吸収し、必要な機能だけを明示的に許可し 外部アクセスを提供する 補足 – WebAssembly System Interface(WASI)について Copyright © 2026, Oracle and/or its affiliates 15 OS/CPU wasi-io wasi-filesystem wasi-closks WASI 時刻取得 ファイル取得 I/O Copyright © 2026, Oracle and/or its affiliates
16. 複数言語からコンパイル可能 • C/C++・Rust・Goなどの言語をコンパイルする と、.wasmバイナリが出力される • .wasmを実行環境に配置して使用可能 どんな環境でも同じように動く • OS・CPU差異はWasm Runtimeが吸収し 1つのバイナリがどこでも動く • ブラウザ・ノートPCやサーバーなど Wasmの特徴 - Portable Copyright © 2026, Oracle and/or its affiliates 16 OS/CPU ソースコード
17. .wasmバイナリを実際に動かすための「実行エンジン」 Wasm runtimeの役割 • .wasmバイナリを受け取り、CPUが直接実行できる機械語に変換して動かすソフトウェア • OS・CPUの違いをランタイムが吸収するため同じ.wasmがどの環境でも動く 補足 – Wasm runtimeについて （1/2） Copyright © 2026, Oracle and/or its affiliates 17 Wasm Runtime OS/CPU Copyright © 2026, Oracle and/or its affiliates
18. 主なWasm Runtimeの種類 補足 – Wasm runtimeについて （2/2） Copyright © 2026, Oracle and/or its affiliates 18 サーバー向け（開発者が任意で選択） Wasmtime ➡ セキュリティと安定性が重要な本番環境向け Wasmer ➡ Rust製のオープンソース ブラウザ向け（Runtime選択不要） V8 ：Chrome./Edge/Node.js SpiderMonkey：Firefox
19. どうやって使う？
20. どの言語でも Wasm にするには コンパイラが必要 どうやって使う？ Copyright © 2026, Oracle and/or its affiliates 20 言語 必要なSDKの一例 コマンド例 C / C++ Emscripten（別途インストール） emcc main.c -o main.wasm Rust wasm-pack（別途インストール） wasm-pack build Cargo（Rust 標準のビルドツール）で ターゲット追加 cargo build --target wasm32-wasip1 Go 追加インストール不要・標準対応 環境変数を設定するだけで Wasm バイナリが出力可能 GOOS=js GOARCH=wasm
21. Get start Wasm
22. Live Demo Rust → Wasm → Browser wasm-pack公式参考：https://drager.github.io/wasm-pack/book/quickstart.html Wasm-pack： RustのコードをWebAssemblyにビルドするためのツール 前提 • Oracle Linux 9 • RustはInstall済/Cargoでプロジェクト作成済み • Cargo.tomlに以下を記載 • crate-type = ["cdylib"] • wasm-bindgen=0.2 Rust→WasmにコンパイルしHello Wasm!をしてみる Copyright © 2026, Oracle and/or its affiliates 22 …
23. Live Demo Rust → Wasm → Browser ①Rust で Hello関数を実装 ②Rust→Wasmにビルド ③HTML/JavaScriptを 記述 src / lib.rs #[wasm_bindgen] pub fn hello() -> String { "Hello Wasm!".to_string() } #[wasm_bindgen] は JavaScriptとRustをブリッジする ためのライブラリ $ wasm-pack build --target web pkg / *.wasm Wasmバイナリ本体 ブラウザが実行 *.js JavaScriptによる Wasmラッパー index.html Hello Wasm! import init, { hello } from "./pkg/hello_wasm.js"; Rustで書いた hello() 関数を 呼び出す Rust→WasmにコンパイルしHello Wasm!をしてみる … Copyright © 2026, Oracle and/or its affiliates 23 出力
24. まとめ
25. Wasmとはブラウザやサーバ上で高速・安全に実行できるバイナリ形式のこと Wasmの特徴3つ • Fast • コンパイル済みのバイナリ形式で配信することでネイティブに 近い速度で実行できる • Safe • サンドボックス内で動作し、OSやファイルへの直接アクセスを遮断。 外部へのアクセスはWASI経由のみ • Portable • C / Rust / Go・・・ などから一度コンパイルすれば、OS・CPUを問わず ブラウザでもサーバーでも同じバイナリが動く まとめ Copyright © 2026, Oracle and/or its affiliates 25 OS/CPU WASI Wasm Runtime