プログラミングを知らなくてもアプリを作れる時代になった
バイブコーディングとは、作りたいものを自然な言葉でAIに伝え、生成、実行、修正を会話形式で進める開発スタイルです。コードを一行ずつ自分で書く代わりに、「25分のタイマーが欲しい」「数字をもっと大きくして」とAIへ要望を伝えます。
ただし、簡単に作れることと、安全に運営できることは別です。この記事では、ログインや決済を使わない「勉強時間タイマー」を例に、初めてのアプリを作り、試し、公開してよいか判断するところまで解説します。
バイブコーディングとは
自然な言葉でAIにアプリを作ってもらう方法
従来の開発では、一般に次の工程を人が進めます。
設計する → コードを書く → 実行する → エラーを調べる → 修正する
バイブコーディングでは、中心となる作業がAIとの対話に変わります。
作りたいものを伝える → AIが生成する → 動かす → 気になる点を伝える → AIが修正する
普通のChatGPTとの違いは、説明やコード片を受け取るだけでなく、AIエージェントがプロジェクト内のファイルを作成・変更し、実行結果を確認しながら作業を進められる点です。利用者はコードを書く人というより、要望を伝え、動作を判定する人になります。
ノーコードツールとの境界は明確ではありませんが、違いは操作方法にあります。ノーコードでは用意された部品と設定画面を組み合わせるのが基本です。バイブコーディングでは自然言語からコードが生成されるため柔軟性が高い一方、見えない部分に不具合や危険な実装が入る可能性もあります。
言葉の由来
「vibe coding」はAndrej Karpathyが2025年2月6日に提唱した言葉です。元の説明には、差分を読まずに変更を受け入れ、エラーをAIへ貼り付け、コードより画面や動作結果を見ながら作り続けるニュアンスがありました。
Simon Willisonは、この意味をAIによるプログラミング全般へ広げるべきではないと指摘しています。AIが書いたコードを人間が読み、十分にテストし、内容を説明できるなら、それはバイブコーディングではなくAI支援開発だという整理です。Simon Willison’s Weblog
AI支援開発との違い
この記事では、次のように区別します。
- 広義のバイブコーディング：自然言語でAIにコードやアプリを生成してもらう方法
- 狭義のバイブコーディング：コードを十分に理解せず、動作結果を頼りに追加指示を重ねるスタイル
- AI支援開発：AIの生成物を人間がレビューし、テストし、理解したうえで採用する開発
以下では初心者にも通じやすい広義の意味を使います。ただし、確認せずに公開することまでは勧めません。試作品ではバイブコーディングを楽しみ、他人が使うものではレビューとテストを増やす、という切り替えが必要です。
バイブコーディングでは何が作れる？
最初の題材には、失敗しても金銭やプライバシーへの影響が小さいものを選びます。
- 習慣記録アプリ
- 勉強時間タイマー
- クイズゲームや診断コンテンツ
- ポートフォリオ
- 店舗やイベントの紹介ページ
- 単位換算などの簡単な計算・集計ツール
反対に、クレジットカード情報を扱うサービス、顧客の個人情報を保存するシステム、複雑な会員登録や権限管理、医療・投資・法律上の重要な判断を行うツールは、初心者の最初の公開作品には向きません。
判断基準は「AIが作れるか」ではなく、「不具合が起きたとき、自分が影響を把握して安全に管理できるか」です。店舗サイトでも、住所や営業時間を掲載するだけのページと、顧客情報を保存する予約システムではリスクが大きく異なります。
初心者向けバイブコーディングツール
Replit Agent
ブラウザ内で作成、実行、修正、公開まで進めたい人に向いています。Replitの公式資料では、Agentは計画、コード作成、デバッグ、説明などを行えるとされています。公式ガイドも、指示を具体的にすること、先に計画すること、レビューとテストを行うことを推奨しています。Replit Docs
Lovable
見た目の整ったWebアプリを、画面から組み立てたい人の候補です。公式資料は初心者に対し、最初からデータベースへ接続せず、仮データでレイアウト、操作の流れ、ロジックを作る「フロントエンド・ファースト」を推奨しています。Lovable Documentation
Bolt
Webサイト、Webアプリ、モバイルアプリをブラウザから作れるAIビルダーです。公式のクイックスタートでは、コードを書かずに作成、編集、公開する流れが案内されています。データベース機能のないアプリは比較的早く生成できるとも説明されています。Bolt QuickStart
v0
画面デザインを重視する人に向いています。現在の公式資料ではUIだけでなく、API、データ保存、バックエンドロジックを含むフルスタックアプリにも対応しています。公式は段階的な開発を勧め、まずUIを作り、その後データ層や認証を追加する流れを示しています。v0 Docs
この記事の実演には、ブラウザで実行と公開まで進めやすいReplit Agentを想定します。ただし、プロンプトと確認手順はほかのツールにも応用できます。料金、無料枠、利用可能な機能は変わるため、開始前に各公式ページを確認してください。
作り始める前に決めること
今回作るものを、次のように小さく定義します。
- 用途：自分の勉強時間を記録する
- 利用者：自分だけ
- 画面：1画面
- 必要な機能：開始、一時停止、リセット、今日の記録
- 保存場所：現在使っているブラウザ
- 不要な機能：ログイン、共有、ランキング、決済、クラウドデータベース
ブラウザ内への保存には、内部的にlocalStorageなどが使われることがあります。仕組みの名前を覚える必要はありませんが、同じ端末・同じブラウザでだけ記録が残り、ブラウザのデータを消すと記録も消える設計だと理解しておきましょう。
最初の依頼には、「誰が使うか」「目的」「必要な機能」「不要な機能」「保存方法」「希望するデザイン」「スマートフォン対応」を含めます。機能を減らすほど完成条件が明確になり、自分で試せる範囲に収まります。
実践｜AIで勉強時間タイマーを作ってみる
ステップ1：最初の指示を入力する
Replit Agentで新しいプロジェクトを開始し、次のプロンプトを入力します。
シンプルな勉強時間タイマーを作ってください。
25分からカウントダウンし、開始、一時停止、リセットができるようにしてください。今日勉強した合計時間も表示してください。
記録はこのブラウザ内だけに保存し、ログイン、外部API、クラウドデータベースは使用しないでください。日付が変わったら「今日の合計」を0に戻してください。
スマートフォンでも操作しやすい、白と黒を基調とした1画面のデザインにしてください。
実装前に短い計画を示し、完成後に確認すべき操作も説明してください。
技術名やプログラミング言語を指定する必要はありません。しかし、保存場所や不要な機能を指定しないと、AIがアカウントやデータベースを追加する可能性があります。制約も要件の一部として伝えましょう。
ステップ2：生成された画面を確認する
最初からコードを読む必要はありません。まず利用者として、次を順番に確認します。
- 開始すると1秒ずつ時間が減るか
- 一時停止すると数字が止まるか
- 再開すると続きから動くか
- リセットすると25分に戻るか
- 0秒で止まり、完了した時間が今日の合計へ反映されるか
- ページを再読み込みしても今日の合計が残るか
- スマートフォン相当の幅でもボタンが押せるか
期待した結果と実際の結果が違えば、それが修正依頼の材料になります。
ステップ3：気になる点を一つずつ修正する
例えば、次のように依頼します。
タイマーの数字をもっと大きくしてください。ほかの動作は変更しないでください。
一時停止中であることが分かる表示を追加してください。
リセットボタンを押したときは確認画面を表示してください。キャンセルした場合は時間と記録を変えないでください。
複数の変更をまとめると、どの指示が不具合の原因になったか追いにくくなります。一度に一つ変更し、そのたびに主要なボタンを試すのがコツです。
ステップ4：意地悪な操作を試す
テストとは、予定どおりの操作だけでなく、間違いやすい操作でも壊れないか確かめることです。
- 開始ボタンを素早く何度も押す
- 動作中にページを再読み込みする
- 一時停止と再開を繰り返す
- 0秒になったあと再び開始する
- リセットや確認ボタンを連打する
- 今日の合計が二重に加算されないか見る
- 日付が変わった想定で記録の切り替えを確認する
問題が起きたら、原因を推測せず、観察した事実と期待する動作を伝えます。
開始ボタンを2回押すと、タイマーの減る速度が2倍になります。開始処理が重複しないように修正し、この問題を再現するテストも追加してください。
エラーメッセージが出たら、途中を省略せず貼り付けます。ただし、APIキー、パスワード、個人情報が含まれていないことを先に確認してください。
ステップ5：最後の確認を依頼する
見た目が完成したら、AIに再点検を依頼します。
現在の実装について、タイマーが正しく動かなくなる操作がないか確認してください。開始処理の重複、0秒での停止、合計時間の二重加算、再読み込み、日付変更、スマートフォン表示を確認してください。見つかった問題と修正内容を初心者向けに説明し、自動テストが可能な部分にはテストを追加してください。
AIの「問題ありません」という返答だけで合格にはしません。修正後に自分でも同じ操作を繰り返します。AIによる確認は補助であり、人間の操作確認の代わりではありません。
ステップ6：公開するか判断する
自分専用なら、公開せずプレビュー上で使う選択肢もあります。公開する場合は、次を確認します。
- 氏名、メールアドレス、学習記録などを埋め込んでいない
- APIキー、パスワード、接続情報がコードや画面にない
- テスト用の文章や不要な管理画面が残っていない
- 公開範囲が意図どおりになっている
- 他人に見られたり操作されたりしても重大な被害がない
「公開」ボタンは品質や安全性の審査完了を意味しません。インターネットへ公開すると、知らない人や自動化されたアクセスが届く可能性があります。
バイブコーディングの危険性と注意点
動いたからといって正しいとは限らない
画面が表示され、主要なボタンが動いても、特殊な入力や連打で壊れたり、計算や権限判定を誤ったりする可能性があります。
2025年12月公開のプレプリントでは、脆弱な実装につながった実在オープンソースプロジェクトの機能要求を基に、200件のタスクを評価しています。特定の組み合わせでは解答の61%が機能面で正しかった一方、安全と評価されたものは10.5%でした。これは全AIツールの一般的な不具合率を示す数値ではありませんが、「機能する」と「安全である」は別だと示す一例です。arXiv
個人情報が公開される可能性がある
ログインやデータベースを追加すると、「誰がどのデータを読み、変更できるか」という認証・認可の設計が必要です。画面上でボタンを隠すだけでは、データへのアクセスを防げません。
最初のアプリでは、氏名、住所、電話番号、健康情報、金融情報、顧客情報を保存しないようにしましょう。業務ツールを作る場合も、まず架空データで試し、会社の規則や情報システム部門の方針を確認します。
APIキーをプロンプトやコードへ貼らない
APIキーやアクセストークンは、外部サービスを利用する権限を持つパスワードに近い情報です。チャット、公開コード、ブラウザへ送られる処理へ直接書いてはいけません。ツールのSecrets機能やサーバー側の環境変数を使います。
Replitの公式な責任分担資料も、キーや認証情報をプロンプトへ貼らず、SecretsやConnectorsを使うよう案内しています。Replit shared responsibility model
AI任せで修正し続けると複雑になる
追加指示を重ねると、不要な処理や似たコードが増え、ある修正が別の機能を壊すことがあります。次の状態になったら機能追加を止め、現状の説明と整理をAIへ依頼するか、経験者に確認してもらいます。
- 修正するたび別の場所が壊れる
- AIが同じ変更を繰り返す
- 何のためのファイルや外部サービスか分からない
- 想定していない有料サービスやデータベースが増えた
- AIがエラーの原因や修正内容を説明できない
直前の正常な状態へ戻せるチェックポイントや履歴がある場合は、小さな変更ごとに残しておくと安心です。
公開後の責任は利用者側にもある
プラットフォームが安全な基盤や検査機能を提供しても、アプリ固有の権限、データ、公開範囲、法令対応まで自動的に保証されるわけではありません。Replitは、公開範囲の選択、アプリのアクセス制御、データ、セキュリティテストなどを利用者側の責任として示しています。Replit shared responsibility model
他人が使うアプリ、金銭が動くアプリ、業務上重要なアプリへ進むときは、経験のある開発者やセキュリティ担当者のレビューを受けてください。
初心者が失敗しにくい5つのコツ
- 最初は1画面、3機能程度に絞る
- 実装前に「まず短い計画を示して」と頼む
- 修正は一度に一つずつ指示する
- 正常な操作だけでなく、連打、再読み込み、空入力も試す
- 公開前に安全性、個人情報、秘密情報、公開範囲を確認する
重要なのは巧みなプロンプトを書くことより、小さく作り、自分で触り、期待と違う点を具体的に伝えることです。
よくある質問
バイブコーディングは無料でできますか？
無料枠を提供するツールもありますが、生成回数、使用量、公開機能などに制限が設けられる場合があります。料金と条件は変わるため、登録前に公式の料金ページを確認してください。
スマートフォンだけでもできますか？
ブラウザで利用できるサービスもありますが、生成画面とプレビューを行き来し、さまざまな画面幅で確認する作業はPCのほうが進めやすいでしょう。完成したアプリをスマートフォンで試すことは重要です。
プログラミングの勉強になりますか？
要件を決め、作り、テストし、改善する流れは学べます。ただし、生成結果を承認するだけではコードを読む力は身につきにくいため、「この変更を初心者向けに説明して」「どのファイルを変更したか教えて」と尋ねると学習につながります。
作ったアプリを販売できますか？
技術的に販売できる場合でも、セキュリティ、個人情報、決済、利用規約、著作権、サポート、適用法令の確認が必要です。試作品が動いた直後に販売せず、経験者によるレビューを受けてください。
まとめ：自分だけが使う小さなツールから始めよう
バイブコーディングは、アイデアを形にするハードルを大きく下げました。ただし、AIが作ったものをそのまま信用してはいけません。小さく作り、自分で操作し、問題がないか確認することが大切です。まずは個人情報、ログイン、決済を扱わない、自分用の小さなツールから始めてみましょう。