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

Transcript

1. RustでWebフロント作れるらしい HarrisonEagle
2. え?RustでもWebフロント書けるんで すか？
3. はい、書けるんです...!
4. Yewとは • RustベースのWebフロントエンドフレームワーク ◦ RustだけでWebフロントエンドを開発することができる ◦ WebAssembly（Wasm）を使用してブラウザで実行している ◦ ReactとElmにインスパイアされており、 Reactのような感覚でRustでWebアプリを開発することができる • 似たようなRust製のWebフロントエンドフレームワークとして Dioxusがある
5. そもそもWebAssembly(wasm)って何？ • スタックベースの仮想マシン用のバイナリ命令フォーマット ◦ Webブラウザで実行可能 • Webブラウザ上にバイナリを実行するをランタイム環境提供している ◦ これによって、Rust、Golang、Swift、C++などの言語からコンパイルされたバイナリをブラウザ上に実行すること を可能にしている
6. WebAssemblyの応用例(1) - どうやらここのストリートファイターはWasm製のシミュレータを使ってブラウザ上で動かしてるらしい https://captown.capcom.com/ja/retro_games/2/ja
7. WebAssemblyの応用例(2) - ここのWindows95シミュレーターもElectron+Wasmで動かしている模様 https://github.com/felixrieseberg/windows95
8. 早速RustでWebフロント作ってみよ う
9. Reactでカウンターアプリを作ってみると... function Counter() { const [count, setCount] = useState(0); const incrementCount = () => { setCount(count + 1); }; return ( <div> <h2>Counter: {count}</h2> <button onClick={incrementCount}>+1</button> </div> ); }
10. 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! { <div> <button {onclick}>{ "Increment value" }</button> <p> <b>{ "Current value: " }</b> { *counter } </p> </div> } }
11. Yewがサポートしている機能 • JSXのようなHTMLライクな構文 • useState • useContext • useEffect • onClickなどのHTMLイベントのハンドリング • SSR • ….
12. マジでReactやんけ！
13. でもこれどうやって動いているの?
14. 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(()) }
15. Yewのルート要素のマウント App::<Component>::new().mount_to_body(); // あるいは yew::Renderer::<Component>::new().render(); • Yewの要素を描画させるにはこれを実行する必要がある • ReactのReactDOM.createRoot() ＋root.render()に相当
16. Rustのマクロ機能 • 予め用意されたテンプレートをコンパイル時に展開され、プログラムの一部として実行されるコードを生 成する機能 ◦ これによってRustでのコード生成の設定ができるようになる ◦ 特にProcedural macrosの場合、Rustの構文に縛られないカスタム構文を設定可能 ◦ ReactのJSX構文も、tscとbabelによってトランスパイル時に JavaScriptランタイムが実行可能な React.createElement関数に変換される • YewのHTMLライクな構文もRustのマクロとして実装されている
17. まとめ • Yewは、Rust製のWebフレームワーク ◦ Reactのような開発体験で、 RustのコードだけでWebフロントの開発ができる • バイナリはWasm経由でブラウザ上で実行している ◦ Wasmはブラウザ上で実行できるバイナリ形式である • WasmではDOM操作を可能にするAPIを提供されている • YewのHTMLライクの構文は、Rustのマクロ機能によって実現され、宣言的 UIの実装を可能にしている
18. ご清聴ありがとうございました