Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Wasmは良いぞ!! 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Wasmってなに? 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Wasmの何が良いのか 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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} } }

Slide 23

Slide 23 text

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++; } }

Slide 24

Slide 24 text

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'), ), ), ); } }

Slide 25

Slide 25 text

特定の言語に依存しないマルチプラットフォーム 25 Wasm コンパイルターゲット コンパイル (ビルド) Windows x86_64 Linux amd64 macOS Aarch64 ブラウザ ランタイムがあれば どこでも動かせる Goで書かれた プログラム Javaで書かれ たプログラム Dartで書かれ たプログラム Rustで書かれ たプログラム Goで書かれたライブラリを Rustから呼び出して実行する といったことができるようになってきている

Slide 26

Slide 26 text

Wasmを動かしてみる 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

身の回りにあるWasm 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Wasmは発展途上の技術 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

新宿御苑.wasm #2024.12.11 38