Zenn
Open1

Rust and WebAssembly

unokununokun

チュートリアル：ライフゲームを初めてみる。
Rust and WebAssembly

Rustツールセットアップ

セットアップできている場合にはスキップする。

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ rustup -V
rustup 1.23.1 (3df2264a9 2020-11-30)
info: This is the version for the rustup toolchain manager, not the rustc compiler.
info: The currently active `rustc` version is `rustc 1.48.0 (7eac88abb 2020-11-16)`

wasm-packインストール

$ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

cargo-generateインストール

$ cargo install cargo-generate

npmインストール

anyenvでnodenvをインストールしているため、これは実行していません。

$ npm install npm@latest -g

プロジェクト作成

作成されるファイルについては以下を参照。
wasm-game-of-life

$ cargo generate --git https://github.com/rustwasm/wasm-pack-template
プロジェクト名に「wasm-game-of-life」を入力します。
$ cd wasm-game-of-life

プロジェクトをビルド

$ wasm-pack build

pkgディレクトリ以下にファイルが作成されます。
pkg
├── README.md
├── package-lock.json
├── package.json
├── wasm_game_of_life.d.ts
├── wasm_game_of_life.js
├── wasm_game_of_life_bg.js　　　← WebAssemblyバイナリを呼び出す関数(js)
├── wasm_game_of_life_bg.wasm　← WebAssemblyバイナリ
└── wasm_game_of_life_bg.wasm.d.ts

以下の処理はどのディレクトリで実行するかが重要。

$ cd wasm-game-of-life
$ npm init wasm-app www
$ cd www
$ npm install

wasm-game-of-lifeパッケージをローカルのpkgディレクトリにリンクすることによって
自分でビルドしたwasmモジュールを使うことができるようにする。

$ cd ../pkg
$ npm link
$ cd ../www
$ npm link wasm-game-of-life
wasm-game-of-life/www/index.jsのimport文を修正
【修正後】import * as wasm from "wasm-game-of-life";
【修正前】import * as wasm from "hello-wasm-pack";

Webアプリ起動

$ npm run start
　→ ブラウザでhttp://localhost:8080を開く