プロジェクトをセットアップする
Claude Code でプロジェクトを初期化し、 Socket.io を入れる
⏱ 想定 ~8 分
01 · 読む
いよいよ作り始めましょう。スタートはどんな Node.js プロジェクトとも同じです：フォルダを作り、 npm を初期化し、依存パッケージを入れる。 Level 7 でやった流れです。
新しいのは Socket.io —— WebSocket を扱いやすくしてくれるライブラリです。接続のアップグレード、再接続、メッセージのシリアライズを面倒見てくれるので、こちらは低レイヤーのネットワークではなくゲームロジックに集中できます。
あわせて、ゲームの HTML ファイルを配信するために Express も使います。 Express と Socket.io はうまく組み合わせて動きます：Express がページを配信し、 Socket.io がリアルタイム通信を担当します。
ポイントまとめ
- Socket.io は WebSocket 通信を簡単にするライブラリ
- Express がブラウザに HTML / CSS / JS ファイルを配信
- Socket.io が client と server 間のリアルタイムイベントを処理
- 両方とも同じ server 上で動く —— Express がファイル、 Socket.io がイベント
02 · 実機演習
プロジェクトフォルダを作り、依存パッケージを入れます。次のコマンドをターミナルで実行してください。
03 · プロンプトテンプレート
Claude Code に server を作ってもらいましょう。何が欲しいのか具体的に伝えてください —— 「server を作って」ではなく、何をすべきかを正確に。
tic-tac-toe ゲームの server として、 server.js を作ってください。 Express を使って public/ ディレクトリから静的ファイルを配信し、 Socket.io を組み込んでリアルタイム通信を処理します。 client が接続したら socket ID 付きで「Player connected」を出力し、切断時には socket ID 付きで「Player disconnected」を出力してください。 PORT 環境変数を読み、なければ port 3000 を fallback として使ってください。
04 · コード例
Claude が server.js を出してくれたら、次の重要なパターンを探してみてください。 Socket.io は Express app に直接つなげられません —— 生の HTTP server オブジェクトが必要です。
Express + Socket.io の組み合わせパターン
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('Player connected:', socket.id);
socket.on('disconnect', () => {
console.log('Player disconnected:', socket.id);
});
});
httpServer.listen(process.env.PORT || 3000);
3 つの層に注目してください。 Express（app）が HTTP リクエストを処理しファイルを配信します。 HTTP server（httpServer）が Express を包みます。 Socket.io（io）がその HTTP server を包んで、 WebSocket のアップグレードリクエストを横取りします。 Socket.io が生の HTTP server を必要とするのはこのため —— 「Upgrade: websocket」ヘッダーを Express が見る前にキャッチする必要があるからです。
05 · 実機演習
接続が動くことを確認するため、最小限のテストページを作りましょう。
06 · 空欄補充
Socket.io は Express app だけでなく、 WebSocket のアップグレードハンドシェイクを扱うために、生の HTTP _____ オブジェクトを必要とします。
07 · クイズ
npm install express socket.io は、プロジェクトに何を追加しますか？
- ゲーム制作用の 2 つのプログラミング言語
- データベースとキャッシュ層
- フロントエンドフレームワークと CSS ライブラリ
- Web フレームワーク（Express）とリアルタイム通信ライブラリ（Socket.io）
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。