バベルの図書館は完成しない

Extended outer memory module
for my poor native memory.

Posts:
2019/12/01 Puma の内部構造やアーキテクチャを追う
2019/05/27 Golang の正規表現ライブラリの処理の流れをざっくり掴む
2019/04/29 InnoDB の B+Tree Index について
2019/04/29 InnoDB における index page のデータ構造
2019/04/28 InnoDB はどうやってファイルにデータを保持するのか
2019/01/06 Designing Data-Intensive Applications を読んでいる
2019/01/03 年末年始に読んだ本について、など
2019/01/01 Ruby から ffi を使って Rust を呼ぶ
2018/11/10 ブラウザにおける状態の持ち方
2018/07/01 Rust で web アプリ、 或いは Rust における並列処理
2018/05/14 なぜテストを書くのか
2018/05/13 Rust で wasm 使って lifegame 書いた時のメモ
2018/03/12 qemu で raspbian のエミュレート(環境構築メモ)
2018/03/12 qemu で xv6 のエミュレート(環境構築メモ)
2018/03/03 Ruby の eval をちゃんと知る
2018/02/11 Web のコンセプト
2018/02/03 Rspec のまとめ
2018/02/03 Ruby を関数型っぽく扱う

Rust で wasm 使って lifegame 書いた時のメモ

もともとの話として、ブラウザというものは各デバイス間の差異を吸収してくれる偉いやつだなと思っていて、しかもそんなブラウザの上で、ネイティブアプリに近い性能を実現できる仕組み( asm.js とか Web Assembly とか)に興味はあった。

しかし僕は javascript をほとんど書いたことがないので、 asm.js だとつらそうだなと思ってたし、正直それまでフロントエンドの生態系にほとんど興味がなかった。

(だって、サーバーサイドで豊富な計算資源で処理を行ったり、機械のことを考えたデータ型をその構造のまま扱ったり、データベースとのやり取りを考えたりするほうが面白いじゃない?!って思う。)

そんな中 web を支える技術 という有名な本を読んで、またエンジニア業務でどっぷりと web に関わって、 web のコンセプトとその生態系にとてつもなく感動してしまった。

そんなわけで、 WebAssembly をきっかけにフロントエンドへの取っ掛かりを作りたいなって思って、休日一日かけて Rust + WebAssembly でライフゲームを書いてみたので、その記録を残しておく。

(だいぶ前にやったんだけど、まあ、いいかな)

tl; dr

rust で書いた wasm binary を Firefox 上で動かした。

僕の完成品はこちらです。

僕の環境

必要なもの(Homebrewとか自前ビルドとかで)

詳しいやり方

wasm-bindgen のリポジトリに使い方は結構詳しく書いてあるので、ここを参考にするといいと思います。

あと僕はここも参考にしました。

ほとんど上にあげた URL で情報は足りると思います。

初回起動

node の npm run コマンドにビルドからサーバースタートまでのタスクを設定してしまうと楽に開発が進められます。( package.json にて設定する。)

$ npm install
$ npm run build-debug && npm run serve
$ npm run build-release && npm run serve # release 版はこちら (build の option が変わるよ)

作業風景

仕組みとしては Rust で書いたコードが、 wasm-bindgen によってバイナリを読むための js コードと、 wasm バイナリに変換される

例えば Rust で定義した struct みたいなフロント側でも利用したい部分が js のコードとして変換されてて、 ライフゲームのロジック部分やメモリ(バッファ? ブラウザの仕組みのこの辺りよくわかってない)のような資源の利用戦略部分はバイナリとして渡されて、ブラウザはそれを実行している

最初とりあえず Rust 側で定義した alert 関数を js 側で呼んでみた

hello_alert

で、 tutorial に沿って canvas の API を利用するような形式で lifegame を実装した

この画面が動いた時は結構感動した(しかもこれ、僕が ruby で書いてターミナルで動かしていたやつよりも速そうだぞ、、、、)

first_lifegame

そんであとは規模を大きくしたり、画面クリックでセルの状態を反転させられるようにしたり、世代更新をスタート/ストップする仕組みをつけたり

second_lifegame

フロント側の処理とバックエンド側の処理がどちらも工夫のしがいがあって、とても面白かったのでした。

third_lifegame

思ったこと

参考:

2018/05/13 23:00
tags: rust - wasm - javascript
This site is maintained by furuhama yusuke.
from 2018.02 -