JavaScript | 1 日 120 分 × 7 日アプリ学習：ローカル保存対応メモ帳

APP JavaScript
2026.01.06
スポンサーリンク

1日目のゴールと今日のテーマ

1日目のテーマは「localStorage を使って“消えないメモ帳”の土台を作ること」です。
普通のメモ帳アプリは、ページをリロードすると全部消えてしまいますが、
localStorage を使うと「ブラウザの中に保存しておけるメモ帳」が作れます。

今日のゴールは次の 3 つです。
localStorage が「文字列だけを保存できる箱」だと理解すること。
オブジェクトや配列を JSON に変換して保存する流れをつかむこと。
「いつ保存するか」という永続化の設計をイメージできるようになること。

まだ完璧なメモ帳は作りません。
まずは「保存の仕組み」を小さな例で体に入れていきます。

localStorage とは何かをイメージでつかむ

localStorage は「ブラウザの中の小さなキーバリューストア」

localStorage は、ブラウザが持っている「小さな保存箱」です。
特徴は、キーと値をセットで保存できることと、値は必ず文字列であることです。

例えば、次のように使います。

localStorage.setItem("username", "taro");
const name = localStorage.getItem("username");
console.log(name); // "taro"
JavaScript

ここで重要なのは、保存できるのはあくまで文字列だという点です。
数値やオブジェクト、配列をそのまま渡しても、内部では文字列として扱われます。
メモ帳アプリでは「メモの一覧」を配列で持ちたいので、
この「文字列しか保存できない」という制約をどう扱うかがポイントになります。

ページを閉じても残る「永続化」のイメージ

localStorage に保存したデータは、ページをリロードしても、ブラウザを閉じても残ります。
同じドメイン（同じサイト）に戻ってきたときに、前回のデータを取り出せます。

例えば、次のような流れです。
1回目のアクセスで localStorage.setItem("memo", "こんにちは"); を実行する。
ブラウザを閉じる。
もう一度同じページを開いて localStorage.getItem("memo") を実行すると「こんにちは」が出てくる。

これが「永続化」の基本イメージです。
メモ帳アプリでは、この仕組みを使って「メモ一覧」を保存しておきます。

JSON 変換の基本：オブジェクトや配列を文字列にする

JSON.stringify で「JavaScript の値 → 文字列」

localStorage は文字列しか保存できません。
でも、メモ帳では「メモの配列」を扱いたいので、
配列を文字列に変換する必要があります。

そこで使うのが JSON.stringify です。

const memos = [
  { id: 1, text: "牛乳を買う" },
  { id: 2, text: "メール返信" },
];

const json = JSON.stringify(memos);
console.log(json);
// 例: '[{"id":1,"text":"牛乳を買う"},{"id":2,"text":"メール返信"}]'
JavaScript

ここでの重要ポイントは、
JavaScript の配列やオブジェクトを「JSON 形式の文字列」に変換している、ということです。
この文字列なら、そのまま localStorage に保存できます。

JSON.parse で「文字列 → JavaScript の値」に戻す

保存した JSON 文字列を、もう一度配列として使いたいときは JSON.parse を使います。

const loaded = JSON.parse(json);
console.log(loaded[0].text); // "牛乳を買う"
JavaScript

この流れが、localStorage と組み合わせるとこうなります。

// 保存
localStorage.setItem("memos", JSON.stringify(memos));

// 読み込み
const saved = localStorage.getItem("memos");
const memosFromStorage = saved ? JSON.parse(saved) : [];
JavaScript

ここで深掘りしたいのは、
「保存するときは stringify」「読み込むときは parse」というペアで覚えることです。
この 2 つをセットで使えるようになると、
「配列やオブジェクトをそのまま保存できる感覚」がつかめます。

メモ帳アプリのデータ構造を決める

1 件のメモをどう表現するか

ToDo アプリと同じように、メモもオブジェクトで表現します。

const memo = {
  id: 1,
  text: "今日のアイデアメモ",
  updatedAt: Date.now(),
};
JavaScript

最低限必要なのは id と text です。
updatedAt は「いつ更新したか」を記録したいときに使えますが、1日目ではなくても構いません。

メモ帳全体は、このメモオブジェクトの配列として持ちます。

const state = {
  memos: [],
};
JavaScript

ここでの重要ポイントは、
「画面に見えているメモ一覧は、必ず state.memos から作る」という設計にすることです。
localStorage はあくまで「保存場所」であって、
アプリの“今”は state に持たせます。

localStorage と state をつなぐ「永続化設計」の基本

保存の基本パターン：state → JSON → localStorage

メモを追加・編集・削除したとき、
state.memos が変わります。
このタイミングで localStorage にも保存しておくと、
次にページを開いたときに復元できます。

保存の関数を 1 つ用意しておきます。

const STORAGE_KEY = "memo-app-memos";

function saveMemosToStorage() {
  const json = JSON.stringify(state.memos);
  localStorage.setItem(STORAGE_KEY, json);
}
JavaScript

この関数を、
メモ追加・編集・削除のたびに呼ぶ設計にします。

例えば、メモ追加ならこうです。

function addMemo(text) {
  const trimmed = text.trim();
  if (!trimmed) return;

  const newMemo = {
    id: Date.now(),
    text: trimmed,
  };

  state.memos.push(newMemo);
  saveMemosToStorage();
  render();
}
JavaScript

ここでの重要ポイントは、
「state を変えたら、保存と再描画をセットで行う」という流れを作ることです。
これで「画面」と「保存されたデータ」がズレにくくなります。

読み込みの基本パターン：localStorage → JSON.parse → state

ページを開いたときに、localStorage からメモ一覧を読み込みます。

function loadMemosFromStorage() {
  const json = localStorage.getItem(STORAGE_KEY);
  if (!json) {
    state.memos = [];
    return;
  }

  try {
    const memos = JSON.parse(json);
    if (Array.isArray(memos)) {
      state.memos = memos;
    } else {
      state.memos = [];
    }
  } catch (e) {
    console.error("保存されたメモの読み込みに失敗しました", e);
    state.memos = [];
  }
}
JavaScript

そして、ページ読み込み時にこれを呼び、続けて render します。

loadMemosFromStorage();
render();
JavaScript

ここで深掘りしたいのは、
JSON.parse は失敗する可能性があるので try-catch で囲んでいる点です。
localStorage の中身が壊れていても、アプリが落ちないようにする——
これが「永続化設計」の大事な視点です。

1日目のミニ実験：コンソールで localStorage を触ってみる

文字列の保存と読み込みを試す

ブラウザの開発者ツールを開いて、コンソールで次を試してみてください。

localStorage.setItem("test", "hello");
localStorage.getItem("test"); // "hello"
JavaScript

ページをリロードしてから、もう一度

localStorage.getItem("test");
JavaScript

を実行すると、まだ “hello” が残っているはずです。
これが「ページをまたいで残る」という感覚です。

配列の保存と読み込みを試す

次に、配列を保存してみます。

const arr = [1, 2, 3];
localStorage.setItem("arr", JSON.stringify(arr));

const loaded = JSON.parse(localStorage.getItem("arr"));
console.log(loaded[1]); // 2
JavaScript

ここまでできたら、
「localStorage は文字列しか保存できないけど、
JSON を使えば配列やオブジェクトも実質保存できる」
という感覚がかなりはっきりしてきます。

1日目のまとめと、明日へのつなぎ

1日目であなたがやったことは、メモ帳アプリの「永続化の土台作り」です。
localStorage が「文字列だけを保存できるブラウザ内の箱」だと理解したこと。
JSON.stringify / JSON.parse で「配列やオブジェクト ↔ 文字列」を変換する流れをつかんだこと。
state.memos を「アプリの真実」として持ち、
保存は state から localStorage に流す設計をイメージできたこと。

明日（2日目）は、
実際にメモ追加・編集・削除の UI を作り、
操作のたびに localStorage に保存される「消えないメモ帳」を形にしていきます。

もし余力があれば、今日は
localStorage に自分の好きなキー名でデータを保存してみたり、
Application タブ（Storage の画面）で中身を眺めてみてください。
「ブラウザの中に自分のデータが残っている」という感覚が、
永続化設計をぐっと身近なものにしてくれます。

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