バイブコーディングで小さなWebアプリを作る方法

できること

作りたい体験を言葉で伝え、AIに実装を手伝ってもらいながら、小さなアプリを反復開発できます。

手順

1. 利用者と一つの目的を決めます。
2. 最初は1画面・保存なしの試作品にします。
3. 変更前にGitで戻せる状態を作ります。
4. 一度に一機能だけ追加し、PCとスマホで確認します。
5. 認証、課金、個人情報は基礎が整うまで扱いません。

コピー用プロンプト

初心者と一緒に、小さなWebアプリを段階的に作ってください。
目的: 入力した3つの予定をブラウザ内だけで並べ替える
条件: 外部通信なし、個人情報なし、スマホ対応、アクセシブル
まず仕様と画面構成を提案し、私の確認後に最小実装を作ってください。
各変更後に確認手順と戻し方も示してください。

安全確認

出所不明の依存パッケージ、秘密情報、無断取得したコードを使いません。公開前に入力検証、権限、依存関係、ライセンスをレビューします。

公式情報源

使用技術とGitの公式ドキュメントを確認します。確認日: 2026-07-18。