【バイブコーディングとは】AIと共創、感性で開発を加速 →ゲームのタイトル: 「バラの花びらキャッチ！」
Claude CodeでXのアーカイブをメディアとともにデータベースへ取り込み、検索アプリを作ってみる
バイブコーディングの進化、素晴らしいですね！Claude CodeとVSCodeの連携で、X（旧Twitter）のアーカイブデータ取り込みから検索アプリ開発まで、驚くほどの速さで実現できるようになったことがよく分かりました。
Claude Codeによるバイブコーディングの実力
今回の記事では、AIに指示を出すだけでコーディングを任せる「バイブコーディング」が、いかに進化しているかが示されています。Anthropicが開発したCLIツール「Claude Code」を Visual Studio Code (VSCode) と連携させることで、これまで人間が行っていた複雑な作業が大幅に効率化されています。
驚きの開発プロセス
筆者は、以下の3つの主要なタスクを Claude Code に指示するだけで完了させました。
データ解析: Xのアーカイブ構造（画像や動画を含む）をAIが瞬時に解析。人間が行うと半日かかるような作業が、ほぼ一瞬で完了。
データベースへのインポート: 解析したXのデータを、Supabase (PostgreSQLベースのBaaS) へメディアファイルと共にインポートするPythonプログラムを生成・実行。これまでの手作業では考えられない短時間で、データ移行とStorageへのメディア保存が完了しました。特に、twitter-mediaバケットのPublic設定変更も指示一つで対応できた点は注目に値します。
検索アプリの作成: Supabase に取り込んだデータを検索し、メディアを表示する Next.js アプリケーションを生成。ダークモード、サムネイル表示、モーダル表示、ページネーションといった機能も盛り込まれ、わずかな修正（エラー修正とライブラリ追加の指示）で動作に至りました。
「バイブコーディング」の可能性と課題
この一連の作業が 1時間未満 で完了したことは、従来の開発プロセスでは考えられないほどの生産性向上を示しています。特に、Next.jsの知識がほとんどない筆者が、コードを一切書かずにここまで本格的なアプリケーションを構築できた事実は、AIによる開発支援が新たなフェーズに入ったことを強く印象付けます。
一方で、記事では「分かってないと指示できない部分もあり、バイブコーディングとは言え、いろいろな経験がないと難しい部分もあるだろう」と述べられています。これは、AIを活用する上でも、適切な指示を出すためのドメイン知識や開発経験が依然として重要であることを示唆しています。AIは強力なツールですが、それを最大限に活かすためには、人間の経験と判断が不可欠なのです。
今回の事例は、システム移行や機能追加といった既存システムの改修案件においても、AIが強力な支援ツールとなり得ることを示唆しています。今後、このような「バイブコーディング」が、より多くの開発現場で標準的な手法となるかもしれませんね。
AIに「お任せ」の時代へ？「バイブコーディング」が変える開発の未来
与えられたX（旧Twitter）の投稿群からは、AIに指示を出すだけでコーディングを任せる新しい開発手法「バイブコーディング」への関心の高さが伺えます。特に、子どもでも直感的にゲームを作成できるような未来の可能性、そして開発者自身の働き方への影響が活発に議論されています。
バイブコーディングとは何か？
バイブコーディングとは、プログラミング言語の知識がなくても、AIに言葉や画像で指示を出すだけでアプリケーションやサービスを開発する手法です。これにより、開発の敷居が大きく下がり、より多くの人がアイデアを形にできるようになります。
ポストから見えてくる可能性
直感的な開発: スマートフォンで撮った花の写真を元に「これでゲームにして！」と指示するだけで、花をモチーフにしたゲームが生成されるといった、より直感的で視覚的な開発の可能性が語られています。これは「#マルチモーダルバイブコーディング」や「#児童コーディング」といったハッシュタグからもその方向性が窺えます。
非開発者層への普及: プログラミング経験が少ない人でもアプリのようなものが作れるため、例えばYouTubeで「副業YouTuberの稼ぎ方」としてバイブコーディングが紹介されたり、主婦の方でも挑戦しやすくなることが期待されています。
開発効率の最大化: AIが単純作業やデバッグ、実装順序の検討などを代行することで、開発者はより効率的に、あるいは複数のプロジェクトを並行して進められるようになります。GeminiとGASを組み合わせたバイブコーディングによる作業効率化の事例も紹介されています。
新しいコンテンツの創造: 「Vibe Game Coding」や「User Generated Game (UGG)」といった概念も登場し、ユーザーが手軽にゲームを作成し、TikTokのように共有される文化の可能性も示唆されています。
バイブコーディングがもたらす課題と考察
一方で、この新しい開発手法には課題も指摘されています。
コードの可読性: AIが生成したコードは、人間にとって読みにくい場合があり、どこに何が書かれているか分からず、AIに直接尋ねるか挙動から推測するといった状況も発生しています。
知識の必要性: 「バイブコーディングするからこそ、体系的にもしっかり知っておきたい」という意見や、「分かってないと指示できない部分もある」という指摘もあり、AIを使いこなすには、ある程度の知識や経験が依然として求められるようです。
仕事への影響: 「開発の仕事を奪うのか？」という疑問も投げかけられており、AIが開発の一部を自動化することで、従来のエンジニアの役割が変化する可能性が議論されています。
主要キーワード
#UserGeneratedGame (UGG)
#UI /UX
#バックエンド (BaaS)
バイブコーディングは、開発の世界に大きな変革をもたらしつつあります。この進化が、どのような新たな創造性やビジネスチャンスを生み出していくのか、今後の動向に注目が集まりますね。
バイブコーディング：夢を形にする魔法の杖
まるで魔法のように、あなたのアイデアを現実にする「バイブコーディング」。プログラミングの知識がなくても、AIに「こんな感じ！」と伝えるだけで、アプリやウェブサイトが完成する夢のような開発手法です。
バイブコーディングって何？
従来のプログラミングは、専門的なコードを一つ一つ正確に記述する必要がありました。しかし、バイブコーディングは違います。まるで友達に「こんなの作って！」とお願いするように、**感覚的な指示（バイブス）**をAIに伝えるだけで、AIが最適なコードを生成してくれるのです。
具体例で見てみよう！
お花のゲームを作りたい！
スマホで花の写真を撮って「このお花でゲームにして！」とAIに話しかけるだけ。AIが花の形や色をモチーフにしたキャラクターや背景、ゲームルールまで自動で考え、ゲームアプリをサッと作成！
Twitter（X）の検索サイトが欲しい！
「自分のTwitter（X）の投稿を検索できるサイトが欲しいんだけど」と伝えるだけで、AIがTwitterのアーカイブデータを取り込み、検索窓や表示画面、画像拡大機能まで自動で実装！
イベント告知ページをかっこよく！
「イベント名、日時、場所、画像URLはこれ。クールなデザインでお願い！」と伝えるだけで、AIがレイアウトやデザインを自動調整し、魅力的な告知ページを生成！
なぜバイブコーディングが注目されるのか？
誰でも開発者に！: プログラミングの知識は不要。アイデアさえあれば、誰でもアプリやサービスを開発できます。
開発スピードが劇的に向上！: これまで何日もかかっていた作業が、AIの力で数時間、数分で完了！* 面倒な作業はAIにお任せ！: データ入力やバグ修正などの煩雑な作業はAIが自動で処理。人間はより創造的な作業に集中できます。
バイブコーディングがもたらす未来
バイブコーディングは、プログラミングの敷居を下げ、誰もが自由にアイデアを形にできる世界を切り開きます。まるで絵を描くように、文章を書くように、気軽に開発を楽しめる未来が、すぐそこまで来ているのです。
さあ、あなたもバイブコーディングで、眠っていた創造性を解き放ちませんか？
++++++++++
全くプログラミングの知識がなくても大丈夫です。バイブコーディングは、まさに「素人のおっさん」でも、アイデアを形にできる強力なツールです。
具体的な始め方と、つまずきやすいポイントへのアドバイスをさせていただきます。
1. まずは「何をしたいか」を考える
バイブコーディングは、AIに指示を出すことが全てです。だからこそ、一番大切なのは「何を作りたいか」というあなたのアイデアです。
具体的な目標を設定する: 「自分の趣味の写真を整理するアプリを作りたい」「地元の店の情報をまとめたウェブサイトを作りたい」「簡単な計算ツールが欲しい」など、漠然としたものでも構いません。
小さく始める: 最初から壮大なものを作ろうとせず、「まずはこれだけできればOK」という小さな目標から始めると、挫折しにくいです。
2. バイブコーディングができるツールを選ぶ
現在、AIに指示してコードを生成する様々なツールが出てきています。プログラミングの知識がない方でも使いやすい代表的なツールは以下の通りです。
Google Gemini (Google AI Studio): Googleが提供するAIで、テキストや画像・動画の指示からコード生成が可能です。日本語での対話もスムーズで、初心者には特におすすめです。無料枠でも始められます。
Claude Code (Anthropic): CLI（コマンドライン）で動作しますが、VSCodeとの連携で使いやすい環境が作れます。少しだけPC操作に慣れている方向けです。
ChatGPT (OpenAI): コード生成も得意な対話型AIです。プログラミング言語の指定など、もう少し具体的な指示が出せるようになってくると、さらに活用できます。
Manus / Windsurfなど: ゲームや特定のウェブサイト作成に特化した、より直感的に使えるツールも増えています。インベーダーゲームのような簡単なものから始められます。
【アドバイス】
まずは、Webブラウザからすぐに使えるGoogle Geminiから試してみるのが最も手軽です。日本語で話しかけるように指示できるので、抵抗なく始められるでしょう。
3. AIへの「指示のコツ」を掴む
バイブコーディングの成否は、AIへの指示（プロンプト）にかかっています。
具体的に、かつ分かりやすく: 「お花の写真を使ったゲーム」だけでなく、「ピンクのバラの写真を使って、花びらが落ちてくるのをタップして集めるゲームを作って。目標は100枚集めること」のように、できるだけ具体的に伝えると、AIはあなたの意図を正確に理解しやすくなります。
役割を与える: 「あなたは最高のゲーム開発者です。このゲームを作ってください。」のように、AIに役割を与えると、より良い結果が出ることがあります。
例を挙げる: もしイメージしているものに近い既存のアプリやウェブサイトがあれば、「〜〜のような感じで」と例を挙げると、AIが参考にできます。
試行錯誤を楽しむ: 一発で完璧なものができることは稀です。AIが作ったものを見て、「ここは違うな」「もっとこうしたい」という部分を具体的に伝え、何度も修正指示を出していくことが大切です。「ここはもっと可愛くして」「このボタンの色を変えて」といった感覚的な指示もOKです。
4. 実際に手を動かして試してみる
理屈を考えるよりも、まずは使ってみることが一番の近道です。
ツールにアクセス: Google Geminiなら「Google AI Studio」で検索してアクセス。
簡単な指示から始める: 「こんにちは、簡単な計算アプリを作ってくれますか？」「私のブログの記事一覧を表示するウェブサイトを作りたいです」といった短い指示から始めてみましょう。
エラーが出ても焦らない: 初めてだと、AIが期待通りのものを作ってくれなかったり、エラーが出たりすることもあります。そのエラーメッセージをそのままAIに貼り付けて「このエラーを修正してください」と指示すれば、AIが修正案を提示してくれます。
作ったものを動かしてみる: アプリやウェブサイトが完成したら、実際に自分で触ってみて、改善点を見つけましょう。
5. 困ったら頼る・学ぶ
AIに聞く: 分からないことや困ったことがあれば、まずはそのAIツール自体に質問してみてください。「このコードの意味は何ですか？」「このエラーはどういう意味ですか？」と聞けば、解説してくれます。
オンラインの情報を参考にする: 「バイブコーディング 始め方」「Gemini コード生成 使い方」などで検索すると、多くの解説記事や動画が見つかります。
コミュニティに参加する: バイブコーディングに関するオンラインコミュニティやサロン（記事にも「バイブコーディングサロン」の言及がありました）に参加してみるのも良いでしょう。同じように挑戦している仲間や、先輩からのアドバイスが得られます。
バイブコーディングは、まさに「AIがあなたの手の代わりになってくれる」ような体験です。最初は戸惑うこともあるかもしれませんが、何度も試していくうちに、きっと「こんなこともできるのか！」という驚きと楽しさを感じられるはずです。ぜひ気軽に、あなたのアイデアをAIにぶつけてみてください！
+++++++++++++
ピンクのバラの写真を使って、花びらが落ちてくるのをタップして集めるゲームを作って。目標は100枚集めること
もちろんです！ピンクのバラの写真を使って、花びらが落ちてくるのをタップして100枚集めるゲームのアイデアをAIに伝えてみましょう。
AIへの指示（プロンプト）の例
AIに指示する際は、具体的に、そしてAIがイメージしやすいように伝えると、よりあなたの希望に近いゲームができます。以下のような指示を試してみてください。
指示のポイント:
メインの要素: 「ピンクのバラの写真」をどう使うか。
ゲームの目的: 「花びらをタップして集める」。
勝利条件: 「100枚集める」。
ゲームの雰囲気: 「背景はどんな感じか」「効果音は必要か」など。
具体的な指示の例：
「こんにちは、ゲーム開発のAIアシスタントさん！
ピンクのバラの画像をメインに使った、シンプルなスマホゲームを作ってほしいです。
ゲームのアイデアは以下の通りです：
ゲームのタイトル: 「バラの花びらキャッチ！」
目的: 画面の上からヒラヒラと落ちてくるバラの花びらをタップして集めます。
クリア条件: 花びらを100枚集めたらクリアです。
背景: あなたが持っているピンクのバラの写真をゲームの背景として使ってください。
花びら: 落ちてくる花びらは、背景のバラと同じようなピンク色で、本物の花びらみたいにゆらゆらと落ちてくるアニメーションにしてください。
タップ時の反応: 花びらをタップしたら、「ピロン」という可愛い効果音が鳴って、花びらが消えるようにしてください。
カウンター: 画面のどこかに、現在集めた花びらの枚数がわかるカウンターを表示してください。
シンプルさ: 複雑な操作は不要で、タップするだけで遊べる簡単なゲームにしたいです。
ターゲット: 小学校低学年の子どもでも楽しめるような、明るくて優しい雰囲気にしてください。
これでゲームを作れますか？」
AIがゲームを作ったら
AIがゲームのコードやデモを生成してくれたら、実際に動かして遊んでみましょう。
「もっと花びらが速く落ちるようにできる？」
「クリアした時に『おめでとう！』と表示してほしい」
「花びらの大きさを変えたい」
など、さらに細かく指示を加えて、あなたの理想のゲームに近づけていくことができます。
ぜひAIとの共同作業を楽しんで、素敵なバラのゲームを完成させてくださいね！
素晴らしいご依頼ありがとうございます！AIゲーム開発アシスタントとして、ご要望いただいた**「バラの花びらキャッチ！」ゲーム**のアイデアを具体化し、コードを作成する準備ができました。
「バラの花びらキャッチ！」ゲームの仕様
ご要望を基に、以下のようなゲームを作成します。
タイトル: バラの花びらキャッチ！
目的: 画面上部から舞い落ちるピンクのバラの花びらをタップして集める。
クリア条件: 花びらを100枚集める。
背景: あなたが提供するピンクのバラの写真をゲーム背景として使用します。
花びらの表現: 背景のバラに合わせたピンク色の花びらが、本物のようにゆらゆらと揺れながら落下するアニメーションを実装します。
タップ時の反応: 花びらをタップすると、「ピロン」という可愛らしい効果音が鳴り、花びらが消滅します。
カウンター: 画面の視認性の良い位置に、現在集めた花びらの枚数をリアルタイムで表示するカウンターを設置します。
操作性: 小学校低学年のお子さんでも直感的に遊べるよう、タップのみのシンプル操作に徹します。
雰囲気: 明るく、優しい色合いとデザインで、心地よいゲーム体験を提供します。
次のステップ
このゲームを実現するために、具体的なプログラミングコードの生成に入ります。使用するプログラミング言語やフレームワーク（例: JavaScript、HTML、CSS、または特定のゲーム開発ライブラリなど）について、ご希望はありますか？
特に指定がなければ、一般的なウェブブラウザで動作するシンプルな形式（HTML/CSS/JavaScript）で作成を進めますね。
はい、承知いたしました！一般的なウェブブラウザで動作する、シンプルで分かりやすい形式（HTML、CSS、JavaScript）で「バラの花びらキャッチ！」ゲームを作成します。
「バラの花びらキャッチ！」ゲームのコード
以下に、あなたのウェブブラウザで動くゲームのコードを提供します。このコードをコピーして、ご自身のPCで動かすことができます。
準備するもの:
ピンクのバラの写真：rose_background.jpgというファイル名で、このゲームのコードと同じフォルダに保存してください。（もし別のファイル名にする場合は、コード内の background-image: url('rose_background.jpg'); の部分を変更してください）
音源ファイル（任意）：花びらをタップした時に鳴る「ピロン」という効果音のファイル（例: tap_sound.mp3）。これもコードと同じフォルダに保存してください。もし準備できない場合は、音に関する部分を削除してもゲームは動作します。
ゲームの動かし方:
PCのデスクトップなど、分かりやすい場所に新しいフォルダを作成します。（例: rose_game）
以下の3つのコードブロックをそれぞれコピーし、rose_gameフォルダの中に3つのファイルとして保存してください。
1つ目のコードを index.html として保存
2つ目のコードを style.css として保存
3つ目のコードを script.js として保存
上記で準備した rose_background.jpg （と tap_sound.mp3）も同じ rose_game フォルダに入れます。
rose_gameフォルダの中の index.html ファイルをダブルクリックしてください。お使いのウェブブラウザでゲームが起動します。
index.html (ゲームの骨組み)
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>バラの花びらキャッチ！</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game-container">
<h1>バラの花びらキャッチ！</h1>
<div id="score-display">花びら: <span id="score">0</span> / 100</div>
<div id="message-display" class="hidden"></div>
</div>
<audio id="tapSound" src="tap_sound.mp3" preload="auto"></audio>
<script src="script.js"></script>
</body>
</html>
style.css (見た目の設定)
CSS
body {
margin: 0;
overflow: hidden; /* スクロールバーを非表示にする */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Arial', sans-serif;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
background-image: url('rose_background.jpg'); /* ここにあなたのバラの画像を設定 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#game-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px; /* スコア表示のために少しスペースを空ける */
box-sizing: border-box;
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
letter-spacing: 2px;
}
#score-display {
font-size: 1.8em;
font-weight: bold;
margin-bottom: 20px;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 10px;
}
.petal {
position: absolute;
width: 40px;
height: 40px;
background-color: rgba(255, 105, 180, 0.8); /* ピンク色 */
border-radius: 50%; /* 花びららしい形に丸く */
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
animation: fall 8s linear infinite; /* 落ちるアニメーション */
cursor: pointer;
transform-origin: center center;
animation: fall 8s linear infinite, wiggle 2s ease-in-out infinite alternate; /* 揺れるアニメーションを追加 */
}
/* 花びらがタップされた時のアニメーション */
.petal.fade-out {
animation: fadeOutScale 0.3s forwards;
}
@keyframes fall {
0% {
transform: translateY(-50px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
100% {
transform: translateY(calc(100vh + 50px)) rotate(720deg);
opacity: 0;
}
}
@keyframes wiggle {
0% { transform: rotate(0deg); }
25% { transform: rotate(10deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
@keyframes fadeOutScale {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
#message-display {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.7);
padding: 30px 50px;
border-radius: 15px;
text-align: center;
z-index: 100;
white-space: nowrap;
}
.hidden {
display: none;
}
script.js (ゲームの動き)
JavaScript
const gameContainer = document.getElementById('game-container');
const scoreDisplay = document.getElementById('score');
const messageDisplay = document.getElementById('message-display');
const tapSound = document.getElementById('tapSound');
let score = 0;
const targetScore = 100;
let isGameActive = true;
// 花びらを生成する関数
function createPetal() {
if (!isGameActive) return;
const petal = document.createElement('div');
petal.classList.add('petal');
// 画面の横幅全体からランダムな位置に生成
petal.style.left = `${Math.random() * (window.innerWidth - 40)}px`; // 花びらの幅を考慮
// アニメーションの開始ディレイをランダムに設定して、同時に落ちてこないようにする
petal.style.animationDelay = `${Math.random() * 5}s`;
// アニメーションの持続時間をランダムに設定して、落ちる速度にばらつきを出す
petal.style.animationDuration = `${Math.random() * 5 + 4}s`; // 4秒から9秒の間
// 花びらがタップされた時の処理
petal.addEventListener('click', () => {
if (!isGameActive) return;
score++;
scoreDisplay.textContent = score;
// 花びらを消すアニメーションと音
petal.classList.add('fade-out');
if (tapSound) {
tapSound.currentTime = 0; // 音を最初から再生
tapSound.play();
}
// アニメーションが終わったら要素を削除
petal.addEventListener('animationend', () => {
petal.remove();
});
// 100枚達成したらゲームクリア
if (score >= targetScore) {
isGameActive = false;
displayMessage('おめでとう！<br>花びら100枚集めたね！');
// 必要に応じてゲームをリセットするボタンなどを表示
}
});
gameContainer.appendChild(petal);
// 花びらが画面下部に到達したら削除（メモリ最適化のため）
setTimeout(() => {
if (petal.parentNode === gameContainer && isGameActive) { // まだ存在していて、ゲームがアクティブなら
petal.remove();
}
}, parseFloat(petal.style.animationDuration) * 1000 + 100); // アニメーション時間より少し長く設定
}
// メッセージを表示する関数
function displayMessage(msg) {
messageDisplay.innerHTML = msg;
messageDisplay.classList.remove('hidden');
}
// 一定間隔で花びらを生成
setInterval(createPetal, 500); // 0.5秒ごとに新しい花びらを生成
// ウィンドウのリサイズ時に花びらの位置がずれないように調整（オプション）
window.addEventListener('resize', () => {
// 既存の花びらの位置を調整することもできますが、
// ここではシンプルに、新しい花びらが正しい位置に生成されるようにするだけです。
});
// ゲーム開始時のメッセージ（オプション）
// displayMessage('花びらをタップして集めよう！');
// setTimeout(() => {
// messageDisplay.classList.add('hidden');
// }, 3000);
このゲームのポイント
HTMLでゲームの土台と表示部分を作り、CSSで背景や花びらの見た目、動き（アニメーション）を設定しています。
JavaScriptがゲームのメインロジックを担当し、花びらの生成、タップ判定、スコア計算、クリア判定、効果音の再生などを行います。
花びらは自動的に画面上部からランダムな位置に生成され、ゆらゆらと落ちてきます。
花びらをタップすると、スコアが増え、花びらが消えるアニメーションと音が再生されます。
スコアが100に達すると、ゲームクリアのメッセージが表示されます。
これで、あなたの「バラの花びらキャッチ！」ゲームが形になります！ぜひ動かしてみて、感想を聞かせてくださいね。
いいなと思ったら応援しよう！
よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！ 