wasm(Rust) でJavaScriptファイルの呼び出し

7263 ワード
wasm JavaScript wasm-bindgen Rust JavaScript テキストリンク

今回は Rust（wasm）からJavaScriptのコード（関数）を呼び出す方法について書きます。
コードは以前書いたものを流用します。
下記のgithabのページを参照してください。
https://github.com/NagaJun1/wasm_sample

以前、Rustでwasmをビルドする方法について書いた記事があります。
下記にURLを貼り付けておきますので、ご参考にどうぞ。
https://qiita.com/NagaJun/items/f43a645ff630aeb858fd

下記にwasm-bindgenの公式ページのURLを貼り付けておきます。
今回説明する内容は、基本的には下記リンクのページで説明されていると同じ内容です。
https://rustwasm.github.io/docs/wasm-bindgen/reference/js-snippets.html

コーディング

今回作成したコードについて説明していきます。
まず、Rustで呼び出すためのjavaScriptのコードは下記の通りです。
処理は単純で、html内のid="id_1"のテキストを関数の引数の値で書き換えるというものです。
注意点としては、exportを関数の頭に付けることぐらいですかね。

/js-file/js-code-file.js
export function write_p_text(a)
{
    document.getElementById("id_1").textContent = a;
}

次に、Rustのコードです。
JavaScriptで設定したwrite_p_text()関数は、Rustでは#[wasm_bindgen(module="ファイルパス")]を頭に付け、extern "C"で囲うことで呼び出すことができます。
module="ファイルパス"の"ファイルパス"は、「Cargo.toml」からしたパスを設定する必要があります。
今回はついでに、RustからJavaScriptのalert()も呼び出します。
JavaScriptのライブラリは頭に#[wasm_bindgen]をつけるだけで呼び出せます。

lib.rs
#[wasm_bindgen]
pub fn read_js_fnction(){
    //jsのアラート
    alert("call JavaScript function".to_string());
    //js関数での処理
    write_p_text("Rust call function".to_string());
}

#[wasm_bindgen(module="/js-file/js-code-file.js")]
extern "C"{
    fn write_p_text(a:String);
}

#[wasm_bindgen]
extern "C"{
    fn alert(text:String);
}

最後に、wasmを呼び出す.htmlは下記の通りです。
wasmを呼び出すための方法は前回同様ですが、今回はJavaScript内のコードで DOM操作を加えたので、<p>タグを追加しておきます。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <h1>wasm_sample</h1>
    <!--下記<p>のテキストを書き換えます-->
    <p id ="id_1">htmlで設定したテキスト</p>
    <script type="module">
      import init, * as wasm from './pkg/sample_wasm_rust.js';
      async function run() {
        await init();
        wasm.read_js_fnction();
      }
      run();
    </script>
  </body>
</html>

ソースコードの配置に関しては、この記事の頭にgitのURLを貼り付けてあるので、そちらからご確認ください。

実行

各条件を揃えたら実行します。（実行方法は前回の記事を見てください）
実行結果としては、まずRustで設定したアラートが出て（このタイミングではまだ<p id ="id_1">はデフォルトのままです）

アラートを消すと DOMが書き換わって、ページ内のテキストが書き換わります。

以上で、RustからJavaScriptのコードが呼び出せたことが確認できました。

まとめ

今回はRustからJavaScriptを呼び出す方法について書いていきました。
RustからJavaScriptを呼び出せることで、Rustでは書くことができない処理をJavaScriptで実装するという、柔軟性を持たせたプログラムが作成できる様になるかと思います。
ただ、今回 RustからDOMを操作したのですが、DOM操作自体はJavaScriptのコードを呼び出さずともRustで web-sysをクレートで追加すれば処理できるので、処理速度を速くしたいという場合はこちらを使用するべきかと思います。
https://rustwasm.github.io/docs/wasm-bindgen/examples/dom.html#web-sys-dom-hello-world
また、JavaScriptのオブジェクトはRust内でJsValueを使用すれば処理できるため、多くの場合は.jsファイルを読み込まない形で実装できるかと思います。
どういう形で実装するかは人によるかとは思いますが。
今回は以上になります。
最後まで読んでいただき、ありがとうございました。