🎉
【個人開発】推しの歌詞の最初の１行で曲を当てるクイズゲーム作った！
作ったもの
- 推しの歌詞の最初の１行で曲を当てるクイズゲーム
リポジトリ
名称
- SYQ
由来は、Sayaka Yamamoto Quizからです。
推しって誰やねん!?
- 推しは、山本彩！！！
- NMBの頃から推しです
- 推し始めて１０年くらいです
- ライブには、１回は必ず参戦します
- 一番好きな曲は、サードマンです
どんなゲーム
- 歌詞の最初のワンフレーズのみで曲名を当てるゲーム
- ２つのモードを実装した
- モード１：早押しモード
- モード２：連続正解モード
ルール
- モード１
- 5秒の制限時間の間に回答する
- １０問をより早く回答できるかを競う
- モード２
- 連続で回答する
- 全問正解すればクリア
対象楽曲
- アルバムから選曲しました
- identity
- rainbow
- α
- &
テストプレイ結果
-
モード１：早押しモード
-
モード２：連続正解モード
制作期間
- 最初のコミットが2023/7/22
- リリースが2023/8/11
- 制作期間は、２週間と少し
技術選定
- 言語
- typescript
- ライブラリ
- React
- ビルドツール
- Vite
- ホスティング
- firebase hosting
開発手法
- issueドリブン開発
- イシューを立てて、イシューごとにブランチを切って開発していく手法
Issueドリブン開発をやってみて
- イシューを立てる、ブランチを切る、プルリクをするのサイクルを身につけるにはピッタリだと感じた
- 今までは、個人でやっていると間違えていきなりmainにpushしたとかあったけど今回はそれがなかったのでしっかりサイクルを回せている感がありました
- イシューを立ててタスクを細分化して進められるので、個人開発でも頭の中を整理しながら開発が進められた
- 今後も続けていきたいくらいにははまった
参考
デザイン／フォント
- 極力シンプル、ごちゃごちゃしないを意識しました
- 色を少なくする(黄色、ピンク、緑のみ)
- 必要最低限しかコンポーネントを置かない
- Googleフォントを見ていたら、Lobsterっていういい感じのフォントを見つけたので採用した
開発した理由
- 最近、Reactを学び始めていて、Reactが楽しく楽しくて仕方なかったため
- 何かひとつプロダクトを作って運用までしないとさすがにダメだという危機感があったこと
- フロントエンド、デザイン苦手っていつまでも逃げて入らないと思っていたため
課題
- できるのは、SNSへのシェアまででランキングの実装がまだなので競うためのランキングを実装する
- 本当に初心者丸出しの汚いReactコードなので、状態管理を学んでリファクタリングをする
- マネタイズもしていきたい
まとめ/振り返り
- React楽しい
- typescript楽しい
- ChakraUI楽しい
- firebase hosting楽(github actionsによるCDも)
- 状態管理難しい、ちゃんと本読むかインプットしないとまずい
- 要件、設計固めは大事。最初から決めているともっとさくっと作れたかも
- コンポーネントの分け方とかも学んでいく
- Webデザインに日頃からアンテナをはって、いざ制作するときの引き出しを増やす
- Googleフォント他のWebサイトで使用されるフォントを観察して、場面にあったフォントを選択できるようにする
ここまでお読みいただきありがとうございます。もしよろしければ、ゲームをプレイいただき山本彩の楽曲をお聴きいただければ嬉しいです。
Discussion