From 67cd70bbd65649edece6320f0dc4a4f7286606b0 Mon Sep 17 00:00:00 2001
From: KentaroKumode <23e1273@andrew.ac.jp>
Date: Sun, 13 Jul 2025 20:22:18 +0900
Subject: [PATCH] =?UTF-8?q?=E3=81=95=E3=82=89=E3=81=AB=E3=82=B3=E3=83=A1?=
 =?UTF-8?q?=E3=83=B3=E3=83=88=E3=82=A2=E3=82=A6=E3=83=88=E3=81=AE=E3=82=AB?=
 =?UTF-8?q?=E3=83=90=E3=83=BC=E7=AF=84=E5=9B=B2=E3=82=92=E6=8B=A1=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b85b938..4016945 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,9 +4,9 @@ import { useState } from 'react';
 
 // Todo型の定義
 type Todo = {
-  id: number;
-  text: string;
-  completed: boolean;
+	id: number;       // ユニークな識別子。今回はDate.now()で一意性をある程度確保。
+  text: string;     // TODOの内容。ユーザーが入力する文字列。
+  completed: boolean; // 完了したかどうかのフラグ。チェックボックスに対応。
 };
 
 export default function Home() {
@@ -28,45 +28,45 @@ export default function Home() {
   // 新しいTODOを追加する関数
   const addTodo = () => {
     // 入力が空欄だったら警告ダイアログ表示
-    if (inputValue.trim() === '') {
+    if (inputValue.trim() === '') { //trim()で前後の空白を除去
       setShowInputAlert(true); // 警告ダイアログを表示
       return;
     }
     // 新しいTodoオブジェクトを作成
-    const newTodo: Todo = {
-      id: Date.now(), // 一意なID
+    const newTodo: Todo = { // 新規Todoオブジェクト
+      id: Date.now(), // 現在時刻のミリ秒をIDとして使用することで、ほかのTODOと重複しないようにする
       text: inputValue, // 入力値
-      completed: false // 初期状態は未完了
+      completed: false // 初期状態を未完了に
     };
     setTodos([...todos, newTodo]); // Todoリストに追加
     setInputValue(''); // 入力欄をクリア
   };
 
   // フォーム送信時の処理
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { // フォーム送信イベント
     e.preventDefault(); // ページリロード防止
     addTodo(); // Todo追加処理
   };
 
   // Todoの完了状態をトグルする関数
-  const toggleTodo = (id: number) => {
-    const updatedTodos = todos.map(todo => {
-      if (todo.id === id) {
-        return { ...todo, completed: !todo.completed };
+  const toggleTodo = (id: number) => { // Todoの完了状態を切り替える 
+    const updatedTodos = todos.map(todo => { // 現在のTodoリストをマッピング
+      if (todo.id === id) { // 対象のTodoを見つけたら
+        return { ...todo, completed: !todo.completed }; // そのtodoの完了状態を反転
       }
-      return todo;
+      return todo; // 対象外はそのまま返す
     });
     setTodos(updatedTodos); // 状態更新
   };
 
   // 削除ボタンが押されたときの処理（確認ダイアログ表示）
-  const handleDeleteClick = (id: number) => {
+  const handleDeleteClick = (id: number) => { // 削除ボタン押下時の処理
     setShowConfirm(true); // 削除確認ダイアログ表示
     setTargetId(id); // 削除対象IDをセット
   };
 
   // ダイアログで「はい」が押されたときの本削除処理
-  const confirmDelete = () => {
+  const confirmDelete = () => { // 削除確認ダイアログで「はい」が押されたときの処理
     if (targetId !== null) { // 削除対象IDがセットされているか確認
       setTodos(todos.filter(todo => todo.id !== targetId)); // 該当ID以外を残す
       setShowConfirm(false); // ダイアログを閉じる
@@ -75,13 +75,13 @@ export default function Home() {
   };
 
   // ダイアログで「いいえ」が押されたときの処理
-  const cancelDelete = () => {
+  const cancelDelete = () => { // 削除確認ダイアログで「いいえ」が押されたときの処理
     setShowConfirm(false); // ダイアログを閉じる
     setTargetId(null); // 削除対象IDをリセット
   };
 
   // 空欄入力時ダイアログを閉じる関数
-  const closeInputAlert = () => {
+  const closeInputAlert = () => { //
     setShowInputAlert(false); // 警告ダイアログを閉じる
   };
 
@@ -89,11 +89,11 @@ export default function Home() {
   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"> {/* カード風の白背景 */}
-        <h1 className="text-2xl font-bold text-gray-800 mb-6">TODOアプリ</h1>
+        <h1 className="text-2xl font-bold text-gray-800 mb-6">TODOアプリ</h1> {/* タイトル */}
 
         {/* 入力フォーム */}
-        <form onSubmit={handleSubmit} className="mb-4">
-          <input
+        <form onSubmit={handleSubmit} className="mb-4"> {/* フォーム全体のスタイル */}
+          <input  
             type="text"
             value={inputValue} // 入力欄の値を状態と連動
             onChange={(e) => setInputValue(e.target.value)} // 入力値変更時に状態更新
@@ -101,7 +101,7 @@ export default function Home() {
             className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
           <button
-            type="submit"
+            type="submit" 
             className="w-full mt-2 bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition-colors"
           >
             追加