【体験レポート】バイブコーディングでToDoアプリを30分で作ってみた

「バイブコーディングで本当にアプリが作れるの？」

そう思っている方のために、プログラミング経験ゼロの筆者が、実際にCursorを使ってToDoアプリを作ってみた体験をレポートします。

結論から言うと、約30分で動くToDoアプリが完成しました。途中でエラーも出たし、デザインの手直しも必要だったけれど、すべてAIとの対話だけで解決。コードは1行も手書きしていません。

この記事では、実際にどんな指示を出して、AIがどう返してきて、どう修正したかをリアルに再現します。

この記事でわかること

バイブコーディングの実際の作業フロー
AIに出した指示文（プロンプト）の実例
発生したエラーとその対処法
完成までにかかった時間と手順
やってみて感じたメリット・デメリット

使用環境

項目	内容
使用ツール	Cursor（Hobbyプラン・無料）
AIモデル	自動選択（Auto Mode）
プログラミング経験	なし
所要時間	約30分
使用したリクエスト数	約12回

【0分】Cursorを起動してチャットを開く

Cursorを起動して、Ctrl+L（Macの場合はCmd+L）でチャットパネルを開きます。ここまでは10秒。

さっそくAIに最初の指示を出します。

【1分】最初の指示を出す

チャット欄に以下のプロンプトを入力しました。

HTMLとCSS、JavaScriptで、シンプルなToDoリストアプリを作ってください。

機能：
・テキスト入力欄とタスク追加ボタン
・追加したタスクがリスト表示される
・各タスクに完了チェックボックスがある（チェックすると取り消し線がつく）
・各タスクに削除ボタンがある
・タスクの数を表示する（「残り○件」）

デザイン：
・中央寄せのカード型レイアウト
・白背景にやわらかい影
・ボタンは青系
・フォントはシンプルで読みやすいもの
・全体的にモダンで清潔感のあるデザイン

すべて1つのHTMLファイルにまとめてください。

ポイントは、機能とデザインを分けて書いたこと。こうするとAIが要件を整理しやすくなります。

【3分】AIがコードを生成

約2分で、AIがHTML・CSS・JavaScriptを含んだ完全なコードを生成してくれました。

コードの中身は正直よくわかりません。でも、バイブコーディングではそれでOK。大事なのは「動くかどうか」です。

生成されたコードを「index.html」として保存し、ブラウザで開いてみます。

【5分】最初の動作確認 → 動いた！

ブラウザで開くと、ちゃんとToDoリストが表示されました。

テキスト欄にタスクを入力して「追加」ボタンを押すと、リストに追加される。チェックボックスを押すと取り消し線がつく。削除ボタンも動く。

基本機能はすべて一発で動きました。正直、感動しました。

ただし、いくつか気になる点が見つかりました。

【8分】問題点を発見してAIに修正依頼

問題1：空のタスクが追加できてしまう

テキスト欄に何も入力せずに「追加」ボタンを押すと、空のタスクがリストに追加されてしまいます。AIに以下のように伝えました。

テキスト欄が空のときに追加ボタンを押しても、タスクが追加されないようにしてください。空の場合は入力欄を赤く光らせて注意を促すようにしてください。

AIが即座にバリデーション機能を追加してくれました。空のまま追加しようとすると、入力欄が赤くハイライトされるようになりました。

問題2：Enterキーで追加できない

タスクを入力した後、毎回マウスで「追加」ボタンをクリックするのが面倒。Enterキーでも追加できるようにしたい。

テキスト入力欄でEnterキーを押してもタスクが追加されるようにしてください。

一瞬で対応されました。

問題3：デザインをもう少し調整したい

全体的にはいい感じだけど、もう少し手を入れたい部分がありました。

以下のデザイン修正をしてください：
・カードの角をもう少し丸くする
・完了したタスクの文字色をグレーにする
・削除ボタンを赤系の色にする
・タスクにホバーエフェクトをつける（マウスを乗せたら薄い背景色がつく）

これも数秒で反映。AIとのやりとりは本当にチャット感覚です。

【15分】追加機能をリクエスト

基本が動いたので、もう少し機能を追加してみます。

以下の機能を追加してください：
・タスクをドラッグ＆ドロップで並び替えられるようにする
・「すべて完了」ボタンを追加する
・「完了済みを削除」ボタンを追加する
・ブラウザを閉じてもタスクが残るようにする（ローカルストレージに保存）

ここが面白いところで、4つの機能を一度にリクエストしてみました。

結果は、ローカルストレージ保存・すべて完了・完了済み削除の3つは完璧に動作。ただしドラッグ＆ドロップだけはうまく動かなかった。

【20分】エラー対応

ドラッグ＆ドロップがうまく動かないので、AIにエラー状況を伝えます。

ドラッグ＆ドロップ機能が動作しません。タスクをドラッグしようとしても反応がありません。原因を調べて修正してください。

AIが原因を分析し、修正版のコードを生成。2回目のやりとりで正常に動作するようになりました。

学んだこと

一度にたくさんの機能を頼むとエラーが出やすい。複雑な機能は1つずつ追加する方が確実。これはバイブコーディングの重要なコツです。

【25分】仕上げのデザイン調整

機能が揃ったので、最後にデザインを仕上げます。

全体のデザインをもう少し洗練させてください：
・ヘッダー部分にグラデーション背景をつける（青→紫）
・タスク件数の表示をバッジ風のデザインにする
・ボタンにホバー時のアニメーションをつける
・スマートフォンでも見やすいレスポンシブデザインにする

最後の微調整もAIが的確に対応。PCでもスマホでもきれいに表示されるToDoアプリが完成しました。

【30分】完成！

約30分で、以下の機能を持つToDoアプリが完成しました。

タスクの追加（ボタンクリック＆Enterキー対応）
空タスクのバリデーション
完了チェック（取り消し線＋グレーアウト）
個別削除
ドラッグ＆ドロップで並び替え
「すべて完了」ボタン
「完了済みを削除」ボタン
残りタスク件数の表示
ブラウザを閉じてもデータ保持（ローカルストレージ）
レスポンシブデザイン

AIとのやりとりは合計約12回。Cursorの無料プラン（月50リクエスト）の範囲内で十分に収まりました。

やってみた感想：正直レビュー

感動したこと

「本当にコードを1行も書かずにアプリが作れた」という体験は衝撃的でした。プログラミングを勉強しようとして何度も挫折した経験がある身としては、「こんなに簡単でいいの？」というのが率直な感想です。

特に驚いたのは、デザインの指示が伝わること。「モダンで清潔感のある」「角を丸く」「ホバーエフェクトをつけて」といった曖昧な表現でも、期待通りの見た目になりました。

困ったこと

一度にたくさんの機能を頼むとエラーが出やすいのは学びでした。ドラッグ＆ドロップの不具合は、他の3機能と同時にリクエストしたことが原因の可能性があります。複雑な機能は1つずつ追加するのが安全です。

また、AIが生成するコードの中身が理解できないのは、良くも悪くもバイブコーディングの特徴。動いているうちはいいけれど、何か問題が起きたときに自分で原因を特定するのは難しいです。

もっと本格的に作りたくなった

ToDoアプリが作れたことで「もっといろんなものを作ってみたい」という気持ちが強くなりました。次はChrome拡張機能やポートフォリオサイトに挑戦してみたいと思っています。

また、AIが生成するコードを少しでも理解できるようになれば、もっと高品質なものが作れるはず。プログラミングの基礎を体系的に学ぶことにも興味が出てきました。

プログラミングを基礎から学びたい方へ

バイブコーディングの基礎力をさらに高める、オンライン学習プログラム

SkillHacks（スキルハックス）を詳しく見る

30分でアプリを作るためのコツまとめ

今回の体験から得た、効率よくアプリを作るためのコツをまとめます。

コツ	具体的なやり方
最初のプロンプトを丁寧に書く	機能とデザインを分けて箇条書き。曖昧でもいいからイメージを伝える
機能は1つずつ追加する	基本機能が動いてから追加機能をリクエスト。一度にまとめると不具合が出やすい
動いたらすぐ保存する	GitHubでこまめにコミット。壊れても前の状態に戻せる
エラーはそのままAIに投げる	エラーメッセージをコピペして「これを修正して」と伝えるだけ
デザインは後から調整	まず動くものを作り、見た目は後からAIに指示して調整する