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

Day 47：データ保存

Day 47では、第4フェーズ「ブラウザデータ保存」の実践として、入力データを保存し、ページ更新後も表示する仕組みを学びます。Day 46では、localStorage の基本として、localStorageとは何か、setItem()、getItem()、removeItem() を学びました。そこでは、ブラウザにデータを保存できること、そして保存したデータはページを再読み込みしても残ることを確認しました。Day 47では、その知識を実際に使い、単なるメソッドの説明で終わらせず、「ユーザーが入力した内容を保存し、それを次にページを開いたときにも表示する」という、よりアプリらしい仕組みに進めていきます。

ここで大切なのは、保存だけでは不十分だということです。初心者の方は、setItem() を使って保存できた時点で満足しやすいですが、実際のアプリでは「保存したあとどう使うか」がとても重要です。今回のテーマである「ページ更新後も表示」では、保存したデータをページ読み込み時に取り出し、画面に反映する必要があります。つまり、保存と読み出しをつなげて考えることがポイントです。

Day 47は、第4フェーズの中でもとても重要な回です。なぜなら、ここで「保存されたデータを使って画面を初期化する」という考え方が身につくからです。この感覚がわかると、今後ToDoアプリを保存対応にしたり、前回の入力内容を自動表示したり、設定を保持したりする機能へつながっていきます。今回は、初心者向けにできるだけ順番を細かく分けながら、「なぜそうするのか」まで丁寧に説明していきます。

Day 47で目指すこと

今回のゴールはとてもはっきりしています。入力欄に文字を入れて保存し、ページを更新してもその内容が画面に残るようにすることです。これを言い換えると、次の2つのことができるようになるのが目標です。

• 入力されたデータを `localStorage` に保存する
• 保存されているデータをページ読み込み時に取り出して表示する

ここで重要なのは、「入力してすぐ表示する」のと「保存したデータを次回読み込んで表示する」のは別の話だということです。初心者の方は、この2つを混同しやすいです。入力してその場で表示するだけなら、変数とDOM操作だけでできます。しかし、ページを更新したあとにも残すには、ブラウザの保存機能である localStorage を使う必要があります。

まずは全体の流れを言葉で整理する

コードを書く前に、どんな流れで処理が進むのかを日本語で整理することがとても大切です。今回の実践は、次のような流れになります。

• 入力欄に文字を入力する
• 保存ボタンを押す
• 入力内容を `localStorage` に保存する
• 同時に画面にも表示する
• ページが再読み込みされたとき、保存されたデータを取り出す
• そのデータを最初から画面に表示する

この流れが理解できると、必要なコードも見えやすくなります。初心者の方は、プログラムを書く前に「何が起きるか」を日本語で書き出す習慣をつけると、かなり学習が進めやすくなります。

今回作るミニアプリのイメージ

今回は、名前やメモのような短い入力内容を保存するミニアプリを作ると理解しやすいです。たとえば、入力欄に「今日やること」や「ニックネーム」などを書いて保存し、ページを更新してもその内容が表示されるようにします。

完成イメージは次のようになります。

• 入力欄がある
• 保存ボタンがある
• 保存された内容を表示する場所がある
• ページを更新しても前回保存した内容が表示される

この形はとてもシンプルですが、保存と読み出しの基本がしっかり入っています。初心者の方にとって、まずは1つの値を確実に保存・表示できるようになることが大切です。

最初に必要なHTMLを考える

まずは必要なHTMLを用意します。今回は、入力欄、保存ボタン、表示エリアがあれば十分です。

<h2>入力データ保存アプリ</h2>

<input type="text" id="textInput" placeholder="文字を入力してください">
<button id="saveButton">保存</button>

<p id="displayText">ここに保存内容が表示されます。</p>

このHTMLでは、textInput が入力欄、saveButton が保存ボタン、displayText が保存内容の表示場所です。初心者の方は、ここでも「JavaScriptで触りたい要素には id をつける」という基本を意識するとよいです。

この時点ではまだ何も保存されませんが、必要な部品はそろっています。ここからJavaScriptで動きをつけていきます。

保存処理だけを先に作る

最初は、ページ更新後の表示まで一気に考えず、まずは「入力されたデータを保存する」処理だけを作ると理解しやすいです。必要な要素を取得し、保存ボタンのイベントを設定します。

// 入力欄を取得する
const textInput = document.getElementById("textInput");

// 保存ボタンを取得する
const saveButton = document.getElementById("saveButton");

// 表示エリアを取得する
const displayText = document.getElementById("displayText");

// 保存ボタンがクリックされたときの処理
saveButton.addEventListener("click", function () {
  // 入力内容を取得して前後の空白を除く
  const inputValue = textInput.value.trim();

  // 空欄なら保存しない
  if (inputValue === "") {
    displayText.textContent = "文字を入力してください。";
    return;
  }

  // localStorage に保存する
  localStorage.setItem("savedText", inputValue);

  // 保存した内容を画面に表示する
  displayText.textContent = `保存された内容：${inputValue}`;
});

// 入力欄を取得する
const textInput = document.getElementById("textInput");

// 保存ボタンを取得する
const saveButton = document.getElementById("saveButton");

// 表示エリアを取得する
const displayText = document.getElementById("displayText");

// 保存ボタンがクリックされたときの処理
saveButton.addEventListener("click", function () {
  // 入力内容を取得して前後の空白を除く
  const inputValue = textInput.value.trim();

  // 空欄なら保存しない
  if (inputValue === "") {
    displayText.textContent = "文字を入力してください。";
    return;
  }

  // localStorage に保存する
  localStorage.setItem("savedText", inputValue);

  // 保存した内容を画面に表示する
  displayText.textContent = `保存された内容：${inputValue}`;
});

この段階では、保存とその場での表示ができます。ただし、まだページ更新後に自動表示はされません。初心者の方は、まず「保存できる」ことを1段階目として確認し、そのあとで「読み込み時に表示する」処理を足していくとわかりやすいです。

ここで大切な考え方

この保存処理では、ボタンを押したときに3つのことをしています。

• 入力値を取得する
• `localStorage` に保存する
• 保存した内容を画面に表示する

このうち、実は2番目と3番目は別の役割です。localStorage に保存することと、画面に表示することは同じではありません。保存しただけでは画面は自動で変わりませんし、表示しただけではページ更新後に残りません。初心者の方は、この2つを明確に分けて考えることが大切です。

ページ更新後も表示するには何が必要か

ここがDay 47の最重要ポイントです。保存ボタンを押したときに setItem() するだけでは、「その瞬間に保存された」だけです。ページが再読み込みされたあとにもう一度表示するには、ページが開かれたタイミングで getItem() を使って保存データを取り出し、それを画面へ反映する必要があります。

つまり、ページ更新後も表示するには、次の処理が追加で必要です。

• ページ表示時に `localStorage` から保存データを取り出す
• その値があれば表示エリアへ入れる

この考え方が非常に重要です。初心者の方は、「保存する処理」と「ページ開始時に読み込む処理」は別物だと意識しておくと理解が深まります。

ページ読み込み時の表示処理を作る

では、保存されたデータがあれば最初から表示する処理を作ります。とてもシンプルで、次のように書けます。

// localStorage から保存データを取得する
const savedText = localStorage.getItem("savedText");

// データがある場合は表示する
if (savedText !== null) {
  displayText.textContent = `保存された内容：${savedText}`;
}

// localStorage から保存データを取得する
const savedText = localStorage.getItem("savedText");

// データがある場合は表示する
if (savedText !== null) {
  displayText.textContent = `保存された内容：${savedText}`;
}

このコードをJavaScriptの最初のほう、または要素取得のあとに書いておけば、ページが読み込まれたときに保存された内容を自動的に表示できます。

初心者の方にとって大切なのは、ここではボタンを押していないという点です。つまり、ボタンイベントの中ではなく、「ページが開かれた時点で」実行される処理です。この違いを理解できると、アプリの初期表示を作る感覚がかなりつかめます。

保存処理と読み込み処理をつなげる

ここまでで、保存処理と読み込み処理の両方ができました。これらをつなげると、Day 47の基本アプリが完成します。

<h2>入力データ保存アプリ</h2>

<input type="text" id="textInput" placeholder="文字を入力してください">
<button id="saveButton">保存</button>

<p id="displayText">ここに保存内容が表示されます。</p>

<script>
  // 入力欄を取得する
  const textInput = document.getElementById("textInput");

  // 保存ボタンを取得する
  const saveButton = document.getElementById("saveButton");

  // 表示エリアを取得する
  const displayText = document.getElementById("displayText");

  // ページ読み込み時に保存データを表示する
  const savedText = localStorage.getItem("savedText");

  if (savedText !== null) {
    displayText.textContent = `保存された内容：${savedText}`;
  }

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

    // 空欄なら保存しない
    if (inputValue === "") {
      displayText.textContent = "文字を入力してください。";
      return;
    }

    // localStorage に保存する
    localStorage.setItem("savedText", inputValue);

    // 保存した内容を表示する
    displayText.textContent = `保存された内容：${inputValue}`;
  });
</script>

このコードで、入力して保存し、ページを更新しても内容が表示されるようになります。初心者の方は、このコードを見て「保存の処理」と「ページ開始時の処理」が分かれていることをはっきり確認すると理解しやすいです。

入力欄にも保存内容を戻すとさらに便利です

ここで一歩だけ実用性を高める工夫を紹介します。表示エリアに保存内容を出すだけでなく、入力欄そのものにも保存した内容を戻すと、よりアプリらしくなります。

たとえば、読み込み時に次の1行を加えます。

textInput.value = savedText;

textInput.value = savedText;

これを使うと、ページを更新したあとでも入力欄に前回の内容が残ります。コードは次のようになります。

// ページ読み込み時に保存データを表示する
const savedText = localStorage.getItem("savedText");

if (savedText !== null) {
  displayText.textContent = `保存された内容：${savedText}`;
  textInput.value = savedText;
}

// ページ読み込み時に保存データを表示する
const savedText = localStorage.getItem("savedText");

if (savedText !== null) {
  displayText.textContent = `保存された内容：${savedText}`;
  textInput.value = savedText;
}

初心者の方にとっては、「保存した値をどこに反映するかは自由に決められる」という点がここでよく分かります。表示エリアだけでなく、入力欄や見出しや他の要素にも使えるのです。

削除機能も入れると学習が安定します

Day 47の主題は保存と表示ですが、学習を安定させるために削除機能も一緒に入れておくと理解しやすいです。なぜなら、「保存したデータを消す」という流れも実際によく使うからです。

HTMLに削除ボタンを足します。

<button id="deleteButton">削除</button>

JavaScriptではこう書けます。

// 削除ボタンを取得する
const deleteButton = document.getElementById("deleteButton");

// 削除ボタンが押されたときの処理
deleteButton.addEventListener("click", function () {
  // localStorage から削除する
  localStorage.removeItem("savedText");

  // 表示を初期化する
  displayText.textContent = "保存内容を削除しました。";
  textInput.value = "";
});

// 削除ボタンを取得する
const deleteButton = document.getElementById("deleteButton");

// 削除ボタンが押されたときの処理
deleteButton.addEventListener("click", function () {
  // localStorage から削除する
  localStorage.removeItem("savedText");

  // 表示を初期化する
  displayText.textContent = "保存内容を削除しました。";
  textInput.value = "";
});

これで、保存、表示、削除の流れを一通り確認できます。初心者の方は、こうした一連の流れを自分で作れるようになると、localStorageへの理解がかなり安定してきます。

完成版テンプレート

ここでは、Day 47の内容をまとめて試せる完成版テンプレートを載せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day 47 データ保存</title>
</head>
<body>
  <h2>入力データ保存アプリ</h2>

  <input type="text" id="textInput" placeholder="文字を入力してください">
  <button id="saveButton">保存</button>
  <button id="deleteButton">削除</button>

  <p id="displayText">ここに保存内容が表示されます。</p>

  <script>
    // 入力欄を取得する
    const textInput = document.getElementById("textInput");

    // 保存ボタンを取得する
    const saveButton = document.getElementById("saveButton");

    // 削除ボタンを取得する
    const deleteButton = document.getElementById("deleteButton");

    // 表示エリアを取得する
    const displayText = document.getElementById("displayText");

    // ページ読み込み時に保存データを取得する
    const savedText = localStorage.getItem("savedText");

    // 保存データがあれば画面に表示する
    if (savedText !== null) {
      displayText.textContent = `保存された内容：${savedText}`;
      textInput.value = savedText;
    }

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

      // 空欄なら保存しない
      if (inputValue === "") {
        displayText.textContent = "文字を入力してください。";
        return;
      }

      // localStorage に保存する
      localStorage.setItem("savedText", inputValue);

      // 保存内容を画面に表示する
      displayText.textContent = `保存された内容：${inputValue}`;
    });

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

      // 入力欄を空にする
      textInput.value = "";

      // メッセージを表示する
      displayText.textContent = "保存内容を削除しました。";
    });
  </script>
</body>
</html>

このテンプレートは、そのままコピーして試せます。保存してページを更新し、本当に残っているかを確認することが大切です。初心者の方は、実際に何度も更新して、動きを目で確かめると理解が深まりやすいです。

この実践で特に大切なポイント

Day 47で特に大切なポイントは、次の通りです。

• 保存する処理と、読み込み時に表示する処理は別です。
• ページ更新後も表示したいなら、読み込み時に `getItem()` が必要です。
• 保存した値は `localStorage` に残りますが、画面には自動で出てこないので、自分で表示処理を書く必要があります。
• 空欄保存を防ぐことで、不要なデータが残るのを防げます。
• 削除機能も入れると、保存データの流れをより理解しやすくなります。

特に重要なのは、「localStorageにあること」と「画面に見えていること」は別だという点です。初心者の方はここをしっかり区別すると、保存系のアプリが理解しやすくなります。

セキュリティ面での注意

今回のような文字列保存は学習用としてとてもよいですが、情報セキュリティの観点では、やはり localStorage に何を入れるかを慎重に考える必要があります。前回と同じく、パスワード、個人の重要情報、支払い情報のような機密データは保存しないことが大切です。

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

• 表示しても問題のない設定やメモには向いています。
• 見られると困る秘密情報には向いていません。

学習段階から、この区別を自然にできるようになっておくことはとても大切です。

例題で理解をさらに固める

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

例題1：ニックネーム保存

// ニックネームを保存する
localStorage.setItem("nickname", "Sakura");

// ニックネームを取得する
const nickname = localStorage.getItem("nickname");

// 画面に表示する
console.log(nickname);

// ニックネームを保存する
localStorage.setItem("nickname", "Sakura");

// ニックネームを取得する
const nickname = localStorage.getItem("nickname");

// 画面に表示する
console.log(nickname);

例題2：保存データがあるときだけ表示する

// 保存データを取得する
const memo = localStorage.getItem("memo");

// データがある場合だけ表示する
if (memo !== null) {
  console.log(`メモ内容：${memo}`);
}

// 保存データを取得する
const memo = localStorage.getItem("memo");

// データがある場合だけ表示する
if (memo !== null) {
  console.log(`メモ内容：${memo}`);
}

例題3：削除して初期化する

// 保存データを削除する
localStorage.removeItem("memo");

// 入力欄や表示を初期化する処理を続けて書ける

// 保存データを削除する
localStorage.removeItem("memo");

// 入力欄や表示を初期化する処理を続けて書ける

このような小さな例を何度か試したあとで、完成版のテンプレートに戻ると理解がかなり安定しやすいです。

Day 47のゴールを整理する

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

• 入力データを `localStorage` に保存できる
• ページ更新後も保存データを表示できる
• 保存処理と読み込み処理の違いを説明できる
• 空欄チェックの必要性を理解している
• 削除機能を使って保存データを消せる
• 画面表示と保存状態が別であることを理解している

ここまでできれば、Day 47としてはとても順調です。ブラウザ保存の基礎が、実際の画面の動きと結びついた形で理解できています。

まとめ

Day 47では、第4フェーズ「ブラウザデータ保存」の実践として、入力データを保存し、ページ更新後も表示する仕組みを学びました。今回のポイントは、setItem() で保存するだけでなく、ページ読み込み時に getItem() で取り出して画面へ反映することです。これによって、ただ一時的に表示が変わるだけではなく、前回の状態を覚えておくアプリへ一歩進むことができました。

特に重要なのは、「保存されていること」と「画面に表示されていること」は別だという考え方です。保存データを持っていても、自動で画面に出てくるわけではありません。そのため、ページが開かれたときに自分で表示処理を書く必要があります。この考え方は、今後ToDoアプリの保存対応や設定画面の保持など、さまざまな機能に広くつながっていきます。

次に進む前に、今回のテンプレートを何も見ずにもう一度作り直してみるのがおすすめです。そして、そのあとで保存する内容を名前、メモ、好きな色など別のものに変えてみると、保存と表示の流れがより自然に理解できるようになります。