ToDoアプリの土台作り

このセクションでは、ToDoアプリの基本的な画面を作成します。

ゴール

• ToDoアプリの土台ができている
• 画面にToDoリストが表示される（まだデータは保存されない）

完成イメージ

1. 新しいプロジェクトを作成

作業フォルダを作成

デスクトップに todo-app フォルダを作成し、移動します。

Macの場合：

mkdir ~/Desktop/todo-app
cd ~/Desktop/todo-app

Windowsの場合：

mkdir $HOME\Desktop\todo-app
cd $HOME\Desktop\todo-app

Claude Codeでプロジェクト作成

Next.jsでシンプルなToDoアプリを作って。

機能：
- ToDoの一覧表示
- ToDoの追加（入力フォーム）
- ToDoの完了/未完了の切り替え
- ToDoの削除

見た目はシンプルでモダンなデザインで。
まずはデータベースなしで、画面だけ作って。

なぜ「画面だけ」？

最初からデータベースを繋ぐと複雑になります。まず画面を作り、動作を確認してからデータベースを追加します。

2. 動作確認

開発サーバーを起動

開発サーバーを起動して

確認ポイント

ブラウザで以下を確認します：

• [ ] ToDoの一覧が表示される
• [ ] 入力フォームがある
• [ ] 「追加」ボタンがある
• [ ] ToDoをクリックで完了/未完了が切り替わる
• [ ] 削除ボタンでToDoが消える

3. 機能を試してみる

実際に操作してみましょう：

1. ToDoを追加

   • 入力欄に「牛乳を買う」と入力
   • 追加ボタンをクリック
   • リストに追加される

2. 完了にする

   • 追加したToDoをクリック
   • 取り消し線が引かれる（完了状態）

3. 削除する

   • 削除ボタンをクリック
   • リストから消える

ページを更新してみる

ブラウザを更新（F5 または Command+R）すると...

データが消えてしまいます！

これは今の状態ではデータがブラウザのメモリにしか保存されていないからです。次のセクションでデータベースに保存できるようにします。

4. UIを改善（任意）

見た目を変えたい場合は、Claude Codeに依頼します：

色を変える

メインカラーを青系に変えて

レイアウトを変える

ToDoリストを中央寄せにして、幅を600pxに制限して

アニメーションを追加

ToDoを追加・削除するときにアニメーションをつけて

5. 現在の状態を理解

今の状態（データベースなし）

• データはアプリのメモリにある
• ページを更新するとメモリがクリアされる
• データを永続化するにはデータベースが必要

次のステップ（データベースあり）

データベースに保存すれば：

• ページを更新してもデータが残る
• 別のデバイスからもアクセスできる

チェックリスト

次に進む前に確認：

• [ ] ToDoアプリが動いている
• [ ] 追加・完了切替・削除ができる
• [ ] ページ更新でデータが消えることを理解した

---

次はデータベース連携に進みます！