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

JavaScript JavaScript
スポンサーリンク

Day27：TODOアプリ③の練習問題

Day27 のテーマは localStorage を使ったタスク保存と復元。
ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解答・解説をまとめます。
localStorage・JSON.stringify・JSON.parse・保存と復元の流れをしっかり身につけることが目的です。

localStorage の基本を理解する

問題1：localStorage に「こんにちは」という文字列を保存し、読み込んで console に表示してください

キー名は “message” とします。

解答と解説

localStorage.setItem("message", "こんにちは");
const value = localStorage.getItem("message");
console.log(value);
JavaScript

localStorage は「キーと文字列」を保存する仕組みです。
ここでは setItem で保存し、getItem で読み込んでいます。
まずは「文字列が保存できる」という基本を押さえます。

配列を保存するための JSON 変換

問題2：次の配列 tasks を JSON.stringify で文字列に変換し、console に表示してください

const tasks = ["買い物", "掃除"];
JavaScript

解答と解説

const tasks = ["買い物", "掃除"];
const json = JSON.stringify(tasks);
console.log(json);
JavaScript

localStorage は配列をそのまま保存できません。
JSON.stringify を使って「文字列」に変換する必要があります。
この変換が localStorage 保存の最重要ポイントです。

配列を localStorage に保存する

問題3：tasks 配列を “tasks” というキーで localStorage に保存してください

tasks は次のものとします。

const tasks = ["買い物", "掃除"];
JavaScript

解答と解説

const json = JSON.stringify(tasks);
localStorage.setItem("tasks", json);
JavaScript

JSON.stringify → setItem の流れを覚えれば、
どんな配列でも保存できるようになります。

localStorage から配列を復元する

問題4：”tasks” に保存されている JSON を読み込み、配列に戻して console に表示してください

解答と解説

const json = localStorage.getItem("tasks");
const tasks = JSON.parse(json);
console.log(tasks);
JavaScript

JSON.parse を使うことで、
文字列 → 配列 に戻すことができます。
保存と復元は「逆の動き」になっていることを理解しましょう。

null チェックの重要性を理解する

問題5：localStorage に “tasks” が存在しない場合、tasks を空配列にするコードを書いてください

解答と解説

const json = localStorage.getItem("tasks");

let tasks;
if (json === null) {
  tasks = [];
} else {
  tasks = JSON.parse(json);
}
JavaScript

初回起動時は localStorage に何も保存されていないため、
json が null になります。
null のまま JSON.parse するとエラーになるため、
必ず null チェックを入れる必要があります。

TODO アプリに保存機能を組み込む

問題6：次の仕様を満たす saveTasks 関数を作ってください

仕様：
tasks 配列を JSON.stringify で文字列にし、”tasks” というキーで保存する。

解答と解説

function saveTasks() {
  const json = JSON.stringify(tasks);
  localStorage.setItem("tasks", json);
}
JavaScript

saveTasks を作ることで、
「保存」という行為を 1 行で呼び出せるようになります。
関数分割はアプリを整理するうえで非常に重要です。

TODO アプリに復元機能を組み込む

問題7：次の仕様を満たす loadTasks 関数を作ってください

仕様：
“tasks” を localStorage から読み込む
null なら tasks を空配列にする
null でなければ JSON.parse して tasks に代入する

解答と解説

function loadTasks() {
  const json = localStorage.getItem("tasks");

  if (json === null) {
    tasks = [];
    return;
  }

  tasks = JSON.parse(json);
}
JavaScript

loadTasks は「復元担当」の関数です。
アプリ起動時に必ず呼ぶことで、前回の状態を再現できます。

保存と復元を組み合わせた総合問題

問題8：以下の仕様を満たす TODO アプリの保存・復元部分を完成させてください

仕様：
タスク追加時に saveTasks を呼ぶ
タスク削除時に saveTasks を呼ぶ
ページ読み込み時に loadTasks → renderTasks を呼ぶ

解答と解説

let tasks = [];

function addTask(text) {
  tasks.push(text);
}

function deleteTask(index) {
  tasks.splice(index, 1);
}

function saveTasks() {
  const json = JSON.stringify(tasks);
  localStorage.setItem("tasks", json);
}

function loadTasks() {
  const json = localStorage.getItem("tasks");

  if (json === null) {
    tasks = [];
    return;
  }

  tasks = JSON.parse(json);
}

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);
      saveTasks();
      renderTasks();
    });

    item.appendChild(span);
    item.appendChild(button);
    taskList.appendChild(item);
  });
}

addButton.addEventListener("click", () => {
  const text = taskInput.value.trim();

  if (text === "") {
    return;
  }

  addTask(text);
  saveTasks();
  renderTasks();
  taskInput.value = "";
});

loadTasks();
renderTasks();
JavaScript

このコードで、
「追加 → 保存」「削除 → 保存」「起動 → 復元」
という TODO アプリの保存サイクルが完成します。

Day27 練習問題まとめ

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

localStorage の基本操作（setItem / getItem）
配列を保存するための JSON.stringify
保存した文字列を配列に戻す JSON.parse
null チェックの重要性
saveTasks / loadTasks の関数分割
保存 → 復元 → 描画 の一連の流れ

これらは TODO アプリだけでなく、
「ユーザーのデータを保持する」あらゆる Web アプリで必須の技術です。

スポンサーリンク
タイトルとURLをコピーしました