Day27 前半のゴール
ここまでで、TODOアプリは「追加」と「削除」ができるようになりました。
Day27 のテーマは localStorage 保存。
前半ではまず、
ページをリロードしてもタスクが消えないようにする
localStorage の基本的な使い方を理解する
配列（tasks）と localStorage をどうつなぐか
ここを、できるだけシンプルな形で押さえていきます。
localStorage とは何かをイメージでつかむ
ブラウザの中にある「小さなメモ帳」
localStorage は、ブラウザの中にある「キーと値のメモ帳」です。
特徴をざっくり言うとこうです。
ブラウザを閉じてもデータが残る
文字列（string）だけを保存できる
キー（名前）を付けて保存・読み込みする
TODOアプリでやりたいことはシンプルで、
今の tasks 配列を localStorage に保存する
ページを開いたときに localStorage から tasks を復元する
この2つです。
まずは localStorage を触ってみる
setItem と getItem の超基本
localStorage の基本操作は 2 つだけ覚えれば十分です。
setItem(キー, 値)
getItem(キー)
例えば、次のように書けます。
localStorage.setItem("message", "こんにちは");
const value = localStorage.getItem("message");
console.log(value); // こんにちは
ここで大事なのは、
保存できるのは「文字列だけ」という点です。
配列やオブジェクトをそのまま渡すことはできません。
TODOアプリの tasks は配列なので、
そのままでは保存できない、ということを頭に置いておきましょう。
配列を保存するために JSON を使う
JSON.stringify と JSON.parse の役割
配列やオブジェクトを localStorage に保存したいときは、
一度「文字列」に変換する必要があります。
そこで使うのが JSON です。
配列 → 文字列 に変換するのが JSON.stringify
文字列 → 配列 に戻すのが JSON.parse
という役割です。
例を見てみます。
const tasks = ["買い物に行く", "メールを送る"];
const json = JSON.stringify(tasks);
console.log(json); // ["買い物に行く","メールを送る"]
const restored = JSON.parse(json);
console.log(restored); // ["買い物に行く", "メールを送る"]
このように、
配列 → JSON.stringify → 文字列 → localStorage
localStorage → 文字列 → JSON.parse → 配列
という流れで、配列を保存・復元できます。
TODOアプリに「保存する場所」を決める
キー名を決めるのも立派な設計
localStorage は「キーと値」のセットで保存します。
TODOアプリのタスクを保存するキー名を決めましょう。
例えば、
“tasks”
“todoTasks”
“myTodoAppTasks”
など、何でも構いませんが、
「何を保存しているか」が分かる名前にするのが良いです。
ここでは "tasks" を使うことにします。
tasks 配列を localStorage に保存する関数を作る
saveTasks という「保存担当」を用意する
Day25・26 でやったように、
役割ごとに関数を分けると見通しが良くなります。
保存専用の関数を作ります。
function saveTasks() {
const json = JSON.stringify(tasks);
localStorage.setItem("tasks", json);
}
この関数の中でやっていることは 2 つです。
tasks 配列を JSON.stringify で文字列にする
その文字列を “tasks” というキーで localStorage に保存する
これで、「今の tasks を保存する」という行為を
saveTasks() という1行にまとめられました。
いつ saveTasks を呼べばいいかを考える
「タスクが変わったタイミング」で保存する
TODOアプリで tasks が変わるのは、今のところ 2 つです。
タスクを追加したとき
タスクを削除したとき
つまり、この2つのタイミングで saveTasks() を呼べば、
常に最新の tasks が localStorage に保存されることになります。
タスク追加のイベントはこうなります。
addButtonElement.addEventListener("click", () => {
const text = taskInputElement.value.trim();
if (text === "") {
return;
}
addTask(text);
saveTasks();
renderTasks();
taskInputElement.value = "";
});
削除ボタンのイベントはこうなります。
deleteButtonElement.addEventListener("click", () => {
deleteTask(index);
saveTasks();
renderTasks();
});
これで、
tasks を変える
saveTasks で保存する
renderTasks で画面を更新する
という一連の流れができあがります。
保存されているかを確認してみる
console.log とブラウザの開発者ツールでチェック
ちゃんと保存されているか不安なときは、
saveTasks の中にログを入れてみましょう。
function saveTasks() {
const json = JSON.stringify(tasks);
console.log("保存する JSON:", json);
localStorage.setItem("tasks", json);
}
タスクを追加・削除したときに、
コンソールに JSON が表示されていれば、
localStorage に渡しているデータは正しく作れています。
さらに、ブラウザの開発者ツールの「Application」タブ（ブラウザによって名前は少し違う）から
localStorage の中身を直接見ることもできます。
「コードで何をしているか」と「ブラウザに何が残っているか」を
両方確認できるようになると、かなり安心して開発できます。
Day27 前半の時点でのコードイメージ
まだ「読み込み」はしないが、保存はできる状態
前半のゴールは、「tasks を localStorage に保存できるようにする」ことです。
読み込み（復元）は後半でやるとして、
ここまでのイメージをまとめておきます。
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 を保存する");
}
実際には "ここに json を保存する" の部分は json 変数になりますが、
構造としては、
tasks を更新する関数（addTask / deleteTask）
tasks を保存する関数（saveTasks）
という役割分担ができている、ということが大事です。
Day27 前半のまとめ
前半で押さえたポイントを整理します。
localStorage はブラウザ内の「キーと文字列のメモ帳」
配列はそのまま保存できないので JSON.stringify / JSON.parse を使う
tasks を保存する saveTasks 関数を作った
タスク追加・削除のタイミングで saveTasks を呼ぶ設計にした
console.log や開発者ツールで「本当に保存されているか」を確認できる
後半では、この保存したデータを
ページ読み込み時に読み込んで、
画面に反映する「復元」の流れを一緒に作っていきます。