JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発－ Day28：TODOアプリ④　練習問題

JavaScript

2026.05.22

Day28：TODOアプリ④の練習問題
タスクをオブジェクトで管理する練習
1. 問題1：次の文字列タスクを「title」「isDone」を持つオブジェクトに変換してください
2. 解答と解説
addTask をオブジェクト対応にする練習
1. 問題2：addTask 関数を、文字列ではなく「タスクオブジェクト」を追加する形に書き換えてください
2. 解答と解説
isDone を UI に反映する練習
1. 問題3：renderTasks の中で、task.isDone が true の場合はチェックボックスを ON にしてください
2. 解答と解説
完了タスクの見た目を変える練習
1. 問題4：task.isDone が true の場合、タスク名に取り消し線を付けてください
2. 解答と解説
チェック操作で isDone を更新する練習
1. 問題5：チェックボックスをクリックしたとき、task.isDone を更新してください
2. 解答と解説
完了状態の変更を保存する練習
1. 問題6：チェック変更時に saveTasks() を呼び、localStorage に保存してください
2. 解答と解説
総合問題：完了機能を含む renderTasks を完成させる
1. 問題7：以下の仕様を満たす renderTasks を完成させてください
2. 解答と解説
Day28 練習問題まとめ

Day28：TODOアプリ④の練習問題

Day28 のテーマは 完了機能（チェックボックスでタスクの状態を切り替える）。
ここでは、前半・後半で学んだ内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめます。

タスクをオブジェクトで管理する
isDone を UI に反映する
チェック操作で isDone を更新する
完了タスクの見た目を変える
localStorage に完了状態を保存する

これらを一つずつ確実に理解できるように構成しています。

タスクをオブジェクトで管理する練習

問題1：次の文字列タスクを「title」「isDone」を持つオブジェクトに変換してください

元の配列：

const tasks = ["買い物に行く", "掃除する"];

const tasks = ["買い物に行く", "掃除する"];

JavaScript

オブジェクト配列に書き換えてください。

解答と解説

const tasks = [
  { title: "買い物に行く", isDone: false },
  { title: "掃除する", isDone: false }
];

const tasks = [
  { title: "買い物に行く", isDone: false },
  { title: "掃除する", isDone: false }
];

JavaScript

完了機能を付けるには、
タスクが「文字列」ではなく「複数の情報を持つオブジェクト」である必要があります。
isDone は完了状態を表す重要なフラグです。

addTask をオブジェクト対応にする練習

問題2：addTask 関数を、文字列ではなく「タスクオブジェクト」を追加する形に書き換えてください

解答と解説

function addTask(text) {
  const task = {
    title: text,
    isDone: false
  };
  tasks.push(task);
}

function addTask(text) {
  const task = {
    title: text,
    isDone: false
  };
  tasks.push(task);
}

JavaScript

新しいタスクは必ず未完了（isDone: false）から始まります。
この形にしておくことで、完了機能を自然に追加できます。

isDone を UI に反映する練習

問題3：renderTasks の中で、task.isDone が true の場合はチェックボックスを ON にしてください

解答と解説

const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = task.isDone;

const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = task.isDone;

JavaScript

checked プロパティは boolean（true/false）をそのまま受け取ります。
データ → UI の反映ができるようになりました。

完了タスクの見た目を変える練習

問題4：task.isDone が true の場合、タスク名に取り消し線を付けてください

解答と解説

if (task.isDone) {
  taskText.style.textDecoration = "line-through";
  taskText.style.color = "#888";
} else {
  taskText.style.textDecoration = "none";
  taskText.style.color = "inherit";
}

if (task.isDone) {
  taskText.style.textDecoration = "line-through";
  taskText.style.color = "#888";
} else {
  taskText.style.textDecoration = "none";
  taskText.style.color = "inherit";
}

JavaScript

完了タスクが視覚的に分かるようになると、
アプリとしての使いやすさが大きく向上します。

チェック操作で isDone を更新する練習

問題5：チェックボックスをクリックしたとき、task.isDone を更新してください

解答と解説

checkbox.addEventListener("change", () => {
  task.isDone = checkbox.checked;
});

checkbox.addEventListener("change", () => {
  task.isDone = checkbox.checked;
});

JavaScript

checkbox.checked は
チェックあり → true
チェックなし → false
を返します。

これで UI → データの反映ができるようになります。

完了状態の変更を保存する練習

問題6：チェック変更時に saveTasks() を呼び、localStorage に保存してください

解答と解説

checkbox.addEventListener("change", () => {
  task.isDone = checkbox.checked;
  saveTasks();
  renderTasks();
});

checkbox.addEventListener("change", () => {
  task.isDone = checkbox.checked;
  saveTasks();
  renderTasks();
});

JavaScript

完了状態も localStorage に保存されるため、
ページをリロードしても完了状態が維持されます。

総合問題：完了機能を含む renderTasks を完成させる

問題7：以下の仕様を満たす renderTasks を完成させてください

仕様：
タスクをオブジェクトとして扱う
チェックボックスで完了状態を表示
チェック変更で isDone を更新
完了タスクは取り消し線
削除ボタンも動く
変更後は saveTasks → renderTasks の順で更新

解答と解説

function renderTasks() {
  taskList.textContent = "";

  tasks.forEach((task, index) => {
    const item = document.createElement("div");

    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.checked = task.isDone;

    const text = document.createElement("span");
    text.textContent = task.title;

    if (task.isDone) {
      text.style.textDecoration = "line-through";
      text.style.color = "#888";
    } else {
      text.style.textDecoration = "none";
      text.style.color = "inherit";
    }

    const button = document.createElement("button");
    button.textContent = "削除";

    checkbox.addEventListener("change", () => {
      task.isDone = checkbox.checked;
      saveTasks();
      renderTasks();
    });

    button.addEventListener("click", () => {
      tasks.splice(index, 1);
      saveTasks();
      renderTasks();
    });

    item.appendChild(checkbox);
    item.appendChild(text);
    item.appendChild(button);

    taskList.appendChild(item);
  });
}

function renderTasks() {
  taskList.textContent = "";

  tasks.forEach((task, index) => {
    const item = document.createElement("div");

    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.checked = task.isDone;

    const text = document.createElement("span");
    text.textContent = task.title;

    if (task.isDone) {
      text.style.textDecoration = "line-through";
      text.style.color = "#888";
    } else {
      text.style.textDecoration = "none";
      text.style.color = "inherit";
    }

    const button = document.createElement("button");
    button.textContent = "削除";

    checkbox.addEventListener("change", () => {
      task.isDone = checkbox.checked;
      saveTasks();
      renderTasks();
    });

    button.addEventListener("click", () => {
      tasks.splice(index, 1);
      saveTasks();
      renderTasks();
    });

    item.appendChild(checkbox);
    item.appendChild(text);
    item.appendChild(button);

    taskList.appendChild(item);
  });
}