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

WHOAMI asuka ● 株式会社モニクル所属 SWE ○ 技術書典17: Monicle Techbook vol.1 ● Wasm関連の同人誌・商業誌を執筆 ○ ご注文はWASIですか?? ○ Wasm Cookbook vol.2 ○ 実践入門WebAssembly ○ WebAssembly System Interface入門 SNSなどでは「Wasmの人」になりつつある 2 //おすすめ\\

WHOAMI 3 asuka ● 学生時代 ○ Golang推し，Flutterを使ったモバイルアプリケーション開発 ● 新卒(2020年〜) ○ PHP，Golangなどを使ったウェブアプリケーション開発 ● 株式会社モニクル (2023年〜) ○ TypeScript，Rustなどを使ったウェブアプリケーション開発 ● FlutterKaigiスタッフ (2023年〜) ● Rust.Tokyoスタッフ (2023年〜) ● 関数型まつりスタッフ (来年やります!)

フロントエンドカンファレンス北海道 初レギュラートークで Wasmの話をする Wasmとの関わり 4 2022年 2023年 2024年 マルチプラットフォームに興味があり 「Dart良いかも」と持っていた時期 マルチプラットフォームやるなら 「Wasm良いかも」とWasmに興味を持つ 技術書典14 初めてWasmの同人誌を書く 技術書典15 Wasmの同人誌を書く 技術書典16 Wasmの同人誌を書く 技術書典17 Wasmの同人誌を書く 初めて Wasmの商業誌を書く Wasmの商業誌を書く 初めての転職 Wasmトークで内定 新宿御苑.wasm

Q. あなたのWasmはどこから? 5

A. 私はマルチプラットフォームから 6

Wasmは良いぞ!! 7

今日話すこと 8 ● Wasmってなに? ● Wasmの何が良いのか ○ 活用事例など ● Wasmを動かしてみる ○ どうやって動かす? ● 身の回りにあるWasm

Wasmってなに? 9

Wasmってなに? 10 Wasm (WebAssembly)とは，ブラウザーなどで動作させることを目的としたバイ ナリフォーマットの実行ファイル形式 (とその仮想マシン)のことです． 実践入門WebAssembly 第1章より

Wasmってなに? 11 WebAssembly は最近のウェブブラウザーで動作し、 新たな機能と大幅なパ フォーマンス向上を提供する新しい種類のコードです。 基本的に直接記述ではな く、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるよう に設計されています。 MDN WebAssembly の概要 より Wasm (WebAssembly)とは，ブラウザーなどで動作させることを目的としたバイ ナリフォーマットの実行ファイル形式 (とその仮想マシン)のことです． 実践入門WebAssembly 第1章より

Wasmってなに? 12 キーワード ● バイナリフォーマット ● 仮想マシン (Virtual Machine) ● コンパイル対象 (ターゲット)

Wasmってなに? 仮想マシン ● Wasm ● JVM 13 物理マシン ● x86_64 / amd64 ● Aarch64 / arm64 実際のCPUのバイナリ命令 → 直接実行できる 仮想CPUのバイナリ命令 → 実行するためのランタイムが必要

Wasmってなに? 14 Windows x86_64 Linux amd64 macOS Aarch64 コンパイルターゲット Goで書かれた プログラム コンパイル (ビルド) x86_64のCPUアーキテクチャの Windowsでしか動かない amd64のCPUアーキテクチャの Linuxでしか動かない Aarch64のCPUアーキテクチャの macOSでしか動かない

Wasmってなに? 15 Windows x86_64 Linux amd64 macOS Aarch64 Wasm コンパイルターゲット Goで書かれた プログラム コンパイル (ビルド) x86_64のCPUアーキテクチャの Windowsでしか動かない amd64のCPUアーキテクチャの Linuxでしか動かない Aarch64のCPUアーキテクチャの macOSでしか動かない

Wasmってなに? 16 Windows x86_64 Linux amd64 macOS Aarch64 Wasm コンパイルターゲット Goで書かれた プログラム コンパイル (ビルド) Windows x86_64 Linux amd64 macOS Aarch64 ブラウザ ランタイムがあれば どこでも動かせる

Wasmの何が良いのか 17

Wasmの何が良いのか 18 ● JavaScriptより速い ○ デスクトップでもモバイルでも， Wasmは安定して速い ○ AOTコンパイルの場合，ネイティブと変わらない実行速度にも ... ● どこでも動く ○ VMなので，ランタイムがあればどこでも動く ● 安全に実行できる ○ Wasmは初めからサンドボックスとして設計されている ○ Wasmがサンドボックスであることを利用して，プラグイン用途でも利用されている この3つが揃っていて，かつブラウザ上でも動くのがWasmのすごいところ

Wasmの何が良いのか 19 高速で安全に実行できるなら ... Linuxコンテナの代替になるんじゃないか ? プラグインに適しているんじゃないか ? ブラウザ上でも高速に実行できるなら ... サーバーでしかできなかった処理を ブラウザ上に移植できるんじゃないか ? コンパイルターゲットの 1つということは... JavaScript以外の言語でも ウェブアプリケーションを作れるんじゃないか ? Wasmを使うことで特定の言語に依存しない マルチプラットフォームを実現できるんじゃないか ?

高速で安全に実行できる 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日目の記事

ブラウザ上にサーバー実装を移植 ● ブラウザ上でExcelファイルを扱う ○ Wasm Cookbook vol.2 第4章で紹介 ○ GitHub - qax-os/excelize 21

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! { "Click me: " {count} } }

JavaScript以外のウェブアプリケーション開発 e.g. C# Blazor | Build client web apps with C# | .NET Microsoft製のウェブフロントエンドフレームワーク 23

Current count: @currentCount

Click me @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }

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 Wasm コンパイルターゲット コンパイル (ビルド) Windows x86_64 Linux amd64 macOS Aarch64 ブラウザ ランタイムがあれば どこでも動かせる Goで書かれた プログラム Javaで書かれ たプログラム Dartで書かれ たプログラム Rustで書かれ たプログラム Goで書かれたライブラリを Rustから呼び出して実行する といったことができるようになってきている

Wasmを動かしてみる 26

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などを直接用いることができない

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); この辺りのコードを書くのが大変

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!") }

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

コンポーネントモデル IDL (WIT)と対応するABIを定義し，言語の枠を超えたWasmの相互運用を可能とする 仕組み 31 package web:exec; interface env { console-log: func(msg: string); } Goのコードを 生成 Rustのコード を生成 インターフェース定義 (WIT) Go→Wasm Rust→Wasm import 実装言語に関係なく，Wasmコンポーネントを利 用できる仕組み開発が進行中

コンポーネントモデル IDL (WIT)と対応するABIを定義し，言語の枠を超えたWasmの相互運用を可能とする 仕組み ● Wasm Cookbook vol.2 ○ WITからTSとRustのコード生成し，VSCodeの拡張機能を実装する 方法の紹介 ● TinyGoを使ったVSCode拡張機能実装 - Speaker Deck ○ VSCodeの拡張機能実装のGo版 32

最新のWasmの動向 33 ● コンポーネントモデル ○ GraphQLやProtocolBufferに近い開発体験がWasmにもたらされようとしている ● WASI 0.2の仕様リリース ○ Wasmのコンポーネントモデルをベースにしている ● Wasmレジストリ ○ https://wa.dev/ ○ Wasm版パッケージマネージャー 特定のプログラミング言語に依存しない Wasmのエコシステム周りの話題が多かった この辺りの話題を扱っています

身の回りにあるWasm 34

身の回りにあるWasm ● Google Meet ○ リアルタイムの画像処理 ● Figma ○ C++で実装→ブラウザ版はWasm ● Flutter for Web ○ レンダリングエンジンに Wasmを使用 ● IoTなどの組み込み機器 ○ マイコンの仕様をWasmを使って抽象化 ● レトロゲームズ | カプコンタウン ○ ブラウザ上でで遊べるストリートファイター ● DuckDB-Wasm ○ DuckDB/DuckDB-Wasm を利用した低コストでの可視化 35

Wasmは発展途上の技術 36

Wasmの情報収集 ● WebAssembly / Wasm Advent Calendar 2024 ○ 旬の情報が集まってます & 参加歓迎してます ● Bytecode Alliance ○ Newsとか見てると最新情報降ってくるかも ● asuka (@a_skua) / X ○ Wasmの情報収集している人をウォッチする ● 新宿御苑.dev ○ 新宿御苑.wasm，少なくとも年4回は開催したい 37

新宿御苑.wasm #2024.12.11 38