！！！僕らの早押しクイズ！！！

リポジトリ

フロントエンド https://github.com/KinuGra/202507-front

バックエンド https://github.com/KinuGra/back_202507

開発プロセス

今回の開発プロセスは従来の一番安定する 「細かいタスクに割り振ってアサインしていく」 から 安定を考えない、挑戦型の 「要件を完璧に決めてやりたいものを自ら考え実装する」

これには大きなデメリットが伴います

デメリット

• 連携がとりづらい タスクの細分化の不足: 要件から開発を進めるアプローチは、必ずしもタスク管理ツールを使わないことを意味するわけではありませんが、タスク管理ツールを適切に使わない場合、個々のタスクの進捗が見えにくくなったり、メンバー間の連携が難しくなったりする可能性があります。
• 安定性を求められない 予見性の低さ: 予定が不安定であるため、将来の進捗や結果を予測することが非常に困難になります。これは、リソース配分、予算策定、納期設定などに大きな不確実性をもたらします。

メリット

AI時代は企画、設計、実装、評価をする経験を積んだほうがいい。 と書かれており、僕たちはそれに共感し感銘を受けました。 そのため、この力を磨くために最低限のIssueのみを立ててプロダクトを作り、「自律的」に行う経験を積みました。

概要

– Takatoshi Kobayashi によって開発された「みんなで早押しクイズ」をリスペクトした、 –早押しクイズゲームで、リアルタイム対戦が可能です。

ゲームシステム

早押しボタンを押すと、解答を一文字ずつ選択していきます。

例) 正答が「りんご」なら ”り”, ”ん”, ”ご” と回答する

制限時間内に解答に成功すると点数を獲得し、すべての問題が終了すると最終的な得点と順位が表示されます。

アーキテクチャ

技術スタック

[フロントエンド] ・Next.js ・React ・TypeScript

[バックエンド] ・Next.js（API Routes） ・Django/Django REST Framework ・SQLite ・WebSocket（PUSHER） ・Discord Webhook（サーバーのログをDiscordで表示）

[AWS] ・AWS Cognito（認証） ・AWS Lambda（サーバーレス関数） ・Amazon DynamoDB ・CloudWatch（ログ・モニタリング）

[インフラ] ・VPS（サーバー） ・Nginx ・Gunicorn

AWS

・AWS Cognit ・AWS Lambda ・AmazonDynamoDB ・CloudWatch CloudWatchはLamdaのログを出力し、デバッグに使用しました。

AWS Cognitで認証（パスキーによる認証も実装）し、Next.js API RoutesからDjangoのAPIにリクエストすることでDBを操作。

DiscordのWebhookを使ってVPSのエラーログをDiscordに出力しています。

問題作成画面ではLambdaにリクエストを送って、それから問題や解答をDynamoDBにCRUD（クラッド)します。

フロントエンド

開発の分担がしやすいようにTS, React, Next.jsでコンポーネント、ページごとに開発した。

Next.jsのベストプラクティスに沿ったディレクトリを採用。

uiフレームワークとしてTailwind CSS, Radix UIを活用。

バックエンド

バックエンド（Django）はVPSにデプロイし、Nginxが外部からのリクエストを受け取り、Gunicornに渡して、そのリクエストをDjangoが処理する構成。

WebAPIに関してはNext.jsとDjango REST FrameworkでAPIを生やした。

WebSocketはPUSHERにホストすることでリアルタイム通信を実現。 WebSocketのサーバーサイドのプログラムはNext.jsのAPI経由で実行

AI活用

・ChatGPTでテストデータの作成 ・GitHub Copilotでバグの検証 ・Amazon Q、Gemini CLI、GitHub Copilotによるコーディング支援、リファクタリングの提案 ・ChatGPT（o3）にデータベース設計の添削をしてもらった