JavaScriptで作るシンプルなメモ帳アプリ：テキスト入力と保存機能を学ぼう

プログラミング学習の初歩として、シンプルなメモ帳アプリを作成することは、JavaScriptの基本文法やDOM操作を実践的に学ぶのに最適です。この記事では、ユーザーがテキストを入力し、その内容をブラウザのローカルストレージに保存する基本的な機能を、具体的なコード例とともに初心者にも分かりやすく解説します。

1. アプリの概要と構成
2. HTML構造の作成
3. CSSでの基本的なスタイリング
4. JavaScriptによる機能実装
1. 4.1 メモの保存と表示
2. 4.2 クリア機能の実装
5. まとめと今後の展望
6. 参考リンク

1. アプリの概要と構成

このメモ帳アプリは、以下の機能を持ちます：

テキスト入力： ユーザーがメモを入力するためのテキストフィールド
保存機能： 入力したメモをローカルストレージに保存
表示機能： 保存したメモを画面に表示
削除機能： 不要なメモを削除

2. HTML構造の作成

まず、メモ帳アプリの基本的なHTML構造を作成します。シンプルな入力フォーム、保存ボタン、メモを表示する領域を用意します。


<!DOCTYPE html>
<html lang=\"ja\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <title>シンプルなメモ帳アプリ</title>
  <link rel=\"stylesheet\" href=\"styles.css\">
</head>
<body>
  <div id=\"memo-app\">
    <h2>My Memo</h2>
    <textarea id=\"memoInput\" placeholder=\"メモを入力...\"></textarea>
    <button id=\"saveMemoBtn\">保存</button>
    <button id=\"clearMemoBtn\">クリア</button>
    <div id=\"memoDisplay\"></div>
  </div>
  <script src=\"script.js\"></script>
</body>
</html>

3. CSSでの基本的なスタイリング

次に、シンプルなメモ帳アプリに適用するCSSの例です。ユーザーが使いやすいデザインにするため、入力領域やボタンのスタイルを整えます。


body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  margin: 0;
  padding: 20px;
}

#memo-app {
  background-color: #fff;
  margin: 0 auto;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 5px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  resize: none;
}

button {
  padding: 10px 15px;
  margin: 10px 5px 0 5px;
  border: none;
  background-color: #007BFF;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

#memoDisplay {
  margin-top: 20px;
  text-align: left;
}

4. JavaScriptによる機能実装

JavaScriptを使用して、ユーザーの入力を取得し、ローカルストレージに保存し、保存したメモを表示・削除する機能を実装します。

4.1 メモの保存と表示


// 保存ボタンのクリックイベント
document.getElementById("saveMemoBtn").addEventListener("click", function() {
  const memoInput = document.getElementById("memoInput");
  const memoText = memoInput.value.trim();
  
  if (memoText === "") return; // 空の入力は保存しない
  
  // ローカルストレージに保存（既存のメモがあれば追加）
  let memos = JSON.parse(localStorage.getItem("memos")) || [];
  memos.push(memoText);
  localStorage.setItem("memos", JSON.stringify(memos));
  
  memoInput.value = ""; // 入力欄をクリア
  displayMemos(); // 保存したメモを表示
});

// メモを表示する関数
function displayMemos() {
  const memoDisplay = document.getElementById("memoDisplay");
  const memos = JSON.parse(localStorage.getItem("memos")) || [];
  memoDisplay.innerHTML = "";
  memos.forEach((memo, index) => {
    const memoItem = document.createElement("p");
    memoItem.textContent = memo;
    // クリックで削除する機能を追加
    memoItem.addEventListener("click", function() {
      removeMemo(index);
    });
    memoDisplay.appendChild(memoItem);
  });
}

// メモを削除する関数
function removeMemo(index) {
  let memos = JSON.parse(localStorage.getItem("memos")) || [];
  memos.splice(index, 1);
  localStorage.setItem("memos", JSON.stringify(memos));
  displayMemos();
}

// ページロード時に既存のメモを表示
document.addEventListener("DOMContentLoaded", displayMemos);

4.2 クリア機能の実装


// クリアボタンのクリックイベント
document.getElementById("clearMemoBtn").addEventListener("click", function() {
  localStorage.removeItem("memos");
  displayMemos();
});

5. まとめと今後の展望

本記事では、JavaScriptとローカルストレージを活用して、シンプルなメモ帳アプリを作成する方法を詳しく解説しました。
テキスト入力から保存、表示、削除まで、基本的な機能を実装することで、JavaScriptの基礎を実践的に学ぶことができます。
このプロジェクトを通じて、DOM操作、イベントハンドリング、ローカルストレージの利用方法をマスターし、次のステップとしてさらに高度なWebアプリケーションの開発にチャレンジしてみましょう。

6. 参考リンク

以上がシンプルなメモ帳アプリの作成でした。
次回はクリックイベントについて紹介します。