Slide 1

Slide 1 text

WebAssembly Hands-on! ~ powered by Dev Containers ~

Slide 2

Slide 2 text

▹ WebAssemblyを知る ▹ Dev Containersを知る ▹ ついでにRustの雰囲気をつかむ Purpose 2

Slide 3

Slide 3 text

▹ 基礎知識(座学) ▹ ハンズオン! ▹ まとめ Agenda 3

Slide 4

Slide 4 text

1. 基礎知識 各用語をざっくりと解説

Slide 5

Slide 5 text

WebAssembly? ウェブ...のアセンブリ...? 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Dev Containers? 開発用のコンテナ...? 7

Slide 8

Slide 8 text

Dev Containersの概念図 https://code.visualstudio.com/docs/devcontainers/containers 8 ▹ VSCodeのextension ▹ Dockerコンテナを開発環境として利 用できる ▹ extensionやコード補完もコンテナ 内で動作 ▹ VSCodeのterminalもコンテナ内で 実行される ▹ extensionを含めた開発環境の共有 が容易に Dev Containers 8

Slide 9

Slide 9 text

2. Hands-on! Rustからwasmを生成しjsで 読み込みhello worldするの巻

Slide 10

Slide 10 text

10 1. VSCode Dev ContainersでRustの開発環境を作る 2. Rustのコードを記述 3. .wasmにコンパイル 4. JSから呼び出して、hello world! Hands-on Outline 10

Slide 11

Slide 11 text

11 VSCodeにDev Containers extensionをインストール ms-vscode-remote.remote-containers Step 1 11

Slide 12

Slide 12 text

12 wasm-rust(任意)というフォルダを作ってVSCode開き、 Dockerfileを作り、FROM rust:1.65.0と記述 Step 2 12

Slide 13

Slide 13 text

左下の緑色の><を押下、 → Open Folder in Container... → wasm-rust → Existing Dockerfile 13 Step 3 13

Slide 14

Slide 14 text

VSCodeのterminalで下記を実行 $ cargo install wasm-pack 14 Step 4 14 ※CargoはRustのビルドシステム兼パッケージマネージャ https://doc.rust-jp.rs/book-ja/ch01-03-hello-cargo.html

Slide 15

Slide 15 text

下記の通りフォルダ/ファイルを作成 15 Step 5 15 wasm-rust/ ├ index.html ├ Cargo.toml └ src/ └ lib.rs

Slide 16

Slide 16 text

[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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

VSCodeのterminalで下記を実行 $ wasm-pack build --target web 18 Step 8 18

Slide 19

Slide 19 text

import init, { greet } from "./pkg/wasm_rust.js"; init() .then(() => { greet("world") }); 下記の通りindex.htmlを記述 19 Step 9 19

Slide 20

Slide 20 text

20 Live Server extensionをインストール。 ritwickdey.liveserver Step 10 20

Slide 21

Slide 21 text

index.htmlを右クリック → Open with Live Serverを選択 21 Step 11 21

Slide 22

Slide 22 text

🎉🎉🎉 22 Step 12 22

Slide 23

Slide 23 text

3. Summary さらっと要点まとめ

Slide 24

Slide 24 text

▹ Rustをコンパイルすると.wasmを生成できる ■ wasm-packなら、ついでにそれを呼び出 す.jsも作れる ▹ Dev Containersで楽に開発環境を作れる ■ 新たに言語を試すのがとても楽 ▹ jsからWebAssembly.instantiate()等を使う ことで.wasmからexportした関数を呼び出せる Summary 24

Slide 25

Slide 25 text

興味が出た人向けの小ネタ 4. Appendix

Slide 26

Slide 26 text

▹ 実はブラウザだけじゃなく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

Slide 27

Slide 27 text

▹ 生成された /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