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
WebAssembly Hands-on! ~ powered by Dev Containe...
Search
Naoya
November 17, 2022
Programming
0
57
WebAssembly Hands-on! ~ powered by Dev Containers ~
Naoya
November 17, 2022
Tweet
Share
More Decks by Naoya
See All by Naoya
スクラムを成功へ導くマインド
nakir323
1
76
やさしいチームトポロジー
nakir323
42
6.2k
マスタリング Credit Card
nakir323
0
130
正しいスクラムを正しく行う
nakir323
0
180
Other Decks in Programming
See All in Programming
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
150
CSC305 Lecture 01
javiergs
PRO
1
380
半自動E2Eで手っ取り早くリグレッションテストを効率化しよう
beryu
6
2.4k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
2
1.2k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
350
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
imaizume
0
190
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
私はどうやって技術力を上げたのか
yusukebe
42
17k
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
110
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.7k
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
840
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
970
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Side Projects
sachag
455
43k
The Invisible Side of Design
smashingmag
301
51k
For a Future-Friendly Web
brad_frost
180
9.9k
Balancing Empowerment & Direction
lara
4
670
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Context Engineering - Making Every Token Count
addyosmani
3
150
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
WebAssembly Hands-on! ~ powered by Dev Containers ~
▹ WebAssemblyを知る ▹ Dev Containersを知る ▹ ついでにRustの雰囲気をつかむ Purpose 2
▹ 基礎知識(座学) ▹ ハンズオン! ▹ まとめ Agenda 3
1. 基礎知識 各用語をざっくりと解説
WebAssembly? ウェブ...のアセンブリ...? 5
6 ▹ ブラウザで動作するハイパフォーマ ンスなコード ▹ バイナリ(.wasm)の手前に人が読め る中間表現であるテキスト形式 (.wat)がある ▹ C/C++やRustのコンパイル対象と
なっている ▹ jsから.wasmを呼び出して実行する WebAssembly 6 .watの例 https://developer.mozilla.org/ja/docs/WebAssembly/Understa nding_the_text_format .wasmをjsから呼び出す例 https://developer.mozilla.org/ja/docs/WebAssembly/Understa nding_the_text_format
Dev Containers? 開発用のコンテナ...? 7
Dev Containersの概念図 https://code.visualstudio.com/docs/devcontainers/containers 8 ▹ VSCodeのextension ▹ Dockerコンテナを開発環境として利 用できる ▹
extensionやコード補完もコンテナ 内で動作 ▹ VSCodeのterminalもコンテナ内で 実行される ▹ extensionを含めた開発環境の共有 が容易に Dev Containers 8
2. Hands-on! Rustからwasmを生成しjsで 読み込みhello worldするの巻
10 1. VSCode Dev ContainersでRustの開発環境を作る 2. Rustのコードを記述 3. .wasmにコンパイル 4.
JSから呼び出して、hello world! Hands-on Outline 10
11 VSCodeにDev Containers extensionをインストール ms-vscode-remote.remote-containers Step 1 11
12 wasm-rust(任意)というフォルダを作ってVSCode開き、 Dockerfileを作り、FROM rust:1.65.0と記述 Step 2 12
左下の緑色の><を押下、 → Open Folder in Container... → wasm-rust → Existing
Dockerfile 13 Step 3 13
VSCodeのterminalで下記を実行 $ cargo install wasm-pack 14 Step 4 14 ※CargoはRustのビルドシステム兼パッケージマネージャ
https://doc.rust-jp.rs/book-ja/ch01-03-hello-cargo.html
下記の通りフォルダ/ファイルを作成 15 Step 5 15 wasm-rust/ ├ index.html ├ Cargo.toml
└ src/ └ lib.rs
[package] name = "wasm-rust" version = "0.1.0" edition = "2021"
[lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" 下記の通りCargo.tomlを記述 16 Step 6 16
use wasm_bindgen::prelude::*; #[wasm_bindgen] extern { pub fn alert(s: &str); }
#[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("hello {}", name)); } 下記の通りlib.rsを記述 17 Step 7 17
VSCodeのterminalで下記を実行 $ wasm-pack build --target web 18 Step 8 18
<!DOCTYPE html> <html lang="en-US"> <head><meta charset="utf-8"></head> <body> <script type="module"> import
init, { greet } from "./pkg/wasm_rust.js"; init() .then(() => { greet("world") }); </script> </body> </html> 下記の通りindex.htmlを記述 19 Step 9 19
20 Live Server extensionをインストール。 ritwickdey.liveserver Step 10 20
index.htmlを右クリック → Open with Live Serverを選択 21 Step 11 21
🎉🎉🎉 22 Step 12 22
3. Summary さらっと要点まとめ
▹ Rustをコンパイルすると.wasmを生成できる ■ wasm-packなら、ついでにそれを呼び出 す.jsも作れる ▹ Dev Containersで楽に開発環境を作れる ■ 新たに言語を試すのがとても楽
▹ jsからWebAssembly.instantiate()等を使う ことで.wasmからexportした関数を呼び出せる Summary 24
興味が出た人向けの小ネタ 4. Appendix
▹ 実はブラウザだけじゃなくNode.jsでもWebAssemblyオブジェクトが使える ■ https://developer.mozilla.org/en-US/docs/WebAssembly#browser_com patibility ▹ Google EarthはWebAssemblyで作られている ■ https://medium.com/google-earth/google-earth-comes-to-more-brows
ers-thanks-to-webassembly-1877d95810d6 ▹ .watを手書きしている記事 ■ https://www.kabuku.co.jp/developers/webassembly ▹ 最速でWebAssemblyだけ試すならこちら(ChromeのConsoleいじるだけ) ■ https://nulab.com/ja/blog/nulab/basic-webassembly-begginer/ 26 Appendix 26
▹ 生成された /pkg/wasm_rust.jsの中で、wasm_rust_bg.wasmを呼び出したり、 WebAssembly.instantiate()しているので見てみると良いかも。 ▹ 現状、.wasmはjs経由でないとブラウザでは実行できない。 ▹ Yew等のRustのみでUIまで構築できるframeworkもあるみたい ■ https://zenn.dev/azukiazusa/articles/rust-base-web-front-fremework
-yew 27 Appendix 27