1時間でTODOアプリを作ろう
このチュートリアルでは、AIの力だけで1時間以内にTODOアプリを完成させます。プログラミング経験がなくても大丈夫。AIに指示を出すだけです。
使用ツール
- Cursor or Bolt.new
- React + TypeScript
- Tailwind CSS
手順
0-15分:プロジェクト作成と基本構造
AIに「React+TypeScript+Tailwind CSSでTODOアプリの基本構造を作って。タスクの追加・削除・完了トグル機能付き」と指示。基本のUIが完成します。
15-30分:デザインの改善
「モダンなデザインにリファクタリングして。ダークモード対応、アニメーション付き」と追加指示。
30-45分:機能追加
「ローカルストレージに保存する機能を追加して。カテゴリー分け、期限設定も」。AIが機能を実装します。
45-60分:デプロイ
Vercelにデプロイして公開。URLを共有すれば、誰でもアクセスできるWebアプリの完成です。
まとめ
AIがあれば、1時間で実用的なWebアプリが作れます。まずはTODOアプリから始めて、バイブコーディングの感覚を掴みましょう。
