【無料】Roo Codeが凄すぎて全自動3分でTodoアプリが完成した話

はじめに

無料で使える「Roo Code（旧名：Roo Cline）」で1からTodoアプリを作った結果が凄すぎたので共有する😊

完成したもの

一切コードを書かずに、3分で文句なしのTodoアプリができてしまった😳

💡

一発で完璧に動くものができるの凄すぎる……

Roo Codeの準備

Roo Codeをまだインストールしていない場合は先にインストールしておく✅

📎

📄

【無料】Roo Code × GitHub Copilotで爆速AIコーディングをする方法！

3分でTodoアプリを作る

プロンプトを書く

小学生レベルのプロンプトを書く

とりあえず適当にプロンプトを書いてみた。

Next.jsのApp RouterでTodoアプリを作って

プロンプトを修正してもらう

もちろんこのプロンプトを実行してもいいが、Roo Codeには便利機能がある！

なんとキラキラマークを押すと、プロンプトをいい感じに修正してくれるのだ〜✨

↓

めっちゃしっかりしたプロンプトに変身した😳

（さっきの小学生みたいなプロンプトが恥ずかしい🙈）

Next.jsのApp Routerを使用して、以下の機能を持つTodoアプリを実装してください：

- タスクの追加
- タスクの完了/未完了の切り替え
- タスクの削除
- タスク一覧の表示

以下の技術要件も満たすようにしてください：
- TypeScriptを使用
- サーバーコンポーネントとクライアントコンポーネントを適切に使い分け
- データの永続化（データベースまたはローカルストレージ）
- エラーハンドリング
- ローディング状態の表示
- レスポンシブデザイン

コードと共に、各実装の説明も付けていただけると助かります。