Features
支出ダッシュボード
月額・年額の合計と、カテゴリ別ドーナツチャートで支出の全体像を即座に把握
カテゴリ自動判定
Netflix、Spotify 等 30 以上のサービスを自動分類。9 カテゴリで支出の内訳を可視化
6 ヶ月トレンド分析
月ごとの支出推移をラインチャートで表示。前月比の増減を一目で確認
完全オフライン対応
PWA としてインストール可能。データはブラウザ内に保存され、サーバーへの通信は一切なし
Tech Stack
| Frontend | React 19 + TypeScript + Vite |
|---|---|
| Styling | Vanilla CSS + CSS Variables |
| Storage | SQLite WASM (OPFS) + localStorage fallback |
| Charts | Chart.js + react-chartjs-2 |
| PWA | vite-plugin-pwa + Workbox |
| Testing | Vitest + Playwright |
| Deploy | Cloudflare Pages |
Design Decisions
ローカルファースト — サーバーレス設計
すべてのデータをブラウザ内の SQLite WASM (OPFS) に保存し、外部サーバーとの通信をゼロに。金銭データというセンシティブな情報を端末外に出さないプライバシーファーストなアーキテクチャ。
SQLite WASM + OPFS / localStorage フォールバック
OPFS 対応ブラウザでは高速な SQLite WASM を使用し、非対応環境では localStorage に自動フォールバック。デバウンス付きの双方向同期で、どちらの環境でも安定したデータ永続化を実現。
カテゴリ自動判定によるゼロコンフィグ UX
30 以上のサービスプリセットを内蔵し、サービス名入力時にカテゴリを自動サジェスト。入力の手間を最小化しつつ、正確なカテゴリ分析を提供。