Client と server を繋ぐ
Socket.io イベントでブラウザと server を結ぶ
⏱ 想定 ~7 分
01 · 読む
ゲームを管理する server と、盤面を表示するページはできました。でも今は両者が話していません。足りないピースが client.js —— ブラウザで動き、プレイヤーの操作（マスをクリック、ボタンを押す）と server が理解する言葉（Socket.io イベント）を翻訳する JavaScript です。
client.js は外交会議の通訳のようなものだと思ってください。プレイヤーは「クリックとボタン」で話す。 Server は「イベントとデータ」で話す。通訳が両方を聞き、メッセージを変換し、全員が理解できるようにします。
ポイントまとめ
- client.js はブラウザで動く、 server ではない
- ユーザー操作（クリック）を Socket.io イベントに翻訳
- Server からのイベントを UI 更新に翻訳（手を表示、ステータスを更新）
- io() 関数が自動的に server へ接続する
02 · プロンプトテンプレート
Claude に client 側の JavaScript を作ってもらいます。各イベントと UI 更新を明確に伝えましょう。
tic-tac-toe ゲーム用の public/client.js を作ってください。要件：（1）io() で server に接続 —— Socket.io がページを配信しているホストに自動的につながります。（2）「Find Game」がクリックされたら「find-game」を emit し、ステータスを「Searching for opponent...」に更新。（3）「waiting」イベントを受け取ったらステータスを「Waiting for another player...」に更新。（4）「game-start」イベントを受け取ったら（symbol と roomId が含まれる）、プレイヤーの記号を記録し、誰の手番かをステータスに表示し、盤面を有効化。（5）マスがクリックされたら、 cell index と roomId を添えて「make-move」を emit —— ただし、自分の手番でかつそのマスが空のときだけ。（6）「move-made」イベントを受け取ったら、対応する記号をそのマスに描き、手番ステータスを更新し、誰の手番かでクリックを有効化または無効化。（7）「game-over」イベントを受け取ったら結果（勝ち / 負け / 引き分け）を表示し、必要なら勝ちラインのマスをハイライトし、 Play Again ボタンを表示。（8）「opponent-left」イベントを受け取ったら「Opponent disconnected」を表示し、 Play Again ボタンを表示。（9）Play Again がクリックされたら盤面をリセットし、もう一度「find-game」を emit。
03 · コード例
Claude が client.js を出してくれたら、次のコアパターンを探してみてください。これがすべての Socket.io client の基本の動きです。
Socket.io client パターン
const socket = io();
// Sending events TO the server
socket.emit('find-game');
socket.emit('make-move', { index: 4, roomId: myRoom });
// Receiving events FROM the server
socket.on('game-start', (data) => {
// data.symbol is 'X' or 'O'
// data.roomId identifies this game
});
socket.on('move-made', (data) => {
// data.index, data.symbol
// Update the board cell
});
io() が server との接続を確立します。 socket.emit() でイベントを送信、 socket.on() でイベントを受信。イベント名（「find-game」「game-start」「move-made」）は client と server の間の取り決めです —— 一字一句揃える必要があります。これは設計の課で確認したのと同じイベントフローです。
04 · 読む
Client は手の有効性を決して自分で決めません。 各クリックは server に送り、 server からの応答を待ちます。 Server が手を有効と判断（「move-made」を emit）したら、 client が盤面を更新する。 Server が無視すれば、何も起きません。
これは設計の課と同じ原則です：server が権威者、 client はあくまで表示装置。 UI を反応良く見せるために client 側のチェックを入れてもかまいません（手番でないときはクリックを無効にする、など）が、 server は変わらず独立して全てを検証します。
ポイントまとめ
- Client は手を server に送り、確認を待つ
- Server が各手を検証 —— client が有効性を決めることはない
- Client 側のチェックは UX のためだけ、セキュリティには使わない
- client.js のイベント名は server.js の期待と一字一句一致させる
05 · 実機演習
ゲーム全体の流れをテストします。ここが正念場 —— ブラウザのタブを 2 つ 同じ URL で開いて、自分と自分で対局してみましょう。
06 · 空欄補充
client.js の io() 関数は server との _____ 接続を確立し、ゲームセッションの間ずっと開いたままになります。
07 · クイズ
プレイヤーがブラウザでマスをクリックしました。次に何が起きる？
- Client がすぐに記号を盤に置き、その後 server に伝える
- Client が HTTP POST リクエストを server に送る
- ブラウザがページを再読み込みして新しい盤面を取得する
- Client が「make-move」を server に emit し、 server が「move-made」を emit するのを待ってから盤面を更新する
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。