💻 JavaScriptで作るシンプルなメモアプリの実装解説

本記事では、HTMLとJavaScriptだけで作る最小構成のメモアプリを紹介します。
ブラウザ上で「新規メモ」ボタンを押すと、入力した内容がリストに追加される仕組みです。

1. 実装の概要

このアプリは2つの処理で構成されています。

1. 入力内容をHTMLに追加する処理
2. ボタンがクリックされたら上記処理を実行するイベント設定
   これらを分けて考えることで、コードが整理されやすくなります。

2. メモの追加処理

// 入力を受け取り、要素を生成してHTMLに追加
function memo() {
  var memo = prompt("入力してください");
  var newElement = document.createElement("li");
  newElement.textContent = memo;

  var memo_list = document.getElementById("memo_list");
  memo_list.appendChild(newElement);
}

ここで行っているのは以下の3ステップです：

処理の目的	説明
ユーザーの入力を取得	prompt() で入力内容を取得します
<li>要素を生成	新しいリスト要素を作成します
リストに追加	作成した要素を <ul> 内に追加します

💡ポイント

• document.createElement() で新しいHTML要素を作れます
• appendChild() で親要素に追加できます

3. イベントの設定

JavaScriptでは、ボタンのクリックなどの操作をイベントとして扱えます。

// ボタン要素を取得
var btn = document.querySelector("button");

// クリックされたときにmemo関数を呼び出す
btn.addEventListener("click", memo);

これで、ボタンをクリックしたときに memo() 関数が実行されるようになりました。
👇 実際に動くデモはこちら

💡ポイント

• addEventListener("click", 関数名) でイベントを設定できます
• 詳細は MDN Web Docs: addEventListenerを参照してください

4. まとめと応用例

このメモアプリは非常にシンプルですが、JavaScriptの基本が学べます。

• DOM操作：HTML要素を生成・追加する
• イベント処理：クリックなどの操作に応じた処理
• 関数化：処理を分割して整理

さらに応用すると以下のような機能も追加可能です：

• localStorage でメモ内容を保存
• 削除ボタンを追加
• CSSで見た目を整える

🧩 学べる要素まとめ

学べる要素	説明
DOM操作	HTML要素を動的に生成・追加する方法を学べます
イベント	ボタンのクリックなど、特定の操作時に処理を実行する方法を学べます
関数化	処理をまとめて再利用しやすくする方法を学べます

💡 初心者向けの補足

• 最初は一度にすべて覚えようとせず、コードを写しながら動作を確認する
• prompt() は簡易的な入力方法なので、将来的にはフォーム入力に置き換えるとより実用的
• 動的に要素を追加する体験を通じて、JavaScriptの基本的な仕組みを理解できます

この記事は note でも公開しています。
HTMLとJavaScriptだけで作る「メモアプリ」入門！(note)