概要

Study Tracker アプリに タスク完了チェック機能を実装した。

チェックボックスをクリックすると、タスクの完了状態が切り替わる。

この機能の実装により、タスクの状態管理（未完了 / 完了）が可能になった。

実装の目的

今回の実装の目的は以下。

• タスクの 完了状態を管理する
• Reactの 状態管理（state）理解
• オブジェクト型のstate管理
• コンポーネント間での 関数の受け渡し

データ構造の変更

タスクのデータ構造を変更した。

変更前

string[]

変更後

Task[]

Task型を定義。

// タスク型定義
export type Task = {
  text: string; // タスク内容
  done: boolean; // 完了状態
};