ft_transcendence

概要

42の最終課題として、4人チームでオンラインお絵描き当てゲーム「お絵描きアイランド」を開発。 フロントエンドはReact + TypeScript、バックエンドはFastify + Prisma + PostgreSQLで構成し、WebSocketを用いたリアルタイム通信を実装。Docker Composeにより複数サービスを統合した開発環境を構築した。

担当範囲

• •技術選定およびプロジェクト基盤構築（React / Fastify / PostgreSQL / Docker Compose）
• •リアルタイムゲームエンジン：描画同期、チャット、回答判定、タイマー、スコアリング（ゲーム画面の実装）
• •WebSocket通信のアーキテクチャ設計
• •リザルト画面の実装

ポイント

• •WebSocketとHTTPを使い分けた通信アーキテクチャ設計
• •リアルタイム性と永続性を両立するデータ管理設計（メモリ + DB）
• •クライアント状態を明示的に管理した再接続制御
• •チーム開発におけるCI設計と運用

苦労・工夫した点

リアルタイム通信において、クライアントの意図しない切断からの再接続処理が大きな課題となった。特にフロントエンドのライフサイクルとWebSocketイベントが競合し、再接続ループが発生する問題に直面した。 この問題に対して、単純な再接続処理ではなく「接続状態を明示的に管理する」方針を取り、状態管理用のフラグを導入することで再接続処理の制御を安定させた。また、画面ごとに必要な再接続処理が異なるため、それぞれに適した制御を設計し、チーム内で知見を共有した。 設計面では、フロントエンドとバックエンドの責務分担において、通信方式の選択が課題となった。ゲーム準備画面では更新頻度が低いことから「WebSocketは通知のみ、データ取得はHTTP」とし、ゲーム画面ではリアルタイム性を優先して「すべてWebSocketで処理する」方式を採用した。 さらに、スコア管理についてはリアルタイム性を担保するためメモリ上で管理し、ラウンド終了時にDBへバッチ保存する二層構造を採用。これにより、レスポンス性能とデータ永続性の両立を実現した。 チーム開発では、CI（型チェック・ビルド・フォーマット）を整備し、PRテンプレートと組み合わせることでレビュー品質と開発スピードを維持した。