⛳

Rustを使用してWasmモジュールを作成しよう！

2023/02/05に公開

Rust

WebAssembly

Astar

tech

本日は、こちらのYouTubeを元にして、RustからWasmモジュールを作成していきます。

1 事前準備を行う

1) Rustupのインストール

下の公式サイトに向かいます。
https://www.rust-lang.org/ja

こちらです。

「はじめる」を選択します。

すると、インストールのコマンドがこのように表示されるので、ご自身のターミナルで実行します。

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Windowsの場合は記載されているページにで実行してみてください。

無事にインストールが完了したかは、こちらのコマンドで確認します。

cargo --version

2 wasm-packをインストールする

次は、こちらからwasm-packをインストールします。

下のように、インストールされていることが確認できました。

2 プロジェクトを作成する

1) プロジェクトの作成

では、下のコマンドで、新しいプロジェクトを作ってみましょう。

cargo new --lib hello-wasm

下のように、できました。

2) wasm-bindgenの設定

次に依存関係として、「wasm-bindgen」を入れます。

下のように、「Cago.toml」の「dependencies」の下に入れます。

wasm-bindgen="0.2"

ちなみに、wasm-bindgenとはwasmモジュールとJavaScriptの間のやりとりをやりやすくしてくれるようです。

https://naokirin.hatenablog.com/entry/2022/12/31/034838#:~:text=wasm-bindgenとは,ライブラリ、およびCLIツールです。

3) 動的リンクライブラリの設定

次に、「Cago.toml」に下のように入れます。

[lib]
crate-type=["cdylib"]

下のようになりました。

これにより、動的リンクライブラリを作っているようです。

https://cordx56.hatenablog.com/entry/2021/04/29/213216

4) Rustファイルの作成

では、「src」フォルダの「lib.rs」に書かれてあったものを消し、次のように記載していきましょう。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

下のようになりました。

「use」を使い、「wasm_bindgen::prelude」にあるものを全てインストールしています。

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm

コードは、下のように、二つの整数を引数に取り、その合計を返り値として返しています。

なお、#[wasm_bindgen]とすることで、javascriptからアクセスできるようにしています。

https://qiita.com/mk-tool/items/eb537ad0ce9639f58e1f

3 コンパイルの実施

では、こちらのコマンドでWASMにコンパイルしてみましょう。

wasm-pack build --target web

ここにあるように、WASMにコンパイルし、JavaScriptファイルを生成しています。

出来上がったものは「pkg」フォルダに格納されます。

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm#コードを_webassembly_にコンパイルする

下のように、確かに「pkg」フォルダに格納されています。

4 コンパイルしたファイルの呼び出し

では、作ったjavaScriptファイルが実際に使えるかを確認するために、indexファイルを作ってみましょう。

ルートディレクトリに、「index.html」を作成し、次のようにコードを記します。

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>hello-wasm example</title>
</head>

<body>
    This is Test
    <script type="module">
        import init, { add } from "./pkg/hello_wasm.js";
        init()
            .then(() => {
                console.log(add(1, 3))
            });
    </script>
</body>

</html>