Slide 1

Slide 1 text

RustでWebフロント作れるらしい HarrisonEagle

Slide 2

Slide 2 text

え?RustでもWebフロント書けるんで すか?

Slide 3

Slide 3 text

はい、書けるんです...!

Slide 4

Slide 4 text

Yewとは ● RustベースのWebフロントエンドフレームワーク ○ RustだけでWebフロントエンドを開発することができる ○ WebAssembly(Wasm)を使用してブラウザで実行している ○ ReactとElmにインスパイアされており、 Reactのような感覚でRustでWebアプリを開発することができる ● 似たようなRust製のWebフロントエンドフレームワークとして Dioxusがある

Slide 5

Slide 5 text

そもそもWebAssembly(wasm)って何? ● スタックベースの仮想マシン用のバイナリ命令フォーマット ○ Webブラウザで実行可能 ● Webブラウザ上にバイナリを実行するをランタイム環境提供している ○ これによって、Rust、Golang、Swift、C++などの言語からコンパイルされたバイナリをブラウザ上に実行すること を可能にしている

Slide 6

Slide 6 text

WebAssemblyの応用例(1) - どうやらここのストリートファイターはWasm製のシミュレータを使ってブラウザ上で動かしてるらしい https://captown.capcom.com/ja/retro_games/2/ja

Slide 7

Slide 7 text

WebAssemblyの応用例(2) - ここのWindows95シミュレーターもElectron+Wasmで動かしている模様 https://github.com/felixrieseberg/windows95

Slide 8

Slide 8 text

早速RustでWebフロント作ってみよ う

Slide 9

Slide 9 text

Reactでカウンターアプリを作ってみると... function Counter() { const [count, setCount] = useState(0); const incrementCount = () => { setCount(count + 1); }; return (

Counter: {count}

+1
); }

Slide 10

Slide 10 text

Rust(Yew)の場合... use yew::prelude::*; #[function_component(UseState)] fn state() -> Html { let counter = use_state(|| 0); let onclick = { let counter = counter.clone(); Callback::from(move |_| counter.set(*counter + 1)) }; html! {
{ "Increment value" }

{ "Current value: " } { *counter }

} }

Slide 11

Slide 11 text

Yewがサポートしている機能 ● JSXのようなHTMLライクな構文 ● useState ● useContext ● useEffect ● onClickなどのHTMLイベントのハンドリング ● SSR ● ….

Slide 12

Slide 12 text

マジでReactやんけ!

Slide 13

Slide 13 text

でもこれどうやって動いているの?

Slide 14

Slide 14 text

WasmでのDOM操作 ● WasmではDOM操作するAPIを提供してい る ● RustをWasmで動かす場合、 wasm_bindgenとweb_sysを使用すると、 Wasmで実行する際にDOM操作することが できる ● Yewもこの方法で仮想DOMを実装した模 様 use wasm_bindgen::prelude::*; use web_sys::{window, Document, HtmlElement}; #[wasm_bindgen(start)] pub fn run() -> Result<(), JsValue> { let window = window().expect("should have a Window"); let document = window.document().expect("should have a Document"); let div = document.create_element("div")?; div.set_inner_html("Hello from Rust!"); let body = document.body().expect("document should have a body"); body.append_child(&div as &dyn web_sys::Node)?; Ok(()) }

Slide 15

Slide 15 text

Yewのルート要素のマウント App::::new().mount_to_body(); // あるいは yew::Renderer::::new().render(); ● Yewの要素を描画させるにはこれを実行する必要がある ● ReactのReactDOM.createRoot() +root.render()に相当

Slide 16

Slide 16 text

Rustのマクロ機能 ● 予め用意されたテンプレートをコンパイル時に展開され、プログラムの一部として実行されるコードを生 成する機能 ○ これによってRustでのコード生成の設定ができるようになる ○ 特にProcedural macrosの場合、Rustの構文に縛られないカスタム構文を設定可能 ○ ReactのJSX構文も、tscとbabelによってトランスパイル時に JavaScriptランタイムが実行可能な React.createElement関数に変換される ● YewのHTMLライクな構文もRustのマクロとして実装されている

Slide 17

Slide 17 text

まとめ ● Yewは、Rust製のWebフレームワーク ○ Reactのような開発体験で、 RustのコードだけでWebフロントの開発ができる ● バイナリはWasm経由でブラウザ上で実行している ○ Wasmはブラウザ上で実行できるバイナリ形式である ● WasmではDOM操作を可能にするAPIを提供されている ● YewのHTMLライクの構文は、Rustのマクロ機能によって実現され、宣言的 UIの実装を可能にしている

Slide 18

Slide 18 text

ご清聴ありがとうございました