コメントアウトをより具体的に修正

src/app/page.tsx

@@ -1,81 +1,90 @@
-'use client';  // ← これはNext.jsのApp Routerで、クライアントコンポーネントとして実行させる指示。useStateなどクライアント専用フックを使うために必須。
+'use client';
 
-import { useState } from 'react'; // Reactの"状態管理用"のフック。状態が変化したら再レンダリングが起きる。
+import { useState } from 'react';
 
-// Todo型の定義。オブジェクトが必ずid, text, completedというプロパティを持つことを保証。
+// Todo型の定義
 type Todo = {
-  id: number;       // ユニークな識別子。今回はDate.now()で一意性をある程度確保。
+  id: number;
-  text: string;     // TODOの内容。ユーザーが入力する文字列。
+  text: string;
-  completed: boolean; // 完了したかどうかのフラグ。チェックボックスに対応。
+  completed: boolean;
 };
 
-export default function Home() { // Reactコンポーネント。Next.jsのデフォルトエクスポートとしてトップページに描画される。
+export default function Home() {
-  // 状態変数定義。todosはTodoの配列、inputValueは入力中のテキスト。
+  // Todoリスト本体の状態管理
-  const [todos, setTodos] = useState<Todo[]>([]); // Todoリスト本体。初期値は空配列。
+  const [todos, setTodos] = useState<Todo[]>([]); // Todo配列を保持
-  const [inputValue, setInputValue] = useState<string>(''); // 入力欄の中身。初期値は空文字。
+
-  const [showConfirm, setShowConfirm] = useState(false); // 削除確認ダイアログを表示するかどうか。
+  // 入力欄の状態管理
-  const [targetId, setTargetId] = useState<number | null>(null); // 確認ダイアログで削除対象のTodoのIDを一時保持。
+  const [inputValue, setInputValue] = useState<string>(''); // 入力中のテキスト
-  const [showInputAlert, setShowInputAlert] = useState(false); // 空欄入力時の警告ダイアログ
+
+  // 削除確認ダイアログの表示状態
+  const [showConfirm, setShowConfirm] = useState(false); // ダイアログ表示フラグ
+
+  // 削除対象のTodoのID
+  const [targetId, setTargetId] = useState<number | null>(null); // 削除対象ID
+
+  // 空欄入力時の警告ダイアログ表示状態
+  const [showInputAlert, setShowInputAlert] = useState(false); // 空欄警告フラグ
 
   // 新しいTODOを追加する関数
   const addTodo = () => {
-    if (inputValue.trim() === '') { // 入力が空欄だったら処理を中止。trim()で空白も除去。
+    // 入力が空欄だったら警告ダイアログ表示
-      setShowInputAlert(true); // カスタムダイアログ表示
+    if (inputValue.trim() === '') {
+      setShowInputAlert(true); // 警告ダイアログを表示
       return;
     }
+    // 新しいTodoオブジェクトを作成
     const newTodo: Todo = {
-      id: Date.now(),
+      id: Date.now(), // 一意なID
-      text: inputValue,
+      text: inputValue, // 入力値
-      completed: false
+      completed: false // 初期状態は未完了
     };
-    setTodos([...todos, newTodo]);
+    setTodos([...todos, newTodo]); // Todoリストに追加
-    setInputValue('');
+    setInputValue(''); // 入力欄をクリア
   };
 
-  // フォームが送信されたときの処理
+  // フォーム送信時の処理
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault(); // ページ全体のリロードを防ぐ。SPA的挙動にする。
+    e.preventDefault(); // ページリロード防止
-    addTodo(); // addTodo関数を実行。
+    addTodo(); // Todo追加処理
   };
 
-  // Todoの完了状態をトグル（反転）する関数
+  // Todoの完了状態をトグルする関数
   const toggleTodo = (id: number) => {
     const updatedTodos = todos.map(todo => {
       if (todo.id === id) {
-        return { ...todo, completed: !todo.completed }; // 対象のcompletedだけ反転。
+        return { ...todo, completed: !todo.completed };
       }
-      return todo; // それ以外はそのまま。
+      return todo;
     });
-    setTodos(updatedTodos); // 新しい配列をset。Reactはこれを検知して再描画する。
+    setTodos(updatedTodos); // 状態更新
   };
 
-  // 削除ボタンが押されたときの仮処理。確認ダイアログを表示。
+  // 削除ボタンが押されたときの処理（確認ダイアログ表示）
   const handleDeleteClick = (id: number) => {
-    setShowConfirm(true); // ダイアログ表示
+    setShowConfirm(true); // 削除確認ダイアログ表示
-    setTargetId(id); // 対象ID記憶
+    setTargetId(id); // 削除対象IDをセット
   };
 
   // ダイアログで「はい」が押されたときの本削除処理
   const confirmDelete = () => {
-    if (targetId !== null) { // nullチェックを忘れずに
+    if (targetId !== null) { // 削除対象IDがセットされているか確認
       setTodos(todos.filter(todo => todo.id !== targetId)); // 該当ID以外を残す
       setShowConfirm(false); // ダイアログを閉じる
-      setTargetId(null); // 状態を初期化
+      setTargetId(null); // 削除対象IDをリセット
     }
   };
 
   // ダイアログで「いいえ」が押されたときの処理
   const cancelDelete = () => {
-    setShowConfirm(false);
+    setShowConfirm(false); // ダイアログを閉じる
-    setTargetId(null);
+    setTargetId(null); // 削除対象IDをリセット
   };
 
   // 空欄入力時ダイアログを閉じる関数
   const closeInputAlert = () => {
-    setShowInputAlert(false);
+    setShowInputAlert(false); // 警告ダイアログを閉じる
   };
 
-
   // JSX: 実際に表示されるUI定義
   return (
     <main className="min-h-screen p-8 bg-gray-50"> {/* 全体の背景や余白 */}
@@ -86,8 +95,8 @@ export default function Home() { // Reactコンポーネント。Next.jsのデ
         <form onSubmit={handleSubmit} className="mb-4">
           <input
             type="text"
-            value={inputValue} // stateと連動
+            value={inputValue} // 入力欄の値を状態と連動
-            onChange={(e) => setInputValue(e.target.value)} // 入力をリアルタイムに反映
+            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"
           />
@@ -106,14 +115,14 @@ export default function Home() { // Reactコンポーネント。Next.jsのデ
               <input
                 type="checkbox"
                 checked={todo.completed} // 完了状態を反映
-                onChange={() => toggleTodo(todo.id)} // トグル動作
+                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>
               <button
-                onClick={() => handleDeleteClick(todo.id)}
+                onClick={() => handleDeleteClick(todo.id)} // 削除ボタン押下時に確認ダイアログ表示
                 className="text-red-500 hover:text-red-700 ml-2 px-2 py-1 rounded transition-colors"
               >
                 削除
@@ -127,8 +136,8 @@ export default function Home() { // Reactコンポーネント。Next.jsのデ
           <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
             <div className="bg-white p-6 rounded shadow">
               <p className="mb-4">本当に削除しますか？</p>
-              <button onClick={confirmDelete} className="mr-2 px-4 py-2 bg-red-500 text-white rounded">はい</button>
+              <button onClick={confirmDelete} className="mr-2 px-4 py-2 bg-red-500 text-white rounded">はい</button> {/* 削除確定 */}
-              <button onClick={cancelDelete} className="px-4 py-2 bg-gray-300 rounded">いいえ</button>
+              <button onClick={cancelDelete} className="px-4 py-2 bg-gray-300 rounded">いいえ</button> {/* 削除キャンセル */}
             </div>
           </div>
         )}
@@ -139,7 +148,7 @@ export default function Home() { // Reactコンポーネント。Next.jsのデ
             <div className="bg-white p-6 rounded shadow flex flex-col items-center">
               <p className="mb-4">TODOを入力してください</p>
               <button
-                onClick={closeInputAlert}
+                onClick={closeInputAlert} // 警告ダイアログを閉じる
                 className="w-full px-4 py-2 bg-blue-500 text-white rounded text-center"
                 style={{ maxWidth: "240px" }}
               >