Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rust+WebAssemblyをさわってみた話 / rust-webassembly
Search
USAMI Kosuke
December 09, 2022
Programming
0
600
Rust+WebAssemblyをさわってみた話 / rust-webassembly
※ Docswell に移行しました
https://www.docswell.com/s/usami-k/ZM1Y1L-rust-webassembly
USAMI Kosuke
December 09, 2022
Tweet
Share
More Decks by USAMI Kosuke
See All by USAMI Kosuke
Onsager代数とその周辺 / Onsager algebra tsudoi
usamik26
0
470
Apple HIG 正式名称クイズ結果発表 / HIG Quiz Result
usamik26
0
80
ゆめみ大技林製作委員会の立ち上げの話 / daigirin project
usamik26
0
260
@ViewLoadingプロパティラッパの紹介と自前で実装する方法 / @ViewLoading property wrapper implementation
usamik26
0
400
これからUICollectionViewを実践活用する人のためのガイド / Guide to UICollectionView
usamik26
1
650
Xcodeとの最近の付き合い方のはなし / Approach To Xcode
usamik26
2
560
UICollectionView Compositional Layout
usamik26
0
610
Coding Swift with Visual Studio Code and Docker
usamik26
0
400
Swift Extension for Visual Studio Code
usamik26
2
810
Other Decks in Programming
See All in Programming
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
유연한 Composable 설계
l2hyunwoo
0
380
How to use Macrobenchmark
veronikapj
0
160
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
CSC307 Lecture 12
javiergs
PRO
0
220
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Featured
See All Featured
How to name files
jennybc
67
96k
Why Our Code Smells
bkeepers
PRO
332
56k
We Have a Design System, Now What?
morganepeng
46
7k
A Tale of Four Properties
chriscoyier
155
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
BBQ
matthewcrist
82
9k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
A better future with KSS
kneath
231
17k
Automating Front-end Workflow
addyosmani
1362
200k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
For a Future-Friendly Web
brad_frost
173
9.2k
Transcript
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