Wasmってなに_ 新宿御苑.wasm #2024.12.11

https://shinjukugyoen.connpass.com/event/338017/

Transcript

1. Wasmってなに? 新宿御苑.wasm #2024.12.11
2. WHOAMI asuka • 株式会社モニクル所属 SWE ◦ 技術書典17: Monicle Techbook vol.1 • Wasm関連の同人誌・商業誌を執筆 ◦ ご注文はWASIですか?? ◦ Wasm Cookbook vol.2 ◦ 実践入門WebAssembly ◦ WebAssembly System Interface入門 SNSなどでは「Wasmの人」になりつつある 2 //おすすめ\\
3. WHOAMI 3 asuka • 学生時代 ◦ Golang推し，Flutterを使ったモバイルアプリケーション開発 • 新卒(2020年〜) ◦ PHP，Golangなどを使ったウェブアプリケーション開発 • 株式会社モニクル (2023年〜) ◦ TypeScript，Rustなどを使ったウェブアプリケーション開発 • FlutterKaigiスタッフ (2023年〜) • Rust.Tokyoスタッフ (2023年〜) • 関数型まつりスタッフ (来年やります!)
4. フロントエンドカンファレンス北海道 初レギュラートークで Wasmの話をする Wasmとの関わり 4 2022年 2023年 2024年 マルチプラットフォームに興味があり 「Dart良いかも」と持っていた時期 マルチプラットフォームやるなら 「Wasm良いかも」とWasmに興味を持つ 技術書典14 初めてWasmの同人誌を書く 技術書典15 Wasmの同人誌を書く 技術書典16 Wasmの同人誌を書く 技術書典17 Wasmの同人誌を書く 初めて Wasmの商業誌を書く Wasmの商業誌を書く 初めての転職 Wasmトークで内定 新宿御苑.wasm
5. Q. あなたのWasmはどこから? 5
6. A. 私はマルチプラットフォームから 6
7. Wasmは良いぞ!! 7
8. 今日話すこと 8 • Wasmってなに? • Wasmの何が良いのか ◦ 活用事例など • Wasmを動かしてみる ◦ どうやって動かす? • 身の回りにあるWasm
9. Wasmってなに? 9
10. Wasmってなに? 10 Wasm (WebAssembly)とは，ブラウザーなどで動作させることを目的としたバイ ナリフォーマットの実行ファイル形式 (とその仮想マシン)のことです． 実践入門WebAssembly 第1章より
11. Wasmってなに? 11 WebAssembly は最近のウェブブラウザーで動作し、 新たな機能と大幅なパ フォーマンス向上を提供する新しい種類のコードです。 基本的に直接記述ではな く、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるよう に設計されています。 MDN WebAssembly の概要 より Wasm (WebAssembly)とは，ブラウザーなどで動作させることを目的としたバイ ナリフォーマットの実行ファイル形式 (とその仮想マシン)のことです． 実践入門WebAssembly 第1章より
12. Wasmってなに? 12 キーワード • バイナリフォーマット • 仮想マシン (Virtual Machine) • コンパイル対象 (ターゲット)
13. Wasmってなに? 仮想マシン • Wasm • JVM 13 物理マシン • x86_64 / amd64 • Aarch64 / arm64 実際のCPUのバイナリ命令 → 直接実行できる 仮想CPUのバイナリ命令 → 実行するためのランタイムが必要
14. Wasmってなに? 14 Windows x86_64 Linux amd64 macOS Aarch64 コンパイルターゲット Goで書かれた プログラム コンパイル (ビルド) x86_64のCPUアーキテクチャの Windowsでしか動かない amd64のCPUアーキテクチャの Linuxでしか動かない Aarch64のCPUアーキテクチャの macOSでしか動かない
15. Wasmってなに? 15 Windows x86_64 Linux amd64 macOS Aarch64 Wasm コンパイルターゲット Goで書かれた プログラム コンパイル (ビルド) x86_64のCPUアーキテクチャの Windowsでしか動かない amd64のCPUアーキテクチャの Linuxでしか動かない Aarch64のCPUアーキテクチャの macOSでしか動かない
16. Wasmってなに? 16 Windows x86_64 Linux amd64 macOS Aarch64 Wasm コンパイルターゲット Goで書かれた プログラム コンパイル (ビルド) Windows x86_64 Linux amd64 macOS Aarch64 ブラウザ ランタイムがあれば どこでも動かせる
17. Wasmの何が良いのか 17
18. Wasmの何が良いのか 18 • JavaScriptより速い ◦ デスクトップでもモバイルでも， Wasmは安定して速い ◦ AOTコンパイルの場合，ネイティブと変わらない実行速度にも ... • どこでも動く ◦ VMなので，ランタイムがあればどこでも動く • 安全に実行できる ◦ Wasmは初めからサンドボックスとして設計されている ◦ Wasmがサンドボックスであることを利用して，プラグイン用途でも利用されている この3つが揃っていて，かつブラウザ上でも動くのがWasmのすごいところ
19. Wasmの何が良いのか 19 高速で安全に実行できるなら ... Linuxコンテナの代替になるんじゃないか ? プラグインに適しているんじゃないか ? ブラウザ上でも高速に実行できるなら ... サーバーでしかできなかった処理を ブラウザ上に移植できるんじゃないか ? コンパイルターゲットの 1つということは... JavaScript以外の言語でも ウェブアプリケーションを作れるんじゃないか ? Wasmを使うことで特定の言語に依存しない マルチプラットフォームを実現できるんじゃないか ?
20. 高速で安全に実行できる 20 • Linuxコンテナの代替に ◦ Wasm OCI Artifact layout | CNCF TAG Runtime ◦ キーワード: WASI，コンポーネントモデル • プラグインシステム ◦ Microsoftが提供しているFlight Simulatorのプラグインプラットフォームとして Wasmを採用 ▪ WebAssembly (WASM) ◦ プロキシサーバ (envoy)のプラグイン ▪ Wasm (proto) — envoy 1.33.0-dev-0d5ec7 documentation ◦ Zellij ターミナルワークスペースが持つ Wasm プラグインシステム ▪ WebAssembly / Wasm Advent Calendar 2024 10日目の記事
21. ブラウザ上にサーバー実装を移植 • ブラウザ上でExcelファイルを扱う ◦ Wasm Cookbook vol.2 第4章で紹介 ◦ GitHub - qax-os/excelize 21
22. JavaScript以外のウェブアプリケーション開発 e.g. Rust マクロを使って，コード上に直接 HTMLタグを書く JSXのような開発体験がすである • Leptos • Yew ◦ Wasm Cookbook vol.2 第2章で紹介 22 #[component] pub fn Button() -> impl IntoView { let (count, set_count) = signal(0); view! { <button on:click=move |_| { set_count.update(|n| *n += 1); } > "Click me: " {count} </button> } }
23. JavaScript以外のウェブアプリケーション開発 e.g. C# Blazor | Build client web apps with C# | .NET Microsoft製のウェブフロントエンドフレームワーク 23 <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }
24. JavaScript以外のウェブアプリケーション開発 e.g. Dart Flutter そもそもDOMを扱わない フレームワークのレンダリングエンジン (Wasm)が Canvasをパワーで書き換える 24 void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: const Center( child: Text('Hello, Flutter'), ), ), ); } }
25. 特定の言語に依存しないマルチプラットフォーム 25 Wasm コンパイルターゲット コンパイル (ビルド) Windows x86_64 Linux amd64 macOS Aarch64 ブラウザ ランタイムがあれば どこでも動かせる Goで書かれた プログラム Javaで書かれ たプログラム Dartで書かれ たプログラム Rustで書かれ たプログラム Goで書かれたライブラリを Rustから呼び出して実行する といったことができるようになってきている
26. Wasmを動かしてみる 26
27. Wasmを動かしてみる $ GOOS=js GOARCH=wasm go build -o web.wasm ./web.go $ deno run --allow-read ./main.js Hello, Wasm! 27 package main import "unsafe" //go:wasmimport env console_log func log(ptr unsafe.Pointer, size int32) func main() { str := "Hello, Weasm!" log(unsafe.Pointer(unsafe.StringData(str)), int32(len(str))) } stringなどを直接用いることができない
28. Wasmを動かしてみる $ GOOS=js GOARCH=wasm go build -o web.wasm ./web.go $ deno run --allow-read ./main.js Hello, Wasm! 28 const { instance } = await WebAssembly.instantiateStreaming( fetch(new URL("./web.wasm", import.meta.url)), { env: { console_log: (ptr, len) => { const bytes = new Uint8Array(go.mem.buffer, ptr, len); console.log(new TextDecoder().decode(bytes)); }, }, ...go.importObject, }, ); go.run(instance); この辺りのコードを書くのが大変
29. Wasmを動かしてみる $ GOOS=wasip1 GOARCH=wasm go build -o hello.wasm ./hello.go $ wasmtime run ./hello.wasm Hello, Wasm! Wasmのランタイムはいくつかあるが，ここではWasmtimeを使用 29 package main import "fmt" func main() { fmt.Println("Hello, Wasm!") }
30. WASI WebAssembly System Interface • ファイルシステムや標準入出力など，システムコールの標準化を目指しているAPI 仕様 • ≒LinuxやmacOS，Windows • wasip1 : WASIプレビュー1，WASI 0.1 • wasip2 : WASIプレビュー2，WASI 0.2 • 背景 ◦ Wasmには計算する命令はあるが， OSレベルに該当するAPI仕様などが存在していない ◦ 独自にAPIを作れるが，それだとポータビリティが損なわれるので標準仕様を作っている 30
31. コンポーネントモデル IDL (WIT)と対応するABIを定義し，言語の枠を超えたWasmの相互運用を可能とする 仕組み 31 package web:exec; interface env { console-log: func(msg: string); } Goのコードを 生成 Rustのコード を生成 インターフェース定義 (WIT) Go→Wasm Rust→Wasm import 実装言語に関係なく，Wasmコンポーネントを利 用できる仕組み開発が進行中
32. コンポーネントモデル IDL (WIT)と対応するABIを定義し，言語の枠を超えたWasmの相互運用を可能とする 仕組み • Wasm Cookbook vol.2 ◦ WITからTSとRustのコード生成し，VSCodeの拡張機能を実装する 方法の紹介 • TinyGoを使ったVSCode拡張機能実装 - Speaker Deck ◦ VSCodeの拡張機能実装のGo版 32
33. 最新のWasmの動向 33 • コンポーネントモデル ◦ GraphQLやProtocolBufferに近い開発体験がWasmにもたらされようとしている • WASI 0.2の仕様リリース ◦ Wasmのコンポーネントモデルをベースにしている • Wasmレジストリ ◦ https://wa.dev/ ◦ Wasm版パッケージマネージャー 特定のプログラミング言語に依存しない Wasmのエコシステム周りの話題が多かった この辺りの話題を扱っています
34. 身の回りにあるWasm 34
35. 身の回りにあるWasm • Google Meet ◦ リアルタイムの画像処理 • Figma ◦ C++で実装→ブラウザ版はWasm • Flutter for Web ◦ レンダリングエンジンに Wasmを使用 • IoTなどの組み込み機器 ◦ マイコンの仕様をWasmを使って抽象化 • レトロゲームズ | カプコンタウン ◦ ブラウザ上でで遊べるストリートファイター • DuckDB-Wasm ◦ DuckDB/DuckDB-Wasm を利用した低コストでの可視化 35
36. Wasmは発展途上の技術 36
37. Wasmの情報収集 • WebAssembly / Wasm Advent Calendar 2024 ◦ 旬の情報が集まってます & 参加歓迎してます • Bytecode Alliance ◦ Newsとか見てると最新情報降ってくるかも • asuka (@a_skua) / X ◦ Wasmの情報収集している人をウォッチする • 新宿御苑.dev ◦ 新宿御苑.wasm，少なくとも年4回は開催したい 37
38. 新宿御苑.wasm #2024.12.11 38