【JavaScript】localStorageに保存日時も記録するメモ帳アプリを作ってみた

Posted at 2026-03-27

1. はじめに

ドットインストールの「JavaScriptでメモ帳を作ろう」をベースに学習しました。 localStorage を使ったブラウザへのデータ保存・削除に加え、自分なりに「最終更新日時の表示」機能を追加実装してみました。この記事ではその実装内容を整理します。

2. 作ったもの

テキストエリアにメモを入力し、保存・削除ができるメモ帳アプリです。ページをリロードしてもメモ内容と最終更新日時が復元される点が今回のポイントです。

2.1 HTML構造

ページ全体の構造はこのようになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>メモ帳</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>メモ帳</h1>
    <textarea id="text"></textarea>
    <div class="container">
      <span id="message">保存しました</span>
      <span id="date"></span>
      <button id="clear">削除</button>
      <button id="save">保存</button>
    </div>
  </main>
  <script src="main.js"></script>
</body>
</html>

2.2 CSS

「保存しました」メッセージと日時表示のスタイルを #message と #date のIDで分けて管理しているのがポイントです。

@charset "utf-8";

main {
  width: 400px;
  margin: 16px auto 0;
}

h1 {
  margin: 0;
  font-size: 22px;
  text-align: center;
}

textarea {
  width: 100%;
  box-sizing: border-box;
  height: 160px;
  font-size: 16px;
  padding: 8px;
  margin-top: 8px;
}

button {
  padding: 4px 16px;
  cursor: pointer;
}

span {
  margin-right: auto;
  transition: opacity 300ms;
}

#date {
  font-size: 10px;
}

#message {
  opacity: 0;
  font-size: 14px;
}

#message.appear {
  opacity: 1;
}

.container {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

3. JavaScriptの実装

メモ帳の動作はすべてJavaScriptで制御しています。 localStorage にメモ内容と日時の2種類のデータを保存・復元する仕組みを実装しました。

3.1 要素の取得と初期化

ページ読み込み時に各要素を取得し、 localStorage に保存済みのメモと日時をそれぞれ復元します。

'use strict';
{
  const text = document.getElementById('text');
  const save = document.getElementById('save');
  const clear = document.getElementById('clear');
  const date = document.getElementById('date');
  const message = document.getElementById('message');

  const savedData = localStorage.getItem('memo');
  let savedDate = localStorage.getItem('date');

  // メモの復元
  if (savedData === null) {
    text.value = ' ';
  } else {
    text.value = savedData;
  }

  // 日時の復元
  if (savedDate === null) {
    date.textContent = ' ';
  } else {
    date.textContent = savedDate;
  }
}

localStorage.getItem は保存データがない場合 null を返すので、それを条件に初期値を分岐させているみたいです。

3.2 保存ボタンの処理

保存ボタンをクリックしたとき、 Date オブジェクトで現在日時を取得し、メモと一緒に localStorage へ保存します。

  save.addEventListener('click', () => {
    const setDate = new Date();

    // メモを保存
    localStorage.setItem('memo', text.value);

    // 日時を整形して保存
    localStorage.setItem(
      'date',
      `最終更新日${setDate.getFullYear()}年${setDate.getMonth()}月${setDate.getDate()}日${setDate.getHours()}時${setDate.getMinutes()}分`,
    );

    // 保存メッセージを表示
    message.classList.add('appear');

    // 画面上の日時表示を更新
    date.textContent = localStorage.getItem('date');

    // 1000ms後にメッセージを非表示
    setTimeout(() => {
      message.classList.remove('appear');
    }, 1000);
  });

3.3 削除ボタンの処理

削除ボタンをクリックしたとき、 confirm で確認し、OKならメモと日時の両方を消します。

  clear.addEventListener('click', () => {
    if (confirm('本当に削除しますか？')) {
      text.value = ' ';
      date.textContent = ' ';
      localStorage.removeItem('memo');
      localStorage.removeItem('date');
    }
  });

4. 自分なりに機能を追加してみた

学習内容をベースに、最終更新日時を表示する機能を自分で考えて追加しました。実装にあたって Date オブジェクトのメソッドを調べながら組み合わせた部分です。

4.1 追加したHTMLの変更点

日時を表示するために <span id="date"></span> を .container 内に追加しました。 id="message" の隣に並べることで、保存メッセージと日時を横並びで表示できるみたいです。

4.2 Dateオブジェクトで日時を整形する

new Date() で現在日時のオブジェクトを生成し、各メソッドで年・月・日・時・分を取り出してテンプレートリテラルで文字列に組み立てています。

const setDate = new Date();

// 年月日時分を組み合わせて日時文字列を生成する処理
const dateString = `最終更新日${setDate.getFullYear()}年${setDate.getMonth()}月${setDate.getDate()}日${setDate.getHours()}時${setDate.getMinutes()}分`; // → 出力: 最終更新日2025年3月5日14時30分

今回使った Date オブジェクトのメソッドを整理しました。

メソッド	取得できる値	注意点
`getFullYear()`	年（例: 2025）	なし
`getMonth()`	月（0〜11）	実際の月は +1 が必要
`getDate()`	日（1〜31）	なし
`getHours()`	時（0〜23）	なし
`getMinutes()`	分（0〜59）	なし

getMonth() だけ0始まりという仕様になっているみたいです。正しい月を表示するには getMonth() + 1 とする必要があります。

4.3 日時もlocalStorageに保存・削除する

メモと同様に日時も localStorage に保存することで、リロード後も最終更新日時が復元されるみたいです。削除時は localStorage.removeItem('memo') と localStorage.removeItem('date') の両方を実行しないと、日時だけが残り続けてしまうと理解しました。

まとめ

今回の学習・実装で気づいたポイントをまとめます。

localStorage は複数のキーを使えば、メモと日時のような異なるデータを別々に管理できると理解しました
削除時は関連する localStorage のキーをすべて消さないと、リロード時に不整合が起きる

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up