Day27 後半のゴール
前半では「tasks 配列を localStorage に保存できるようにする」ところまで進みました。
後半では、いよいよ 保存したデータを読み込んで復元する ところに入ります。
これができると、TODO アプリは「本当に使えるアプリ」になります。
ここでは、
localStorage から JSON を読み込む
JSON を配列に戻す
読み込んだ配列を使って画面を描画する
エラーが出やすいポイントを避ける
という流れを、初心者でも迷わないように丁寧に解説します。
localStorage からデータを読み込む仕組みを理解する
保存と読み込みは「逆の動き」
前半でやった保存の流れはこうでした。
tasks（配列）
→ JSON.stringify
→ 文字列
→ localStorage.setItem
読み込みはこの逆です。
localStorage.getItem
→ 文字列
→ JSON.parse
→ tasks（配列）
この「逆の動き」を理解しておくと、復元処理がスムーズに書けます。
読み込み専用の loadTasks 関数を作る
読み込みは「アプリ起動時に1回だけ」行う
TODO アプリを開いたときに、
localStorage に保存されているタスクを読み込んで tasks に入れます。
そのための関数が loadTasks です。
function loadTasks() {
const json = localStorage.getItem("tasks");
if (json === null) {
tasks = [];
return;
}
tasks = JSON.parse(json);
}
ここで重要なのは 2 点です。
json が null の場合は「保存データがない」という意味
JSON.parse で文字列を配列に戻す
特に null チェックは必須です。
これを忘れると、初回起動時にエラーが出てしまいます。
読み込んだ tasks を画面に反映する
loadTasks → renderTasks の順番で呼ぶ
読み込みができたら、画面に反映します。
loadTasks();
renderTasks();
この 2 行を、JavaScript の一番下（イベント登録の後）に書きます。
これで、
ページを開く
localStorage から tasks を読み込む
読み込んだ tasks を画面に描画する
という流れが完成します。
復元処理の動きを例で確認する
例：前回の tasks が [“買い物”, “掃除”] の場合
localStorage の中には、前半で保存した JSON が入っています。
["買い物","掃除"]
ページを開くと、
loadTasks()
→ json に上の文字列が入る
→ JSON.parse(json) で配列に戻る
→ tasks = [“買い物”, “掃除”]
renderTasks()
→ tasks をもとに画面に2つのタスクが表示される
という流れになります。
「保存 → 復元 → 表示」がつながると、
TODO アプリは一気に“アプリらしさ”が出てきます。
保存と復元を合わせた全体コード（後半時点）
追加・削除・保存・復元がそろった形
ここまでの内容をまとめると、後半の完成形はこうなります。
const taskInputElement = document.getElementById("taskInput");
const addButtonElement = document.getElementById("addButton");
const taskListElement = document.getElementById("taskList");
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() {
taskListElement.textContent = "";
tasks.forEach((text, index) => {
const taskItemElement = document.createElement("div");
const taskTextElement = document.createElement("span");
taskTextElement.textContent = text;
const deleteButtonElement = document.createElement("button");
deleteButtonElement.textContent = "削除";
deleteButtonElement.addEventListener("click", () => {
deleteTask(index);
saveTasks();
renderTasks();
});
taskItemElement.appendChild(taskTextElement);
taskItemElement.appendChild(deleteButtonElement);
taskListElement.appendChild(taskItemElement);
});
}
addButtonElement.addEventListener("click", () => {
const text = taskInputElement.value.trim();
if (text === "") {
return;
}
addTask(text);
saveTasks();
renderTasks();
taskInputElement.value = "";
});
loadTasks();
renderTasks();
このコードは、
タスク追加
タスク削除
localStorage 保存
localStorage 復元
画面描画
という TODO アプリの基本機能がすべて揃った状態です。
よくあるつまずきポイントと対処法
JSON.parse がエラーになる場合
原因のほとんどは、
localStorage に保存されている文字列が壊れている
json が null のまま JSON.parse している
のどちらかです。
loadTasks の null チェックは必ず入れてください。
if (json === null) {
tasks = [];
return;
}
これだけで多くのエラーを防げます。
Day27 後半のまとめ
後半で押さえたポイントは次の通りです。
localStorage からデータを読み込む loadTasks を作った
JSON.parse で文字列を配列に戻す仕組みを理解した
ページ読み込み時に loadTasks → renderTasks を呼ぶようにした
保存と復元がつながり、TODO アプリが「本当に使える」状態になった
null チェックや JSON の扱いなど、つまずきやすいポイントを回避できるようになった