Zenn
🙄

JavaScriptで作る「気分チェンジャー」：毎日アプリ作成チャレンジ2日目の記録

に公開
JavaScript
初心者向け
webアプリ開発
毎日アプリ作成チャレンジ
tech

JavaScriptで作る「気分チェンジャー」：毎日アプリ作成チャレンジ2日目の記録

こんにちは。毎日アプリ作成チャレンジ2日目のアウトプットとして、「気分を記録して、おすすめをランダム表示するミニアプリ」を作成しました。

🎯 アプリ概要

  • ユーザーが今の気分（😄😐😞😠）を選ぶ
  • 選んだ気分に応じて：
    • 名言
    • 行動アドバイス
    • おすすめのBGM/動画
      などがランダムに表示されます
  • localStorage で前日の気分も記録＆比較できます

🔧 技術スタック

  • HTML / CSS / JavaScript
  • JSONファイル読み込み（fetch）
  • localStorage を使った状態保存

🗂 ファイル構成

mood-changer/
├── index.html
├── style.css
├── main.js
├── moods.json
└── assets/
    ├── smile.png
    ├── neutral.png
    ├── sad.png
    └── angry.png

💡 実装のポイント

JSONからランダム取得

const random = list[Math.floor(Math.random() * list.length)];

localStorageで「前回の気分」記録

localStorage.setItem("todayMood", mood);
const yesterday = localStorage.getItem("todayMood");

🔗 GitHubリポジトリ

ソースコードはこちらで公開しています：

👉 GitHub - mood-changer

✍️ 作ってみて思ったこと

  • JSON形式のデータと組み合わせるだけで、思った以上にリッチな「感情 × 提案」のロジックが作れた
  • localStorageだけでも、ちょっとした「前日の自分」と比べるUIが作れるのが面白い
  • 画像・データを分離しておけば、気分を10種類に増やすのも簡単そう

🏁 まとめ

  • 気分を記録して、ちょっとした癒しや気づきをくれるアプリ
  • JavaScriptとJSONの基本を練習するのにぴったり
  • 毎日1つずつ作るチャレンジ、想像以上に楽しい！

Discussion