ぷよぷよプログラミングをReactにしてみた
10代のプログラミングをやり始めたばかりの頃に、ちょっとしたゲームを作ったこともあったけど、長い間遠ざかっていた。一般的なGUIのアプリケーションがイベント駆動で処理を行うのに対し、ゲームは自分でメインループを回して毎フレーム描画するもの*1で、プログラムの書き方が変わってくる。
自分はWebアプリケーションを得意分野としており、ゲームにはやや苦手意識を持っていたが、 ぷよぷよプログラミング が話題になっていたので、とりあえずMonacaで4行追記するだけの基礎コースで始めてみた。
動くようになった後でソースコードを詳しく読もうにも、DOMの操作が混じっていると処理が追いづらいので、ゲームのStateから宣言的に描画される形にしたかった。というわけでReact + TypeScript にリファクタリングしてみた*2。
原型をあまり大きく崩さないようにはしたつもり。メインループは Gameコンポーネント に移動している。requestAnimationFrameで1フレーム分の処理を行う関数を実行し、ReactのStateで保持してる現在のフレーム数を増やすことで、毎フレーム再レンダリングしている。
既存コードの都合で、グローバル変数の副作用がたくさんあるので、Reactの Strict Mode を使っていると、ゲームの mode をStateにしようとしたときに正しく動かなかった。副作用を完全になくすほどのモチベーションはなかった。
React化してGameの一部の状態をStateに持つようにしたら、わけわからん状態遷移するようになってしまった。だいぶ時間を浪費したけど、どうやらReactのStrict ModeがsetStateの更新関数を2回呼び出すおかげっぽい。
— かと (@orangain) 2022年1月10日
Twitterのスレッドに書いたけど、普段とは違うコードを読み、いろんな発見があって楽しかった。このような素晴らしい教材を無料で公開してくださっているセガ様に感謝です。
