Rust＋WebAssemblyをさわってみた話 / rust-webassembly

Rust＋WebAssemblyをさわってみた話宇佐見公輔 2022-12-09

自己紹介宇佐見公輔（うさみこうすけ）株式会社ゆめみ / iOSテックリード大阪在住、最寄のゆめみオフィスは京都 KyotoLT参加2回目 Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔
2

Rust＋WebAssembly Rustから見た場合 Rust言語の活用方法のひとつとして RustでWebフロントエンド開発ができる WebAssemblyから見た場合 WebAssembly形式を生成する手段のひとつとしてコンパクトかつ高パフォーマンスなwasmバイナリを生成できる Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔
3

WebAssemblyとは Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 4

WebAssemblyとは Webブラウザー上で実行できるバイナリ形式かつてJavaもやっていたが…… ブラウザーに組み込まれた仮想マシン上で実行される JavaScriptも仮想マシン上で実行される WebAssemblyのほうが高速に動作する Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 5

JavaScriptとWebAssembly 両者を併用する WebAssemblyですべてをカバーはできない WebAssemblyでJavaScriptを補強する JavaScriptからWebAssemblyの関数を呼び出せる WebAssemblyからJavaScriptの関数を呼び出せる Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 6

WebAssemblyの事例 Google Meet Google Earth Figma eBay など…… Rust＋WebAssemblyをさわってみた話 /
宇佐見公輔 7

WebAssemblyバイナリ Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 8

WebAssemblyバイナリ magic ::= 0x00 0x61 0x73 0x6D version ::= 0x01
0x00 0x00 0x00 （参考：ELFバイナリだと先頭4バイトは 0x7F 0x45 0x4C 0x46 ） Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 9

WebAssemblyバイナリの生成方法 WebAssemblyテキストを記述して生成する C/C++ソースコードからEmscriptenで生成する Rustソースコードからwasm-packで生成する AssemblyScriptソースコードから生成する Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 10

WebAssemblyテキスト WABT（WebAssembly Binary Toolkit）でバイナリに変換 wat2wasm simple.wat -o simple.wasm (module (func
$i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i ) ) Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 11

Emscripten C/C++コンパイラの代わりにEmscriptenコンパイラを使う emcc hello.c -o hello.html （wasm、js、htmlを生成） #include <stdio.h> int
main() { printf("Hello World\n"); return 0; } Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 12

Rust wasm-pack cargo buildの代わりにwasm-packツールでビルドする wasm-pack build --target web （wasm、jsを生成） use
wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("Hello, {}!", name)); } Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 13

AssemblyScript TypeScriptのサブセット AssemblyScriptはWebAssemblyにコンパイルされる asc sample.ts --outFile sample.wasm 対比：TypeScriptはJavaScriptにトランスパイルされる tsc sample.ts
--outFile sample.js Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 14

RustでWebAssemblyバイナリを生成 Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 15

環境準備 Rust環境の準備 rustup で rustc や cargo のインストール wasm-pack導入 cargo
install wasm-pack Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 16

プロジェクト作成プロジェクト作成 cargo new --lib Cargo.toml 設定 [lib] crate-type =
["cdylib"] [dependencies] wasm-bindgen = "0.2" Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 17

RustからJavaScriptの関数を呼ぶ #[wasm_bindgen] extern { pub fn alert(s: &str); } これで
alert がRustから呼べるようになる alert はJavaScriptで提供される関数 Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 18

JavaScriptからRustの関数を呼ぶ #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("Hello, {}!", name));
} これで greet がJavaScriptから呼べるようになる greet はRustで実装した関数先ほどの alert をRustで使っている Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 19

WebAssemblyのビルド wasm-packでビルド wasm-pack build --target web 生成物 WebAssemblyバイナリ JavaScriptファイル（WebAssemblyのラッパー） Rust＋WebAssemblyをさわってみた話
/ 宇佐見公輔 20

WebAssemblyのロード <body> <script type="module"> import init, {greet} from "./pkg/hello_wasm.js"; init()
.then(() => { greet("WebAssembly") }); </script> </body> Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 21

Webサーバーの準備と実行 MIMEタイプ application/wasm に対応したWebサーバーの準備 python3 -m http.server で良い Webブラウザーでアクセス http://localhost:8000
うまくいけばアラートボックスが表示される Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 22

より実践的なチュートリアル Conwayのライフゲーム The Rust Wasm Book https://rustwasm.github.io/docs/book/ Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔
23

情報源 WebAssembly | MDN Web Docs https://developer.mozilla.org/ja/docs/WebAssembly Rust and WebAssembly
Documentation https://rustwasm.github.io/docs.html 入門WebAssembly（Rick Battagline、翔泳社） Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 24

Rust＋WebAssemblyをさわってみた話 / rust-webassembly

Rust＋WebAssemblyをさわってみた話 / rust-webassembly

USAMI Kosuke

More Decks by USAMI Kosuke

Other Decks in Programming

Featured

Transcript

Rust＋WebAssemblyをさわってみた話宇佐見公輔 2022-12-09

自己紹介宇佐見公輔（うさみこうすけ）株式会社ゆめみ / iOSテックリード大阪在住、最寄のゆめみオフィスは京都 KyotoLT参加2回目 Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔

WebAssemblyとは Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 4

WebAssemblyの事例 Google Meet Google Earth Figma eBay など…… Rust＋WebAssemblyをさわってみた話 /

WebAssemblyバイナリ Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 8

WebAssemblyバイナリ magic ::= 0x00 0x61 0x73 0x6D version ::= 0x01

WebAssemblyテキスト WABT（WebAssembly Binary Toolkit）でバイナリに変換 wat2wasm simple.wat -o simple.wasm (module (func

Emscripten C/C++コンパイラの代わりにEmscriptenコンパイラを使う emcc hello.c -o hello.html （wasm、js、htmlを生成） #include <stdio.h> int

Rust wasm-pack cargo buildの代わりにwasm-packツールでビルドする wasm-pack build --target web （wasm、jsを生成） use

AssemblyScript TypeScriptのサブセット AssemblyScriptはWebAssemblyにコンパイルされる asc sample.ts --outFile sample.wasm 対比：TypeScriptはJavaScriptにトランスパイルされる tsc sample.ts

RustでWebAssemblyバイナリを生成 Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔 15

環境準備 Rust環境の準備 rustup で rustc や cargo のインストール wasm-pack導入 cargo

プロジェクト作成プロジェクト作成 cargo new --lib Cargo.toml 設定 [lib] crate-type =

RustからJavaScriptの関数を呼ぶ #[wasm_bindgen] extern { pub fn alert(s: &str); } これで

JavaScriptからRustの関数を呼ぶ #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("Hello, {}!", name));

WebAssemblyのビルド wasm-packでビルド wasm-pack build --target web 生成物 WebAssemblyバイナリ JavaScriptファイル（WebAssemblyのラッパー） Rust＋WebAssemblyをさわってみた話

WebAssemblyのロード <body> <script type="module"> import init, {greet} from "./pkg/hello_wasm.js"; init()

Webサーバーの準備と実行 MIMEタイプ application/wasm に対応したWebサーバーの準備 python3 -m http.server で良い Webブラウザーでアクセス http://localhost:8000

より実践的なチュートリアル Conwayのライフゲーム The Rust Wasm Book https://rustwasm.github.io/docs/book/ Rust＋WebAssemblyをさわってみた話 / 宇佐見公輔

情報源 WebAssembly | MDN Web Docs https://developer.mozilla.org/ja/docs/WebAssembly Rust and WebAssembly