6. 配列の操作と再描画

この章の目的

JavaScriptの配列を操作して、画面の表示を更新する方法を学びます。

配列に要素を追加

taskGroups[groupName].tasks.push({
  text: text,
  done: false
});

push() は配列の末尾に要素を追加します。

配列から要素を削除

taskGroups[groupName].tasks = taskGroups[groupName].tasks.filter((t) => t !== task);

filter() を使うと、条件に合うものだけを残せます。

再描画のためのDOM更新

ul.innerHTML = "";
tasks.forEach((task) => {
  renderTask(task, ul, groupName);
});

innerHTML = "" でいったんリセットしてから forEach() で描画し直します。

ToDoアプリでの流れ

1. 配列にタスクを追加・削除
2. HTMLを更新（再描画）
3. 進捗バーなどのUIを更新