Rust+WebAssemblyをさわってみた話

1K Views

December 09, 22

スライド概要

KyotoLT Online 第28回
https://kyotolt.connpass.com/event/265234/

KyotoLT OnlineでRust+WebAssemblyの話をしました #KyotoLT - usami-kの日記
https://usami-k.hatenablog.com/entry/2022/12/09/230923

profile-image

https://usami-k.github.io/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Rust+WebAssemblyを さわってみた話 宇佐見公輔 2022-12-09

2.

自己紹介 宇佐見公輔(うさみこうすけ) 株式会社ゆめみ / iOSテックリード 大阪在住、最寄のゆめみオフィスは京都 KyotoLT参加2回目 Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 2

3.

Rust+WebAssembly Rustから見た場合 Rust言語の活用方法のひとつとして RustでWebフロントエンド開発ができる WebAssemblyから見た場合 WebAssembly形式を生成する手段のひとつとして コンパクトかつ高パフォーマンスなwasmバイナリを生成できる Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 3

4.

WebAssemblyとは Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 4

5.

WebAssemblyとは Webブラウザー上で実行できるバイナリ形式 かつてJavaもやっていたが…… ブラウザーに組み込まれた仮想マシン上で実行される JavaScriptも仮想マシン上で実行される WebAssemblyのほうが高速に動作する Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 5

6.

JavaScriptとWebAssembly 両者を併用する WebAssemblyですべてをカバーはできない WebAssemblyでJavaScriptを補強する JavaScriptからWebAssemblyの関数を呼び出せる WebAssemblyからJavaScriptの関数を呼び出せる Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 6

7.

WebAssemblyの事例 Google Meet Google Earth Figma eBay など…… Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 7

8.

WebAssemblyバイナリ Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 8

9.

WebAssemblyバイナリ magic ::= 0x00 0x61 0x73 0x6D version ::= 0x01 0x00 0x00 0x00 (参考:ELFバイナリだと先頭4バイトは Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 0x7F 0x45 0x4C 0x46 ) 9

10.

WebAssemblyバイナリの生成方法 WebAssemblyテキストを記述して生成する C/C++ソースコードからEmscriptenで生成する Rustソースコードからwasm-packで生成する AssemblyScriptソースコードから生成する Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 10

11.

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

12.
[beta]
Emscripten

C/C++コンパイラの代わりにEmscriptenコンパイラを使う
(wasm、js、htmlを生成)
emcc hello.c -o hello.html

#include <stdio.h>
int main() {
printf("Hello World\n");
return 0;
}

Rust+WebAssemblyをさわってみた話 / 宇佐見公輔

12

13.
[beta]
Rust wasm-pack

cargo buildの代わりにwasm-packツールでビルドする
(wasm、jsを生成)
wasm-pack build --target web

use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!("Hello, {}!", name));
}

Rust+WebAssemblyをさわってみた話 / 宇佐見公輔

13

14.

AssemblyScript TypeScriptのサブセット AssemblyScriptはWebAssemblyにコンパイルされる asc sample.ts --outFile sample.wasm 対比:TypeScriptはJavaScriptにトランスパイルされる tsc sample.ts --outFile sample.js Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 14

15.

RustでWebAssemblyバイナリを生成 Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 15

16.

環境準備 Rust環境の準備 で wasm-pack導入 rustup rustc や cargo のインストール cargo install wasm-pack Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 16

17.

プロジェクト作成 プロジェクト作成 cargo new --lib Cargo.toml 設定 [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 17

18.

RustからJavaScriptの関数を呼ぶ #[wasm_bindgen] extern { pub fn alert(s: &str); } これで がRustから呼べるようになる はJavaScriptで提供される関数 alert alert Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 18

19.
[beta]
JavaScriptからRustの関数を呼ぶ
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!("Hello, {}!", name));
}

これで

がJavaScriptから呼べるようになる
はRustで実装した関数
先ほどの
をRustで使っている
greet

greet

alert

Rust+WebAssemblyをさわってみた話 / 宇佐見公輔

19

20.

WebAssemblyのビルド wasm-packでビルド wasm-pack build --target web 生成物 WebAssemblyバイナリ JavaScriptファイル(WebAssemblyのラッパー) Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 20

21.
[beta]
WebAssemblyのロード
<body>
<script type="module">
import init, {greet} from "./pkg/hello_wasm.js";
init()
.then(() => {
greet("WebAssembly")
});
</script>
</body>

Rust+WebAssemblyをさわってみた話 / 宇佐見公輔

21

22.

Webサーバーの準備と実行 MIMEタイプ に対応したWebサーバーの準備 で良い application/wasm python3 -m http.server Webブラウザーでアクセス http://localhost:8000 うまくいけばアラートボックスが表示される Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 22

23.

より実践的なチュートリアル Conwayのライフゲーム The Rust Wasm Book https://rustwasm.github.io/docs/book/ Rust+WebAssemblyをさわってみた話 / 宇佐見公輔 23

24.

情報源 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