家族で家計を見つめ直すためのダッシュボードアプリケーション。 TSVデータを読み込み、多角的な分析ビューを提供します。
- 直感的なサマリー表示: 月間の収入・支出・収支を一目で把握
- 多彩なチャート: 折れ線グラフ、円グラフ、棒グラフ、ヒートマップで可視化
- 柔軟なフィルタリング: 年月、カテゴリ、金融機関、キーワードで絞り込み
- 支出ランキング: どこにお金を使っているか一目瞭然
- 明細テーブル: ソート・ページネーション付きの詳細一覧
- Node.js: 20.x 以上
- npm: 10.x 以上（または pnpm / yarn）
git clone https://github.com/your-username/kakeibo.git
cd kakeibonpm installnpm run devブラウザで http://localhost:5173 を開くとダッシュボードが表示されます。
家計データは public/data/data.tsv に配置します。
mkdir -p public/data
# data.tsv を public/data/ にコピータブ区切り（TSV）形式で、以下のカラムが必要です：
| カラム名 | 説明 | 例 |
|---|---|---|
| 計算対象 | 集計に含めるか（1=含める） | 1 |
| 日付 | YYYY/MM/DD形式 | 2025/12/25 |
| 内容 | 取引の説明 | マルエツ鹿島田店 |
| 金額（円） | 正=収入、負=支出 | -2931 |
| 保有金融機関 | 銀行・カード名 | 三井住友カード |
| 大項目 | カテゴリ | 食費 |
| 中項目 | サブカテゴリ | 食料品 |
| メモ | 備考（任意） | |
| 振替 | 振替フラグ（0=通常） | 0 |
| ID | ユニークID | abc123... |
計算対象 日付 内容 金額（円） 保有金融機関 大項目 中項目 メモ 振替 ID
1 2025/12/25 給料 483127 三菱UFJ銀行 収入 給与 0 xxx
1 2025/12/25 マルエツ鹿島田店 -2931 三井住友カード 食費 食料品 0 yyy| コマンド | 説明 |
|---|---|
npm run dev |
開発サーバー起動（HMR対応） |
npm run build |
プロダクションビルド |
npm run preview |
ビルド結果のプレビュー |
npm run test |
テスト実行（ウォッチモード） |
npm run test:ui |
Vitest UI でテスト実行 |
npm run test:coverage |
カバレッジ付きテスト |
npm run lint |
ESLint 実行 |
npm run lint:fix |
ESLint 自動修正 |
npm run format |
Prettier でフォーマット |
npm run typecheck |
TypeScript 型チェック |
画面上部に表示される3つのカード：
- 月間収入: 当月の収入合計と前月比
- 月間支出: 当月の支出合計と前月比
- 収支バランス: 収入 - 支出 と前月比
データを絞り込むためのコントロール：
- 年: 表示する年を選択
- 月: 表示する月を選択（「すべて」で年間表示）
- カテゴリ: 特定のカテゴリのみ表示
- 金融機関: 特定の金融機関のみ表示
- 検索: 取引内容をキーワード検索
12ヶ月の収入・支出・収支の推移を表示。季節変動やトレンドを把握できます。
支出の内訳を大項目別に表示。どのカテゴリにお金を使っているか一目でわかります。
カテゴリ別の支出額を棒グラフで比較表示。
どの銀行・カードでいくら使っているかを表示。
給与、ポイント、副収入など収入源の内訳を表示。
中項目別の支出TOP10を表示。どのサブカテゴリに最も支出しているかがわかります。
10,000円以上の大きな出費を一覧表示。想定外の出費をすぐに確認できます。
各月×各カテゴリの支出をヒートマップで可視化。季節ごとの支出パターンを把握できます。
すべての取引を一覧表示：
- ソート: 日付・金額・カテゴリでソート可能
- ページネーション: 1ページ20件ずつ表示
- フィルター連動: 上部フィルターの設定が反映
kakeibo/
├── public/
│ └── data/
│ └── data.tsv # 家計データ（TSV形式）
├── src/
│ ├── components/
│ │ ├── ui/ # 汎用UIコンポーネント
│ │ ├── charts/ # チャートコンポーネント
│ │ ├── dashboard/ # ダッシュボード固有コンポーネント
│ │ └── layout/ # レイアウトコンポーネント
│ ├── hooks/ # カスタムフック
│ ├── contexts/ # React Context
│ ├── services/ # データ読み込み・パース
│ ├── utils/ # ユーティリティ関数
│ ├── types/ # TypeScript型定義
│ ├── constants/ # 定数定義
│ ├── App.tsx # アプリケーションルート
│ └── main.tsx # エントリーポイント
├── doc/ # 設計ドキュメント
└── tests/ # E2Eテスト
| カテゴリ | 技術 |
|---|---|
| UI | React 19 + TypeScript |
| チャート | Recharts |
| スタイル | Tailwind CSS v4 |
| ビルド | Vite |
| テスト | Vitest + React Testing Library |
| コード品質 | ESLint + Prettier + Husky |
| バリデーション | Zod |
- Chrome / Edge（最新版）
- Firefox（最新版）
- Safari（最新版）
MIT License
詳細な設計仕様は doc/ ディレクトリを参照してください：