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
usamik26
yuzuy
stewemetal
tomokusaba
skume
prof18
syossan27
horie1024
ymotongpoo
sagawa23
nearme_tech
azukiazusa1
ojun9
chriscoyier
bryan
danielanewman
chrisshort
hursman
kneath
addyosmani
garrettdimon
bkeepers
erikaheidi
rmw