ToDoアプリの作り方（超初心者向け）

プログラミング完全初心者でも作れるToDoアプリのチュートリアルです。

完成イメージ

• タスクを入力して追加
• チェックで完了マーク
• ゴミ箱アイコンで削除
• データは保存される

準備

1. Cursorをインストール
2. 新規フォルダ「todo-app」を作成
3. Cursorで開く

ステップ1: 基本構造を作る

チャット（Cmd+L）で:

Next.js + TypeScript + Tailwind CSSで
シンプルなToDoアプリの基本構造を作って。

まずはUIだけでOK:
- タイトル「My Todo」
- 入力欄とボタン
- タスク一覧（ダミーデータ3件）

ステップ2: 追加機能

タスク追加機能を実装して。
- 入力欄に文字を入力
- 追加ボタンかEnterで追加
- 追加後は入力欄をクリア

ステップ3: 完了/削除機能

タスクの完了と削除機能を追加して。
- チェックボックスで完了/未完了
- 完了したら取り消し線
- 削除ボタンで削除

ステップ4: データ保存

タスクをローカルストレージに保存して。
ページをリロードしても残るように。

ステップ5: デザイン改善

デザインを改善して:
- カード型のデザイン
- 影をつけて立体感
- 追加時のアニメーション
- レスポンシブ対応

起動方法

npm run dev

ブラウザで http://localhost:3000 を開く。

トラブルシューティング

エラーが出たら

エラーメッセージをチャットにコピペ:

このエラーを修正して: [エラー内容]

動かない時

動作しません。期待する動作は:
[期待する動作を説明]
現在の動作は:
[今の動作を説明]

発展課題

• カテゴリ分け機能
• 期限設定
• 優先度設定
• ドラッグ&ドロップで並び替え

次のステップ

• チャットアプリの作り方
• ポートフォリオサイトの作り方