ゲームボードを作る
プレイヤーが実際に見て、クリックする UI を作る
⏱ 想定 ~7 分
01 · 読む
Server は準備完了。次は顔の部分 —— プレイヤーがブラウザで見る HTML ページが必要です。
ここは素の HTML、 CSS、 JavaScript だけ。 React もフレームワークも使いません。あらゆるフレームワークの土台になっている、 web の基本です。
これは意図的です。大きなアプリにはフレームワークが便利ですが、フレームワークなしで何が起きているか分かるエンジニアは、ずっと強くなります。 React が壊れたとき、素の HTML と JavaScript を知っているエンジニアは数分で直せます。 React しか知らない人はエラーを何時間も眺めることになります。
ポイントまとめ
- フロントエンドは素の HTML、 CSS、 JavaScript
- このサイズのゲームにフレームワークは要らない
- 基礎を理解しておくと、後でどんなフレームワークを使うときも有利
- Socket.io は自動で専用の client ライブラリを配信してくれる
02 · プロンプトテンプレート
Claude にゲームページを作ってもらいます。必要な要素を具体的に伝えましょう。
tic-tac-toe ゲーム用の public/index.html を作ってください。中身は：（1）タイトル「Tic Tac Toe」。（2）「Find Game」ボタン。（3）初期表示が「Click Find Game to start」のステータス表示エリア。（4）3x3 のゲーム盤。各マスはクリック可能な button 要素にしてください。（5）デフォルトでは非表示、ゲーム終了時に表示される「Play Again」ボタン。 Socket.io client script として「/socket.io/socket.io.js」を読み込んでください（このファイルは Socket.io が自動で提供します）。 style.css と client.js もリンクしてください。
03 · プロンプトテンプレート
次は、 Claude にゲームのスタイルを付けてもらいます。具体的なデザインの方向性を伝えましょう。
tic-tac-toe ゲーム用の public/style.css を作ってください。盤面は 3x3 の CSS grid で、各マスは 100x100 ピクセル。マスの間にははっきりした罫線を引き、空のマスは hover で効果が出るようにしてください。全体を画面中央に配置し、背景はダーク系で。 X は青、 O は赤に。 Find Game ボタンは目立つデザインに。記号を置いたときは控えめなスケールアニメーションを付けてください。全体の印象はクリーンでモダンに。
04 · 読む
盤面を動かすカギになる CSS パターンが CSS Grid です。複雑な table レイアウトや flexbox の小技は要りません。 CSS Grid なら 3 行で 3x3 の盤面が作れます：``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
これだけ。 3 列、各 100 ピクセル幅、マスの間に 4 ピクセルの隙間。あとはブラウザがレイアウト計算を全部やってくれます。各マスは grid 内の <button> 要素にしましょう —— div ではなく button にするのは、 button が標準でキーボードフォーカス可能、スクリーンリーダーからもアクセス可能だからです。
ポイントまとめ
- CSS Grid なら 3x3 レイアウトが簡単
- repeat(3, 100px) で同じ幅の 3 列を作れる
- 各マスを <button> にすると、キーボード操作とスクリーンリーダーで使える
- Socket.io は /socket.io/socket.io.js で自動的に client script を提供
05 · 実機演習
Server を起動して、ブラウザでゲームボードをプレビューしてみましょう。
06 · クイズ
盤面のマスに <button> 要素を使うのはなぜ？ <div> ではなく。
- Button のほうがデフォルトの見た目が良いから
- Div には click event listener が付けられないから
- Button はキーボードフォーカスでき、スクリーンリーダーからも使えて、すべてのプレイヤーが操作できるから
- Socket.io が button 要素としか動かないから
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。