タスク管理アプリ

Task Manager

タスク管理

タスク一覧

タスクがありません。新しいタスクを追加してください！

技術解説

1. React Hooks（useState, useEffect）

このアプリでは、ReactのuseStateとuseEffectという2つのフックを使っています。

// useState: タスクの状態を管理
const [tasks, setTasks] = useState<Task[]>([]);
const [inputValue, setInputValue] = useState("");

// useEffect: LocalStorageからデータを読み込む
useEffect(() => {
  const savedTasks = localStorage.getItem("playground-tasks");
  if (savedTasks) {
    setTasks(JSON.parse(savedTasks));
  }
}, []);

useState: コンポーネント内で状態（データ）を管理するためのフックです。tasksでタスクの配列を、inputValueで入力欄の値を管理しています。
useEffect: コンポーネントが表示された時や、特定の値が変わった時に実行されるフックです。ここでは、ページを開いた時にLocalStorageから保存されたタスクを読み込んでいます。

2. LocalStorageへの保存

タスクをブラウザのLocalStorageに保存することで、ページをリロードしてもタスクが消えません。

// タスクが変更されたら自動的に保存
useEffect(() => {
  if (tasks.length > 0 || localStorage.getItem("playground-tasks")) {
    localStorage.setItem("playground-tasks", JSON.stringify(tasks));
  }
}, [tasks]);

localStorage.setItem(): データを保存します。文字列として保存するため、JSON.stringify()でオブジェクトを文字列に変換しています。
localStorage.getItem(): 保存されたデータを読み込みます。JSON.parse()で文字列をオブジェクトに戻しています。

3. イベントハンドラー

ユーザーの操作（クリック、入力など）に応じて、状態を更新する関数を作成しています。

// タスクを追加
const handleAddTask = (e: React.FormEvent) => {
  e.preventDefault(); // フォームのデフォルト動作を防ぐ
  if (inputValue.trim() === "") return;
  
  const newTask: Task = {
    id: Date.now().toString(),
    text: inputValue.trim(),
    completed: false,
    createdAt: Date.now(),
  };
  
  setTasks([...tasks, newTask]); // 既存のタスクに新しいタスクを追加
  setInputValue(""); // 入力欄をクリア
};

スプレッド構文（...）:[...tasks, newTask]は、既存のタスク配列を展開して、新しいタスクを追加した新しい配列を作成します。
状態の更新:setTasks()を呼び出すと、Reactが自動的に画面を更新してくれます。

4. 条件付きレンダリング

タスクがあるかどうかで、表示する内容を変えています。

{tasks.length === 0 ? (
  <div className={styles.emptyState}>
    <p>タスクがありません...</p>
  </div>
) : (
  <ul className={styles.taskList}>
    {tasks.map((task) => (
      <li key={task.id}>{task.text}</li>
    ))}
  </ul>
)}

三項演算子（? :）: 条件によって表示内容を切り替えます。
map(): 配列の各要素を順番に処理して、新しい要素を作成します。