カレンダー型家計簿
カレンダーで収支を一目で把握できる家計簿 Web アプリです。クレジットカードの CSV を取り込むだけで家計管理が完結します。
スクリーンショット
機能一覧
使い方の手順はアプリ内の /about/help（各画面の「？」からも開けます）。
| 機能 | 説明 |
|---|
| 📅 カレンダー（ホーム） | 日ごとの収支をカレンダーで表示。日付を押してその日の取引を見る・追加する |
| 📷 レシート | レシートを撮ると AI（Claude Haiku）が読み取り、確認して登録。手入力もここから |
| 📋 収支一覧 | 取引の検索・編集・削除 |
| 💬 チャット | 「ダッシュボード出して」でマイメニューに機能を足す・外す・並べ替える。無い機能は要望として送れる |
| 📥 CSV インポート | 家計簿アプリ形式（確認画面つき・重複は増えない）とエポス・セゾンの明細。取り込みの取り消しも可 |
| 🔍 要確認 | カテゴリー未設定・返金候補などを月ごとにまとめて直す |
| 🔁 定期の収入・支出 | 毎月・毎週・毎年の収入・支出を登録すると支払日に自動で記録（毎日の cron） |
| 🔔 サブスク | 次回更新が近い順、月・年あたりの合計、管理・解約ページへのリンク、支払いカード |
| 📊 ダッシュボード | 月ごとの収入・支出・カテゴリー別の内訳 |
| 📖 数字の定義 | 支出・収入・今月・予定などの数え方（/about/definitions、ログイン前でも読める） |
| ⚙️ 設定 | 口座・カテゴリー、データと書き出し（家計簿アプリ形式 CSV・完全形式 JSON のバックアップ・Google スプレッドシート・復元・全削除） |
| ❓ 使い方 | 最初の設定→CSV 取り込み→要確認→定期・サブスク→書き出し（/about/help） |
メニューは固定の5つ（カレンダー・レシート・収支一覧・チャット・設定）＋本人がチャットで選ぶマイメニュー。機能の一覧は src/lib/menu/catalog.ts。
技術スタック
| カテゴリ | 技術 |
|---|
| フレームワーク | Next.js 16 (App Router, TypeScript) |
| スタイリング | Tailwind CSS |
| UI コンポーネント | shadcn/ui |
| グラフ | Recharts |
| 認証 | Supabase Auth |
| データベース | PostgreSQL (Supabase) |
| ORM | Prisma 7 |
| CSV パース | papaparse |
| ローカル開発 | Docker + Supabase CLI |
ローカル開発環境のセットアップ
前提条件
- Node.js 18 以上
- Docker Desktop
- Supabase CLI
手順
1. リポジトリをクローン
git clone <repository-url>
cd kakebo_next/app
2. 依存パッケージをインストール
npm install
3. Prisma クライアントを生成
npx prisma generate
4. Docker Desktop を起動してから Supabase をスタート
supabase start
初回はイメージのダウンロードに 5〜10 分かかります。
5. 接続情報を確認
supabase status
出力例：
Project URL : http://127.0.0.1:54321
Publishable : sb_publishable_XXXXXXXXXX
Secret : sb_secret_XXXXXXXXXX
DB URL : postgresql://postgres:[email protected]:54322/postgres
6. .env.local を作成
cp .env.local.example .env.local
.env.local を開いて supabase status の値を入力します：
NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=sb_publishable_XXXXXXXXXX
SUPABASE_SERVICE_ROLE_KEY=sb_secret_XXXXXXXXXX
DATABASE_URL=postgresql://postgres:[email protected]:54322/postgres
7. マイグレーションを適用
supabase migration up
8. 開発サーバーを起動
npm run dev
9. ブラウザで開く
http://localhost:3000
使い方
1. アカウント登録
/signup からメールアドレスとパスワードで登録します。登録後は自動でログインされます。
2. 口座を登録する
設定（⚙️）→ 口座管理 から「+ 口座を追加」で現金・クレジットカード・銀行口座を登録します。
3. 収支を手動入力する
カレンダーの日付マスをクリックするとモーダルが開きます。支出・収入を選択して金額・カテゴリ・口座を入力して「保存」します。
カレンダーの日付マスに金額が反映され、月次サマリーも自動更新されます。
4. 固定費を登録する
固定費（🔁）画面から「+ 固定費を追加」で月額・引き落とし日・口座を登録します。トグルを ON にすると毎月ログイン時に自動で収支に追加されます。
5. CSV をインポートする
CSV インポート（📥）画面でカード会社（エポス / セゾン）を選択し、口座を指定してから CSV ファイルをドラッグ＆ドロップします。
6. ダッシュボードで確認する
ダッシュボード（📊）では月ごとの合計収入・支出・残高とカテゴリ別の内訳をグラフで確認できます。
7. 収支一覧を確認する
収支一覧（📋）では月ごとの全収支をテーブルで確認できます。「すべて・支出・収入」でフィルタリングが可能です。手動・固定費・CSV の種別バッジも表示されます。
対応 CSV フォーマット
| カード会社 | 取得方法 |
|---|
| エポスカード | エポスNet → 明細照会 → CSV ダウンロード |
| セゾンカード | セゾン Netアンサー → ご利用明細 → CSV ダウンロード |
ディレクトリ構成
src/
├── app/
│ ├── (dashboard)/ # 認証済みページ群
│ │ ├── layout.tsx # 共通レイアウト（サイドバー）
│ │ ├── calendar/ # カレンダー画面
│ │ ├── dashboard/ # ダッシュボード
│ │ ├── transactions/ # 収支一覧
│ │ ├── fixed-costs/ # 固定費管理
│ │ ├── import/ # CSV インポート
│ │ └── settings/ # 設定
│ ├── api/v1/ # API Routes
│ │ ├── transactions/
│ │ ├── categories/
│ │ ├── accounts/
│ │ ├── fixed-costs/
│ │ ├── import/
│ │ └── dashboard/
│ ├── login/ # ログイン画面
│ └── signup/ # 新規登録画面
├── components/
│ ├── layout/ # Sidebar, FixedCostGenerateTrigger
│ ├── calendar/ # CalendarView, CalendarDay
│ ├── dashboard/ # DashboardView
│ ├── transactions/ # TransactionView
│ ├── fixed-costs/ # FixedCostView
│ ├── import/ # CsvImportView
│ └── settings/ # SettingsView
├── hooks/
│ └── useTransactions.ts # 収支データ取得・CRUD
├── lib/
│ ├── prisma.ts # Prisma クライアント（Singleton）
│ ├── api-helpers.ts # 認証・レスポンスヘルパー・シリアライザ
│ ├── supabase/ # Supabase クライアント
│ └── csv/ # CSV パーサー（エポス・セゾン）
└── types/
├── api.ts # API リクエスト・レスポンス型
└── database.ts # DB テーブル型定義
環境変数
| 変数名 | 説明 |
|---|
NEXT_PUBLIC_SUPABASE_URL | Supabase プロジェクト URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY | Supabase Publishable キー |
SUPABASE_SERVICE_ROLE_KEY | Supabase Secret キー（サーバーサイドのみ） |
DATABASE_URL | PostgreSQL 接続 URL（Prisma 用） |
OWNER_USER_IDS | 社長専用機能（予算台帳）を使える Supabase ユーザー ID（カンマ区切り）。未設定なら誰も使えない。値はコードに書かない |
テスト
テスト駆動で進めています（Issue ryusei2790/mywork#229）。テストの一覧と ID（S1〜S8, T1〜T4 …）は設計資料側にあります。
| コマンド | 中身 | 必要なもの |
|---|
npm test | 単体テスト（tests/unit）。DB 不要、数秒 | なし |
npm run test:db | DB 結合・API テスト（tests/db, tests/api）。ローカル Supabase に RLS 有効のまま繋ぐ | supabase start |
npm run test:all | 上の2つを両方 | supabase start |
npm run test:e2e | Playwright（tests/e2e、スマホ幅 375px）。画面の導線 W1〜W6。本番ビルドをポート 3100 で起動して回す（約2分） | supabase start、npx playwright install chromium |
ローカルでの立ち上げ
npm ci
npx prisma generate
supabase start # 初回は Docker イメージの取得で数分かかる
supabase migration up # 新しい migration を足したとき（既存 DB に追加で当てる）
npm test && npm run test:db
- テストは
.env / .env.local を読みません。接続先は supabase status から取り、127.0.0.1 / localhost 以外の DB には繋がない安全装置があります（tests/helpers/global-setup.ts）
- ユーザーはテストごとにランダムなメール（
@example.test）で作るので、DB を毎回作り直す必要はありません。作り直したいときは npm run db:reset
- テストは
TZ=Asia/Tokyo で動きます。本番（Vercel）は UTC なので、TZ に依存した日付計算があると落ちるようにしてあります
DB への触り方（重要）
- DB には必ず
src/lib/db.ts の withUserDb(user.id, async (db) => ...) 経由で触ります。中では Postgres のロールを authenticated に下げ、auth.uid() をログイン中のユーザーにしてから実行するので、アプリの経路にも RLS が効きます
- route から
@/lib/prisma を直接 import すると eslint エラーになります
- 例外は
src/lib/admin-db.ts だけ。全員分を横断する処理（定期支出の毎日の展開で対象者を探す・レシート読み取りの回数を数える）を置き、返すのは ID や件数だけにしています
- それでもアプリ側で
userId の絞り込みと参照先（口座・カテゴリ）の所有確認（src/lib/ownership.ts）を続けます（二重の守り）
環境変数（追加分）
| 変数 | 用途 | 既定 |
|---|
RECEIPT_PARSER | レシート読み取りの提供元 mock / openrouter / anthropic | 開発は mock。本番で未設定ならエラー |
RECEIPT_MODEL | 例 anthropic/claude-haiku-5.5（openrouter）、claude-haiku-5-5（anthropic） | 左の例 |
RECEIPT_PROVIDER_ORDER | OpenRouter で固定する提供元（カンマ区切り） | anthropic |
OPENROUTER_API_KEY / ANTHROPIC_API_KEY | 提供元の鍵。公開版専用のキーに使用額の上限を付けて使う | なし |
RECEIPT_QUOTA_USER_DAY / _USER_MONTH / _GLOBAL_MONTH | 読み取りの上限 | 5 / 30 / 3000 |
CRON_SECRET | 毎日の定期実行（/api/cron/fixed-costs、vercel.json）の鍵。未設定なら定期実行は 401 で動かない | なし |
OWNER_USER_IDS | 社長アカウント（予算台帳を使える・全体の読み取り上限から除く） | なし |
ライセンス
MIT
