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

Day29：TODOアプリ⑤の練習問題

Day29 のテーマは コード整理と関数分割。
ここでは、前半・後半で学んだ内容をしっかり定着させるために、
「実際に手を動かして理解できる」練習問題と丁寧な解答・解説をまとめます。

コードを読みやすくする
役割ごとに関数を分ける
重複を減らす
処理の流れを明確にする

これらは、プログラミング初心者が「脱・初心者」へ進むための重要スキルです。

コードの役割を分類する練習

問題1：次の処理を「データ操作」「描画」「イベント処理」のどれに分類すべきか考えてください

対象コード：

const text = taskInput.value.trim();
if (text === "") return;
tasks.push({ title: text, isDone: false });
renderTasks();

const text = taskInput.value.trim();
if (text === "") return;
tasks.push({ title: text, isDone: false });
renderTasks();

解答と解説

データ操作
tasks.push({ ... }) が該当します。タスクを追加するロジックです。

描画
renderTasks() が該当します。画面を更新する処理です。

イベント処理
const text = ... や if (text === "") return; は、
「ユーザーの入力に応じて処理を分岐する」イベントハンドラの役割です。

このように、1つのコード片の中に複数の役割が混ざっていることが多く、
これを分離するのが関数分割の第一歩です。

データ操作の関数を作る練習

問題2：次のコードを addTask 関数として切り出してください

元のコード：

tasks.push({ title: text, isDone: false });

tasks.push({ title: text, isDone: false });

解答と解説

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

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

関数にすることで、
「タスクを追加する」という行為に名前がつき、
コードの意図が読みやすくなります。

描画処理を関数にまとめる練習

問題3：次のコードを renderTasks 関数にまとめてください

taskList.textContent = "";
tasks.forEach((task) => {
  const item = document.createElement("div");
  item.textContent = task.title;
  taskList.appendChild(item);
});

taskList.textContent = "";
tasks.forEach((task) => {
  const item = document.createElement("div");
  item.textContent = task.title;
  taskList.appendChild(item);
});

解答と解説

function renderTasks() {
  taskList.textContent = "";
  tasks.forEach((task) => {
    const item = document.createElement("div");
    item.textContent = task.title;
    taskList.appendChild(item);
  });
}

function renderTasks() {
  taskList.textContent = "";
  tasks.forEach((task) => {
    const item = document.createElement("div");
    item.textContent = task.title;
    taskList.appendChild(item);
  });
}

描画処理を関数にまとめることで、
「画面を更新したいときは renderTasks を呼べばいい」
という明確なルールができます。

タスク1件分の DOM を作る関数を作る練習

問題4：タスク1件分の要素を作る createTaskItemElement 関数を作ってください

仕様：
task.title を表示する div を返す。

解答と解説

function createTaskItemElement(task) {
  const item = document.createElement("div");
  item.textContent = task.title;
  return item;
}

function createTaskItemElement(task) {
  const item = document.createElement("div");
  item.textContent = task.title;
  return item;
}

この関数を作ることで、
renderTasks の中身がスッキリし、
「タスク1件をどう表示するか」を一箇所で管理できます。

重複している処理をまとめる練習

問題5：次の 2 つのコードはどちらも「データ変更 → 保存 → 再描画」を行っています。

この流れを updateAndRender 関数にまとめてください。

deleteTask(index);
saveTasks();
renderTasks();

deleteTask(index);
saveTasks();
renderTasks();

toggleTaskDone(index);
saveTasks();
renderTasks();

toggleTaskDone(index);
saveTasks();
renderTasks();

解答と解説

function updateAndRender(updater) {
  updater();
  saveTasks();
  renderTasks();
}

function updateAndRender(updater) {
  updater();
  saveTasks();
  renderTasks();
}

使用例：

updateAndRender(() => deleteTask(index));
updateAndRender(() => toggleTaskDone(index));

updateAndRender(() => deleteTask(index));
updateAndRender(() => toggleTaskDone(index));

このように「繰り返し出てくるパターン」に名前をつけると、
コードの重複が減り、読みやすさが大幅に向上します。

関数の並び順を整える練習

問題6：次の関数を「読む順番が自然になるように」並べ替えてください

対象：

renderTasks
addTask
loadTasks
createTaskItemElement
deleteTask
toggleTaskDone
saveTasks

解答と解説

自然な並び順の例：

データ操作系
addTask
deleteTask
toggleTaskDone

保存・復元系
saveTasks
loadTasks

描画系
createTaskItemElement
renderTasks

この順番にすると、
「データ → 保存 → 描画」というアプリの流れが
上から順に読めるようになります。

総合問題：関数分割後の renderTasks を完成させる

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

仕様：
taskList を空にする
tasks をループする
createTaskItemElement(task, index) を呼ぶ
返ってきた要素を append する

解答と解説

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

  tasks.forEach((task, index) => {
    const item = createTaskItemElement(task, index);
    taskList.appendChild(item);
  });
}

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

  tasks.forEach((task, index) => {
    const item = createTaskItemElement(task, index);
    taskList.appendChild(item);
  });
}

renderTasks が「描画専用」になり、
コードの見通しが劇的に良くなります。

Day29 練習問題まとめ

Day29 の練習問題で身につく力は次の通りです。

コードの役割を分類する
データ操作・描画・イベント処理を分離する
タスク1件分の DOM を作る関数を作る
重複処理をまとめる
関数の並び順で「読みやすさ」を作る

これらは TODO アプリだけでなく、
どんなアプリでも必要になる「設計の基礎力」です。