Matchmaking —— プレイヤーをマッチングする
見知らぬ 2 人を 1 つのゲームに引き合わせるロビーを作る
⏱ 想定 ~7 分
01 · 読む
Matchmaking は、シングルプレイのゲームをマルチプレイ体験に変える要のパーツです。考え方はシンプル:待機リストを保持する。 2 人揃ったらペアにし、ゲームルームを作って試合を開始する。
難しいのはエッジケースです。プレイヤーが待っている間に切断したら?対局中に切断したら?両方とももう一度遊びたいときは?良い matchmaking システムは、こうしたケースをきれいに処理します。
💡 想像してみてくださいレストランの受付係がウェイトリストを管理する様子を想像してみてください。 2 人席が空いたら、 2 人を案内する。誰かがリストから抜けたら削除。途中で店を出てしまったお客の席は、いつまでも取っておきません。
ポイントまとめ
- Matchmaking は待機プレイヤーのキューを保持する
- キューに 2 人揃ったら、ルームにペアリング
- 各ルームは固有の TicTacToeGame インスタンスを持つ
- Disconnect 処理が肝心 —— キューでも対局中でも
02 · プロンプトテンプレート
Claude に matchmaking モジュールを作ってもらいます。データ構造とマッチングロジックを明確に伝えましょう。
tic-tac-toe ゲーム用の matchmaking.js モジュールを作ってください。要件:(1)待機キューを持つ(socket の配列)。(2)addToQueue(socket, io) 関数を export する:すでに誰かが待っていれば 2 人をペアにする —— 一意の room ID を生成し、新しい TicTacToeGame インスタンスを作り、 X と O をランダムに割り当て、両方の socket をそのルームに join させ、各自の symbol と room ID を添えて両者へ「game-start」を emit。誰も待っていなければ、その socket をキューに追加し、その socket へ「waiting」を emit。(3)removeFromQueue(socket) 関数を export し、切断された socket を待機キューから取り除く。(4)進行中のゲームは Map で追跡(roomId -> { game, players })、各 socket がどのルームにいるかも Map で追跡(socketId -> roomId)。(5)handleDisconnect(socket, io) 関数を export する:その socket がキューにいれば取り除く、進行中のゲームにいれば対戦相手へ「opponent-left」を emit してルームを片付ける。 TicTacToeGame class は ./game から import してください。03 · コード例
Matchmaking モジュールは 3 つのデータ構造を使います。それぞれ何を保持し、なぜ存在するのかを理解しましょう。
3 つのデータ構造
// Players waiting for a match
const waitingQueue = [];
// Active game rooms: roomId -> { game, players: { X: socket, O: socket } }
const activeGames = new Map();
// Which room each player is in: socket.id -> roomId
const playerRooms = new Map();
waitingQueue は「Find Game」をクリックしたがまだマッチングされていない socket を保持します。 activeGames は各ルームをゲーム状態とプレイヤー socket にマップ —— server がどの手がどのゲームのものか知るための仕組みです。 playerRooms は逆引き —— socket ID(disconnect イベントから受け取る)からその人のいるルームを特定し、相手に通知できるようにします。
04 · プロンプトテンプレート
では、 matchmaking を server に組み込みます。 Claude に server.js を更新して新しいモジュールを使うよう頼みましょう。
matchmaking モジュールを使うように server.js を更新してください。「connection」イベントの中で、 client から送られてくる「find-game」を listen して addToQueue を呼び出します。「disconnect」イベントでは handleDisconnect を呼び出してください。「make-move」も listen します —— プレイヤーが手を送ったら、 playerRooms からその人のいるルームを特定し、 activeGames から対応する game を取り出し、 game.makeMove(index) を呼ぶ。手が有効ならそのルームへ「move-made」を emit し、手の詳細を添える。ゲーム終了なら、そのルームへ「game-over」を emit し結果を添える。
05 · 読む
手を止めて、 Claude が出力したコードを読みましょう。 これは身につけられる中で一番大事な習慣です:すぐ実行しない —— まず読む。
次のシナリオを頭の中で追いかけてください:
1. プレイヤー 1 が接続し、 Find Game をクリック 2. プレイヤー 2 も同じ操作をする 3. 2 人がルームでペアリングされる 4. プレイヤー 1 が手を打つ
コードは 2 課目の計画と一致していますか? Server はブロードキャストする前に手を検証していますか? Disconnect 処理はきちんと後片付けしていますか?
計画と違う箇所があれば、 Claude に直してもらいましょう。あなたは建築家 —— Claude は大工です。
ポイントまとめ
- 実行する前に読む —— 常に
- 頭の中でシナリオを追う
- コードと自分の計画を照合する
- 合っていなければ Claude に修正してもらう
06 · クイズ
プレイヤーが matchmaking キューで待っている間に切断しました。どう処理すべき?
- 何もしない —— 自動的に再接続するはず
- キューから取り除き、新しく参加するプレイヤーとマッチングされないようにする
- Server をクラッシュさせて再起動する
- その人の枠を 5 分間キープしておく
07 · 空欄補充
キューに 2 人揃うと、 matchmaking システムはゲーム _____ を作り、各プレイヤーに記号(X または O)を割り当てます。
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。