2.9 KiB
2.9 KiB
家計簿アプリ
MoneyForward のCSVを取り込んで複式簿記で管理する個人用Webアプリ。
起動方法
npm run dev
# → http://localhost:5173
技術スタック
- React 18 + TypeScript + Vite
- Tailwind CSS（ダークテーマ、slate系カラー）
- Zustand（状態管理、localStorageにpersist）
- PapaParse（Shift-JIS CSV読み込み）
- Recharts（棒グラフ・ドーナツ円グラフ）
主要ファイル
| ファイル | 役割 |
|---|---|
src/types/index.ts |
型定義（Account, Transaction, JournalEntry等） |
src/utils/accounts.ts |
勘定科目マスタ・カテゴリ/金融機関マッピングのデフォルト値 |
src/utils/csvParser.ts |
MoneyForward CSVパース → 複式仕訳変換 |
src/utils/bookkeeping.ts |
残高計算・P/L・B/S・元帳構築ロジック |
src/store/index.ts |
Zustandストア（全データ管理） |
src/components/ |
各画面コンポーネント |
画面構成
- ダッシュボード: 月次収支サマリ、棒グラフ、支出内訳円グラフ、費目別ランキング
- CSVインポート: Shift-JIS CSV ドロップ→仕訳変換（重複自動スキップ）
- 仕訳帳: 全仕訳一覧（列幅リサイズ対応）
- 総勘定元帳: 勘定科目別の借方/貸方/残高明細
- バランスシート: 貸借対照表（B/S）と損益計算書（P/L）タブ
- 設定・マッピング: MFカテゴリ→勘定科目、金融機関→資産勘定のマッピング管理
重要な設計上の注意点
_skip_ accountId
ATM引き出し・Suicaチャージ・口座間振替など「資産間移動」はカテゴリマッピングで _skip_ を指定すると仕訳生成をスキップする。ただし 天引き貯金 と 投資用振り込み は資産移動だが支出として計上する方針。
勘定科目タイプ
asset / liability / equity / income / expense の5種。normalBalance が debit なら借方残高科目、credit なら貸方残高科目。
選択月の共有
selectedMonth はZustandストアで全ページ共有。ページ切り替えで月選択がリセットされないようにしている。
データの保存場所
全データはブラウザの localStorage に保存（Zustand persist）。ブラウザの閲覧データを削除すると消える。コードからは参照不可。
よくある改善作業
- 未分類カテゴリの追加:
src/utils/accounts.tsのDEFAULT_CATEGORY_MAPPINGSまたはDEFAULT_INSTITUTION_MAPPINGSに追記し、「設定」画面で「デフォルトを再適用」ボタンを押してもらう - 勘定科目の追加:
src/utils/accounts.tsのDEFAULT_ACCOUNTSに追記（idはユニークな文字列、orderで表示順を制御） - 新しいMF金融機関の追加:
DEFAULT_INSTITUTION_MAPPINGSに追記