TODOを空白で登録しようとした際のダイアログをカスタム化+UI調整

src/app/components/HelloWorld.tsx

@@ -0,0 +1,8 @@
+export default function HelloWorld() {
+  return (
+    <div className="p-4 bg-blue-100 rounded">
+      <h2 className="text-xl font-bold">Hello World!</h2>
+      <p className="text-gray-700">Reactコンポーネントの第一歩です</p>
+    </div>
+  );
+}

src/app/page.tsx

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