Last updated on

Claude Code にマインスイーパを丸投げしたら2分で動いた話


「Claude Code ってコード書いてくれるって言うけど、実際どのくらいできるの?」という疑問に答えるべく、マインスイーパを丸投げしてみました
結果:2分16秒で動くゲームが完成しました

投げたプロンプトはこれだけ

src/pages/games/ フォルダにブラウザで動くマインスイーパを作って。
HTML/CSS/JavaScript のみで実装(フレームワーク不要)。
- 9×9マス、地雷10個(初級)
- 左クリックで開く、右クリックで旗を立てる
- クリア・ゲームオーバーの判定あり
- リセットボタンあり
- スマホでも動くようにする

これだけです。あとは Claude に任せました。

💡 ぶっちゃけ、このプロンプトも Claude に書いてもらいました。 「ブラウザで遊べるマインスイーパを作りたいんだけど、プロンプト作って」と一言投げたら、上の箇条書きが出てきた感じです。

Claude が実際にやったこと

プロンプトを送ると、Claude はこんな順番で動きました。

Claudeがコードを書いている画面

  1. まずプロジェクト構造を確認(既存ファイルを2つ読み込み)
  2. src/pages/games/ フォルダがないと判断 → 直接ファイルを作成
  3. minesweeper.astro を一気に341行書き上げる(約30秒)
  4. 開発サーバーを起動して動作確認
  5. CSS のバグを自分で発見して修正
  6. タイマーのリセットバグも自分で直す

「作りました、確認してください」ではなく、自分でテストして、バグを見つけて、直すまで全部やってくれたのが驚きでした。

341行のコードが一瞬で

差分ビューアを開くとこんな感じ。緑色がすべて Claude が書いたコードです。

差分ビューア(341行追加)

ちなみに頼んでいない機能まで実装されていました。

実装してくれた機能頼んだ?
9×9ボード、地雷10個✅ 頼んだ
左クリックで開く、右クリックで旗✅ 頼んだ
クリア・ゲームオーバー判定✅ 頼んだ
リセットボタン✅ 頼んだ
スマホ対応✅ 頼んだ
タイマー(初回クリックで開始)❌ 頼んでない
旗カウンター(残り旗数を表示)❌ 頼んでない
バイブ対応(地雷を踏んだら振動)❌ 頼んでない

「頼んでないのに気を利かせて実装する」のが Claude らしいです。

内蔵ブラウザでそのまま確認

デスクトップ版には内蔵ブラウザが搭載されていて、作ったものをアプリの中でそのまま確認できます。

内蔵ブラウザでマインスイーパが動いている

「コードを書く → ブラウザで確認 → 修正」という往復をアプリ内で完結できるのが便利です。

ちゃんと動いてるか遊んでみた

ゲームオーバー:

ゲームオーバー画面

クリア:

クリア画面(42秒)

旗カウント・タイマー・クリア判定、全部ちゃんと動いてます。スマホでも確認しましたが問題なし。

2分16秒の内訳

フェーズ時間
プロジェクト確認約10秒
コード生成(341行)約30秒
開発サーバー起動約20秒
動作確認・バグ修正約75秒
合計約2分16秒

人間がゼロからマインスイーパを書いたら、スマホ対応・タイマー・旗カウンター込みで早くても2〜3時間はかかります。それが2分16秒。

「丸投げ」のコツ

やってみて気づいたポイントを3つ。

① 要件は箇条書きで渡す

「マインスイーパ作って」だけでも作ってくれますが、欲しい機能を箇条書きで渡すと精度が上がります。

② モードは「編集を承認」でOK

「Auto accept edits(編集を承認)」モードにしておくと、Claude が自分でどんどん進めてくれます。プランモードだと確認ステップが増えて時間がかかります。

③ 途中で止めない

Claude が「動作確認します」と言い始めたら、そのまま見守りましょう。自分でバグを見つけて直してくれます。

スマホの不具合もClaudeで直した

公開後にスマホで遊んでみたら、旗を立てる操作がうまく動かない不具合が出ました。

元々は「長押しで旗を立てる」仕様だったんですが、長押しの判定が不安定で、長すぎると旗が立てられないという問題が。

そこで Claude に相談しながら原因を調査したところ、タッチ中に DOM が再生成されて touchcancel が発火していたことが判明。最終的に「長押し」をやめて モード切替ボタン を追加する方向に変更しました。

モード切替ボタンが追加されたスマホ画面

ボタンをタップするたびに 💣 開くモード🚩 旗モード が切り替わります。長押しより断然使いやすい。

💡 「作る」だけじゃなく「直す」作業も Claude に相談しながらできるのが、Claude Code の面白いところだと思います。

実際に遊べます

このブログのゲームページに置いてあります。

マインスイーパで遊ぶ

まとめ

「AIにコードを書かせる」というより「AIに作業をまるごと任せる」感覚です。

書く→確認→直す、という往復を全部 Claude がやってくれるので、人間がやることは「何を作りたいか伝える」だけ。

Claude Code を入れたばかりで「何ができるか試したい」という方は、今日の記事のプロンプトをそのままコピペして投げてみてください。2分後には動くゲームができています。

次のステップ


このブログでは、Claude Code の使い方や Tips を 初心者向けにわかりやすく 発信しています。お気に入り登録お願いします 🙌

🧑‍💻
この記事を書いた人
AI-Nyanko

某外資系コンサルのインフラエンジニア。Claude Code の実践ノウハウを失敗談も含めて正直に発信しています。

プロフィールを見る →