diff --git a/app.js b/app.js
new file mode 100644
index 0000000..5ce35d7
--- /dev/null
+++ b/app.js
@@ -0,0 +1,93 @@
+// app.js
+import { 
+  commentsCollection, addDoc, query, orderBy, onSnapshot 
+} from "./firebase.js";
+
+// Leafletマップ初期化
+const map = L.map("map").setView([35.681236, 139.767125], 13);
+L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+  maxZoom: 19,
+}).addTo(map);
+
+const markers = [];
+
+// コメント履歴表示関数
+function addCommentToHistory({ comment, timestamp, docId }) {
+  const list = document.getElementById("comments-list");
+  if (!list) return;
+
+  // 既に表示済みならスキップ（重複防止）
+  if (list.querySelector(`[data-doc-id="${docId}"]`)) return;
+
+  const entry = document.createElement("div");
+  entry.className = "history-entry";
+  entry.dataset.docId = docId;
+  entry.innerHTML = `
+    <p><strong>日時:</strong> ${timestamp?.toDate().toLocaleString() || "読み込み中..."}</p>
+    <p class="comment-text">${comment}</p>
+  `;
+  list.appendChild(entry);
+}
+
+// Firestoreのコメントをリアルタイム取得して地図・履歴に表示
+function loadComments() {
+  const commentsList = document.getElementById("comments-list");
+  if (commentsList) commentsList.innerHTML = "";
+
+  markers.forEach(m => map.removeLayer(m));
+  markers.length = 0;
+
+  const q = query(commentsCollection, orderBy("timestamp", "asc"));
+
+  onSnapshot(q, (snapshot) => {
+    snapshot.docChanges().forEach(change => {
+      const data = change.doc.data();
+      const docId = change.doc.id;
+
+      if (change.type === "added") {
+        addCommentToHistory({ ...data, docId });
+
+        const marker = L.marker([data.lat, data.lng]).addTo(map);
+        marker.docId = docId;
+        markers.push(marker);
+
+        marker.bindPopup(`
+          <div class="info-window">
+            <p><strong>日時:</strong> ${data.timestamp?.toDate().toLocaleString()}</p>
+            <p><strong>コメント:</strong> ${data.comment}</p>
+          </div>
+        `);
+      }
+      // 変更や削除処理も必要ならここで実装可
+    });
+  });
+}
+
+// コメント送信処理
+document.getElementById("comment-form").addEventListener("submit", async e => {
+  e.preventDefault();
+
+  const form = e.target;
+  const lat = parseFloat(form.lat.value);
+  const lng = parseFloat(form.lng.value);
+  const comment = form.comment.value.trim();
+  if (!lat || !lng || !comment) {
+    alert("全ての項目を正しく入力してください。");
+    return;
+  }
+
+  const timestamp = new Date();
+
+  try {
+    await addDoc(commentsCollection, { lat, lng, comment, timestamp });
+    alert("コメントを保存しました！");
+    form.reset();
+  } catch (err) {
+    console.error(err);
+    alert("コメントの保存に失敗しました。");
+  }
+});
+
+window.addEventListener("load", () => {
+  loadComments();
+});