背景
簡単に Rust × WebAssembly 環境を作りたいのに、毎回チュートリアルを探すことが多かったです。
あまり日本語での情報も少ないので、備忘録として残しておきます。
情報は主にこちらのチュートリアルを参考にしています。
前提
- Rust ツールチェーンがインストールされている （ rustup, rustc, cargo ）
- npm がインストールされている
必要なツールのインストール
wasm-pack のインストール
wasm-pack によって Rust で生成された WebAssembly をビルド、テスト、公開することができます。
下記のコマンドを実行してインストールしましょう。
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
こちらがドキュメントになります。
cargo-generate のインストール
既存の git リポジトリをテンプレートとして活用して、新しい Rust プロジェクトを立ち上げて実行できます。
cargo install cargo-generate
こちらがドキュメントになります。
npm の最新版をインストール
JavaScript バンドラーと開発サーバーを最新版にしておきます。
（冒頭で紹介したチュートリアルの最後に、コンパイル.wasmしたものをnpmレジストリに公開する工程があります）
npm install npm@latest -g
Rust プロジェクトの作成
下記のコマンドで雛形のリポジトリからプロジェクトを作成します。
cargo generate --git https://github.com/rustwasm/wasm-pack-template
プロジェクト名を要求されるので、適した名前をつけてあげましょう。
スネークケースかケバブケースにすると良いです。
ここでは便宜上、hello_worldというプロジェクト名とします。
cd hello_worldでプロジェクトのディレクトリ内に移動しておきましょう。
wasm-packでビルドする
最初は Hello, ~~!とアラートを出すプログラムが書かれています。
プロジェクトディレクトリ内で下記のコマンドでビルドを実行します。
wasm-pack build
デフォルトでは--releaseオプションで最適化されたビルドを行います。
作成されたファイルはpkgフォルダに格納されています。
詳細はこちらのドキュメントを参照してください。
npmでモジュールを導入する
npm initでパッケージマネージャを初期化します。
ここではwwwという名前にしています。
npm init wasm-app www
作成されたpackage.jsonファイルのdevDependenciesに下記を追記します。
ここではモジュール名をwasm-hello-worldとしています。
{
"devDependencies": {
"wasm-hello-world": "file:../pkg",
}
}
追加したモジュールをindex.js内でimportします。
import * as wasm from "wasm-blur-detection";
wasm.greet();
wwwディレクトリ内でnpm installをします。
cd www
npm install
実行してみる
npm run start
http://localhost:8080/にアクセスすると、Hello, wasm-hello-world!とアラートが出るはずです。
この時、Node.js v17 以降ではnpm run startが実行できないようです。
その場合は、下記のコマンドで環境変数を変更して再度実行するとうまくいきます。
export NODE_OPTIONS=--openssl-legacy-provider
詳細はこちらの記事を参考にしてください。
まとめ
以上で、簡単に Rust × WebAssembly の環境構築をして、hello, worldまで済ませることができました。
紹介したチュートリアルではライフゲームを実装しており、テストの方法やボタンを用いたインタラクティブな実装まで説明があります。
とても参考になるので、ぜひご覧ください。