Day26：TODOアプリ②の練習問題
Day26 のテーマは タスク削除機能の実装。
ここでは、前半・後半で学んだ内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめます。
削除ボタンの設置、index の扱い、配列と画面の再描画など、TODO アプリの中でも重要なポイントを確実に理解できます。
タスク削除の基本理解
問題1：削除ボタンをタスクの横に表示してください
次の HTML を前提とします。
<div id="taskList"></div>
tasks 配列の内容を表示する renderTasks 関数を作り、
各タスクの横に「削除」ボタンを表示してください。
解答と解説
function renderTasks() {
taskList.textContent = "";
tasks.forEach((text) => {
const item = document.createElement("div");
const span = document.createElement("span");
span.textContent = text;
const button = document.createElement("button");
button.textContent = "削除";
item.appendChild(span);
item.appendChild(button);
taskList.appendChild(item);
});
}
ここではまだ削除は動きません。
まずは「削除ボタンを表示する」という UI の準備が目的です。
どのタスクを削除するか特定する
問題2：削除ボタンが押されたとき、対応するタスクの index を console.log に表示してください
forEach の第2引数 index を使ってください。
解答と解説
function renderTasks() {
taskList.textContent = "";
tasks.forEach((text, index) => {
const item = document.createElement("div");
const span = document.createElement("span");
span.textContent = text;
const button = document.createElement("button");
button.textContent = "削除";
button.addEventListener("click", () => {
console.log("削除対象 index:", index);
});
item.appendChild(span);
item.appendChild(button);
taskList.appendChild(item);
});
}
削除機能の最重要ポイントは 「どのタスクを消すか」＝ index を正しく扱うこと。
ここが理解できれば削除機能はほぼ完成です。
配列からタスクを削除する
問題3：削除ボタンを押したら tasks 配列から該当のタスクを削除してください
splice(index, 1) を使います。
解答と解説
button.addEventListener("click", () => {
tasks.splice(index, 1);
console.log("削除後 tasks:", tasks);
});
splice(index, 1) は
「index 番目から 1 件だけ削除する」という意味です。
配列操作の基本であり、TODO アプリでは必須のテクニックです。
削除後に画面を再描画する
問題4：削除後に renderTasks() を呼び、画面を更新してください
仕様：
削除 → 配列更新 → 再描画 の流れを作る。
解答と解説
button.addEventListener("click", () => {
tasks.splice(index, 1);
renderTasks();
});
TODO アプリでは、
「画面を直接いじる」のではなく
「配列を更新してから画面を描き直す」
という設計が非常に重要です。
削除処理を関数にまとめる
問題5：deleteTask(index) 関数を作り、削除処理を関数に切り出してください
仕様：
deleteTask(index) の中で splice を実行する。
削除ボタンでは deleteTask(index) → renderTasks() の順に呼ぶ。
解答と解説
function deleteTask(index) {
tasks.splice(index, 1);
}
function renderTasks() {
taskList.textContent = "";
tasks.forEach((text, index) => {
const item = document.createElement("div");
const span = document.createElement("span");
span.textContent = text;
const button = document.createElement("button");
button.textContent = "削除";
button.addEventListener("click", () => {
deleteTask(index);
renderTasks();
});
item.appendChild(span);
item.appendChild(button);
taskList.appendChild(item);
});
}
関数分割により、
「配列を操作する処理」と「画面を描画する処理」が分離され、
コードの見通しが大幅に良くなります。
総合問題：タスク追加＋削除の TODO アプリを完成させる
問題6：以下の仕様を満たす TODO アプリを完成させてください
仕様：
タスクを追加できる
空文字は追加しない
tasks 配列で管理する
renderTasks で画面を描画する
削除ボタンでタスクを削除できる
deleteTask(index) を使う
解答と解説（完成コード）
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");
let tasks = [];
function addTask(text) {
tasks.push(text);
}
function deleteTask(index) {
tasks.splice(index, 1);
}
function renderTasks() {
taskList.textContent = "";
tasks.forEach((text, index) => {
const item = document.createElement("div");
const span = document.createElement("span");
span.textContent = text;
const button = document.createElement("button");
button.textContent = "削除";
button.addEventListener("click", () => {
deleteTask(index);
renderTasks();
});
item.appendChild(span);
item.appendChild(button);
taskList.appendChild(item);
});
}
addButton.addEventListener("click", () => {
const text = taskInput.value.trim();
if (text === "") {
return;
}
addTask(text);
renderTasks();
taskInput.value = "";
});
このコードは、
「追加」「削除」「配列管理」「描画」
という TODO アプリの基本機能がすべて揃った形です。
Day26 練習問題まとめ
Day26 の練習問題で身につく力は次の通りです。
削除ボタンの設置
forEach の index を使ったタスク特定
splice による配列削除
削除後の再描画
deleteTask 関数による責務分離
配列を真実とし、画面は写しとして描画する設計
これらは TODO アプリだけでなく、
あらゆる Web アプリの「リスト操作」で必ず使う基礎です。