Theme Slot

作った理由

個人開発で何を作るか決めきれず、考えているうちに時間が過ぎることがあります。自分で選ぶよりランダムに決めてもらうほうが作業に取りかかれると考えて作りました。ハッカソンや勉強会のお題決めにも使えます。

技術的な判断

結果は乱数で決めています。使って楽しいかどうかは結果が出るまでの見せ方で決まると考え、スロットが止まるまでの動きを調整しました。

結果は回転を始めた時点で確定させています。回転中は一定間隔で文字を差し替えて表示し、停止時は左のリール、右のリールの順に時間差をつけて止めます。演出と結果の決定を別々の処理にしたので、演出の長さを変えても結果を決めるコードは変更せずに済みます。共有 URL から開いたときは、確定済みの結果をそのまま表示します。

タイマーは状態遷移（待機 → 回転中 → 片側停止 → 確定）として1つのカスタムフックで管理し、回転を始めるときと画面を離れるときに、そのフックが残っているタイマーをすべて解放します。タイマー処理をフックに分けたことで、テストではタイマーを疑似的に進めて、演出が最後まで終わることを検証できます。

引いた結果は URL で共有できます。その URL の OG 画像は、Cloudflare Pages Functions で結果ごとに生成しています。画像を事前に用意しなくても、共有したテーマが SNS のカード画像に表示されます。

技術スタック

言語

TypeScript

フレームワーク

React

UI

Tailwind CSSBudouXFontsource

データ

localStorage

ビルド・配布

Vitevite-plugin-pwa

テスト・品質

VitestTesting LibraryPlaywrightESLintPrettier

インフラ

Cloudflare PagesCloudflare Pages Functions

その他

workers-og