todo削除機能追加

src/app/page.tsx

@@ -46,6 +46,15 @@ export default function Home() {
     setTodos(updatedTodos);
   };
 
+  const deleteTodo = (id: number) => {
+    // 確認ダイアログを表示（オプション）
+    if (confirm('本当に削除しますか？')) {
+      // filterを使って該当ID以外の要素で新しい配列を作成
+      const filteredTodos = todos.filter(todo => todo.id !== id);
+      setTodos(filteredTodos);
+    }
+  };
+
   return (
     <main className="min-h-screen p-8 bg-gray-50">
       <div className="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
@@ -80,6 +89,12 @@ export default function Home() {
               >
                 {todo.text}
               </span>
+              <button
+                onClick={() => deleteTodo(todo.id)}
+                className="text-red-500 hover:text-red-700 ml-2 px-2 py-1 rounded transition-colors"
+              >
+                削除
+              </button>
             </div>
           ))}
         </div>