【ハッカソン】時限爆弾解除ゲーム「Regexエスケープ」を作った話【React × FastAPI × ラズパイ】
はじめに
こんにちは、Yo-kanです。
今回はチーム「日向夏」で作成した作品について記事にしました。
宜しければ読んでいって下さいな。
さて皆さん、正規表現 は得意でしょうか。
個人的には、簡単そうなパターンでも不安になってドキュメントを見返してしまうタイプです。
今回のハッカソンでは、
正規表現に苦手意識がある人でも遊びながら触れられるものを作りたいと思い、
時限爆弾解除ゲーム 「Regex（レジェックス）エスケープ」 を開発しました。
サイバーパンク風の画面で、制限時間内に爆弾を解除していくゲームです。
React + FastAPI という比較的シンプルな構成ですが、
ゲーム性や設計面でいくつか工夫した点があったので、この記事でまとめます。
開発体制・担当
今回は2人チームで、役割を分けて開発しました。
-
フロントエンド・プレゼン担当
hina0629
https://github.com/hina0629 -
バックエンド・インフラ・プレゼン資料担当
Yo-kan（筆者）
技術スタック
-
Frontend
React（JavaScript）, Vite -
Backend
Python, FastAPI, SQLAlchemy, PostgreSQL -
Infrastructure
Docker, Docker Compose, Raspberry Pi, Cloudflare Tunnel
フロントエンドで工夫した点
ゲーム性を優先して削った機能
開発初期には、
入力した正規表現がどの文字列にマッチしているかをリアルタイムで表示する機能を入れていました。
実装自体はうまく動いていたのですが、
テストプレイをしてもらうと
- 考える前に答えが見えてしまう
- パズルというより作業になってしまう
という意見があり、正直かなり悩みました。
最終的にはこの機能は削除し、
お題として条件だけを提示し、ノイズ混じりの文字列から正解を探す
という形に変更しました。
便利さは下がりましたが、
その分「考える時間」が生まれたのは良かったと思っています。
初心者向けの EASY モード
正規表現がまったく分からない人でも遊べるよう、
4択から選ぶ EASY モードを用意しました。
一方で、直接入力する HARD モード も実装しています。
ハッカソン中のテストでは、
EASY → HARD に挑戦してくれる人もいて、狙い通りでした。
残り時間が少ないときの演出
発表直前のフィードバックで、
時間がなくなってきた感じがもう少し欲しい
と言われたので、
残り時間が少なくなると画面が赤く光る演出を追加しました。
失敗時には爆発演出も入るので、
かなり分かりやすく「やらかした感」が出ます。
短時間の実装でしたが、反応は良かったです。
バックエンド・インフラで工夫した点
問題を毎回生成する仕組み
同じ問題を何度も解く形にはしたくなかったので、
プレイするたびに異なる問題とパスワードを生成する API を作りました。
また、生成ロジックや判定処理を確認しやすくするため、
ローカル用にデバッグ画面も用意しています。
このあたりは作っておいて正解でした。
ReDoS を避けるための設計
正規表現を扱う以上、ReDoS は避けて通れません。
今回は、
正誤判定をバックエンドでは行わず、フロントエンド側に寄せる
という設計にしています。
多少割り切った部分もありますが、
ハッカソンという制約の中では現実的な判断だったと思います。
Raspberry Pi での本番公開
デプロイ先には Raspberry Pi を使いました。
Cloudflare Tunnel を使うことで、
ルーターのポート開放をせずに本番公開できています。
- CORS の制限
- デバッグ用エンドポイントの無効化
- 本番用 docker-compose の分離
など、最低限のセキュリティ対応も行いました。
今後やりたいこと
テストプレイでは、
- 正解例をあとから見たい
- もっと問題を解きたい
といった声をもらいました。
時間があれば、
解説表示やエンドレスモード、ランキング機能なども追加してみたいです。
おわりに
途中で機能を削ったり、
ラズパイで無理やり本番公開したりと、
ハッカソンらしい判断の連続でした。
正規表現が苦手な人でも、
「ちょっと触ってみようかな」と思ってもらえたら嬉しいです。