バイブコーディングでToDoアプリを作る｜Replitで30分チュートリアル
この記事で分かること：
- Replitの準備は5分で終わる
- ToDoアプリを30分で作る全手順とプロンプト例
- うまくいかない時の対処法
バイブコーディングが気になっている。でも何から手をつければいいか分からない。
Replitを使ってToDoアプリを1つ完成させる。ブラウザだけで動くのでインストール作業は一切ない。初心者でもタスクの追加・完了・削除ができるアプリを、AIへの指示だけで作り切れる。
考え方は入門記事で、ツールの選び方は比較記事 でそれぞれまとめた。今回は「手を動かす」番だ。
今回作るもの — ToDoアプリの作り方と所要時間
作るのはシンプルなToDoアプリ。できることは4つだけ。
- タスクを入力して追加する
- 完了したタスクにチェックを付ける
- 不要なタスクを削除する
- ブラウザをリロードしてもデータが消えない
最初から欲張ると、AIへの指示が複雑になって収拾がつかなくなる。まず1個、動くものを完成させるのが先だ。
所要時間の内訳
| ステップ | 所要時間 |
|---|---|
| Replitの準備（アカウント作成） | 3〜5分 |
| プロジェクト作成と最初のプロンプト | 5分 |
| 生成結果の確認と修正指示 | 10〜15分 |
| デザイン調整とデプロイ | 5〜10分 |
| 合計 | 約30分 |
必要なのはブラウザとメールアドレスだけ。プログラミング経験はいらない。
Replitの準備 — アカウント作成から3分で開始
なぜReplitを選ぶのか
バイブコーディングのツールはCursor、Windsurf、Claude Codeなど複数ある。その中からReplitを選んだ理由は3つ。
- ブラウザだけで動く。インストール不要
- AI Agent機能が組み込まれている。日本語で指示を出せる
- デプロイまでワンストップ。作ったアプリをその場で公開できる
環境構築に詰まる心配がない。ツール比較記事 でも「環境構築が苦手な人」にはReplitを勧めている。
アカウント作成の手順
- replit.com にアクセス
- 「Sign Up」をクリック
- Googleアカウントで登録（メール登録でもOK）
- ダッシュボードが出れば完了
無料プランで十分だ。今回のチュートリアルに有料機能は使わない。
バイブコーディングのチュートリアル ステップ1 — プロジェクト作成と最初のプロンプト
Replitにログインしたら、さっそくプロジェクトを作る。
- ダッシュボードの「Create Repl」をクリック
- テンプレートは選ばない。「AI」タブを開く
- プロンプト入力欄が出てくる
プロンプトの書き方のコツ
AIへの指示文、つまりプロンプトがバイブコーディングの核になる。押さえるポイントは3つ。
- 何を作るか具体的に書く。「アプリを作って」ではなく「ToDoアプリを作って」
- 機能を箇条書きで並べる。曖昧さが減る
- 技術選定はAIに任せる。言語やフレームワークは指定しなくていい
最初のプロンプト例
そのままコピーして使える。
シンプルなToDoアプリを作ってください。
機能：
- テキスト入力欄にタスクを入力し、追加ボタンで一覧に追加する
- 各タスクにチェックボックスをつけ、完了状態を切り替えられる
- 各タスクに削除ボタンをつけ、クリックで削除できる
- タスク一覧はページを更新しても消えないようにする
デザイン：
- シンプルで見やすいデザイン
- スマホでも使えるレスポンシブ対応
「Send」を押す。ReplitのAIがファイルを次々と生成していく。1〜2分待てば完了する。
ステップ2 — 生成されたアプリの確認と修正指示
コード生成が終わると、右側のプレビューにアプリが表示される。実際に触ってみよう。
- タスクを入力して追加する
- チェックボックスをクリックする
- 削除ボタンを押す
コードは読まなくていい
画面左側にコードが並んでいるが、無視して構わない。バイブコーディングの仕事は「コードを書く」ことではなく「AIに指示を出す」ことだ。
見るのは動作だけ。期待通りに動いているか、見た目は許容範囲か。それだけ確認すればいい。
修正プロンプトの例
一発で完璧に仕上がることはまずない。気になる点を見つけたら、追加のプロンプトで伝える。
完了したタスクに取り消し線を引いてください。
文字の色も薄いグレーに変えてください。
タスクが0件の時に「タスクはありません」と
表示してください。
追加ボタンの色を青にして、
角を丸くしてください。
何度でも修正できる。このサイクルがバイブコーディングの基本形だ。
指示 → 確認 → 修正 → 確認
3〜5回繰り返すと、かなり形になってくる。
ステップ3 — デザイン調整とデプロイ
機能がそろったら、見た目を整える。
デザイン調整のプロンプト例
全体のデザインをもう少しモダンにしてください。
- 背景を薄いグレーに
- カードっぽいデザインでタスク一覧を囲む
- フォントサイズを少し大きく
デザインは雰囲気で指示していい。「モダンに」「シンプルに」「ポップに」。こういった曖昧な言葉をAIが解釈してくれる。これが「バイブ（雰囲気）コーディング」の名前の由来だ。
ワンクリックでデプロイ
完成したアプリの公開手順。
- 画面右上の「Deploy」をクリック
- 「Autoscale」を選択
- URLが発行される
このURLを開けば、誰でもアプリにアクセスできる。スマホからも動く。ここまでコードを1行も書いていない。
バイブコーディングでうまくいかない時のトラブルシューティング
初回は思い通りにいかない場面が出てくる。パターン別に対処法をまとめた。
AIが意図と違うものを作った
プロンプトが曖昧だったケースが多い。「違う」とだけ言うのではなく、何がどう違うのかを具体的に書く。
NG:
これじゃない。もっといい感じにして。
OK:
タスクの追加ボタンが画面下部にありますが、
入力欄の右横に配置してください。
ボタンのサイズは入力欄と同じ高さにしてください。
位置、サイズ、色、動作。何を変えたいのかが伝わればAIは対応できる。
エラーが出て動かない
AIが生成したコードにバグが混じることはある。対処法はシンプルで、エラーメッセージをそのままAIに貼り付ける。
以下のエラーが出ています。修正してください。
[エラーメッセージをコピー＆ペースト]
メッセージの意味を理解する必要はない。そのまま渡せばAIが原因を特定して直してくれる。
途中で方向転換したくなった
「やっぱりToDoじゃなくてメモアプリがいい」。そう思ったら、新しいプロジェクトを作り直すほうが早い。
大幅な変更を途中で入れるとAIが混乱しやすい。小さな修正なら追加プロンプトで済むが、根本から変えるなら最初からやり直すのが近道だ。
よくある質問
Q. プログラミング知識がゼロでも本当にアプリが作れますか？
作れる。この記事の手順通りに進めれば、コードを1行も書かずにToDoアプリが動く。ただし自由に開発するにはプロンプトの練習が要る。まずこのチュートリアルで体験してから、入門記事のシリーズで次のステップに進むのがいい。
Q. Replitの無料プランにはどんな制限がありますか？
AI Agentの利用回数に上限がある。複雑なアプリを何個も作るとすぐ使い切る。ToDoアプリ1つなら無料枠で収まる。頻繁に使うならCoreプランへの移行を検討するとよい（料金はReplit公式サイトで確認、2026年2月時点）。
Q. 作ったアプリを仕事や副業に使えますか？
商用利用は可能だ。社内ツールや個人用アプリなら問題ない。ただし顧客データを扱うアプリは、セキュリティの観点から専門家のチェックを受けたほうがいい。バイブコーディングで生成されたコードには脆弱性が含まれるリスクがある。
次のステップ — プロンプト術を磨いてレベルアップ
ToDoアプリが完成した。次はプロンプトの精度を上げる段階だ。
ここから先に進むなら、3つの方向がある。
- 題材を変えて再挑戦する。家計簿、読書記録、日記アプリなど。自分が欲しいものを作ると続けやすい
- プロンプトの書き方を学ぶ。指示の出し方で生成結果の質が大きく変わる。シリーズ次回で詳しく扱う予定だ
- AIスキルを体系的に身につける。バイブコーディングに限らず、AIを業務に活かすスキルを広く学びたいならオンラインスクールも選択肢になる
バイブコーディングには便利な反面、セキュリティや保守性の落とし穴もある。本番で使う前にバイブコーディングの限界と落とし穴 に目を通しておくと安心だ。
vibe codingの名付け親であるカーパシー氏は、次の段階として「エージェントエンジニアリング」を提唱している（Business Insider Japan, 2026年2月）。AIに複雑な仕事を任せる流れは加速中だ。
今日、ToDoアプリを1つ作る。それがスタートラインだ。
