RustでつくるWebアプリケーション(2)

Transcript

1. 0 RustでつくるWebアプリケーション(2) 2023-01-20 第29回NearMe技術勉強会 Asahi Kaito
2. 1 今回は、RustとReactを用いたシングルページの アプリケーションを作成します！！
3. 2 今後は、 (1) Reactの確認 (2) WebAssemblyについて (3) RustとReact ついてまとめます。
4. 3 ですが、今回はその前段階として、 WebAssembly についてまとめます！！
5. 4 WebAssembly(Wasm)について • Webブラウザで実行可能なバイナリ形式アセンブリライクな言語 → 字句解析と構文解析の大半を省くことができ、起動がより高速に • Webアプリケーションの高速化 → JavaScriptのような動的型付けの処理の一部をWasmに置きかえる → より高速な動作が期待される！！ • Rust+Wasm → wasm-packを通してビルドできる
6. 5 WebAssembly in Rust • JavaScriptの関数alertをRustで扱う → externを用いてalert関数を取り入れる #[wasm_bindgen] extern { pub fn alert(s: &str); } 

7. 6 WebAssembly in Rust • Rustで定義した関数をJavaScriptで扱う → #[wasm_bindgen]マクロを用いる #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("Hello, {}", name)); } 
 → 簡単にRustでWasmを利用できる！！

8. 7 WebAssembly in Rust • JavaScriptでは... → greet関数とalert関数が以下のように扱われている /** * @param {string} name */ export function greet(name) { const ptr0 = passStringToWasm0(name, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); const len0 = WASM_VECTOR_LEN; wasm.greet(ptr0, len0); } export function __wbg_alert_8755b7883b6ce0ef(arg0, arg1) { alert(getStringFromWasm0(arg0, arg1)); };

9. 8 参考文献 • WebAssemblyとは （https://qiita.com/ShuntaShirai/items/3ac92412720789576f22） • WebAssembly Rust（https://www.rust-lang.org/ja/what/wasm） • WebAssembly from MDN （https://developer.mozilla.org/ja/docs/WebAssembly）
10. 9 Thank you