Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

More Decks by NearMeの技術発表資料です

Other Decks in Programming

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