KyotoLT Online 第28回 https://kyotolt.connpass.com/event/265234/
Rust+WebAssemblyをさわってみた話宇佐見公輔2022-12-09
View Slide
自己紹介宇佐見公輔(うさみこうすけ)株式会社ゆめみ / iOSテックリード大阪在住、最寄のゆめみオフィスは京都KyotoLT参加2回目Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 2
Rust+WebAssemblyRustから見た場合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 MeetGoogle EarthFigmaeBayなど……Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 7
WebAssemblyバイナリRust+WebAssemblyをさわってみた話 / 宇佐見公輔 8
WebAssemblyバイナリmagic ::= 0x00 0x61 0x73 0x6Dversion ::= 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 42call $i))Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 11
EmscriptenC/C++コンパイラの代わりにEmscriptenコンパイラを使うemcc hello.c -o hello.html(wasm、js、htmlを生成)#include int main() {printf("Hello World\n");return 0;}Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 12
Rust wasm-packcargo 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
AssemblyScriptTypeScriptのサブセットAssemblyScriptはWebAssemblyにコンパイルされるasc sample.ts --outFile sample.wasm対比:TypeScriptはJavaScriptにトランスパイルされるtsc sample.ts --outFile sample.jsRust+WebAssemblyをさわってみた話 / 宇佐見公輔 14
RustでWebAssemblyバイナリを生成Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 15
環境準備Rust環境の準備rustupでrustcやcargoのインストールwasm-pack導入cargo install wasm-packRust+WebAssemblyをさわってみた話 / 宇佐見公輔 16
プロジェクト作成プロジェクト作成cargo new --libCargo.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のロード<br/>import init, {greet} from "./pkg/hello_wasm.js";<br/>init()<br/>.then(() => {<br/>greet("WebAssembly")<br/>});<br/>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 Docshttps://developer.mozilla.org/ja/docs/WebAssemblyRust and WebAssembly Documentationhttps://rustwasm.github.io/docs.html入門WebAssembly(Rick Battagline、翔泳社)Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 24