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);
localStorage は「キーと文字列」を保存する仕組みです。
ここでは setItem で保存し、getItem で読み込んでいます。
まずは「文字列が保存できる」という基本を押さえます。
配列を保存するための JSON 変換
問題2：次の配列 tasks を JSON.stringify で文字列に変換し、console に表示してください
const tasks = ["買い物", "掃除"];
解答と解説
const tasks = ["買い物", "掃除"];
const json = JSON.stringify(tasks);
console.log(json);
localStorage は配列をそのまま保存できません。
JSON.stringify を使って「文字列」に変換する必要があります。
この変換が localStorage 保存の最重要ポイントです。
配列を localStorage に保存する
問題3：tasks 配列を “tasks” というキーで localStorage に保存してください
tasks は次のものとします。
const tasks = ["買い物", "掃除"];
解答と解説
const json = JSON.stringify(tasks);
localStorage.setItem("tasks", json);
JSON.stringify → setItem の流れを覚えれば、
どんな配列でも保存できるようになります。
localStorage から配列を復元する
問題4：”tasks” に保存されている JSON を読み込み、配列に戻して console に表示してください
解答と解説
const json = localStorage.getItem("tasks");
const tasks = JSON.parse(json);
console.log(tasks);
JSON.parse を使うことで、
文字列 → 配列 に戻すことができます。
保存と復元は「逆の動き」になっていることを理解しましょう。
null チェックの重要性を理解する
問題5：localStorage に “tasks” が存在しない場合、tasks を空配列にするコードを書いてください
解答と解説
const json = localStorage.getItem("tasks");
let tasks;
if (json === null) {
tasks = [];
} else {
tasks = JSON.parse(json);
}
初回起動時は 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);
}
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);
}
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();
このコードで、
「追加 → 保存」「削除 → 保存」「起動 → 復元」
という TODO アプリの保存サイクルが完成します。
Day27 練習問題まとめ
Day27 の練習問題で身につく力は次の通りです。
localStorage の基本操作（setItem / getItem）
配列を保存するための JSON.stringify
保存した文字列を配列に戻す JSON.parse
null チェックの重要性
saveTasks / loadTasks の関数分割
保存 → 復元 → 描画 の一連の流れ
これらは TODO アプリだけでなく、
「ユーザーのデータを保持する」あらゆる Web アプリで必須の技術です。