todoセット機能追加+todo完了機能追加

src/app/page.tsx

@@ -1,8 +1,89 @@
-// src/app/page.tsx
+'use client';  // ← 重要！状態管理を使う時は必須
+
+import { useState } from 'react';
+
+// TypeScriptの型定義
+type Todo = {
+  id: number;       // 一意の識別子
+  text: string;     // TODOの内容
+  completed: boolean; // 完了状態
+};
+
 export default function Home() {
+  // useState フックの使い方
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [inputValue, setInputValue] = useState<string>('');
+  const addTodo = () => {
+    // 空の入力をチェック（バリデーション）
+    if (inputValue.trim() === '') {
+      alert('TODOを入力してください');
+      return;
+    }
+  const newTodo: Todo = {
+      id: Date.now(),  // 簡易的なID生成（本番ではuuidを推奨）
+      text: inputValue,
+      completed: false
+    };
+    setTodos([...todos, newTodo]);
+    setInputValue('');
+  };
+  
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();  // ページのリロードを防ぐ
+    addTodo();
+  };
+
+  const toggleTodo = (id: number) => {
+    // mapを使って新しい配列を作成（イミュータビリティ）
+    const updatedTodos = todos.map(todo => {
+      if (todo.id === id) {
+        // 該当するTODOを見つけたら、completedを反転
+        return { ...todo, completed: !todo.completed };
+      }
+      return todo;  // それ以外はそのまま
+    });
+    
+    setTodos(updatedTodos);
+  };
+
   return (
-    <main className="min-h-screen p-8">
+    <main className="min-h-screen p-8 bg-gray-50">
-      <h1 className="text-3xl font-bold">私のTODOアプリ</h1>
+      <div className="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
+        <h1 className="text-2xl font-bold text-gray-800 mb-6">TODOアプリ</h1>
+{/* JSX部分 */}
+        <form onSubmit={handleSubmit} className="mb-4">
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder="TODOを入力してEnterキー"
+            className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button 
+            type="submit"
+            className="w-full mt-2 bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition-colors"
+          >
+            追加
+          </button>
+        </form>
+        <div className="space-y-2">
+          {todos.map((todo) => (
+            <div key={todo.id} className="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+              <input
+                type="checkbox"
+                checked={todo.completed}
+                onChange={() => toggleTodo(todo.id)}
+                className="mr-3 h-5 w-5 cursor-pointer"
+              />
+              <span 
+                className={`flex-1 ${todo.completed ? 'line-through text-gray-500' : 'text-gray-800'}`}
+              >
+                {todo.text}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
     </main>
   );
 }