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

2023/02/05に公開

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

https://www.youtube.com/watch?v=nW71Mlbmxt8

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をインストールします。
https://rustwasm.github.io/wasm-pack/installer/

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

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>

下の部分が、できたjavaScriptを使っている部分です。

では、今回実際にできたファイルを見てみましょう。

このように、「pkg」フォルダの「hello_wasm.js」を見ると、確かにadd関数ができています。

このように、init関数もできており、デフォルトでエクスポートされていました。

5 Webサーバーの起動確認

では、今回は、python3を使って、カレントディレクトリをルートとしたWebサーバーを起動します。

python3 -m http.server

やり方が不明の場合は、こちらをご参照ください。
https://developer.mozilla.org/ja/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server

では、実際に見てみましょう。

localhost:8000に行き、右クリック→「検証」を選択します。

すると、このように、add関数の結果(ここでは1+3の結果)が表示されていました。

今回は以上です。

最後までありがとうございました。

Discussion