JavaScriptで何ができるんだろう？ その3

「JavaScriptで何ができるの？」シリーズ。今回は「保存」について学んでみます。「JavaScriptって動かすだけじゃないの？」と思っているんですが、いったい「保存」とはなんなのか？　その辺をわかりやすく教えてもらおうと思ってます😅

これまでの振り返り
保存：ブラウザにメモ（localStorage)　
まとめ

これまでの振り返り

【済】インタラクション：メニュー開閉、タブ切り替え、モーダル表示
【済】入力チェック：必須チェック、文字数・メール形式の検証
【済】動的表示：時計、カウントダウン、スライドショー
【済】データ操作：計算、条件分岐、繰り返し処理
保存：ブラウザにメモ（localStorage）
通信：サーバーやAPIからデータ取得
描画：Canvasで図形・グラフ

あるく

今回の「保存：ブラウザにメモ（localStorage)ってなんだろう。JavaScriptってそもそも記憶できるものなの？

AI先生

良い質問ですね。JavaScript自体には“記憶”の仕組みはありませんが、ブラウザが持っている“保存場所”を使うことで、データを残すことができます。
その代表が localStorage（ローカルストレージ） です。ユーザーのパソコンやスマホの中に、ちょっとしたデータを保存できる仕組みなんですよ。

？？？

ちょっと待ったぁぁぁっっ！！　私にも詳しく教えてよ！！

AI先生

もちろんいいですよ。・・・ってあれ、どちら様でしたっけ？

あるく

あれっ、・・・・ってミナかぁ、ビックリさせるなよー。

ミナ

私はミナ。あるくさんの山友達だよ。最近プログラムの勉強を始めたからさ、一緒に教えてもらえないかな〜と思って、駆けつけたんだ！　これからはよろしくね！！！

AI先生

ミナさん、こちらこそよろしくお願いします😄　ぜひとも一緒に学んでいきましょう。

あるく

だいぶ賑やかになりそうだけど、どうぞよろしくね。

保存：ブラウザにメモ（localStorage)　

「クリックで動く」だけじゃなく、「データを記憶できる」のもJavaScriptの大きな特徴。今回は「localStorage（ローカルストレージ）」という機能を使って、ブラウザの中にメモを保存する仕組みを作ってみましょう。

💡 localStorage（ローカルストレージ）とは？

あるく

“ローカルストレージ”って、どこに保存されるの？

AI先生

簡単に言うと、ブラウザの中にある“ちょっとしたメモ帳”のような場所です。
Webサイトを閉じても、再び開くと前回の内容が残っています。

ミナ

自分のパソコンやスマホの中に記録できるってこと？

AI先生

そのとおりです！　サーバーに送らなくても、ブラウザが自分専用の保存場所を持っているので、ちょっとしたデータならその中だけで完結できるんです。たとえばメモアプリや設定保存などに使われますよ。

あるく

ブラウザの中にあるメモ帳ってのがよくわからないんだけど、そういうのがあるの？

AI先生

はい、ありますよ。たとえばブラウザは、ログイン情報や入力履歴、設定内容などを一時的に覚えておく機能を持っています。localStorageはその仕組みのひとつで、開発者が“自分のサイト専用のメモ帳”として自由にデータを保存できるんです。

あるく

ブラウザの保存機能って、「キャッシュ」と似たようなものなの？

ミナ

えっとー、その前に「キャッシュ」って何？

AI先生

おおっと、ご質問がたくさん来ましたね。“キャッシュ”は、Webページの画像やデータを一時的に保存しておく仕組みのことです。次に同じページを開くときに、そのキャッシュを使うことで“読み込みを早くする”役割があります。
　一方で、localStorageはユーザー自身の入力データなどを保存するための領域です。たとえば、前回入力したメモや設定が次に開いたときも残っている、というような使われ方をします。

💡キャッシュとローカルストレージの違い

項目	キャッシュ（Cache）	ローカルストレージ（localStorage）
保存する内容	ページの画像・CSS・スクリプトなど	入力データ・メモ・設定情報など
保存目的	ページ表示を高速化するため	ユーザーのデータを保持するため
保存場所	ブラウザ内（主に一時保存）	HDDやSSD※（半永久的に保持）
消えるタイミング	更新・削除・履歴クリア時	ユーザーが削除するまで残る
開発者の操作	サイトの構成によって自動保存	JavaScriptから自由に保存／取得可能

※HDD：Hard Disk Drive（ハードディスクドライブ）・・磁気ディスクの大容量記憶媒体
　SSD：Solid State Drive（ソリッドステートドライブ）・・フラッシュメモリ型の記憶媒体

🧠 localStorageの使い方

操作	どうなる？
メモを入力	ブラウザのlocalStorageに保存
ページを再読み込み	保存しておいたデータを読み出す
メモを消す	localStorageのデータを削除

💻 サンプルコード：ブラウザにメモを保存する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptデモ③：メモを保存する</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      margin: 50px;
    }
    textarea {
      width: 80%;
      height: 150px;
      padding: 10px;
      font-size: 16px;
    }
    button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>ブラウザにメモを保存してみよう</h1>
  <textarea id="memo" placeholder="ここにメモを書いてね"></textarea><br>
  <button id="save">保存する</button>
  <button id="clear">削除する</button>

  <script>
    const memo = document.getElementById("memo");
    const save = document.getElementById("save");
    const clear = document.getElementById("clear");

    // ページ読み込み時にデータを読み出す
    memo.value = localStorage.getItem("memoData") || "";

    // 保存ボタン
    save.addEventListener("click", () => {
      localStorage.setItem("memoData", memo.value);
      alert("メモを保存しました！");
    });

    // 削除ボタン
    clear.addEventListener("click", () => {
      localStorage.removeItem("memoData");
      memo.value = "";
      alert("メモを削除しました。");
    });
  </script>
</body>
</html>