Claude Codeでシューティングゲームを作る:安野貴博のバイブコーディング超入門講座 第4回

YouTubeで開く ↗
概要

安野貴博によるバイブコーディング超入門講座の第4回は、Claude Codeを実際に触ってみる回である。前回はChatGPTでバイブコーディングを試したが、安野は、プロがコーディングに使っているのはChatGPTではなく、CodexやClaude Codeのような「AIコーディングエージェント」だと説明する。できることが広がる分、難しさも増すツールだという。今回はClaude Codeとは何か、どう使うのかを説明したうえで、ブラウザで遊べるシューティングゲームをゼロから作る過程を実演している。

13分で読めます

ブラウザのチャットとClaude Codeの違い

安野はまず、ChatGPTやGemini、Claudeのチャットとの違いから説明する。ブラウザ上のチャットに質問すると回答が返ってくる。コードを書いてもらうこともできるが、多くのファイルにまたがってコードを書かせたり、特定の箇所だけ直させたりするには限界がある、というのが安野の見方である。

これに対してAnthropicのClaude Codeには、安野によれば大きく3つの利点がある。1つ目は、ファイルを直接読み書きできることだ。チャットでは手元のファイルをコピー&ペーストするかアップロードする必要がある。Claude Codeは自分のパソコンの中でシステムが動き、ファイルを読み込んでClaudeに問い合わせ、その結果を見て次のファイルを読む、という作業を繰り返せる。ファイルの書き換えも代わりに行う。

2つ目は、コマンドを実行できることだ。コマンドとは、パソコンに命令を打ち込むことである。安野は、フォルダ内のファイル一覧を出す、サーバーに特定のリクエストを送る、ソフトをインストールする、といった例を挙げる。ブラウザのチャットでは、自分のパソコンのフォルダの中身を見ることすらできない。安野は、1つ目のファイル読み書きも、実はコマンド実行の一形態だと補足している。

3つ目は、プロジェクト全体を理解できることだ。アプリケーションは1つのファイルでできているわけではなく、複数のフォルダにあるファイルの集まりが1つのプロジェクトになっている。Claude Codeはフォルダ構成やファイル同士のつながりを把握したうえで作業するので、「このプロジェクトは何をしているのか」と聞くだけで、複数のファイルを見ながら全体像を理解してくれるという。

安野はこの違いを、チャットのAIが「相談相手」だとすれば、Claude Codeは隣に座って一緒に作業してくれる「同僚」や「パートナー」のような存在だと例えている。最近はClaude Code on the webのようにクラウド上で動くものも出ており、収録当日にはAnthropicが「Claude Code Routines」というクラウド上で動くClaude Codeの概念も発表したという。安野はこうした状況をややこしいと認めつつ、現段階では「自分のパソコンの中で、コマンドも実行させながら作業するAI」と理解しておけばおおむね合っている、と整理した。

使い方は3通り、最初はIDEの拡張機能から

Claude Codeの使い方として、安野は3つの選択肢を挙げる。

1つ目はターミナルだ。通称「真っ黒い画面」と呼ばれるアプリで、WindowsにもMacにもある。コマンドラインやコンソールとも呼ばれる。普段はマウスでウィンドウを切り替えたりクリックしたりしてパソコンを使うが、ターミナルでは文字、つまりコマンドを打ち込んでコンピューターとやり取りする。安野はコマンドを「おまじない」や「呪文」のようなものと表現した。Claude Codeをインストールすると、このコマンドライン上でAIと会話しながら作業できる。

2つ目が安野のおすすめで、統合開発環境(IDE)の中で使う方法である。文章ならWordやGoogleドキュメント、表計算ならExcelやスプレッドシートを使うように、プログラムを書くための編集ソフトとして「エディター」がある。その中でも、ファイル編集とコンソールが一体になっているなど、開発に必要な要素がそろったものをIDEと呼ぶ。今回は代表的なIDEであるVS Codeに、拡張機能としてClaude Codeを入れて使う。安野は、誰もがそうしているわけではないと断りつつ、多くの人がこのやり方をとっているのではないかと話している。

3つ目は、ブラウザ上で動くClaude Code on the webである。複数の作業を並列で進めるのに使えるが、最初に使うのはおすすめしないという。冒頭で「ブラウザで使うのがチャットのAI、そうでないのがコーディングエージェント」と説明したのに、それが一周して、ブラウザから使えてもクラウド上のサーバーにある実行環境でClaude Codeが動くものが出てきたため、ややこしいからだ。安野は、まず手元のパソコンでClaude Codeを動かしてコーディングエージェントを体感すれば、それがクラウドに移ったものがクラウド版だと徐々に理解できるので、Web版はいったん忘れてよいと勧めている。

料金と代替手段

Claude Codeは有料である。安野の説明によれば、月20ドル(日本円で約3,000円)のProプランが必要で、これはClaudeの共通プランなので、すでにPro以上の契約をしている人は追加料金なしで使える。もっと多く使いたい人向けには、月100ドルと200ドルの2段階のMaxプランがある。

学生などで支払いが厳しい人には、Claude Codeほど性能は高くないがそれなりに安く使えるものもあると紹介した。例としてAntigravityを挙げたが、安野は具体的な金額は今は把握していない、と断っている。お金に余裕のある社会人には、まずClaude Codeを使ってみるのが個人的なおすすめで、ChatGPTのCodexでもよいという。インストール方法や基本操作は他の動画を参照してほしいとし、本編は実演に移る。

プランモードで「計画」と「実装」を分ける

実演の題材はシューティングゲームである。安野は冒頭に「/plan」をつけ、次のような条件を雑に投げた。ブラウザで動くこと、今までにない斬新なものであること、エイリアンを倒したいこと、プレイヤーキャラのアイコンはペットボトルにすること。ペットボトル型の飛行機がエイリアンを倒しまくる、というあまり見たことのない設定である。

「/plan」はプランモードを明示的に呼び出す指示で、Claude Codeがいきなりコードを書き始めるのではなく、まず何を作るべきかを考えるモードだ。安野によれば、プランを見ながら自分の考えを加えて練り直し、最後に「実装して」と指示する。このように計画と実装を分けるのが、今のよいやり方だと言われているという。

実行すると、Claude Codeは「プロジェクトがほぼ空なので探索フェーズをスキップして直接設計に入ります」と表示した。安野は、Claude Codeが左側のフォルダの中身を見て、仮に置いたREADME.mdしかない(しかも中身も適当な文字だけ)ことを確認したうえでの判断だと解説した。作業の詳細は英語で表示され、「Bash」はパソコンにコマンドを実行させること、「Search」は検索させることだという。Ctrl+Oで、今何をしているかの表示を切り替えられる。

使用モデルは、安野によればAnthropicの現時点で最も優れたモデルであるOpus 4.6である。どれだけ頑張って考えるかを決める「エフォート」は「/effort」で設定でき、安野の記憶ではhigh、low、medium、max、autoがある。安野は賢いほうがいいという理由でhighにしている。設計には4つのツール、約1万9,000トークン(19.3k)、3分22秒かかった。

出てきた計画書「アクアディフェンダー」

Claudeが作った計画書のタイトルは「アクアディフェンダー:ペットボトルシューティングゲーム」だった。単なるスペースインベーダーのクローンではなく、「水資源管理」を中心にしたゲームデザインだという。形式はツインスティック風のアリーナシューターで、ペットボトルの水が弾薬であり体力でもある。撃てば水が減り、軽くなって速くなるが弱くなり、死に近づく。計画書はこのジレンマを核心と位置づけていた。安野は「自分のHPを削るタイプ」だと面白がっている。

計画書には技術構成、作成するファイル(1つのファイルにゲーム全体を収める)、ステップ1から15までの実装手順、操作方法、ボス戦まで書かれていた。技術構成は視聴者には意味不明だろうから、後で理解すればよいと安野は述べている。

計画を書き終えると、Claudeは実行するかどうか選択肢を出す。1と2はどちらも「Yes」だが、1はオートアクセプト(ファイル作成やコマンド実行を任せきりにする)、2はマニュアル承認(一つ一つ自分が確認して可否を判断する)である。安野は基本的にはオートアクセプトでよいとしている。ただしその前に、3つ目の選択肢で「ペットボトルは赤くしてほしい」と修正を伝えた。プランが更新され、「赤いボトル本体」という記述が入ったことを確認してから、オートアクセプトで実装に進んだ。

実装中は、やるべきことがTodoのチェックボックスとして並び、Claude Codeが一つずつ片付けていく様子が表示された。

待ち時間の話1:カレンダー分析アプリのアイデア

実装を待つ間、安野は「ゲームを作りたいわけではない」という視聴者に向けて、自分が今作りたいものを紹介した。仕事で役立ちそうなものとして挙げたのが、カレンダーを分析して時間の使い方を振り返るアプリである。

まず、人生の時間を何にどれくらい使いたいかという配分を先に決めておく。安野自身の例で言えば、ミーティング、メディア出演、YouTubeにそれぞれどれくらい使いたいか、といった具合だ。そのうえでGoogleカレンダーやOutlookのカレンダーからデータを引っ張ってきて、実際の配分と比べれば、どこに時間を使いすぎているかが分かる。こうしたアプリも、先ほどのように「自分のカレンダーを見て時間の使い方を見つめ直すアプリを作りたい」とプランモードで伝えれば、Claude Codeがいろいろ計画してくれるだろう、と安野は話した。

待ち時間の話2:Claude CodeからCodexを呼ぶ

もう一つ安野が最近使っているのが、Codexとの連携である。安野の評価では、ChatGPTの5.4のCodexはかなり賢く、AnthropicのOpus 4.6と比べても賢い。安野は基本的にはClaudeを使っているが、作ったもののレビューには、自分とClaude以外の第三の視点としてChatGPTの視点を入れたいことがあるという。ChatGPTは「コミュニケーションしづらいけれど賢さはある」ので、自分の知らない観点のバグや、よりよい設計を見つけてくれることがある、というのが理由だ。

Claude Codeの中からCodexを呼び出すこともでき、最近は公式から、Codexのレビューに直接つなげるClaude Codeのプラグインが出てきたので、そうしたものを使ってもよいと紹介した。

完成したゲームを遊ぶ

しばらく待つと実装が完了し、フォルダにindex.htmlが新しくできていた。中を開くと約1,500行のコードが書かれていた。ブラウザで開けば遊べるということなので、ファイルをダブルクリックすると「アクアディフェンダー ペットボトル VS エイリアンズ」というタイトル画面が表示され、赤いペットボトルが浮いていた。

1回目のプレイでは、エイリアンが寄ってくるものの攻撃方法が分からず、自分の身を削っているような感覚のままゲームオーバーになった。さらにここでバグを見つけた。ゲームオーバー時に画面が揺れる演出があり、そのあと再びスペースキーでスタートしても画面が揺れ続け、プレイできなくなるのである。

画面をよく見ると、クリックで撃ち、マウスで狙い、Rキーで「リサイクルアタック」が出せると書いてあった。2回目は操作が分かり、敵の種類が複数あることやウェーブクリアの演出も確認できた。安野は「結構面白い」と反応している。一方で、右クリックとRキーのリサイクルアタックは機能していないようだった。それでも安野は、ぱっと出した割には極めてよくできていて、遊べるものになっている気がすると評価し、ニューハイスコアを取ったことを喜んでいた。

バグを伝えて直させる

次に、見つけたバグを修正させた。安野の指示は「一度ゲームオーバーになると画面がグラグラ揺れるが、その後ニューゲームの画面に戻ったときにもこのエフェクトが継続していて、とてもじゃないがプレイできない。直して」というものだ。起きた状況をきちんと伝えればよい、と安野は言う。

Claude Codeは原因を確認し、画面シェイクのタイマーを減らす処理が特定の状態でしか行われていないため揺れが止まらなくなる、と説明した。そのうえで、その処理を全状態で共通の冒頭部分に移す修正を行った。画面上では、緑色の部分が追加された箇所、赤い部分が削除された箇所を示す。修正が効いたかどうかは、先ほどと同じようにゲームを立ち上げれば確認できる、と安野は説明した。

安野は、基本的な流れを「プランする→実装させる→自分で使ってみる→使った結果、追加したい機能や直したいバグをまた指示する」の4つだとまとめた。これをPDCAにたとえようとして、Plan、Do、Check、Actionの順番に少し迷う場面もあった。

分からない単語はClaude Codeに聞く

最後に安野が付け加えたコツは、分からないことをClaude Codeに聞くことである。プランの技術構成には知らない単語が並んでいたはずだが、「かみ砕いて教えて」と頼めば答えてくれるという。

実際に「さっきのプランにHTMLという単語があったけど、これはどういうこと?」と聞くと、Claude Codeは次のように答えた。HTMLはHyperText Markup Languageの略で、Webページを作るための言語であり、ブラウザが理解できる設計図のようなものである。今回のゲームでは、HTMLでページの骨組みを作り、CSSで見た目のスタイルを変え、JavaScriptでゲームの動きを作っている。この3つを1つのHTMLファイルにまとめているので、ブラウザでファイルを開くだけで動き、サーバーもインストールも不要だ、という内容である。

安野は、そこからさらにCSSとは何か、JavaScriptとは何かと聞いていけば、最初のプランにあった技術のことも少しずつ分かってくるとし、概要だけでもいいので自分の理解の解像度を少しずつ高めていくことを勧めた。

繰り返すことで作れるものが増える

安野は今回の内容を、Claude Codeを入れてみて、プランさせ、実装させ、動かしてみて、面白いところやいまいちなところ、直したいデザインが出てきたらまたClaude Codeに指示を投げる、という一連の流れを体験する回だったと振り返る。その過程で分からないことを聞きながら技術への解像度を上げていけば、技術も上がり、作れるものも増えていくはずだという。

また、Claude Codeは今回のようにプログラミングに使うだけでなく、普通の仕事にも使える幅が大きいと言われているとも述べ、視聴者に実際に触ってみることを勧めて講座を締めくくった。