Claude Codeでテトリス作ってみた🎮

AIエージェントでゲーム開発に挑戦！

「自分でゲームを作ってみたい！」

小学生の頃、誰もが一度は夢見たことがあるのではないだろうか？

以前は個人でゲーム開発をするためにも、プログラミングやIT知識が必須だった。

しかし近年、AIエージェントを使えば、個人で楽しむ程度のクオリティのゲームを誰でも簡単に作れるようになった。

今回は、AIエージェントを使ったことがない人向けに、

① デスクトップ版Claude Codeでの気軽な作り方 
② 本格的に開発したくなったときの進め方 

の順番で書いていく。

実際にゲームが作れた時、とても感動した。

ぜひゲームを自分の手で作る感動を体感してみてほしい！

デスクトップ版で、気軽にテトリスを作ってみた

Claude Codeには、ターミナル（文字だけで操作する画面）を使わないデスクトップアプリ版がある。

簡単4ステップで、テトリスを作ることができる。

ステップ1：Claude Proに契約する。

その後、Claude Desktop（デスクトップアプリ）をインストールしてログインする。

すると、CodeタブというPro以上のプランで使える機能が使えるようになる。プランはClaudeの公式サイトで確認できる。

アプリも公式サイトからダウンロードできる。　
Node.js（プログラムを動かすための土台）を別に入れる必要はない。

ステップ2：空のフォルダを作る。

今回は「tetris-beginner」という名前のフォルダを作成した。
デスクトップなど、好きな場所でいい。中身は空で問題ない。

Windowsの場合は、Git（変更履歴を管理する仕組み）が入っていないとこのあとの手順が動かないので、先に入れておく。Macは標準で入っていることが多い。

ステップ3： Claude Desktopを開き、Codeタブを選ぶ。

「Codeタブ」で、「フォルダのマーク」から、ローカルファイル内の「tetris-beginner」を指定する。

ステップ4：プロンプトを入力する。

今回は以下のプロンプトを入力した。

HTML・CSS・JavaScriptだけで動くテトリスを作ってください。 index.htmlだけで遊べるようにしてください。

数分待つと、ちゃんと遊べるテトリスができていた！

tetris-beginnerフォルダ内の「index.html」と書かれたファイルをクリックすると、Webブラウザが立ち上がり、テトリスが遊べる。

ちゃんとブロックが落ちて、消えて、スコアも増える。

専門知識がなくても、AIで遊びながらゲームが作れた！

ただバグや仕様を変えなくてはいけない点もあった。

僕はテトリスは初心者なので、プレイしての検証は素人目線での感想になるが、AIエージェントによるレビューを参考にしてバグを見つけた。

僕は遊んでいるちに
「細かい点を修正したい！　本物のゲームに近いものを作りたい！」
そう考えるようになった。

以下では、そんな人に向けてお勧めな方法を紹介する。

本格的に開発するなら、VS CodeとGitHubを使うのがおすすめ

もっと作り込みたくなったら、VS Code（コードを書くための無料の開発ツール）とGitHub（コードを保存・公開できるサービス）を使うのがおすすめだ。

理由は3つある。

1, VS Code：Claude Code以外の開発ツールも一緒に使える。拡張機能が豊富で、ターミナルも本格的に使える。

2, Git：変更履歴を管理できるので、いつでも元の状態に戻せる。

3, GitHub：作った作品を保存・公開できる。

GitとGitHubに関しては、今後詳しく説明する記事を執筆する予定だ。

今はとりあえず、GItHubというサービスがあるということを知っておいてもらえれば大丈夫だ🌱

本格的に手を動かしたい人には、ここが次の一歩になると思う。

準備の手順はシンプルだ。

まず、初めての方は以下のサービスを登録・ダウンロードする。
・GitHub（Web版）で新規会員登録
・GitHub（デスクトップ版）をダウンロードする
・VS Code（デスクトップ版）をダウンロードする

そのあとは簡単3ステップ！

1.GitHubでリポジトリ（コードの保存場所）を作る

2.GitHub Desktopでローカル（自分のパソコン）にクローンする

3.VS CodeでClaude Codeを起動する

VS Codeの初期設定は少し複雑なので、インストールからClaude立ち上げまでの手順は、添付したYouTubeの15:51〜を参考にしてほしい。

これで変更履歴を管理しながら、本格的に開発を進められる環境が整った！

（補足）
GitHub（ディスクトップ版）を使用するのは、Clone,Commit,Pushなどの操作方法がわかりやすいためです。説明すると文字数が多くなるので、今回は省略しました。

3通りの進め方で、同じテトリスを作って比べてみた

環境が整ったところで、進め方を変えて同じテトリスをもう一度作ってみた。

1. バイブコーディング（短い指示だけで一気に作ってもらう進め方）

2. 仕様書駆動開発（先に仕様書を作ってから実装する進め方）、

3. ハイブリッド型（上記両方を組み合わせた）

の3通りだ。

レビュー役にはCodex（別のAIエージェント）を使い、トークン数（AIとのやり取りの量）・変更のしやすさ・バグの多さを比べた。

①バイブコーディング

メリットとしては、作成にかかる時間が短かった。また、以下のような改良も気軽にすることができた。
1：NEXTを7つ先まで見えるようにした。
2：ホールド機能を追加した。
3：ミノが落ちる時と横一行が消える瞬間にエフェクトを追加した。

バイブコーディングのメリットは、気軽に操作性やレイアウトなどの、UI（ユーザーインターフェース）の変更が可能なことだ。

ただし、デメリットとしてバグも多く、直しても直しても新しいバグが出てくるという課題があった。

②仕様書駆動開発

次に、Claude Codeに

テトリスの仕様書を作成してください

と依頼し、その後あえてレビューをせずに、

その仕様書をもとに、HTML・CSS・JavaScriptだけで動くテトリスを作ってください。 index.htmlだけで遊べるようにしてください。

とプロンプトを打ち込んで、開発してもらった。

すると、回転のルールやゲームオーバーの条件があいまいで、スタートボタンや一時停止ボタンが実装されなかった。

つまり、AIがいきなり完璧な仕様書を書くことは難しいということだ。

Codexにレビューを依頼し、レビュー内の指摘をもとに再度Claude Codeの仕様書を変更させるという手順を複数回行い。バグがなくなったと判定された時点でもう一度Claude Codeに開発を依頼した。

ところが、スタートボタンや一時停止ボタンに対する指摘に対して、最後まで改善されることはなかった。

このことから、一度仕様書を作ってしまうと、AIのレビューを元に改善するには限界があると感じた。

仕様書駆動開発のメリットは、仕様書の時点でバグを潰すことができれば、安定した開発を行える点だ。

デメリットとしては、プログラミング知識がない人はレビューができないため、完璧な仕様書を作るのが難しいことが挙げられる。さらに、一度作成された不完全な仕様書はAIエージェントのみでは改善しにくいと感じた。

③ ハイブリッド型

まずバイブコーディングでUIを固め、それを仕様書としてまとめ直してからレビューさせる方法を、ここではハイブリッド型と呼ぶ。結果、変更のしやすさとバグの少なさの両方を得られた。

3つのやり方で実測した数値は、次の表の通りだ。

結論として、個人的には以下の手順が良いと感じた。

1. 最初にバイブコーディングで基本機能・操作性・レイアウトなどのUIをバイブコーディングで作成する。

2. 作成したUIを元に、Claude Codeに仕様書を作ってもらう。

3. Codexにレビューをしてもらい、バグを潰し、仕様書の完成度を高める。

4. 完成した仕様書をもとに、仕様書駆動開発を行う。

これなら、気軽にUIが変更できるバイブコーディングの良さと、バグが発生しにくい仕様書駆動開発の良さの双方のメリットを得ることができると感じている。

まとめ: デスクトップ版から始めて、少しずつレベルアップする

ここまでを振り返ると、一つの道筋が見えてくる。

まずは、Claude のデスクトップ版で気軽に作ってみる。

物足りなくなったら、GitHubとVS Codeで本格的な開発環境に移る。

さらに、バイブコーディングと仕様書駆動を組み合わせたハイブリッド型を試すと、一番バランスが良かった。

初心者がAIエージェントで何かを作るとき、いきなり本格的な環境から入る必要はない。

まずは手軽に形にして、それから一歩ずつ本格的にしていく。
この順番のほうが、僕には合っていた。

今日からできることとしては、Claude Codeのデスクトップ版を開いて、何か一つ簡単なものを作ってみるのがおすすめだ。

・オセロ
・将棋
・スイカゲーム

色々と作れるはずだ。

それだけで、AIエージェントと一緒に開発する感覚がつかめてくると思う。

次はまた別のお題で、AIエージェントとの付き合い方を試していきたい。

チャオラボでは新卒社会人やAI初学者に向けて、「AI × 副業」の最初の一歩を発信しています。

少しでも参考になったら、❤️やコメントをいただけると嬉しいです！

▼自己紹介記事

▼人気記事

最後まで読んでいただき、ありがとうございました！ AIの最新情報や、次の記事の進捗はX（@chaolabs_AI）で発信しています🐈