題材: 10人同期のブラウザ蛇ゲーム（Slither.io風） 対象: WebSocketほぼ初心者 / 素のJavaScriptで進める ゴール: WebSocketの基本から、リアルタイム同期・状態管理・遅延対策・簡易スケーリングまで理解する
「動いた」で終わらせず、「なぜそう設計するのか」を説明できる状態を目指す学習教材です。
初心者が詰まる原因は大体この3つです。
- HTTPとWebSocketの違いが曖昧
- 入力と状態を混同する
- クライアント側に真実を持たせて壊れる
このカリキュラムでは、そこを順番に潰していきます。
| 分類 | 技術 |
|---|---|
| フロント | HTML / CSS / 素のJavaScript / Canvas API |
| バックエンド | Go + echo + gorilla/websocket |
| 実装では使わないもの | React, TypeScript, Redux, DB |
| 概念として触れるもの | Redis（Step 12 で Pub/Sub の役割のみ解説、実装なし） |
注: Redis は Step 12 で「複数サーバー構成ではどう使うか」を概念レベルで説明します。 Step 0〜11 の実装コードには登場しません。
理由は単純で、理解前に道具を増やすと本質が見えなくなるからです。
| Step | テーマ | フォルダ |
|---|---|---|
| Step 0 | HTTPとWebSocketの違いを理解する | step-00-http-vs-websocket |
| Step 1 | まずは1本つなぐ（エコーサーバー） | step-01-echo |
| Step 2 | 複数人に配る（ブロードキャスト） | step-02-broadcast |
| Step 3 | メッセージではなく「入力」を送る | step-03-input |
| Step 4 | サーバーで状態を持つ | step-04-server-state |
| Step 5 | ゲームループを入れる | step-05-game-loop |
| Step 6 | 蛇ゲームにする | step-06-snake |
| Step 7 | 遅延と同期ズレを体験する | step-07-lag |
| Step 8 | 補間を入れる（予測は概念のみ） | step-08-interpolation |
| Step 9 | 10人部屋を作る | step-09-rooms |
| Step 10 | 切断・再接続に対応する | step-10-reconnect |
| Step 11 | 最適化を考える | step-11-optimization |
| Step 12 | 上級発展：1台を超える設計へ | step-12-advanced |
各ステップでやることは4つです。
- 概念理解 — READMEを読む
- 最小実装 — コードを自分で打ち込む（コピペではなく）
- 動作確認 — 実際に動かす
- 言語化 — 以下を自分の言葉で書く
毎ステップ必須のアウトプット：
- 「何を学んだか」
- 「なぜその設計にしたか」
- 「どこがまだ分からないか」
- 「次のステップで何が増えるか」
Step 0〜2 → 最速で終わらせる（接続の感触をつかむ）
Step 3〜5 → 本質理解（ここが最重要）
Step 6 → ゲームらしさを入れる
Step 7〜8 → 「リアルタイムの現実」を学ぶ
Step 9〜12 → 設計者の視点に上げる
一番大事なのは Step 4 と Step 5 です。 ここが曖昧なまま進むと、用語を眺めるだけになります。
step-XX-name/
├── README.md # 概念説明・コード解説・練習問題
├── server/
│ └── main.go # Goサーバー
└── client/
└── index.html # フロントエンド
このカリキュラムを終えたら、最低でも以下が言える状態を目指します。
- WebSocketの接続と基本イベントを説明できる
- ブロードキャストの仕組みを実装できる
- 入力送信と状態同期の違いを説明できる
- サーバー権威型の設計を理解している
- tickベースのゲームループを実装できる
- 遅延やカクつきの原因を説明できる
- 補間の役割を理解している
- 10人部屋の基本設計を考えられる
- 切断・再接続・ルーム分割など、現実の問題を意識できる