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
53
WebAssembly Hands-on! ~ powered by Dev Containers ~
Naoya
November 17, 2022
Tweet
Share
More Decks by Naoya
See All by Naoya
スクラムを成功へ導くマインド
nakir323
1
74
やさしいチームトポロジー
nakir323
34
5.8k
マスタリング Credit Card
nakir323
0
130
正しいスクラムを正しく行う
nakir323
0
180
Other Decks in Programming
See All in Programming
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
600
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
420
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
240
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
300
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
技術同人誌をMCP Serverにしてみた
74th
1
510
VS Code Update for GitHub Copilot
74th
1
550
エラーって何種類あるの?
kajitack
5
330
ふつうの技術スタックでアート作品を作ってみる
akira888
0
290
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
For a Future-Friendly Web
brad_frost
179
9.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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