Claude Codeでシューティングゲームを作る:安野貴博のバイブコーディング超入門講座 第4回
安野貴博の自由研究安野貴博によるバイブコーディング超入門講座の第4回は、Claude Codeを実際に触ってみる回である。前回はChatGPTでバイブコーディングを試したが、安野は、プロがコーディングに使っているのはChatGPTではなく、CodexやClaude Codeのような「AIコーディングエージェント」だと説明する。できることが広がる分、難しさも増すツールだという。今回はClaude Codeとは何か、どう使うのかを説明したうえで、ブラウザで遊べるシューティングゲームをゼロから作る過程を実演している。
ブラウザのチャットと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は今回のようにプログラミングに使うだけでなく、普通の仕事にも使える幅が大きいと言われているとも述べ、視聴者に実際に触ってみることを勧めて講座を締めくくった。
Claude Codeっていうのは隣で作業してくれるような同僚というかパートナーというか。今までにない斬新なやつがいい。エイリアンを倒したい。わちゃっとですね、コードが書いてある。このコード1500行あります。遊べるものにもなってるような気がする。ニューハイスコアとかも取れた。嬉しい。
どうもこんにちは。安野貴博です。本日はバイブコーディング超入門講座第4回ということでございまして、Claude Codeとにかく触るという回になっております。前回ですね、ChatGPTでとりあえずバイブコーディングしてみようという回がありましたけれども、色々できるとはいえ、プロがですね、コーディングをする時に使ってるツールはChatGPTではなくてですね、CodexであるとかClaude Codeと呼ばれるようなAIコーディングエージェントのツールです。これね、かなりできることが広がる、難しさも広がるようなものではございますが、今日はですね、Claude Codeとは何か、そしてどうやって使うかを説明していきたいと思います。
今日ね、ホワイトボードがスカスカなのはですね、なんでかと言うと、これね、今日もいっぱい描こうとしたんですけど、ペンのインクがカスカスになっちゃって、スカスカになってます。ということで、最後のペンの最後の力を振り絞って、なんとか画面にも映りそうな2つだけ書いて終わってるっていうことなんですけども、
1つ目、まずClaude Codeとは何かというところからお話しします。ChatGPTとかGemini、Claudeのチャットは使ったことある方も結構多いと思うんですが、これはですね、Webブラウザー上で、皆さんの使ってるGoogle ChromeとかSafari、Firefoxとか、そういったブラウザー上で質問をすると回答してくれるよというものになる。前回お話ししたようにコードを書いてって言ったら書いてくれたりもするんですけれども、複数のコードを何個も何個も書いたり、ちょっとここは直したいっていうところとか、できることはまだまだ限定的なんですよね。一方で、今日申し上げるAnthropic社のClaude CodeはAIコーディングツールとして、かなりいろんな利点がございます。
まず1つ目はファイルを直接読み書きできるっていうことです。チャットだとね、そもそもパソコンの中に入ってるファイルをコピペしたり、あるいはファイルをアップロードしたりしながら使わないといけないんですが、Claude Codeって、その自分のパソコンの中にシステムが動いていて、そのシステムがこのファイル読み込んでClaudeに聞いて、帰ってきた結果を見て、じゃあ次はこのファイル読んでみたいなことをですね、色々できるようになっておりますので、そういう意味でいろんなファイルの直接的な読み書きができる。ファイル書くのもできるんですよ。というか、このパソコンの中に入っているファイルを書き換えていくっていうことも、代わりにですね、Claude Codeがやってくれます。
2つ目、これもでかいんですが、コマンドを実行できます。コマンドって何やと思われる方いるかもしれませんが、要するにパソコンの中でこのパソコンに何か命令を打つことができるんですよね。例えば分かりやすい例だと、このフォルダーの中のファイルの一覧をくれっていうコマンドとかがあったりするわけですよ。ブラウザー上のChatGPTとかClaudeだと、自分のパソコンの中のこのフォルダーの中を見たいみたいなことっていうのができないわけですね。だとか、あとはこのサーバーにこういう風に通信して欲しい、こういうリクエスト出して欲しいとかですね。このパソコンにこれをインストールしたい。そういうですね、いろんな命令をパソコンの中にやりたい場合もあります。これができるっていうのがClaude Codeのいいところです。実はね、1つ目で言ったファイルを読み書きするっていうのも、これパソコンに命令をすることができる、コマンドを実行できるってことの1つの形態なんですよね。そのうちの1つがファイルの読み書きだったりするんですけど、こういうことも含めてClaude Codeはできます。
3つ目は、アプリを作る時って、そのアプリケーションのファイルって1個でできてるわけじゃないんですよね。いろんなフォルダーの中にいろんなファイルがあって、その全体が1つのアプリケーションのプロジェクトなわけですけど、このですね、プロジェクト全体の理解もできるっていうのもいいところです。全体のフォルダー構成とかファイル同士の繋がりであるとか、そういったものを把握した上で作業をしてくれるので、このプロジェクト何やってるものなのって聞くだけで、結構全体像をいろんなファイルを見ながら理解してくれたりします。
ざっくり言うと、チャットのAIが自分の相談相手だとしたら、Claude Codeっていうのはなんか自分の横にいてくれて、ガーっと自分の隣で作業してくれるような、なんか同僚というかパートナーというか、なんかそういう存在だと思っていただけると、なんとなくイメージつくかなと思います。最近はね、Claude Code on the Webとか、そういったクラウド上で勝手に動くClaude Codeとかもどんどんどんどん出てきてて、今日の発表だとですね、Claude Codeルーティンっていう、Anthropicが作ったクラウド上で動くClaude Codeみたいな概念も結構出てきてるんで、色々ややこしくはあるんですけど、とにかく今の現段階では、Claude Codeっていうのは自分のパソコンの中で、色々パソコンも使いながら、パソコンにいろんなコマンドも実行させながら作業もできるようなAIなんだなと思っていただければ、ざっくり合ってると思います。
次、どうやって使うのかということなんですが、これいろんな選択肢があります。1つ目はエディターと呼ばれるような、プログラムを書くための編集ソフトみたいなものがあります。例えば皆さん、表を作る時にはExcelを使って、何か文章を打ち込む時にはWordとかGoogle Docsとか使うと思いますが、それってやっぱ編集のソフトなんですよね。プログラミングのソースコードを書くための編集ソフトっていうものがあって、それがエディターとか、この後に予定されてるIDEとか呼ばれてるものがありますが、これね、使い方色々あるんですが、大きく3つあります。
1つはターミナルと呼ばれるですね、通称真っ黒い画面なんですけれども、パソコンにですね、真っ黒な画面で、ちょっと見たことない方はあんまりイメージつかないかもしれないですが、真っ黒の画面があるんですよ。真っ黒な画面で文字をカタカタ打つことによってパソコンに命令を出すっていう、そういうアプリがあります。これWindowsにもMacにもあるんですけれども、これコマンドラインとか、コンソールとか、そういう風に呼ばれるものでございまして、これはですね、実は皆さん普通にパソコンを動かす時って、キーボードでマウスカーソル動かして、そのグラフィック上でウィンドウがたくさんあって、それを切り替えたりしながら、クリックとかしながら使うと思うんですが、このコマンドライン、ターミナル、コンソールと呼ばれてる真っ黒画面系はですね、文字を打つことでコンピューターとコミュニケーションするんです。その打ってる文字が何かと言うと、コマンドと呼ばれる、さっき言ったですね、パソコンに何か命令を実行させるための、お作法というか呪文なんですよね。Claude Codeっていうものをインストールすると、コマンドライン上でAIと会話しながら作業ができるようになります。
2つ目の候補、これがおすすめではあるんですけど、いわゆる統合開発環境と呼ばれたりもしますけれども、そういったもののプログラミングをするための編集ソフトがあります。これはエディターと呼んだりします。文章を作る時にWordとかGoogle Docsとかを使う。これも編集ソフトです。例えば表計算をする時にはExcelとかスプレッドシートを使うと思いますが、これも表をいじるための編集ソフトで、これのですね、プログラムを書くための編集ソフトとしてよく用いられてるのがエディター。エディターの中でもさらにちょっといいやつ、ただ文字を編集できるだけじゃなくて、それこそコンソールと文字編集、ファイル編集機能がくっついてたりとか、他にもいろんな要素が見えたりする、開発に必要なソフトのことをIDE、統合開発環境と呼んだりします。今日はですね、この統合開発環境の中でも有名なVS Codeというエディターがありまして、そこのVS Codeの中の1つの画面として、拡張機能としてClaude Codeを使うやり方があります。これがですね、一般的というか、別に一般的というほどみんなが絶対そうってわけじゃないですけど、結構多くの方は、こういったIDEの中にClaude Codeを拡張機能として入れるやり方を取っているんじゃないかと思います。
3つ目は、1番最初にやるのはあまりお勧めしないんですけれども、ちょっと慣れてきた時に使うべきなのが、先ほど申し上げたClaude Code on the Webみたいなものでございまして、Webブラウザ上で動くClaude Codeがあってですね、それを並列で色々作業のために使っていくというやり方もあります。これね、ちょっとややこしいんですけど、というのは、ChatGPTとかClaudeの話の時に、ブラウザで使うのがAIで、そうじゃないのがコーディングエージェントだっていう説明を冒頭にしましたが、最近さらにそこが一周して、いやいや、クラウド上のブラウザーで使えるんだけど、Claude Codeくらい、後ろにですね、パソコンがあって、パソコンというか実行環境があって、実行環境というか、コンピューターみたいなものが後ろ側にあって、それぞれのコンピューター、クラウド上のサーバーの中にあるコンピューターの中でClaude Codeがそれぞれ動いているものが使えるというのが、クラウド版のClaude Codeです。なんかね、ややこしいんですが、まだこれは覚えなくていいです。まずは手元のパソコンの上でClaude Codeを動かすっていうところからやると、これがコーディングエージェントねと。で、このコーディングエージェントがクラウド上に行くと、クラウド版なのねっていうのが徐々に徐々に分かると思うんで、一旦3つ目のWeb版のClaude Codeのことは一旦忘れるといいと思います。
次に料金のことも少しお話ししますが、Claude Code、残念ながらですね、有料です。有料で月に20ドル、日本円で大体3000円くらいのProプランというのが必要になります。これはですね、Claudeの共通プランと同じなので、Proに入ってる方とか、Pro以上の契約をすでにしている方は追加料金なしでそのまま使えます。もっとヘビーに使いたい方はMaxプランというものもあって、それは月額100ドルと200ドルの2段階あるという状況です。例えば学生さんとかで、それを払うのなかなか厳しいなという方がいたら、Claude Codeほど性能高くないんだけれども、それなりに安く使えるよっていうものも世の中にはあったりしますので、ちょっと今私も具体的な金額把握してないですが、Antigravityとかです。ここら辺はそれなりに安く使えたような気がしております。お金がある社会人の方は、Claude Codeをまず使ってみるのが個人的なおすすめです。もちろんChatGPTのCodexでもいいと思います。
ということで、Claude Code実際に動かしながら、こんな感じかっていうのをね、見ていただければと思うんですけれども、まずインストールとかは他の動画見てください。他の動画見てインストールして、基本的な使い方とかはそれを見た上で、ちょっとこっちの動画に戻ってきてくれると嬉しいなと思うんですけど、その上でシューティングゲームかなんかを作ってみようというのを実際にやってみれるといいなと思います。
ということで、よいしょ。今回はじゃあ何をやろうかっていうことなんですが、まずシューティングゲーム作ろうと思います。シューティングゲーム作る時にプランモードというものがございまして、シューティングゲームを作りたい、ブラウザで動かせるやつがいいな。あとはなんだろうな。今までにない斬新なやつがいい。エイリアンを倒したい。プレイヤーキャラのアイコンはペットボトルがいい。ペットボトル型のなんか飛行機がエイリアンを倒しまくるみたいなのいいよねっていう、なんか雑に、あんまり見たことない設定で投げてみたいと思います。
この/planって書いてあるの何かと言うと、これはですね、Claude Codeがいきなりコーディングをし始めるんじゃなくて、まずはどういうもの作るといいんだろうかっていうことを考えるモードです。プランして、そのプランを見ながら、それに対してより良いアイデアにするにはどうすればいいかを考えていって、プランにああでもない、こうでもないっていうのを書いた後に、最後これ実装してって言う。このプランして、そのプランに自分の考えをインプットして実装するっていうですね、プランと実装を分けるっていうのが今のいいやり方だねと言われてます。このプランっていうモードで明示的にやらせたい時に、この/planというのを冒頭につけるといいねということでございます。
今、これ何やってるかと言うと、Claude Codeがなんか考えとる、考えとるのというのが分かります。今、プロジェクトほぼ空って書いてありますけれども、探索フェーズはスキップして直接設計に入りますって書いてありますが、これどういうことかって言うと、左側のね、このフォルダーの中身とかを見てるんですよ。見ていて、ほとんどこのフォルダーにファイルないやんけと。今README.mdというものを仮に置いてて、その中身もなんか適当な文字しか打ってないんですが、ここまでの間にClaude Code君はですね、今いるフォルダってどんなファイルがいっぱい入ってるのかなっていうのを見てくれてるんですよね。見た上で、探索フェーズスキップして直接設計に入るよと言ってくれてます。
今ね、プランしてくれています。詳細見てみると、おあ、終わったかな? プロンプトとこんな感じで、こういうものでっていうのを英語で考えております。英語で考えたり、このBashなんとかっていうのはコマンドをパソコンに実行させるとか、Searchなんとかっていうのはこのコマンドを検索させるとかですね。なんかそういうものになっております。Ctrl+Oで、この今何してんのっていうのをトグることができるようになってますね。結構考えてくれてます。
考えてくれていまして、これですね、今使っているモデルがOpus 4.6というモデルで、今のところAnthropicが出してるモデルとしては1番いいモデルになってます。さらに言うとですね、どれくらい頑張って考えるかっていうエフォートっていうものがあるんですけど、その頑張って考えるモードに設定してるので、それなりに頑張ってると。でも結構長いな。大丈夫かな? この右下に出てくるのが、ハイって書いてあります。これがそのエフォートですね。エフォートはですね、/effortで、どんくらいなのかっていうのをセットできたと思います。確かハイ、ロー、ミディアム、マックス、オートでありますが、デフォルトはハイにしてます。なんか賢い方がいいんで。
設計完了したみたいです。こんな感じでね、4個のツールを使って19.3K、だから1万9000トークンを使って、3分22秒かけてこのプランを完了しましたと。今、設計が完了してプランファイルを作成しますと言われてます。なので、考えて、そのさっき言った斬新なペットボトルでエイリアンを倒すゲームの設計完了したので、その計画書をね、プランファイルって計画書なんですけど、計画書を作ってくれております。
出てきました計画書。これがClaudeのプランですと。アクアディフェンダー、ペットボトルシューティングゲームっていう感じの名前がついておりまして、ブラウザで動作する斬新なシューティングゲームを作成する、みたいな。単なるスペースインベーダークローンではなく、水資源管理メカニクスを中心とした革新的なゲームデザインだと。ツインスティック風アリーナシューター。ペットボトルの水が弾薬であり体力でもある。撃てば水が減り、軽くなって速くなるが、弱くなり死に近づく。このジレンマが核心。ちょっと面白いですね。なんか自分のHPを削るタイプのやつなんですね、みたいな感じで、ガーっと書かれてます。そして技術構成書かれてます。技術構成、多分このバイブコーディング超入門講座を見ている方は、まだ知らない方もたくさんいらっしゃると思ってて、意味不明だと思うんで、一旦技術構成は後で理解するでいいんじゃないかなと思います。ファイルとしてはこのファイル作るよと言っていて、この中にゲームの全体突っ込むんだと。実装のステップはステップ1、ステップ2、ステップ3がこんな感じで示されていて、ふんふん、なるほどねと。ステップ15まであります。操作方法こんな感じで、ほう、水なのねと。
今これね、選択肢が提示されてます。これね、ちょっと英語だったりするんですよね。Claudeはプランを書き切りましたと。実行しますかということを言われてます。この時に、このClaudeが出してきた計画書を見て、なるほどいいねと思ったら、1をYesと押してください。2もYesって書いてますが、1と2の違いは何かって言うと、何かファイルを作る時とか、何かパソコンに実行させる時に、オートアクセプトっていうモードとマニュアルアプルーブエディッツって2つがあります。オートアクセプトはその名前の通り、オートで、自動で全部勝手にClaude作業しといてっていう丸投げするパターンで、マニュアルアプルーブっていうのは、自分がですね見て、これいいねとか、これはダメだねっていうのを1個1個判断してくってやつなんですけど、オートアクセプトで基本はいいと思います。
ただ1つプランを変えたいなと思うことを言ってみたいと思う。ペットボトルは赤くして欲しいです、ってやると、この第3の選択肢、ペットボトルを赤くしてくれっていうのが言われます。プランを更新しますってことで、プランをね、今アップデートしてくれてます。アップデートするとプラン出てきました。ペットボトルが赤くなっているかどうかをチェックしようと思いますが、ここにですね、赤いボトル本体っていう感じで、ここに赤いボトルってのが入りました。いいねと思います。こんな感じ。あとなんだろうね、ボス戦とかもちゃんと考えてあるんですね。みたいな感じで、僕もシューティングゲームを作ったの初めてですが、なんとなくいい感じなので、Yes、オートアクセプトってやります。
そうすると今度はですね、このプランに沿ってどんどんどんどん実装をしていきます。つまりClaude Codeが実際にコード書いてくれてるわけですね。プランが承認されました、実装開始しますということで、ガガっと今ですね、作業をしまくってもらっています。これね、チェックボックスとして今やることっていうのが、ステップで、ToDoで、タスクで示されていまして、それを1個ずつやっとるよという感じです。これ多分ね、しばらく時間かかるので、ちょっと待ってましょうか。
ちょっと待ってる間に何かClaudeの面白話ができるかと言うと、そうね、ゲームを今作ってみてますけど、多分見てる方、いや、ゲームが作りたいんじゃないんだよって思ってる方もいらっしゃると思います。そういった方向けに言うと、そうですね、最近僕の作りたいものランキングにあるのが、仕事で役立ちそうなもので言うと、カレンダーのビジュアライズしたいなと。ビジュアライズっていうか、カレンダーを分析して、あなたの時間の使い方こうですよと、もうちょっとこうした方がいいんじゃないですかっていう、それを管理できるようにしたいなっていうニーズが僕にあります。例えばね、こういうの作ると便利そうだよというアイデアを投げると、カレンダーの、何にこれくらいの時間使いたいっていう時間配分、自分が人生で生きてる中の時間配分を先に決めといて、そこと比べた時に、例えば僕で言うと、仕事に、ミーティングに使ってる時間これくらいであってほしいよねとか、あとはメディア出演に使ってる時間これくらいだよねとか、YouTubeはこれくらいだよねとか、そこら辺を先に決めといて、じゃあそれに対して今どれくらいなのかっていうのを見れると、ここに時間使いすぎなんだなとか、あれに時間使いすぎなんだなとか、そういうことが分かるということで、それをカレンダーのデータ、皆さんGoogleカレンダーとかOutlookのカレンダーとか色々使ってると思いますが、カレンダーのデータを引っ張ってきて、じゃああなたの時間の分析をしてみましょうという、こういうのできないかなと。これね、多分皆さん、Claude Codeでさっきみたいにプランして、自分のカレンダーを見て自分の時間の使い方を見つめ直すアプリケーション作りたいって言うと、またこれ色々プランしてくれると思います。
あとはなんだろうな、最近あった中でちょっと使ってるのは、Codexと繋ぐってやつがありましてですね。これ何かって言うと、ChatGPTの5.4のCodex、結構賢いんですよね。AnthropicのOpus 4.6と比べても結構賢い。基本的には僕Claude使ってるんですけど、レビューとか、その今作ったものに第3の視点を入れたい。僕とClaudeの視点だけじゃなくて、ChatGPTの視点を入れたいなみたいなことがあるんですよ。なぜならChatGPTの方が結構ね、賢さはある。なんかね、コミュニケーションしづらいんだけど賢さはあるので、俺の知らん観点のバグとか、もっといい設計とか、なんかそういうの見つけてくれることあるんですが、その時にClaude Codeの中からCodexを呼ぶということもできるようになっておりまして、最近ね、これね、オフィシャルが出してるClaude Codeプラグインで、こういうCodexレビューみたいな感じで直接繋げるものが出てきたんで、こういうのをね、使ってもいいかなと思います。ということで、今ゴリゴリ作ってくれているはずですが、結構時間かかりますね。
はい。ということで、ちょっと待ったらアクアディフェンダーが実装されました。さっき見てたこのフォルダーの中にindex.htmlっていうファイルが新しくできてることが分かります。このファイル見ると、多分こうわーっと、わちゃっとですね、コードが書いてあります。このコード1500行あります。この1500行をこのClaude Code君がわちゃっと書いてくれました。じゃあ実際にどうすればいいかというと、ブラウザーで開けばプレイできるということなので、プレイしてみましょう。
ということでね、ブラウザでダブルクリックしたらこんなんが出てきました。もうね、すごい。アクアディフェンダー、ペットボトルvsエイリアンズ。もう赤いペットボトルがありますよ。浮いてる。Press Spaceでスタートしてみます。はい。はい。はい。はい。はい。いや、なんかすごいっすよ。どういう風に、やっぱエイリアンがね、寄ってきてやばいですね。寄ってきてやばいんですが、どういう風に攻撃するのかがよくわからない。明らかに自分の何か間違ってる感じがする。身を削ってる感じがする。あ、ゲームオーバーになりましたと。ぐるぐる増えてる。スペース。
はい。これね、1つバグ発見しましたね。1回ゲームオーバーになってプルプル震えた後に、もう1回スペースでスタートすると、この画面が揺れ続けてしまって、こんなんプレイできないよというバグを発見しましたが、もう1回見てみると、あ、クリックで撃つって書いてありますね。マウスで狙う。そして、Rを押すとリサイクルアタックってのが出てくると。結構考えられてます。もう1回やってみましょう。
ほいほい。おお、すごい。すごい。おお。あ、で、これを言わすと、ほう、あれなんだ。ああ、なるほどね。結構面白いじゃないですか。いろんな敵の種類もあると。ウェーブクリア。おお、なるほどね。はい。はい。はい。
だんだん詰めてきましたよ。右クリックもしてみよう。右クリックは機能しないっぽいな。Rのリサイクルアタックも機能しないですね。なるほど。なるほど。なんかパッと出した感じにしては極めてよくできてるなという感じがしますね。やばいみたいな感じで、遊べるものにもなってるような気がする。ニューハイスコアとかも取れた。嬉しい。
ということで、さっきプレイしてみて、バグを発見しましたので、1度ゲームオーバーになると画面がグラグラ揺れますが、その後ニューゲームの画面に戻った時にもこの画面グラグラエフェクトが継続してしまっていて、とてもじゃないがプレイできない。直して。こんな感じでいいと思います。起きた状況をちゃんと伝えると、そうするとClaude Codeが、じゃあそれどうやったら直せるんだということを考え始めます。基本的にはね、このプランして、実装して、自分がちゃんと使ってみて、使ってみた結果、こういう機能を追加した方がいいなとか、こういうバグ直した方がいいなっていうのをまた指示するっていう、この4つですよ。PDCAですよ。ギリ。プラン、ドゥ、アクション、チェック…違うか? チェック、アクションか。まあいいや。
これ原因確認しますと言って確認してくれました。なんか画面シェイクのタイマー減算がこの状態にしかないので、こうこうこうするとシェイクが止まらなくなります。なのでこれを全ステート共通の冒頭に移動しますと。こういう風にちょっとね、修正されました。この緑色の文字っていうのは、このファイルのこの部分に新しく追加されましたっていう意味ですね。赤い文字、赤い部分っていうのは、これを削除しましたっていうことですね。こういう風にやれば直りますよねって出てきて、さっきのようにですね、立ち上げてみると、それが直ったか直ってないかというのが分かるという感じになっております。
基本的にはね、なんか言い忘れてたコツがないかなっていうことなんですが、プランした時に、さっきちょっと飛ばしちゃいましたが、技術的にはこういう風に実装するよと書いてあります。分かんない単語だらけだと思うんですけど、なんとなくどういうことなのか噛み砕いて教えてっていうのを言っていけばですね、Claude Code教えてくれます。例えばなんだろうな。さっきのプランでHTMLって単語があったけど、これってどういうことなの、という風に聞いてあげると、多分ですね、このClaude Codeって別に普通にこういった質問にも答えられるので、答えてくれます。HTMLっていうのはHyperText Markup Languageっていうことで、Webページを作るための言語ですよと。ブラウザーなどが理解できる設計図のようなものです。今回のゲームではHTMLでページの骨組み、CSSで見た目のスタイル、JavaScriptでゲームの動きを作ってます。この3つを1つの.htmlファイルにまとめているので、ブラウザでファイルを開くだけでゲームが動きますと。サーバーもインストールも不要ですと。こういうところで、じゃあCSSって何だという話とか、JavaScriptって何だって話をどんどんどんどん聞いていくと、最初のプランのところにあった技術のことも、なんとなく分かってくると思うんで、特にね、概要だけでもいいので、ちょっとずつ自分の知ってる解像度を高めていっていただけるといいと思います。
これ非常にね、奥深い話ですが、まず今日は最初の解説として、Claude Code入れてみましたと。入れてみて、なんか作るってこんな感じだぞと。プランして、実装させて、そして、それ実行してみて、色々触ってみて、面白いねとか、ここはいまいちだねとか、このデザイン直したいねとか、そういうのが出てきたら、じゃあそれをまたClaude Codeに指示を投げるってことを順番にやってみて、その中でどんどん技術に対する解像度を、分かんないところを聞きながら上げていったりしていただければなと思います。基本的にはこれを繰り返していけば、どんどん技術も上がり、作れるものも増えていくはずでございます。
ということで、ちょっと今回ね、長くなりましたが、以上で、Claude Codeとにかく触ってみようということでございました。実はね、このClaude Code、今はプログラミングにも使ってますけど、普通の仕事にも結構使える幅が大きいんだという風に言われてたりもするので、是非皆さん触ってみてください。以上でございます。面白いなと思った方はチャンネル登録、高評価をよろしくお願いします。ではまた。
記事公開
