なぜ要るか
企画は書けました。ここからが本番です。今日、遊べる形にします。
順番が大事です。絵を用意してから、音を入れてから、と積み上げると遊べるまでが遠くなります。遠いと途中でやめます。
だから逆にします。まず遊べるものを作って、そこに足していきます。 数字だけ、白い画面、それで構いません。1回自分で遊べたら、その日から改善が始まります。
そしてこれは、2章で企画を書いたからこそ短時間で終わります。書いた企画をそのまま渡すだけだからです。
使う道具: Claude Code
AIプロンプト
この術の作業をAIへ任せるときは、これをそのまま貼ってください。
docs/plan.md を読んで、その企画どおりのゲームを index.html に作って。1ファイルで完結させて、サーバーなしでブラウザで開くだけで遊べるようにして。相手はコンピュータ。今のindex.htmlは作り替えていい。
docs/plan.md の部分は、自分の企画を書いたファイルの場所に置き換えてください。
やってみる
企画のあるフォルダに入る
cd my-first-gamecdは「これからこのフォルダで作業します」という合図です。AIは今いるフォルダの中しか見ません。企画メモを置いたフォルダに入っていないと、docs/plan.mdが見つからないと返ってきます。企画を渡して作らせる
ここが山場ですが、頼むことは1行です。企画を読ませて、それどおりに作らせます。
claude -p "docs/plan.md を読んで、その企画どおりのゲームを index.html に作って。1ファイルで完結させて、サーバーなしでブラウザで開くだけで遊べるようにして。相手はコンピュータ。今のindex.htmlは作り替えていい。"claude -pの-pは「この1行だけ渡して、返事をもらったら終わり」という指定です。対話画面に入らずに済むので、頼みごとが1つのときはこの形が速いです。押したあとは、AIが作業の進み具合を流しながら数十秒から数分ほど動きます。止まっているように見えても待ってください。ルールを説明していないことに注目してください。
docs/plan.mdに書いてあるからです。 2章で書いた分がここで効きます。返事を読む
AIは作業が終わると、何を作ったかを文章で報告します。読む目的は答え合わせです。 企画に書いたことがそのまま作られているかを、この報告の中で確かめます。
実際に返ってきたものです。
画面（1画面に収まっています） - 上に相手の手札（裏向き。出すたびに減るので残り枚数が読める） - 中央に的が3つ。それぞれ上が相手の置いた札、下が自分の置いた札 - 下に自分の手札3枚。札を押してから、置く的を押します - 3手で打ち切り、的ごとに合計をくらべて勝敗を出します 作りの補足 - 1ファイル完結、CSSは同じHTML内。サーバー不要でダブルクリックで開けます - 置いた札は的の前に残したままにしました（企画メモの「見え続ける」どおり） - 合計が同じ的と、誰も置かなかった的は、どちらのものでもない扱いです「企画メモの『見え続ける』どおり」 と書いてあります。企画に書いた判断が、そのまま実装に反映されています。
同点の的の扱いは、この時点のルールです。6-6で実測して「あとに置いた方が取る」へ変えます。
開いて遊ぶ
open index.htmlopenは、指定したファイルをそのパソコンの既定のアプリで開くコマンドです。index.htmlはブラウザで開かれ、そこにゲームの画面が出ます。Windowsならstart index.htmlです。
手札の「1」「3」「5」から1枚押して、次に置く的を押します。2回押して1手です。
最後まで進めて、決着を確認する
手札3枚を置き切ってください。勝敗が出れば完成です。
2章で決めた完成の判定はこれでした。
手札3枚を置き切って、どちらが的を多く取ったかが画面に出たら完成。達成しています。 ここが最初の到達点です。
保存する
git add . git commit -m "企画どおりのゲームを作った" git push遊べた状態を記録に残す作業です。
git add .で今回変わったファイルをまとめ、git commitでその時点を1つの区切りとして保存し、git pushでネット側の置き場へ送ります。ここまでやっておけば、このあと壊しても1-4のやり方でこの状態へ戻せます。
1-5 のルールが効いています
返事の最後に、こう書かれていました。
画面描画は render()、的の取り手の判定は takerOf() の1箇所ずつにまとめ、
最初の配りと「最初から」は同じ newGame() を使い回しています
画面を描く処理と、的の取り手を決める処理を、それぞれ1箇所にまとめたという報告です。同じ内容を書いた場所が2つあると、片方だけ直して食い違うので、こうしておくと後で楽になります。
頼んでいません。 1-5で AGENTS.md にルールを書いたからです。AGENTS.md は、AIが作業のたびに読む決まりごとの置き場です。
- 同じ処理を2箇所に書かない。すでに同じことをしている場所があれば、そこを直して使い回す。
ルールを1行書いておいたおかげで、最初から散らかっていない状態で出てきました。この差はコードが増えるほど大きくなります。
つまずきどころ
思ったものと違うものが出てきた
企画に書いていない部分は、AIが決めます。気になるところを1つずつ直させてください。 「置いた札は的の前に残して」のように具体的に言えば直ります。
claude -p "index.html を直して。置いた札が消えてしまうので、的の前に残して見え続けるようにして。それ以外は変えないで。"
「それ以外は変えないで」を必ず付けてください。 付けないと、頼んでいない場所まで整えられて、どこが変わったのか分からなくなります。
エラーが出て何も表示されない
3-5でその切り分け方を扱います。先にそこを読んでも構いません。
30分で終わらなかった
企画が大きい可能性があります。docs/plan.md の「今回やらないこと」を増やしてから、もう一度頼んでください。
遊んでみたら面白くなかった
それが分かったことが今日の成果です。 紙の上では判断できません。次の術から手触りを直していきます。
Windows の場合
claude -p の使い方は同じです。ファイルを開くのは start index.html です。
Codex で進める場合
codex exec "docs/plan.md を読んで、その企画どおりのゲームを index.html に作って。1ファイルで完結、サーバーなしで動くように。"
見た目を整えたい部分が多いので、僕はこの工程は Claude Code に任せています。
次の一歩
自分で3回、遊んでみてください。わざと1つの的を捨てて遊ぶと、企画で決めた「どの的を捨てて、どの的を取るか」が成立しているか分かります。
動くものができました。ここからは足すのではなく、手触りを上げていきます！
ここまでの三つの的
この講座は、見本ゲーム「三つの的」を術ごとにすこしずつ育てながら進みます。下にあるのはこの術を終えた時点の実物です。そのまま遊べます。
