大手マッチングアプリ開発案件

概要

会員制マッチングアプリのリニューアルプロジェクトにおいて、サービスの中核となるリアルタイムチャット機能を担当しました。 データベース設計の一部、バックエンド、フロントエンド、WebSocketによるリアルタイム配信まで一貫して実装しています。

NDAのためクライアント名・サービス名・実画面は非公開です。 掲載画像は、機能の方向性を伝えるために作成した匿名UIイメージです。

課題・目的

リニューアルに伴い、即時性・データ保全・保守性を満たすチャット基盤を新たに構築する必要がありました。 複数エンジニアによるGitHub PRベースのチーム開発の中で、機能追加のスピードとコードの整合性を両立することが課題でした。

担当範囲

• チャット／トークルーム機能のデータベース設計の一部に関与
• Laravelによるバックエンド実装
• React（Inertia）によるフロントエンド実装
• Laravel Reverb / Echoを用いたWebSocket配信
• 機能単位のテスト、PR作成、レビュー指摘対応
• ブランチ更新時のコンフリクト解消、マイグレーション反映順の周知

実装した主な機能

• リアルタイムメッセージ送受信: 送信したメッセージを即時に相手画面へ反映
• 画像添付: 複数画像の送信・保存・表示に対応
• リプライ: 任意のメッセージを引用して返信。リアルタイム受信時も引用表示に対応
• 長押しメニュー: コピー、部分コピー、リプライ、送信取消、アナウンス操作を実装
• ロール別表示: 会員・運営などの権限に応じて操作メニューを出し分け
• アナウンス同期: ピン留めしたメッセージを全員へリアルタイム反映
• 未読管理: リアルタイム未読バッジ更新と既読管理に対応
• 誤既読防止: Page Visibility APIを使い、タブが表示されている時のみ既読化
• トークルーム一覧更新: 新着メッセージで該当ルームを最上部へ移動し、プレビューを更新
• メッセージ検索: トークルーム内のキーワード検索に対応
• 論理削除: メッセージ・添付画像を物理削除せず、復元可能な状態で保持

技術仕様

技術的な工夫

• 双方向リアルタイム通信: WebSocketによる送受信と、ブロードキャスト宛先制御を実装
• 不要な自己再描画の抑制: toOthers() を活用し、送信者自身への不要な再配信を抑制
• データ保全: SoftDeletesによる論理削除で、誤削除時の復旧や監査性を考慮
• DB整合性: nullセーフ、N+1回避、トランザクション境界を意識して実装
• 描画最適化: useMemo / useLayoutEffect を用いて不要な再計算や描画のちらつきを抑制
• 差分更新: トークルーム一覧では対象ルームのみ更新し、最小再描画で先頭へ移動

チーム開発での対応

• 1機能=1PRの粒度で実装し、レビューしやすい単位に分割
• レビュー指摘は1件1コミットで対応し、変更履歴を追いやすく整理
• main更新時はレビュー中ブランチへ取り込み、コンフリクトを都度解消
• マイグレーションを伴う変更では、反映順やチームへの周知まで配慮

成果・学び

Laravel、React、WebSocketを組み合わせたリアルタイム機能を、設計から実装・レビュー対応まで一貫して担当しました。 単に画面を作るだけでなく、データ保全、未読・既読の整合性、権限ごとのUI制御、チーム開発での保守性まで考慮して実装できた点が大きな経験です。