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

Transcript

1. 0
   RustでつくるWebアプリケーション(2)
   2023-01-20 第29回NearMe技術勉強会
   Asahi Kaito
   

   View Slide

2. 1
   今回は、RustとReactを用いたシングルページの
   アプリケーションを作成します！！
   

   View Slide

3. 2
   今後は、
   (1) Reactの確認
   (2) WebAssemblyについて
   (3) RustとReact
   ついてまとめます。
   

   View Slide

4. 3
   ですが、今回はその前段階として、
   WebAssembly
   についてまとめます！！
   

   View Slide

5. 4
   WebAssembly(Wasm)について
   ● Webブラウザで実行可能なバイナリ形式アセンブリライクな言語
   → 字句解析と構文解析の大半を省くことができ、起動がより高速に
   ● Webアプリケーションの高速化
   → JavaScriptのような動的型付けの処理の一部をWasmに置きかえる
   → より高速な動作が期待される！！
   ● Rust+Wasm
   → wasm-packを通してビルドできる
   

   View Slide

6. 5
   WebAssembly in Rust
   ● JavaScriptの関数alertをRustで扱う
   → externを用いてalert関数を取り入れる
   #[wasm_bindgen]
   extern {
   pub fn alert(s: &str);
   }
   

   

   View Slide

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

   → 簡単にRustでWasmを利用できる！！

   

   View Slide

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));
   };

   

   View Slide

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）
   

   View Slide

10. 9
    Thank you
    

    View Slide