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
720
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
640
Apple HIG 正式名称クイズ結果発表 / HIG Quiz Result
usamik26
0
190
ゆめみ大技林製作委員会の立ち上げの話 / daigirin project
usamik26
0
330
@ViewLoadingプロパティラッパの紹介と自前で実装する方法 / @ViewLoading property wrapper implementation
usamik26
0
480
これからUICollectionViewを実践活用する人のためのガイド / Guide to UICollectionView
usamik26
1
750
Xcodeとの最近の付き合い方のはなし / Approach To Xcode
usamik26
2
670
UICollectionView Compositional Layout
usamik26
0
800
Coding Swift with Visual Studio Code and Docker
usamik26
0
520
Swift Extension for Visual Studio Code
usamik26
2
1k
Other Decks in Programming
See All in Programming
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
QA x AIエコシステム段階構築作戦
osu
0
140
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.3k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
700
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
27
8k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.2k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
690
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
690
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
Docker and Python
trallard
45
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Done Done
chrislema
184
16k
GitHub's CSS Performance
jonrohan
1031
460k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
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