基礎から学ぶJavaScript入門 90日コース | ブラウザデータ保存 － Day 46：localStorage

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク

Day 46：localStorage

第4フェーズ「ブラウザデータ保存」のDay 46では、localStorage を学びます。ここからは、これまでのDOM操作中心の学習から一歩進み、「ブラウザにデータを保存する」という実用的なテーマに入っていきます。第3フェーズでは、ボタンを押したら表示が変わる、入力内容をリストに追加する、ToDoを削除すると画面から消える、といった「今その場で動く仕組み」をたくさん作ってきました。しかし、それらの多くはページを再読み込みすると元に戻ってしまいます。せっかく入力した内容が更新しただけで消えてしまうと、アプリとしては少し物足りません。そこで必要になるのが、ブラウザ内にデータを保存する仕組みです。

Day 46では、localStorageとは何か、setItem()、getItem()、removeItem() の4つを学びます。これは第4フェーズの入口として非常に大切です。なぜなら、保存、読み出し、削除という3つの基本操作がそろうことで、「ブラウザに保存されるアプリ」の土台ができるからです。初心者の方にとっては少し新しい感覚かもしれませんが、考え方そのものはそれほど難しくありません。今までは変数に一時的にデータを入れて使っていましたが、今回は「ページを閉じても比較的残る場所にデータを置く」と考えるとわかりやすいです。

今回も、単語だけを説明するのではなく、「何のためにあるのか」「どう使うのか」「何に注意すべきか」まで順番に整理していきます。特に localStorage は今後ToDoアプリを保存対応に進化させるときにも非常に重要になります。そのため、単に書き方を覚えるだけでなく、DOM操作とのつながりも意識しながら理解することが大切です。

localStorageとは何か

localStorage とは、ブラウザにデータを保存しておける仕組みです。JavaScriptから使うことができ、保存したデータはページを再読み込みしても残ります。つまり、今までのように「変数に入れておいたけれど更新したら消える」という状態とは違い、ブラウザの中に少し長く置いておける保存場所だと考えるとわかりやすいです。

初心者向けにたとえるなら、変数は「その場だけ使うメモ」、localStorage は「机の引き出しにしまっておくメモ」に近いです。変数はページを再読み込みすると消えてしまいますが、localStorage に入れたデータは残りやすいです。そのため、ユーザー名、テーマ設定、メモ内容、ToDoリストなどを保存しておくのに向いています。

ただし、何でも保存してよいわけではありません。localStorage は便利ですが、ブラウザ上に保存されるため、機密情報やパスワードのような重要データをそのまま保存するのには向いていません。ここは情報セキュリティの観点でも非常に重要です。初心者の方は、localStorage は「便利な保存場所ではあるが、安全な金庫ではない」と覚えるとよいです。

なぜlocalStorageが必要なのか

ここは非常に大切な考え方です。なぜ localStorage が必要なのかというと、Webページをよりアプリらしくするためです。たとえば、Day 45のToDoアプリでは、項目を追加したり削除したりできました。しかし、ページを更新すると、入力したToDoはすべて消えてしまいました。これは学習用としては十分ですが、実際に使うアプリとして考えると少し不便です。

そこで localStorage を使うと、たとえば次のようなことができるようになります。

  • 入力した名前を次回表示できる
  • ToDoリストをページ更新後も残せる
  • 選んだテーマカラーを保持できる
  • フォームの途中入力を保存できる

つまり、localStorage は「前回の状態を覚えておく仕組み」です。初心者の方は、これまでのDOM操作が「画面を動かす」技術だったのに対し、localStorage は「状態を残す」技術だと考えると整理しやすいです。

localStorageの基本イメージ

localStorage は、「キー」と「値」の組み合わせでデータを保存します。ここでいうキーとは名前のことで、値とは実際に保存する中身です。たとえば、「username」という名前で「Taro」という値を保存する、という形です。

イメージとしては次のようになります。

  • キー：`username`
  • 値：`Taro`

このように、「何という名前で保存するか」を決めて、その名前を使ってあとで取り出します。初心者の方は、引き出しにラベルを貼って中身をしまうようなイメージを持つとわかりやすいです。ラベルがキーで、中に入っているものが値です。

setItem() とは何か

setItem() は、localStorage にデータを保存するときに使うメソッドです。書き方はとてもシンプルです。

localStorage.setItem("キー", "値");
JavaScript

たとえば、ユーザー名を保存するなら次のように書きます。

// username という名前で Taro を保存する
localStorage.setItem("username", "Taro");
JavaScript

このコードを実行すると、ブラウザの localStorage に username というキーで Taro が保存されます。初心者の方は、setItem() を「保存する命令」と覚えるとよいです。ここで大事なのは、必ず「キー」と「値」の2つが必要だということです。

setItem() を初心者向けに深掘りする

setItem() で初心者が意識したいのは、同じキーを使うと上書きされるという点です。たとえば、次のようなコードを書いたとします。

// username に Taro を保存する
localStorage.setItem("username", "Taro");

// 同じ username に Hanako を保存する
localStorage.setItem("username", "Hanako");
JavaScript

この場合、最終的に保存されるのは Hanako です。Taro と Hanako の2つが並んで保存されるわけではありません。同じキーに対して新しい値を保存すると、古い値は置き換えられます。

これはとても重要です。初心者の方は、setItem() を使うときに「新規保存なのか、上書きなのか」を意識する癖をつけるとよいです。特にアプリでデータ更新を扱うときには、この上書きの性質が大きく関わってきます。

getItem() とは何か

getItem() は、localStorage に保存したデータを取り出すときに使うメソッドです。書き方は次の通りです。

localStorage.getItem("キー");
JavaScript

たとえば、先ほど保存した username を取り出すにはこう書きます。

// username の値を取り出す
const userName = localStorage.getItem("username");

// コンソールに表示する
console.log(userName);
JavaScript

このコードでは、userName に Taro または保存されている値が入ります。初心者の方は、getItem() を「読み出す命令」と考えると整理しやすいです。setItem() が保存、getItem() が取り出し、という対応関係を意識すると覚えやすいです。

getItem() で注意したいこと

getItem() で大切なのは、指定したキーが存在しない場合は null が返ることです。たとえば、まだ保存していないキーを取り出そうとすると、何もないので null になります。

// 存在しないキーを取り出す
const data = localStorage.getItem("notFoundKey");

console.log(data); // null
JavaScript

この点は非常に重要です。初心者の方は、getItem() ですぐ値が返ると思い込みがちですが、存在しない場合もあるため、実際のアプリでは「あるかどうか」を確認する処理が必要になることがあります。

たとえば、次のように書けます。

// username を取得する
const userName = localStorage.getItem("username");

// 値があるか確認する
if (userName !== null) {
  console.log(`保存された名前は ${userName} です`);
} else {
  console.log("名前はまだ保存されていません");
}
JavaScript

このように、初心者の段階から「保存されていない場合も考える」という視点を持つことが大切です。

removeItem() とは何か

removeItem() は、localStorage に保存したデータを削除するときに使うメソッドです。書き方は次の通りです。

localStorage.removeItem("キー");
JavaScript

たとえば、username を削除するならこうなります。

// username を削除する
localStorage.removeItem("username");
JavaScript

これで、username に保存されていた値は消えます。初心者の方は、removeItem() を「指定したキーのデータだけ削除する命令」と考えるとわかりやすいです。

removeItem() の重要ポイント

removeItem() では、指定したキーのデータだけが消えます。つまり、localStorage 全体が空になるわけではありません。たとえば username と theme の2つが保存されている場合、removeItem("username") を実行しても theme は残ります。

これはとても実用的です。たとえば、ToDoだけ消したい、保存された名前だけ消したい、というように、必要なものだけを選んで削除できます。

初心者の方は、「全部消す」のではなく「どれを消すかを指定する」のが removeItem() だと理解すると整理しやすいです。

まずは一連の流れをまとめて見る

ここまでで、保存、取り出し、削除の3つがそろいました。まずは一連の流れを1つのコードで見てみます。

// データを保存する
localStorage.setItem("username", "Taro");

// 保存したデータを取り出す
const userName = localStorage.getItem("username");
console.log(userName);

// データを削除する
localStorage.removeItem("username");
JavaScript

この流れはとても大切です。初心者の方は、localStorage の基本操作を「入れる」「取り出す」「消す」の3ステップで覚えると理解しやすいです。

簡単な例題で考える

ここでは、名前を保存する小さな例題を考えます。入力欄に名前を入れて保存ボタンを押すと localStorage に保存され、読み込みボタンで表示し、削除ボタンで消せるようにします。

まずHTMLです。

<h3>名前保存アプリ</h3>

<input type="text" id="nameInput" placeholder="名前を入力してください">
<button id="saveButton">保存</button>
<button id="loadButton">読み込み</button>
<button id="deleteButton">削除</button>

<p id="message">ここに結果が表示されます。</p>

次にJavaScriptです。

// 必要な要素を取得する
const nameInput = document.getElementById("nameInput");
const saveButton = document.getElementById("saveButton");
const loadButton = document.getElementById("loadButton");
const deleteButton = document.getElementById("deleteButton");
const message = document.getElementById("message");

// 保存ボタンの処理
saveButton.addEventListener("click", function () {
  // 入力された名前を取得する
  const name = nameInput.value.trim();

  // 空欄なら保存しない
  if (name === "") {
    message.textContent = "名前を入力してください。";
    return;
  }

  // localStorage に保存する
  localStorage.setItem("username", name);

  // メッセージを表示する
  message.textContent = `「${name}」を保存しました。`;
});

// 読み込みボタンの処理
loadButton.addEventListener("click", function () {
  // localStorage から名前を取り出す
  const savedName = localStorage.getItem("username");

  // 保存されているか確認する
  if (savedName !== null) {
    message.textContent = `保存されている名前は「${savedName}」です。`;
  } else {
    message.textContent = "保存された名前はありません。";
  }
});

// 削除ボタンの処理
deleteButton.addEventListener("click", function () {
  // localStorage から削除する
  localStorage.removeItem("username");

  // メッセージを表示する
  message.textContent = "保存された名前を削除しました。";
});
JavaScript

この例題は、Day 46の学習内容をそのまま体験できる、とてもよい練習です。

この例題で何が学べるのか

この例題では、単に localStorage の書き方だけでなく、DOM操作との組み合わせも学べます。たとえば、入力欄から value を取得して保存し、結果を textContent で画面に表示しています。つまり、第3フェーズで学んだことと、第4フェーズの最初の内容がつながっているわけです。

初心者の方にとって大切なのは、localStorage は単独で使うものではなく、画面の操作と一緒に使って初めて便利さが出るということです。保存するだけではなく、それを読み出して表示するところまでできてこそ、アプリらしさが生まれます。

localStorageは文字列で保存されることに注意する

ここは非常に重要なので深掘りします。localStorage に保存されるデータは基本的に文字列として扱われます。たとえば数値を保存したつもりでも、取り出すと文字列になっていることがあります。

// 数値を保存する
localStorage.setItem("score", 100);

// 取り出す
const score = localStorage.getItem("score");

console.log(score); // "100"
JavaScript

見た目は100ですが、型としては文字列です。初心者の方は、localStorage は「文字の保管庫」だと考えると理解しやすいです。そのため、数値として使いたい場合は Number() で変換する必要があります。

const score = Number(localStorage.getItem("score"));
JavaScript

この点を理解していないと、あとで計算するときに思わぬ動きになることがあります。特に簡易電卓や件数管理などと組み合わせるときには注意が必要です。

情報セキュリティの観点で大切なこと

localStorage は便利ですが、情報セキュリティの観点では使い方に注意が必要です。特に大事なのは、パスワード、クレジットカード情報、個人の機密情報などを保存しないことです。localStorage はブラウザ内に保存されるため、使い方を誤ると安全ではありません。

初心者の方は、次のように考えるとよいです。

  • 保存して便利な一般的な設定やメモには使える
  • 他人に見られると困る重要情報には使わない

つまり、localStorage は便利な道具ですが、用途を選ぶ必要があります。学習段階からこの感覚を持っておくことは非常に大切です。

そのまま使える練習テンプレート

ここでは、Day 46の内容をひと通り試せる練習テンプレートを載せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day 46 localStorage</title>
</head>
<body>
  <h2>名前保存アプリ</h2>

  <input type="text" id="nameInput" placeholder="名前を入力してください">
  <button id="saveButton">保存</button>
  <button id="loadButton">読み込み</button>
  <button id="deleteButton">削除</button>

  <p id="message">ここに結果が表示されます。</p>

  <script>
    // 必要な要素を取得する
    const nameInput = document.getElementById("nameInput");
    const saveButton = document.getElementById("saveButton");
    const loadButton = document.getElementById("loadButton");
    const deleteButton = document.getElementById("deleteButton");
    const message = document.getElementById("message");

    // 保存ボタンが押されたときの処理
    saveButton.addEventListener("click", function () {
      // 入力された名前を取得して空白を除く
      const name = nameInput.value.trim();

      // 空欄なら保存しない
      if (name === "") {
        message.textContent = "名前を入力してください。";
        return;
      }

      // localStorage に保存する
      localStorage.setItem("username", name);

      // 結果を表示する
      message.textContent = `「${name}」を保存しました。`;
    });

    // 読み込みボタンが押されたときの処理
    loadButton.addEventListener("click", function () {
      // 保存されている名前を取得する
      const savedName = localStorage.getItem("username");

      // 名前が保存されているか確認する
      if (savedName !== null) {
        message.textContent = `保存されている名前は「${savedName}」です。`;
      } else {
        message.textContent = "保存された名前はありません。";
      }
    });

    // 削除ボタンが押されたときの処理
    deleteButton.addEventListener("click", function () {
      // 保存された名前を削除する
      localStorage.removeItem("username");

      // 結果を表示する
      message.textContent = "保存された名前を削除しました。";
    });
  </script>
</body>
</html>

このテンプレートでは、setItem()、getItem()、removeItem() をひと通り実験できます。初心者の方は、まずこれをそのまま動かし、そのあと username を favoriteColor に変えたり、保存する内容をメモ文に変えたりして試すと理解が深まりやすいです。

例題で理解をさらに定着させる

ここでは短い例題もいくつか紹介します。

例題1：文字列を保存する

// 好きな色を保存する
localStorage.setItem("favoriteColor", "blue");
JavaScript

例題2：保存した値を取り出す

// favoriteColor を取得する
const color = localStorage.getItem("favoriteColor");

// コンソールに表示する
console.log(color);
JavaScript

例題3：保存した値を削除する

// favoriteColor を削除する
localStorage.removeItem("favoriteColor");
JavaScript

こうした短い例を何度か触ってから、実際のミニアプリに進むと理解しやすくなります。

Day 46のゴールを整理する

Day 46では、次のことができるようになっていれば十分です。

  • `localStorage` が何かを説明できる
  • `setItem()` の役割を説明できる
  • `getItem()` の役割を説明できる
  • `removeItem()` の役割を説明できる
  • 保存、読み出し、削除の基本操作を自分で書ける
  • `localStorage` に保存される値が文字列であることを理解している
  • 重要情報を保存しないという基本的な安全意識を持てる

ここまでできれば、Day 46としてはとても順調です。第4フェーズの入口として、ブラウザ保存の基礎がしっかり身についています。

まとめ

Day 46では、第4フェーズ「ブラウザデータ保存」の最初の学習として localStorage を学びました。localStorage は、JavaScriptからブラウザ内にデータを保存できる仕組みであり、ページを再読み込みしても値を残しておけるのが大きな特徴です。今回学んだ setItem() は保存、getItem() は読み出し、removeItem() は削除を行うための基本操作であり、この3つがそろうことで、ブラウザ保存の基本ができるようになります。

特に重要なのは、localStorage が「画面を動かす」DOM操作とは違い、「状態を残す」ための技術だということです。これまで作ってきたアプリはページ更新で元に戻るものが多かったですが、localStorage を使うことで、よりアプリらしい振る舞いに近づけます。また、保存される値は基本的に文字列であること、そして機密情報を保存してはいけないことも大切なポイントです。

次に進む前に、今回の練習テンプレートを何も見ずにもう一度作ってみるのがおすすめです。そして、そのあとで保存する内容を名前以外のものに変えてみると、localStorage の使い方がさらに自然に身についていきます。

スポンサーリンク
タイトルとURLをコピーしました