「みんなで作ろう！！Vibe Coding 100本ノック！！！」に参加してきた話
はじめまして、びーぐると申します。
表題の「みんなで作ろう！！Vibe Coding 100本ノック！！！」に参加しました。
私はヒットアンドブローを作成しました。
つくったもの
↓こちら↓
そもそもVibe Coding is 何？
Vibe Codingに関しての定義は諸説あるようですが、概ね「人間がLLMに指示を出し、LLM主導でコードを生成し制作物を完成させる。その際、人間がコードを触ることを最小限にする」みたいな感じかと思います。
つまり、指示を出してLLMにモノを作らせるのですね。
今回はAIコーディングアシスタントを使う場合、自分でコードに触れずに、指示のみで完成を目指すという方針で取り組みました。
つかったもの
AIコーディングアシスタントですが、現状、候補がいくつかあります。
事前にテストをして最も手に合いそうだった、Roo CodeをVSCodeに導入して使います。
LLMに関しては、Gemini 2.5 Proを選択しました。
性能がシンプルに高く、無料枠もあるためお財布に優しいです。
実はコーディングアシスタントに関しては、普段は使っていません。
その都度ChatGPTやAI StudioのGeminiに問い合わせる程度で十分間に合っているためです。
ということで、今回が初めてのコーディングアシスタントを用いた制作となります。
やりかた
事前にAI StudioのGemini 2.5 Proにヒットアンドブロー作って、と問い合わせてそれっぽいものができるかどうかを試しましたが、多分大丈夫そうです。大丈夫そうですが、かなり無骨なものが出来上がりそうですので、実践ではゲームとして楽しく遊んでもらうことを盛り込んだほうがよさそうです。
てことで、Roo Codeの「読み取り、書き込み」を自動承認にして
チャット欄に以下のように指示しました。
必要なかったかもしれませんが、ルールに関しては少しだけ細かく指示をしておきました。
1回目
ブラウザで遊べる「ヒットアンドブロー」を作成してください。
- CPUが出題者、プレイヤーが回答者となります
- 出題者は4桁の数字(0~9)を選びます。0から始まっても構いません。
- 回答者はそれを当てます。残りのルールはヒットアンドブローに準じます
- ゲームなので遊ぶ楽しさを演出にて追加してください
タスク完了
ヒットアンドブローゲームを作成しました。
hit-and-blow フォルダ内に index.html、style.css、script.js を作成し、ゲームの基本的なロジックと見た目を実装しました。
CPUがランダムな4桁の数字（重複なし、0から始まる場合もあり）を生成し、プレイヤーがそれを当てるゲームです。
予想結果としてヒット数とブロー数が表示され、10回以内に当てられない場合はゲームオーバーとなります。
正解時には簡単な紙吹雪のアニメーションでお祝いします。
挑戦回数や紙吹雪のアニメーションなどはこちらの指示の意図を汲み取ってつけてくれました。
この時点で十分遊べるものができあがりましたが、バグを一つ発見。気になる点もあったので修正を依頼します。
2回目
- 入力ミスが起こった（例えば0000を入力した）際にも挑戦回数がカウントアップされます。修正をお願いします。
- 0H0Bに関して、むしろヒットアンドブローでは大きなヒントだと思いますので「逆にラッキー？」的な文言に変えてください
タスク完了
ヒットアンドブローゲームの修正を行いました。
入力ミス（4桁の数字でない、または数字に重複がある場合）には挑戦回数がカウントされないように修正しました。
0ヒット0ブローの場合のメッセージを「逆にラッキー？この数字は使われていないよ！」に変更しました。
hit-and-blow/index.html をブラウザで開いて、修正が反映されているかご確認ください。
こちらの指示通りに動いてくれて、これにて完成です！
まとめ
2回の指示でこれくらいのものならできます。純粋にすごい！
最初に方針さえ固めてしまえば、あとは指示でどうにかなります。
もちろんWebアプリケーションを一通り作った経験、プロンプトエンジニアリングの経験、ツールへの熟練度、そもそもVibe CodingやLLMに対する知識などなど…によって左右されてしまうため
誰にでもすぐに思ったものがつくれます！とはとても言えませんが。
何かを作るハードルがぐっと下がったのは確かですね。
あとは指示を出すだけでモノができちゃう感覚って、個人的にはすごく楽しいですね。（人にもよるかもですが…）
最後に、API利用料は意外と嵩むのでお財布に気をつけつつ、良いVibe Codingを！！！
Discussion