node --version
# v20.x.x 以上を推奨

npm --version
# 10.x.x 以上

npm install -g @anthropic-ai/claude-code

mkdir todo-app-project
cd todo-app-project
claude

> Viteを使ってReact + TypeScriptのプロジェクトを作成して。
  プロジェクト名は "todo-app"

npm create vite@latest todo-app -- --template react-ts
cd todo-app
npm install

> 今作ったプロジェクトのディレクトリ構成を説明して

todo-app/
├── public/          # 静的ファイル
├── src/
│   ├── App.tsx      # メインコンポーネント
│   ├── App.css      # スタイル
│   ├── main.tsx     # エントリポイント
│   └── vite-env.d.ts
├── index.html       # HTMLテンプレート
├── package.json     # 依存関係
├── tsconfig.json    # TypeScript設定
└── vite.config.ts   # Vite設定

> 開発サーバーを起動して

npm run dev

  VITE v6.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

> App.tsxをTODOアプリの出発点として書き換えて。
  シンプルに「TODOアプリ」というタイトルだけ表示するようにして。
  不要なデフォルトのコードとCSSは削除して。

function App() {
  return (
    <div className="app">
      <h1>TODOアプリ</h1>
    </div>
  );
}

export default App;

.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1 {
  text-align: center;
  color: #333;
}

> TODOアプリに必要なコンポーネントを設計して。
  コンポーネントツリーを図で示して。
  各コンポーネントの役割も説明して。

App
├── AddTodoForm      # 新しいTODOを入力するフォーム
├── FilterButtons    # 全て/未完了/完了の切替ボタン
└── TodoList         # TODOリストの一覧
    └── TodoItem     # 個々のTODOアイテム（複数）

> TODOアプリで使う型定義ファイルを作成して。
  src/types/todo.ts に配置して。
  Todo型にはid、text、completed、createdAtを含めて。

// src/types/todo.ts

export interface Todo {
  id: string;
  text: string;
  completed: boolean;
  createdAt: number;
}

export type FilterType = 'all' | 'active' | 'completed';

> TODOアプリの各コンポーネントのpropsとstateを設計して。
  型定義も含めて具体的に示して。

// App コンポーネントの State
// todos: Todo[]          — TODOリスト全体
// filter: FilterType     — 現在のフィルター

// AddTodoForm の Props
interface AddTodoFormProps {
  onAdd: (text: string) => void;
}

// FilterButtons の Props
interface FilterButtonsProps {
  currentFilter: FilterType;
  onFilterChange: (filter: FilterType) => void;
  counts: {
    all: number;
    active: number;
    completed: number;
  };
}

// TodoList の Props
interface TodoListProps {
  todos: Todo[];
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
  onEdit: (id: string, newText: string) => void;
}

// TodoItem の Props
interface TodoItemProps {
  todo: Todo;
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
  onEdit: (id: string, newText: string) => void;
}

> 以下のコンポーネントファイルを src/components/ に作成して。
  各ファイルは最小限のコードで、propsの型定義だけ含めて。
  - AddTodoForm.tsx
  - FilterButtons.tsx
  - TodoList.tsx
  - TodoItem.tsx

// src/components/TodoItem.tsx
import { Todo } from '../types/todo';

interface TodoItemProps {
  todo: Todo;
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
  onEdit: (id: string, newText: string) => void;
}

function TodoItem({ todo, onToggle, onDelete, onEdit }: TodoItemProps) {
  return (
    <li className="todo-item">
      <span>{todo.text}</span>
    </li>
  );
}

export default TodoItem;

> App.tsxで全コンポーネントをimportして配置して。
  todosのstateは空配列で初期化して。
  ハンドラー関数はまだ中身を書かなくていい。

// src/App.tsx
import { useState } from 'react';
import { Todo, FilterType } from './types/todo';
import AddTodoForm from './components/AddTodoForm';
import FilterButtons from './components/FilterButtons';
import TodoList from './components/TodoList';
import './App.css';

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [filter, setFilter] = useState<FilterType>('all');

  return (
    <div className="app">
      <h1>TODOアプリ</h1>
      <AddTodoForm onAdd={() => {}} />
      <FilterButtons
        currentFilter={filter}
        onFilterChange={setFilter}
        counts={{ all: 0, active: 0, completed: 0 }}
      />
      <TodoList
        todos={todos}
        onToggle={() => {}}
        onDelete={() => {}}
        onEdit={() => {}}
      />
    </div>
  );
}

export default App;

> App.tsxのtodos stateに、TODOを追加する関数addTodoを実装して。
  idはcrypto.randomUUID()で生成して。
  createdAtはDate.now()で。
  追加したらコンソールに出力して確認できるようにして。

// src/App.tsx
import { useState } from 'react';
import { Todo, FilterType } from './types/todo';
import AddTodoForm from './components/AddTodoForm';
import TodoList from './components/TodoList';
import './App.css';

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [filter, setFilter] = useState<FilterType>('all');

  const addTodo = (text: string) => {
    const newTodo: Todo = {
      id: crypto.randomUUID(),
      text,
      completed: false,
      createdAt: Date.now(),
    };
    setTodos((prevTodos) => [newTodo, ...prevTodos]);
    console.log('Todo added:', newTodo);
  };

  return (
    <div className="app">
      <h1>TODOアプリ</h1>
      <AddTodoForm onAdd={addTodo} />
      <TodoList
        todos={todos}
        onToggle={() => {}}
        onDelete={() => {}}
        onEdit={() => {}}
      />
    </div>
  );
}

export default App;

> AddTodoForm.tsxを実装して。
  テキスト入力欄と追加ボタンを持つフォーム。
  空文字の場合は追加できないようにバリデーションして。
  追加後は入力欄をクリアして。
  Enterキーでも追加できるようにして。

// src/components/AddTodoForm.tsx
import { useState, FormEvent } from 'react';

interface AddTodoFormProps {
  onAdd: (text: string) => void;
}

function AddTodoForm({ onAdd }: AddTodoFormProps) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const trimmed = inputValue.trim();
    if (!trimmed) return;

    onAdd(trimmed);
    setInputValue('');
  };

  return (
    <form className="add-todo-form" onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="新しいTODOを入力..."
        className="todo-input"
        autoFocus
      />
      <button
        type="submit"
        className="add-button"
        disabled={!inputValue.trim()}
      >
        追加
      </button>
    </form>
  );
}

export default AddTodoForm;

> AddTodoFormのスタイルをApp.cssに追加して。
  入力欄とボタンを横並びにして。
  モダンで見やすいデザインにして。
  ボタンはdisabled時にグレーアウトして。

/* AddTodoForm */
.add-todo-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.todo-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.todo-input:focus {
  border-color: #4a90d9;
}

.add-button {
  padding: 0.75rem 1.5rem;
  background-color: #4a90d9;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-button:hover:not(:disabled) {
  background-color: #357abd;
}

.add-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

> 開発サーバーを起動して動作確認したい

> このエラーを修正して:
  [エラーメッセージをここに貼り付け]

> TodoItem.tsxを実装して。
  チェックボックス、TODOテキスト、削除ボタンを横並びで表示。
  完了済みのTODOはテキストに取り消し線を付けて。
  チェックボックスをクリックしたらonToggleを呼ぶ。
  削除ボタンをクリックしたらonDeleteを呼ぶ。

// src/components/TodoItem.tsx
import { Todo } from '../types/todo';

interface TodoItemProps {
  todo: Todo;
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
  onEdit: (id: string, newText: string) => void;
}

function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
  return (
    <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
      <label className="todo-label">
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={() => onToggle(todo.id)}
          className="todo-checkbox"
        />
        <span className="todo-text">{todo.text}</span>
      </label>
      <div className="todo-actions">
        <button
          onClick={() => onDelete(todo.id)}
          className="delete-button"
          aria-label="削除"
        >
          ✕
        </button>
      </div>
    </li>
  );
}

export default TodoItem;

> TodoList.tsxを実装して。
  todos配列をmapでループしてTodoItemをレンダリング。
  todosが空の場合は「TODOがありません」と表示して。
  keyにはtodo.idを使って。

// src/components/TodoList.tsx
import { Todo } from '../types/todo';
import TodoItem from './TodoItem';

interface TodoListProps {
  todos: Todo[];
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
  onEdit: (id: string, newText: string) => void;
}

function TodoList({ todos, onToggle, onDelete, onEdit }: TodoListProps) {
  if (todos.length === 0) {
    return (
      <div className="empty-message">
        <p>TODOがありません。上のフォームから追加しましょう！</p>
      </div>
    );
  }

  return (
    <ul className="todo-list">
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={onToggle}
          onDelete={onDelete}
          onEdit={onEdit}
        />
      ))}
    </ul>
  );
}

export default TodoList;

> ReactのkeyプロパティがなぜZz重要なのか、具体例を使って説明して。
  indexをkeyに使うとどんな問題が起きるかも説明して。

// 悪い例: インデックスをkeyに使う
{todos.map((todo, index) => (
  <TodoItem key={index} todo={todo} ... />
))}

// 良い例: 一意なIDをkeyに使う
{todos.map((todo) => (
  <TodoItem key={todo.id} todo={todo} ... />
))}

> TodoListとTodoItemのCSSをApp.cssに追加して。
  リストスタイルを消して、カード風にして。
  完了済みアイテムはグレーアウトと取り消し線で。
  削除ボタンはホバー時に赤くなるようにして。

/* TodoList */
.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.empty-message {
  text-align: center;
  color: #999;
  padding: 2rem;
  font-size: 0.95rem;
}

/* TodoItem */
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: box-shadow 0.2s;
}

.todo-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.todo-item.completed {
  opacity: 0.6;
  background: #f9f9f9;
}

.todo-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  cursor: pointer;
}

.todo-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
  accent-color: #4a90d9;
}

.todo-text {
  font-size: 1rem;
  color: #333;
}

.completed .todo-text {
  text-decoration: line-through;
  color: #999;
}

.todo-actions {
  display: flex;
  gap: 0.5rem;
}

.delete-button {
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
}

.delete-button:hover {
  color: #e74c3c;
  background-color: #fde8e8;
}

> App.tsxにtoggleTodo関数を実装して。
  指定されたidのTODOのcompletedを反転させる。
  イミュータブルな更新パターンを使って。
  TodoListのonToggleにこの関数を渡して。

const toggleTodo = (id: string) => {
  setTodos((prevTodos) =>
    prevTodos.map((todo) =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )
  );
};

// NG: 配列を直接変更している
const toggleTodoBad = (id: string) => {
  const todo = todos.find((t) => t.id === id);
  if (todo) {
    todo.completed = !todo.completed; // 直接変更 = NG
    setTodos(todos); // 同じ参照なのでReactが変化を検知しない
  }
};

// OK: 新しい配列と新しいオブジェクトを作成
const toggleTodo = (id: string) => {
  setTodos((prevTodos) =>
    prevTodos.map((todo) =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )
  );
};

> App.tsxにdeleteTodo関数を実装して。
  指定されたidのTODOを配列から取り除く。
  filterメソッドを使ってイミュータブルに。
  確認ダイアログは不要。

const deleteTodo = (id: string) => {
  setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
};

> App.tsxの全体コードを見せて。
  addTodo、toggleTodo、deleteTodoが全て実装された状態で。

// src/App.tsx
import { useState } from 'react';
import { Todo, FilterType } from './types/todo';
import AddTodoForm from './components/AddTodoForm';
import TodoList from './components/TodoList';
import './App.css';

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [filter, setFilter] = useState<FilterType>('all');

  const addTodo = (text: string) => {
    const newTodo: Todo = {
      id: crypto.randomUUID(),
      text,
      completed: false,
      createdAt: Date.now(),
    };
    setTodos((prevTodos) => [newTodo, ...prevTodos]);
  };

  const toggleTodo = (id: string) => {
    setTodos((prevTodos) =>
      prevTodos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id: string) => {
    setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
  };

  return (
    <div className="app">
      <h1>TODOアプリ</h1>
      <AddTodoForm onAdd={addTodo} />
      <TodoList
        todos={todos}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
        onEdit={() => {}}
      />
    </div>
  );
}

export default App;

> Reactのイベント処理で、onClickにアロー関数を使う場合と
  関数参照を直接渡す場合の違いを説明して。
  TodoItemのコードで具体的に示して。

// パターン1: アロー関数でラップ（引数あり）
<button onClick={() => onDelete(todo.id)}>削除</button>

// パターン2: 関数参照を直接渡す（引数なし）
<button onClick={handleClick}>削除</button>

> チェックボックスをクリックしても画面が更新されない。
  原因を調べて修正して。

> localStorageの基本的なAPIを説明して。
  setItem、getItem、removeItem、clearの使い方をそれぞれ例示して。

// データの保存
localStorage.setItem('key', 'value');

// データの取得
const value = localStorage.getItem('key'); // 'value' or null

// データの削除
localStorage.removeItem('key');

// 全データの削除
localStorage.clear();

// 配列の保存
const todos = [{ id: '1', text: '買い物', completed: false }];
localStorage.setItem('todos', JSON.stringify(todos));

// 配列の取得
const stored = localStorage.getItem('todos');
const parsed = stored ? JSON.parse(stored) : [];

> App.tsxにuseEffectを使って、todosが変更されるたびに
  localStorageに保存する処理を追加して。
  キー名は "todos" で。

import { useState, useEffect } from 'react';

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [filter, setFilter] = useState<FilterType>('all');

  // todosが変更されるたびにlocalStorageに保存
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  // ... 以下省略
}

> useState の初期値をlocalStorageから読み込むように変更して。
  localStorageにデータがない場合は空配列にして。
  JSON.parseのエラーハンドリングも入れて。

function App() {
  const [todos, setTodos] = useState<Todo[]>(() => {
    try {
      const stored = localStorage.getItem('todos');
      if (stored) {
        return JSON.parse(stored) as Todo[];
      }
    } catch (error) {
      console.error('Failed to load todos from localStorage:', error);
    }
    return [];
  });

  // ... 以下同じ
}

// 毎レンダリング時に実行される（パフォーマンス悪）
const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('todos') || '[]'));

// 初回レンダリング時のみ実行される（推奨）
const [todos, setTodos] = useState(() => {
  return JSON.parse(localStorage.getItem('todos') || '[]');
});

> localStorageとuseStateを統合するカスタムフック useLocalStorage を作成して。
  src/hooks/useLocalStorage.ts に配置して。
  ジェネリクスで型安全にして。

// src/hooks/useLocalStorage.ts
import { useState, useEffect } from 'react';

function useLocalStorage<T>(key: string, initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(`Error writing localStorage key "${key}":`, error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

// Before
const [todos, setTodos] = useState<Todo[]>([]);

// After
const [todos, setTodos] = useLocalStorage<Todo[]>('todos', []);

> App.tsxにフィルタリング機能を追加して。
  filter stateに応じてtodosをフィルタリングして、
  filteredTodosをTodoListに渡す。
  useMemoを使ってパフォーマンス最適化して。

import { useState, useMemo } from 'react';

function App() {
  const [todos, setTodos] = useLocalStorage<Todo[]>('todos', []);
  const [filter, setFilter] = useState<FilterType>('all');

  const filteredTodos = useMemo(() => {
    switch (filter) {
      case 'active':
        return todos.filter((todo) => !todo.completed);
      case 'completed':
        return todos.filter((todo) => todo.completed);
      case 'all':
      default:
        return todos;
    }
  }, [todos, filter]);

  const counts = useMemo(() => ({
    all: todos.length,
    active: todos.filter((todo) => !todo.completed).length,
    completed: todos.filter((todo) => todo.completed).length,
  }), [todos]);

  return (
    <div className="app">
      <h1>TODOアプリ</h1>
      <AddTodoForm onAdd={addTodo} />
      <FilterButtons
        currentFilter={filter}
        onFilterChange={setFilter}
        counts={counts}
      />
      <TodoList
        todos={filteredTodos}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
        onEdit={() => {}}
      />
    </div>
  );
}

const filteredTodos = useMemo(() => {
  // この関数は todos または filter が変更されたときだけ実行される
  switch (filter) {
    case 'active':
      return todos.filter((todo) => !todo.completed);
    case 'completed':
      return todos.filter((todo) => todo.completed);
    default:
      return todos;
  }
}, [todos, filter]); // 依存配列

const counts = useMemo(() => ({
  all: todos.length,
  active: todos.filter((todo) => !todo.completed).length,
  completed: todos.filter((todo) => todo.completed).length,
}), [todos]);

> FilterButtons.tsxを実装して。
  「すべて」「未完了」「完了済み」の3つのボタン。
  現在選択中のフィルターはアクティブなスタイルにして。
  各ボタンに件数バッジを表示して。

// src/components/FilterButtons.tsx
import { FilterType } from '../types/todo';

interface FilterButtonsProps {
  currentFilter: FilterType;
  onFilterChange: (filter: FilterType) => void;
  counts: {
    all: number;
    active: number;
    completed: number;
  };
}

const filterLabels: Record<FilterType, string> = {
  all: 'すべて',
  active: '未完了',
  completed: '完了済み',
};

function FilterButtons({ currentFilter, onFilterChange, counts }: FilterButtonsProps) {
  const filters: FilterType[] = ['all', 'active', 'completed'];

  return (
    <div className="filter-buttons">
      {filters.map((filter) => (
        <button
          key={filter}
          className={`filter-button ${currentFilter === filter ? 'active' : ''}`}
          onClick={() => onFilterChange(filter)}
        >
          {filterLabels[filter]}
          <span className="filter-count">{counts[filter]}</span>
        </button>
      ))}
    </div>
  );
}

export default FilterButtons;

> FilterButtonsのCSSをApp.cssに追加して。
  ボタンを横並びにして、アクティブなボタンは青い背景にして。
  件数バッジを小さく表示して。
  ボタン間に適切な間隔を設けて。

/* FilterButtons */
.filter-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.filter-button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  background: #fff;
  color: #666;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-button:hover {
  border-color: #4a90d9;
  color: #4a90d9;
}

.filter-button.active {
  background: #4a90d9;
  border-color: #4a90d9;
  color: #fff;
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.1);
}

.filter-button.active .filter-count {
  background: rgba(255, 255, 255, 0.3);
}

> TodoListの空メッセージを、現在のフィルターに応じて変えて。
  「すべて」で空なら「TODOがありません」
  「未完了」で空なら「未完了のTODOはありません」
  「完了済み」で空なら「完了済みのTODOはありません」

// App.tsx での使用
const emptyMessages: Record<FilterType, string> = {
  all: 'TODOがありません。上のフォームから追加しましょう！',
  active: '未完了のTODOはありません。すべて完了です！',
  completed: '完了済みのTODOはありません。',
};

<TodoList
  todos={filteredTodos}
  onToggle={toggleTodo}
  onDelete={deleteTodo}
  onEdit={() => {}}
  emptyMessage={emptyMessages[filter]}
/>

> App.cssを全面的にリニューアルして。
  - ページ全体の背景をグラデーションにして
  - アプリ本体をカードスタイルにして
  - モダンでクリーンなデザインにして
  - フォントはシステムフォントを使って

/* ベーススタイル */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans',
    'Noto Sans JP', sans-serif;
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}

#root {
  width: 100%;
  max-width: 600px;
}

/* アプリコンテナ */
.app {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* タイトル */
.app h1 {
  text-align: center;
  color: #333;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

> AddTodoFormのスタイルを改善して。
  - 入力欄に影をつけてフォーカス時に強調
  - ボタンにグラデーションを使って
  - スムーズなトランジションを入れて

/* AddTodoForm */
.add-todo-form {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.todo-input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.todo-input:focus {
  border-color: #667eea;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.todo-input::placeholder {
  color: #aab;
}

.add-button {
  padding: 0.875rem 1.75rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.add-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.add-button:active:not(:disabled) {
  transform: translateY(0);
}

.add-button:disabled {
  background: #ddd;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

> TodoItemにCSSアニメーションを追加して。
  - 追加時にフェードイン + スライドダウン
  - ホバー時に軽い浮き上がり効果
  - 完了時のスムーズなスタイル変化

/* TodoItem アニメーション */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: all 0.3s ease;
  animation: slideIn 0.3s ease;
}

.todo-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: #ddd;
}

.todo-item.completed {
  opacity: 0.55;
  background: #f9f9fa;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: #aaa;
}

/* チェックボックスのカスタマイズ */
.todo-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.todo-checkbox:checked {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
}

.todo-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
}

.todo-checkbox:hover {
  border-color: #667eea;
}

> レスポンシブデザインのCSSを追加して。
  - スマホ（480px以下）でフォームを縦並びにして
  - タブレットとPCで適切に表示されるように
  - フォントサイズやパディングも調整して

/* レスポンシブ対応 */
@media (max-width: 480px) {
  body {
    padding: 1rem 0.5rem;
  }

  .app {
    padding: 1.25rem;
    border-radius: 12px;
  }

  .app h1 {
    font-size: 1.4rem;
  }

  .add-todo-form {
    flex-direction: column;
  }

  .add-button {
    width: 100%;
    text-align: center;
  }

  .filter-buttons {
    flex-wrap: wrap;
  }

  .filter-button {
    flex: 1;
    justify-content: center;
    min-width: 0;
    font-size: 0.82rem;
    padding: 0.45rem 0.7rem;
  }
}

> App.tsxにeditTodo関数を実装して。
  引数はidとnewTextの2つ。
  指定されたidのTODOのtextをnewTextに更新する。
  空文字のnewTextは拒否して。
  TodoListのonEditにこの関数を渡して。

const editTodo = (id: string, newText: string) => {
  const trimmed = newText.trim();
  if (!trimmed) return;

  setTodos((prevTodos) =>
    prevTodos.map((todo) =>
      todo.id === id ? { ...todo, text: trimmed } : todo
    )
  );
};

// JSX内
<TodoList
  todos={filteredTodos}
  onToggle={toggleTodo}
  onDelete={deleteTodo}
  onEdit={editTodo}
/>

> TodoItem.tsxに編集機能を追加して。
  - 編集ボタンをクリックすると、テキスト部分が入力欄に切り替わる
  - 入力欄の横に保存ボタンとキャンセルボタンを表示
  - Enterキーで保存、Escapeキーでキャンセル
  - 編集開始時に入力欄にフォーカスを当てる（useRefを使って）
  - 空文字で保存しようとした場合は保存しない

// src/components/TodoItem.tsx
import { useState, useRef, useEffect, KeyboardEvent } from 'react';
import { Todo } from '../types/todo';

interface TodoItemProps {
  todo: Todo;
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
  onEdit: (id: string, newText: string) => void;
}

function TodoItem({ todo, onToggle, onDelete, onEdit }: TodoItemProps) {
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState(todo.text);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (isEditing && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select();
    }
  }, [isEditing]);

  const handleSave = () => {
    const trimmed = editText.trim();
    if (trimmed && trimmed !== todo.text) {
      onEdit(todo.id, trimmed);
    }
    setIsEditing(false);
    setEditText(todo.text);
  };

  const handleCancel = () => {
    setIsEditing(false);
    setEditText(todo.text);
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSave();
    } else if (e.key === 'Escape') {
      handleCancel();
    }
  };

  const startEditing = () => {
    setEditText(todo.text);
    setIsEditing(true);
  };

  return (
    <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
      <label className="todo-label">
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={() => onToggle(todo.id)}
          className="todo-checkbox"
        />
        {isEditing ? (
          <input
            ref={inputRef}
            type="text"
            value={editText}
            onChange={(e) => setEditText(e.target.value)}
            onKeyDown={handleKeyDown}
            onBlur={handleSave}
            className="edit-input"
          />
        ) : (
          <span
            className="todo-text"
            onDoubleClick={startEditing}
          >
            {todo.text}
          </span>
        )}
      </label>
      <div className="todo-actions">
        {isEditing ? (
          <>
            <button onClick={handleSave} className="save-button" aria-label="保存">
              ✓
            </button>
            <button onClick={handleCancel} className="cancel-button" aria-label="キャンセル">
              ✕
            </button>
          </>
        ) : (
          <>
            <button onClick={startEditing} className="edit-button" aria-label="編集">
              ✎
            </button>
            <button onClick={() => onDelete(todo.id)} className="delete-button" aria-label="削除">
              ✕
            </button>
          </>
        )}
      </div>
    </li>
  );
}

export default TodoItem;

> useRefの使い方と、useStateとの違いを説明して。
  今回のフォーカス制御での使い方を具体的に。

const inputRef = useRef<HTMLInputElement>(null);

// JSXでrefを紐付ける
<input ref={inputRef} ... />

// useEffectで直接DOM操作
useEffect(() => {
  if (isEditing && inputRef.current) {
    inputRef.current.focus();   // フォーカスを当てる
    inputRef.current.select();  // テキストを全選択
  }
}, [isEditing]);

> 編集モードのCSSをApp.cssに追加して。
  - 編集入力欄はテキスト表示と同じサイズにして
  - 保存ボタンは緑、キャンセルボタンはグレーに
  - 編集ボタンはホバー時に表示されるようにして
  - 編集中のアイテムには視覚的な強調を付けて

/* 編集モード */
.edit-input {
  flex: 1;
  padding: 0.25rem 0.5rem;
  border: 2px solid #667eea;
  border-radius: 6px;
  font-size: 1rem;
  outline: none;
  background: #f0f4ff;
  font-family: inherit;
}

.todo-item:has(.edit-input) {
  border-color: #667eea;
  background: #fafbff;
}

/* 編集・保存・キャンセルボタン */
.edit-button {
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
  opacity: 0;
}

.todo-item:hover .edit-button {
  opacity: 1;
}

.edit-button:hover {
  color: #667eea;
  background: #f0f4ff;
}

.save-button {
  background: none;
  border: none;
  color: #27ae60;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.save-button:hover {
  background: #e8f8f0;
}

.cancel-button {
  background: none;
  border: none;
  color: #999;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.cancel-button:hover {
  color: #666;
  background: #f0f0f0;
}

<span
  className="todo-text"
  onDoubleClick={startEditing}
>
  {todo.text}
</span>

> プロダクションビルドを実行して。
  ビルド結果のファイルサイズも確認して。

npm run build

dist/
├── index.html
└── assets/
    ├── index-[hash].js     # JavaScript（ミニファイ済み）
    ├── index-[hash].css    # CSS（ミニファイ済み）
    └── vite.svg

vite v6.x.x building for production...
✓ 34 modules transformed.
dist/index.html                  0.46 kB │ gzip:  0.29 kB
dist/assets/index-D4jk2s.css     2.15 kB │ gzip:  0.92 kB
dist/assets/index-Bx7mK3.js    48.72 kB │ gzip: 15.83 kB
✓ built in 1.24s

> ビルド結果をローカルでプレビューして

npm run preview

  ➜  Local:   http://localhost:4173/

> Gitリポジトリを初期化して。
  .gitignoreは適切に設定して。
  初回コミットを作成して。

git init

# .gitignore
node_modules
dist
dist-ssr
*.local

git add .
git commit -m "feat: TODOアプリ完成 — Claude Codeで構築"

> GitHubに新しいリポジトリを作成してプッシュして。
  リポジトリ名は "todo-app-react" で。

gh repo create todo-app-react --public --source=. --push

> Vercelにデプロイする手順を教えて。
  CLIを使う方法で。

npm install -g vercel

vercel

? Set up and deploy? [Y/n]  Y
? Which scope?  your-username
? Link to existing project?  N
? What's your project's name?  todo-app-react
? In which directory is your code located?  ./
? Want to modify these settings? [y/N]  N

🔗  https://todo-app-react-xxxxx.vercel.app

> Netlifyにデプロイする方法も教えて。CLIで。

# Netlify CLIのインストール
npm install -g netlify-cli

# デプロイ（手動）
netlify deploy --prod --dir=dist

> GitHub Pagesにデプロイする方法を教えて。
  vite.config.tsの設定変更も含めて。

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/todo-app-react/',  // リポジトリ名
});