Rust and WebAssembly Game of Life

はじめに

Rust and WebAssembly book の Hello World! に引き続き、ブラウザで動作する Game of Life の実装 (4.4. Implementing Conway's Game of Life) に進みました。一部つまづきがありましたが、無事にウニョウニョを見ることが出来ました。

やったこと

説明に従ってひたすらに写経です。とは言え、特に WebAssembly ないし JavaScript に疎いため、それなりにつまづいたところはありました。一番のつまづきポイントは以下でした。

requestAnimationFrame() を2回記述する必要がある

アニメーションさせるため、何らかのループを回す必要があるわけですが、そのループは以下の記述となっていました。

const renderLoop = () => {
 pre.textContent = universe.render();
 universe.tick();

 requestAnimationFrame(renderLoop);
};

関数名が renderLoop となっているので、これがループなのだなと推測できるのですが、これはまだ定義をしただけですのでこれだけでループが始まるわけではありません。この後に、さらに requestAnimationFrame(renderLoop); を呼び出す必要があります。具体的には以下のようにする必要がありました。

const renderLoop = () => {
 pre.textContent = universe.render();
 universe.tick();

 requestAnimationFrame(renderLoop);
};

requestAnimationFrame(renderLoop);  // <-- これ

はじめ、上の「これ」の部分を記述せずにひたすらブラウザをリロードしていましたが真っ白のまま。ブラウザの開発者ツールでエラーが出ていないのは確認できたのですが、なぜ真っ白なのかは (当然ですが) わからず。各関数が呼び出されたことをコンソールにログ出力させて、Life を new する関数しか呼び出されていないところまではたどり着きましたが、他の関数がなぜ呼び出されないのかはわからず。
改めて book の記述を確認すると、以下のように initial call が必要となっていることに気づき、無事アニメーションを開始させることが出来ました。

To start the rendering process, all we have to do is make the initial call for the first iteration of the rendering loop:

Rust/WebAssembly でコンソールへのログ出力

これでめでたしめでたし、なのですが…せっかくなので、 Rust and WebAssembly での、開発者ツール上コンソールへのログ出力について書き残しておきます。やり方は以下の通りです。

Rust のソースコード (本サンプルでは src/lib.rs) に以下を追記

extern crate web_sys;

Cargo.toml に以下を追記

[dependencies.web-sys]
version = "0.3"
features = [
  'console',
]

そう言えばここもつまづきポイントで、 features に 'console' を指定する必要があります。指定しない場合、 wasm-pack build で以下のエラーがレポートされます。

error[E0433]: failed to resolve: could not find `console` in `web_sys`

関数内で web_sys::console::log_1 を呼び出して使用

web_sys::console::log_1(&"Universe.new is called.".into());

log_1 が引数1つのログ出力関数で、ここでは文字列を指定しています。他には log_2 や log_3 といったものがあるようです。 .into() は調べればわかるとは思いますが、まだ調べていません。

これで、コンソールに何らかのログを出力することが出来るようになります。

おわりに

ということで、今回作成した Game of Life の gif 画像を掲載して終わりにしたいと思います。最後まで読んでいただき、ありがとうございました。
(少しでもオリジナリティを出すべく、ALIVE の色を変えました)