Day25：TODOアプリ①の練習問題
Day25 のテーマは TODOアプリのタスク追加機能。
ここでは、前半・後半で学んだ内容をしっかり定着させるための練習問題と、丁寧な解答・解説をまとめます。
タスク追加の基礎から、配列管理・描画関数までを扱います。
タスク追加の基本動作を理解する
問題1：入力されたタスクを画面に追加してください
次の HTML を前提とします。
<input id="taskInput" type="text">
<button id="addButton">追加</button>
<div id="taskList"></div>
仕様：
入力欄に文字を入れて「追加」ボタンを押すと、taskList に p 要素として表示されるようにしてください。
解答と解説
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");
addButton.addEventListener("click", () => {
const text = taskInput.value;
const p = document.createElement("p");
p.textContent = text;
taskList.appendChild(p);
});
ここでの重要ポイントは、
入力値を取得し、p 要素を作り、appendChild で追加するという DOM 操作の基本パターンを理解することです。
空のタスクを追加しないようにする
問題2：空文字（スペースのみ含む場合も含む）は追加されないようにしてください
仕様：
trim() を使い、空文字なら追加処理を中断する。
解答と解説
addButton.addEventListener("click", () => {
const text = taskInput.value.trim();
if (text === "") {
return;
}
const p = document.createElement("p");
p.textContent = text;
taskList.appendChild(p);
});
trim を使うことで、
” ” のようなスペースだけの入力も空として扱えるようになります。
TODOアプリでは必須のバリデーションです。
関数分割でタスク追加処理を整理する
問題3：タスク追加処理を addTaskToList 関数にまとめてください
仕様：
addTaskToList(text) を作り、DOM 追加処理を関数に切り出す。
解答と解説
function addTaskToList(text) {
const p = document.createElement("p");
p.textContent = text;
taskList.appendChild(p);
}
addButton.addEventListener("click", () => {
const text = taskInput.value.trim();
if (text === "") {
return;
}
addTaskToList(text);
taskInput.value = "";
});
関数分割のメリットは、
イベントハンドラが「流れ」だけを担当し、
DOM 操作の細部を関数に閉じ込められることです。
タスクを配列で管理する
問題4：タスクを tasks 配列に保存し、追加後に配列の中身を console.log で確認してください
仕様：
tasks.push(text) で配列に追加する。
追加のたびに配列の中身をログに出す。
解答と解説
let tasks = [];
addButton.addEventListener("click", () => {
const text = taskInput.value.trim();
if (text === "") {
return;
}
tasks.push(text);
console.log("現在の tasks:", tasks);
taskInput.value = "";
});
配列で管理することで、
後で「削除」「完了」「保存」などの機能を追加しやすくなります。
配列から画面を描画する関数を作る
問題5：tasks 配列の内容を taskList に表示する renderTasks 関数を作ってください
仕様：
taskList を一度空にしてから、tasks の内容を p 要素として追加する。
解答と解説
function renderTasks() {
taskList.textContent = "";
tasks.forEach((text) => {
const p = document.createElement("p");
p.textContent = text;
taskList.appendChild(p);
});
}
この関数は「出力担当」です。
tasks が正しければ、画面はいつでも再構築できます。
配列＋描画の流れに書き換える
問題6：タスク追加時に tasks に追加し、renderTasks を呼ぶようにしてください
仕様：
tasks.push(text)
renderTasks()
入力欄を空にする
解答と解説
addButton.addEventListener("click", () => {
const text = taskInput.value.trim();
if (text === "") {
return;
}
tasks.push(text);
renderTasks();
taskInput.value = "";
});
これで、
「データ（tasks）を更新 → 画面を再描画」
というアプリらしい流れが完成します。
総合問題：タスク追加 TODO を完成させる
問題7：以下の仕様を満たす TODO アプリを完成させてください
仕様：
タスクを入力して追加できる
空文字は追加しない
tasks 配列で管理する
renderTasks で画面を描画する
addTaskToList は使わず、配列＋描画方式に統一する
解答と解説（完成コード）
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");
let tasks = [];
function renderTasks() {
taskList.textContent = "";
tasks.forEach((text) => {
const p = document.createElement("p");
p.textContent = text;
taskList.appendChild(p);
});
}
addButton.addEventListener("click", () => {
const text = taskInput.value.trim();
if (text === "") {
return;
}
tasks.push(text);
renderTasks();
taskInput.value = "";
});
この構造は、
Day26 以降の「削除」「完了」「保存（localStorage）」を追加するための理想的な土台です。
Day25 練習問題まとめ
Day25 の練習問題で身につく力は次の通りです。
タスク追加の DOM 操作
空入力のバリデーション
関数分割による整理
配列でのタスク管理
配列から画面を描画する設計
デバッグで配列の状態を確認する
これらは TODO アプリだけでなく、
あらゆる Web アプリの基礎になります。