Open8

Rust Webassembly入門

でゅらたたたんでゅらたたたん

今回の目的は 「アプリケーションの一部を構築する — 既存の JavaScript フロントエンドの内部で Rust を使用します」 となるので、そのままセットアップになる。

自分のマシンのwsl環境にすでにrust1.69が入っているので、wasm-pack を入れる。
wasm-packはweb-assemblyを対象とするrustのcrateを使って、パッケージ化するためのツールのこと。

cargo install wasm-pack

かなり時間かかる。てかめっちゃかかる。なにこれ。

(15分後)

error: failed to compile `wasm-pack v0.12.1`, intermediate artifacts can be found at `/tmp/cargo-install7zzCEy`

Caused by:
  package `anstyle v1.0.4` cannot be built because it requires rustc 1.70.0 or newer, while the currently active rustc version is 1.69.0
  Try re-running cargo install with `--locked`

がーん

でゅらたたたんでゅらたたたん

wasm-bindgen

  • wasm-pack はwasm-bindgen を利用して、JavaScript と Rust の型を繋いでいます。
  • wasm-bindgen によって JavaScript が文字列に関する Rust API を呼び出すことや Rust の関数が JavaScript の例外をキャッチすることができるようになります。

パッケージのビルド

$ wasm-pack build --target web

上記は以下のようなことをする

  1. Rust コードを WebAssembly にコンパイルする。
  2. wasm-bindgen をその WebAssembly に対して実行し、WebAssembly ファイルを npm が理解できるモジュールにラップする JavaScript ファイルを生成する。
  3. pkg ディレクトリーを作成し、その JavaScript ファイルと WebAssembly コードをそこに移動する。
  4. Cargo.toml を読み、等価な package.json を生成する。
  5. (もし存在するなら) README.md をパッケージにコピーする。
でゅらたたたんでゅらたたたん

あとは公式にしたがってindex.htmlを作成し、vscodeのLive Serverを起動して、index.htmlを閲覧すればOK.