データを保存する — LocalStorageでTODOを残す

なぜTODOが消えるのか

前回の記事で、TODOの追加・削除・完了チェックができる画面を作りました。見た目も操作も問題なし。でも、ひとつ困ったことがあります。

ブラウザを閉じて開き直すと、TODOが全部消えている。

試しにやってみてください。TODOをいくつか追加して、ブラウザのタブを閉じて、もう一度 http://localhost:3000 を開く。さっき追加したTODOが全部なくなっているはずです。

これは不具合ではありません。今のTODOアプリは、データを メモリ にしか持っていません。メモリというのは、アプリが動いている間だけ使える一時的な記憶場所です。ブラウザを閉じた瞬間に、メモリの中身は消えてしまいます。

ノートに書いた内容は残るけど、頭の中で覚えただけのことは忘れる。それと同じです。今のTODOアプリは「頭の中で覚えているだけ」の状態なんです。

LocalStorageってなに？

じゃあ、どうすれば消えなくなるのか。答えは LocalStorage です。

LocalStorageは、ブラウザに備わっている保存スペースです。ここにデータを書き込んでおけば、ブラウザを閉じても、パソコンを再起動しても、データが消えない。

イメージとしては、ブラウザの中にある小さな引き出し。アプリがそこにメモを入れておけば、次に開いたときにまた取り出せる仕組みです。

LocalStorageの特徴をざっくりまとめると：

• ブラウザに保存される — サーバーは不要。無料で使える
• 閉じても消えない — パソコンを再起動してもデータが残る
• そのブラウザだけ — ChromeとSafariで別々。他の人のパソコンには入っていない
• 容量は少なめ — 大量のデータ保存には向かない。TODOアプリには十分

TODOアプリくらいのシンプルなデータなら、LocalStorageで十分です。

Claude Codeに保存機能を追加してもらおう

じゃあ実際にClaude Codeに頼んでみましょう。前回と同じように、Claude Codeで my-todo-app のプロジェクトを開いて、こうお願いしてみてください。

Claude Codeがコードを修正してくれます。やっていることは：

1. TODOを追加・削除・完了チェックするたびに、LocalStorageにデータを書き込む
2. ページを開いたときに、LocalStorageからデータを読み込んで表示する

この2つだけです。仕組みはシンプルですが、これだけで「データが消えない」アプリになります。

動作確認してみよう

修正が終わったら、実際に確認してみましょう。

1. ブラウザで http://localhost:3000 を開く
2. TODOを3つくらい追加する（例：「本を読む」「掃除する」「買い物に行く」）
3. 1つを完了にする
4. ブラウザのタブを閉じる
5. もう一度 http://localhost:3000 を開く

どうですか？さっき追加したTODOが、完了状態も含めてちゃんと残っていますよね。

自分が初めてこれを試したとき、タブを閉じて開き直してデータが残っていた瞬間は素直に感動しました。たった一言のお願いで「消えるアプリ」が「残るアプリ」に変わるのは、なかなかすごい体験です。

もしうまくいかなかったら

LocalStorageが効いていない場合、よくある原因はこの2つです。

1. ページを開いたときにデータを読み込んでいない

保存はしているけど、ページを開いたときに読み込む処理が抜けているケース。Claude Codeにこう伝えてみてください。

2. 保存のタイミングがずれている

TODOを追加したタイミングでLocalStorageに保存する処理が正しく呼ばれていないケース。

前回も書きましたが、エラーの内容がわからなくても大丈夫です。「こうなってほしいのに、こうなっている」——その差分を伝えるだけで、Claude Codeが原因を特定して直してくれます。

LocalStorageの中身を覗いてみよう

せっかくなので、データが本当に保存されているか確認してみましょう。

ブラウザで http://localhost:3000 を開いた状態で：

1. キーボードの F12 キーを押す（Macの場合は Command + Option + I）
2. 見慣れない画面が出てきますが、びっくりしないでください。これが 開発者ツール です
3. 上のタブから「Application」を選ぶ（タブが画面に入り切らないときは、右端の >> マークをクリックすると隠れているタブが出てきます）
4. 左のメニューから「Local Storage」→ http://localhost:3000 を選ぶ

ここにTODOのデータが保存されています。TODOを追加したり削除したりすると、リアルタイムで中身が変わるのが見えるはずです。

まとめ

今回やったことをおさらいします。

• TODOが消える原因は、データが メモリにしかなかった から
• LocalStorage を使うと、ブラウザを閉じてもデータが残る
• Claude Codeへの一言で保存機能を追加できた
• 開発者ツールでLocalStorageの中身を確認できる

これで 「データが残るアプリ」 が完成しました。いよいよ最後のステップです。

次の記事では、このTODOアプリを インターネットに公開 して、誰でもアクセスできるURLを手に入れます。自分が作ったアプリを、友達や家族に見せられるようになりますよ。