リアルタイムコードのテストとデバッグ
2 人のやり取りの中でしか出ないバグを見つけて直す
⏱ 想定 ~10 分
01 · 読む
ゲームは happy path では動きます —— 2 人が出会い、交互に手を打ち、誰かが勝つ。でも、リアルタイム・マルチプレイヤーのコードには、これまで遭遇しなかった種類のバグがあります。
それらのバグは タイミング依存 です。イベントが特定の順番で届いたとき、あるいはプレイヤーが対局中にブラウザを閉じるような想定外のことをしたときにだけ現れます。普通のテストでは見えません —— 「普通に遊ぶ」からです。優秀なエンジニアは、汚いシナリオもテストします。
ポイントまとめ
- リアルタイムのバグはタイミング依存 —— 普通のテストには出てこない
- Disconnect 系のシナリオがバグの最大の発生源
- Chrome DevTools にはデバッグ用の WebSocket inspector がある
- Happy path だけでなく、汚いシナリオもテストする
02 · ステップ解説
Chrome DevTools で WebSocket の通信を観察します。これがリアルタイム通信の問題をデバッグする方法です。
1. DevTools を開く
ゲームページのどこかを右クリックして「Inspect」、または F12 キーを押します。 DevTools の上部にある「Network」タブをクリックしてください。
2. WebSocket でフィルタする
Network タブで「WS」フィルタボタン（WebSocket の略）をクリック。通常の HTTP リクエストはすべて隠れ、 WebSocket 接続だけが表示されます。
3. Socket.io の接続を見つける
ページをリロードします。 WebSocket 接続が現れるのでクリック。次に「Messages」タブをクリックします。送受信されるメッセージがリアルタイムで表示されます。
4. イベントの流れを観察する
ゲームを進めながら Messages タブを見てください。「find-game」が出ていく（緑の矢印）、「game-start」が入ってくる（赤の矢印）といった様子が見えます。各メッセージにはイベント名とデータペイロードが表示されます。これは Socket.io デバッグの最強ツールです。
03 · 実機演習
WebSocket inspector を開き、イベントの流れが見えることを確認しましょう。
04 · チェックリスト
次の 8 つのエッジケースをテストしましょう。タブを 2 つ開いて、それぞれのシナリオを試してください。動きが変なら、それがバグです —— 見つけて直しましょう。
- プレイヤーが matchmaking キューで待っている最中にブラウザのタブを閉じる —— server はちゃんと片付ける？
- 対局中にブラウザのタブを閉じる —— 相手に「Opponent disconnected」が表示される？
- すでに埋まっているマスをクリック —— 何も起きない？
- 自分の手番でないときにマスをクリック —— 何も起きない？
- 複数のマスを素早く連打 —— 最初の有効な 1 手だけが反映される？
- 対局が決着 —— その後の盤面クリックは無視される？
- 対局終了後に「Play Again」をクリック —— matchmaking がきれいに再スタートする？
- タブを 3 つ開く：2 つは対局中、 1 つは「Find Game」をクリック —— 3 人目はちゃんと待機状態になる？
05 · プロンプトテンプレート
バグが見つかった場合も、見つからなかった場合も、 Claude にコードレビューしてもらい、よくあるリアルタイム問題を洗い出してもらいましょう。
tic-tac-toe ゲームのコードをレビューして、バグやエッジケースを洗い出してください。 server.js、 game.js、 matchmaking.js、 public/client.js を見てほしいです。重点的に確認してほしい点：（1）Race condition —— 2 つのイベントが同時に届いたらどうなる？（2）Memory leak —— 切断したプレイヤーは全データ構造から削除されている？（3）状態の不整合 —— client と server で食い違う可能性は？（4）バリデーション漏れ —— プレイヤーが自分のいないゲームに move を送れたりしない？見つかった問題をリストアップし、そのまま直してください。
06 · 読む
リアルタイムコードのデバッグはスキルです。 何かが壊れたとき、まず使う武器は server 側の console.log —— 各イベントハンドラの前後にログを入れます。 2 つ目の武器はブラウザの WebSocket inspector。 3 つ目は Claude にシナリオを追いかけてもらうことです。
リアルタイム系のバグは、たいてい 3 種類に分かれます：
1. 古い参照 —— プレイヤーは切断したのに、その socket がどこかでまだ参照されている 2. 片付け漏れ —— ゲームは終わったのに、ルームのデータが消えていない 3. 競合状態 —— 2 つのイベントが想定外の順序で届く
上の 8 つのエッジケースをパスしたなら、あなたのゲームは堅牢です。パスしなければ、どこを見ればいいか今度はちゃんと分かります。
ポイントまとめ
- Server 側の console.log は最初のデバッグツール
- DevTools の WebSocket inspector が 2 つ目
- バグの大半は、古い参照・片付け漏れ・競合状態
- 詰まったら Claude にシナリオを追ってもらう
07 · クイズ
対局中にプレイヤーが切断したのに、 server がそのデータを片付けないとします。次のプレイヤーが入ってきたら何が起きる？
- 新しいプレイヤーが切断プレイヤーの「亡霊」とマッチングされ、壊れたゲームになる
- 何も問題ない —— server が自動で処理する
- Socket.io が切断 socket のデータを自動で消してくれる
- ブラウザが切断プレイヤーを再接続する
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。