😊

【毎日アプリチャレンジ1日目】Vanilla JSで気分記録アプリを作った話

に公開
JavaScript
webアプリ
VanillaJS
ポートフォリオ
localstorage
tech

はじめに

こんにちは、森宝松（@morihoumatsu）です。

「毎日1つアプリを作るチャレンジ」をスタートしました！
1日目は、気分をワンタップで記録できるシンプルなWebアプリ「MoodTrack One」を作成しました。

この記事では、アプリの概要・設計・学んだことをまとめていきます📝

アプリの概要とコンセプト

🎯 アプリ名

MoodTrack One（ムードトラック・ワン）

🧠 コンセプト

  • その日の気分を「絵文字ボタン」で記録
  • ログが日付付きで一覧表示される
  • localStorageで保存するだけの超軽量設計

💡 想定ユーザー

  • 毎日なんとなく気分を振り返りたい人
  • 気分ログの習慣を始めたい人

使用した技術

技術 内容
HTML/CSS シンプルなレイアウトとレスポンシブ対応
Vanilla JS DOM操作とlocalStorageの基本を活用
localStorage ブラウザ内で永続的に記録を保存
PNG画像 自作の表情アイコン（😊 😐 😢 😠）を表示

フォルダ構成

moodtrack-one/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── assets/
│   └── icons/
│       ├── smile.png
│       ├── neutral.png
│       ├── sad.png
│       └── angry.png
├── data/
│   └── sample.json
└── README.md

実装のポイント

✅ 気分ボタンのクリック → localStorageに保存

const saveMood = (mood) => {
  const logs = JSON.parse(localStorage.getItem("moodLogs") || "[]");
  const today = new Date().toISOString().slice(0, 10);
  logs.unshift({ date: today, mood });
  localStorage.setItem("moodLogs", JSON.stringify(logs));
};

✅ 記録の表示処理（最新順）

const renderLogs = () => {
  const logs = JSON.parse(localStorage.getItem("moodLogs") || "[]");
  const list = document.getElementById("log-list");
  list.innerHTML = "";
  logs.forEach((entry) => {
    const li = document.createElement("li");
    li.textContent = `${entry.date}：${entry.mood}`;
    list.appendChild(li);
  });
};

実際のスクリーンショット

今後の改善ポイント

  • コメント付き記録
  • 週間気分グラフの追加（Chart.jsなど）
  • ダークモード対応
  • JSONエクスポート機能

学んだこと・気づき

  • localStorageの使い方を改めて理解できた
  • アプリの最小構成を意識すると作るのが楽しくなる
  • 作ったものを「公開する前提」で考えるとデザインも意識するようになる

まとめ

1日目は「とにかく完成させる」ことを目標に取り組みました。
短時間でも、毎日積み重ねていくと、ポートフォリオも成長も確実に積み上がる気がしています🔥

次は2日目、少しだけ機能を増やしてみたいと思います。

おわりに

最後まで読んでいただき、ありがとうございました！

ぜひ一緒にやりましょう🙌

Discussion