wasm(Rust)에서 JavaScript 파일 호출

7081 단어 wasm자바스크립트wasm-bindgenRust
이번에는 Rust (wasm)에서 JavaScript 코드 (함수)를 호출하는 방법을 씁니다.
코드는 이전에 작성한 것을 유용합니다.
아래 githab 페이지를 참조하십시오.
htps : // 기주 b. 코 m / 나가 준 1 / 와 sm_ mp ぇ

이전에 Rust에서 wasm을 빌드하는 방법에 대해 작성한 기사가 있습니다.
아래에 URL을 붙여 둡니다. 참고하시기 바랍니다.
htps : // 코 m / 나가 준 / ms / f43 a 645 f630 b858 fd

아래에 wasm-bindgen의 공식 페이지 URL을 붙여 넣습니다.
이번에 설명하는 내용은 기본적으로 아래 링크의 페이지에서 설명한 것과 같은 내용입니다.
htps : / / 루 s와 ぁ sm. 기주 b. 이오 / 드 cs / 와 sm 병 d 겐 / 레후 렌세 / js -s 니페 ts. 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를 크레이트로 추가하면 처리할 수 있으므로, 처리 속도를 빨리 하고 싶은 경우는 이쪽을 사용 해야 할 것 같아요.
htps : / / 루 s와 ぁ sm. 기주 b. 이오 / 드 cs / 와 sm 병 d 겐 / 에 mp ぇ s / 드 m. html
또한 JavaScript 객체는 Rust 내에서 JsValue 를 사용하면 처리 할 수 ​​있기 때문에 많은 경우 .js 파일을 읽지 않는 형태로 구현할 수 있을까 생각합니다.
어떤 형태로 구현하는지는 사람에 의한 것이라고는 생각합니다만.
이번에는 이상이 됩니다.
끝까지 읽어 주셔서 감사합니다.
Rust (rppal) I2C에서 L 치카
rust-lang/rust에 기여한 이야기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage