💰 おこづかい管理アプリ (Allowance App)

日々の収入と支出を記録して、残高をサッと把握できるシンプルなおこづかい管理アプリです。 フレームワークに頼らず 素の HTML / CSS / JavaScript で実装し、PWA に対応させているので、スマホのホーム画面に追加してネイティブアプリのように使えます。

🚀 デモ

ブラウザで開くだけですぐに使えます（インストール不要）。

👉 https://allowance-app-rho.vercel.app/

スマホで開いて「ホーム画面に追加」すると、アプリとして起動できます。

✨ 主な機能

• 収入・支出の記録 — 日付・カテゴリ・金額・メモを入力して、お金の出入りを管理
• 残高の自動計算 — 記録したデータから現在の残高を自動表示
• 履歴の一覧表示 — これまでの取引をまとめて確認
• PWA 対応 — ホーム画面に追加可能。Service Worker によりオフラインでも起動

🛠 使用技術

分類	使用技術
言語	HTML5 / CSS3 / JavaScript (Vanilla)
アプリ化	PWA (Web App Manifest + Service Worker)
ホスティング	Vercel

フレームワークを使わずに実装することで、DOM操作や状態管理、Service Workerの仕組みを自分の手で理解することを意識しました。

💻 ローカルでの動かし方

ビルド工程はありません。静的ファイルをローカルサーバーで配信するだけで動作します （Service Worker は file:// では動かないため、簡易サーバー経由で開く点に注意してください）。

# リポジトリをクローン
git clone https://github.com/taru104/allowance-app.git
cd allowance-app

# 任意の簡易サーバーで配信（例）
npx serve .
# または
python3 -m http.server 8000

ブラウザで表示されたローカルアドレス（例: http://localhost:8000）を開いてください。

📁 ファイル構成

allowance-app/
├── index.html          # 画面の構造
├── style.css           # スタイル
├── script.js           # ロジック（記録・残高計算・履歴表示）
├── manifest.json       # PWA 設定
├── service-worker.js   # オフライン対応
├── icon-192.png
└── icon-512.png

📝 今後の改善点 (Future Work)

• データの保存先を localStorage から外部DBへ移行し、複数端末で同期できるようにする
• カテゴリ別の支出グラフを追加して可視化する
• 入力フォームのバリデーション強化

---

個人開発のプロジェクトです。