タスクを登録・検索・保存する。React初心者がTasksページで学んだこと

shunRP /自分の人生は自分で変える

2026年7月29日 23:38

前回の記事では、Team VisualizerのDashboardに込めた工夫を紹介しました。

Dashboardに表示される進行中・完了・期限超過などの情報は、今回紹介するTasksページのデータをもとにしています。

Tasksページは、タスクを登録するだけではなく、チームの仕事を管理し、必要なタスクをすぐ見つけるための画面です。

今回は、Tasksページに実装した機能と、制作を通して学んだReactの仕組みを紹介します。

工夫1：新規タスクを追加して一覧へ反映する

「新規タスク」ボタンを押すと、次の情報を登録できます。

タスク名・説明
プロジェクト名
担当者・期限
進捗率
ステータス
優先度

入力内容はuseStateで管理しています。

const [newTask, setNewTask] = useState({
  title: "",
  description: "",
  project: "",
  assignee: "",
  deadline: "",
  progress: 0,
  status: "未着手",
  priority: "中",
});

「保存する」を押すと、新しいタスクを一覧の先頭に追加します。

setTasks((currentTasks) => [
  task,
  ...currentTasks,
]);

setTasksでデータが更新されると、Reactが画面を再表示するため、追加したタスクがすぐに一覧へ反映されます。

また、登録済みのタスクは編集と削除もできるようにしています。

この実装を通して、Reactではstateを更新することで、画面の表示も変わることを学びました。

工夫2：必要なタスクを絞り込む

タスクが増えると、目的のタスクを探すのが難しくなります。

そこで、次の検索・絞り込み機能を実装しました。

キーワード
担当者
ステータス
期限
優先度

絞り込みには、JavaScriptのfilter()を使っています。

const filteredTasks = tasks.filter((task) => {
  return (
    task.assignee === assigneeFilter &&
    task.priority === priorityFilter
  );
});

filter()は、配列の中から条件に一致するデータだけを取り出すメソッドです。

実際のコードでは、複数の条件を組み合わせ、一致したタスクだけを表示しています。

さらに、Tasksページを開いたときは「作業中（完了以外）」が選ばれるようにしました。

const [statusFilter, setStatusFilter] =
  useState("作業中");

最初からすべてのタスクを表示するのではなく、これから対応する必要があるタスクを確認しやすくするためです。

完了したタスクを確認したい場合は、ステータスから「完了」を選択できます。

工夫3：期限や進捗を見えるようにする

期限は日付だけでなく、「残り○日」や「期限超過○日」と表示しています。

期限まで3日以内の場合はオレンジ、期限を過ぎている場合は赤色にすることで、優先すべきタスクを判断しやすくしました。

進捗率についても、数字だけではなくバーで表示しています。

これにより、タスクがどこまで進んでいるのかを短時間で確認できます。

useEffectでタスクを保存する

追加・編集したタスクが、ページの再読み込みで消えないように、現在はlocalStorageへ保存しています。

useEffect(() => {
  localStorage.setItem(
    "tasks",
    JSON.stringify(tasks)
  );
}, [tasks]);

useEffectを使い、tasksが変わるたびに最新のデータを保存しています。

Dashboard側でも同じタスクデータを読み込み、進行中・完了・期限超過などの情報へ変換して表示しています。

ただし、localStorageは同じブラウザ内でしかデータを利用できません。現在は学習用の仮保存として使い、今後はFirebaseを導入して、複数のメンバーで共有できるようにする予定です。

Tasksページはチームを見える化する土台

今回は、Tasksページに込めた3つの工夫を紹介しました。

新規タスクを追加して一覧へ反映する
必要なタスクを検索・絞り込みする
期限や進捗を分かりやすく表示する

Tasksページで登録した担当者・期限・進捗率・ステータスなどの情報が、Dashboardの集計やメンバーの負荷状況につながっています。

今回の制作を通して、useStateやuseEffect、filter()などを、実際のアプリでどのように使うのか学ぶことができました。

まだ改善できる部分はありますが、機能を一つずつ作りながら、少しずつ完成に近づけています。

この記事を読んだ方に「React初心者でも、少しずつ進めればオリジナルアプリを作れそう」と感じてもらえたらうれしいです。

最後まで読んでいただき、ありがとうございました。