経費管理システム

概要

FreeeカードとAmexカードの経費CSVデータを統一フォーマットに変換し、CRUD操作できる管理画面。

技術スタック

• フレームワーク: Astro + Cloudflare Adapter
• ストレージ: Cloudflare KV（本番） / ローカルSQLite（開発）
• レンダリング: SSR（Server-Side Rendering）
• 認証: なし（個人利用）

統一データモデル

interface Expense {
  id: string           // UUID
  date: string         // 利用日 (YYYY-MM-DD)
  description: string  // 利用内容
  amount: number       // 金額
  cardCompany: string  // カード会社 (Amex/Freee)
  cardName: string     // カード名 (Amexゴールド/メインカード等)
  category: string     // 会計科目
  sourceFile: string   // 元CSVファイル名
}

CSVフォーマット

Freee CSV（UTF-8 BOM付き）

利用日,利用店名,利用額,取引種類,確定／未確定,備考,領収書添付状況,領収書メモ,最終添付日,利用報告,カード名,カード下4桁
2025-11-02,AMAZON WEB SERVICES,113,売上,確定,...

Amex CSV（Shift_JIS）

ご利用日,データ入力日,ご利用内容,金額,外貨ご利用金額,為替レート
2026/01/15,2026/01/15,アマゾン,"2,200",,

カード会社の自動判定

CSVインポート時、ファイルパスではなくCSVのヘッダー行の内容でカード会社を自動判定する。

• Freee: ヘッダーに 利用日 AND 利用店名 が含まれる場合
• Amex: ヘッダーに ご利用日 が含まれる場合

つまり、CSVファイルをどのフォルダに配置しても、ヘッダー行を見て自動的に判定される。

APIエンドポイント

• GET /api/nad-expenses - 一覧取得
• POST /api/nad-expenses - 新規追加
• GET /api/nad-expenses/[id] - 単一取得
• PUT /api/nad-expenses/[id] - 更新
• DELETE /api/nad-expenses/[id] - 削除
• POST /api/nad-expenses/import - CSVインポート
• GET /api/nad-expenses/export - CSVエクスポート
• DELETE /api/nad-expenses/clear - 全データ削除

ディレクトリ構成

src/
├── lib/
│   └── nad-expense/
│       ├── csv-parser.ts      # CSV変換ロジック
│       ├── storage.ts         # ストレージ抽象化
│       └── expense-service.ts # CRUD操作
├── pages/
│   ├── api/
│   │   └── nad-expenses/
│   │       ├── index.ts       # GET/POST
│   │       ├── [id].ts        # GET/PUT/DELETE
│   │       ├── import.ts      # CSVインポート
│   │       ├── export.ts      # CSVエクスポート
│   │       └── clear.ts       # 全データ削除
│   └── admin/
│       └── nad-expenses.astro # 管理画面UI

ローカル開発

起動

bun dev

管理画面: http://localhost:4321/admin/nad-expenses

ローカルKVデータの確認

開発時のデータは .wrangler/state/v3/kv/ 内のSQLiteに保存される。

# APIで確認（推奨）
curl http://localhost:4321/api/nad-expenses | jq

# SQLiteファイルを特定
ls .wrangler/state/v3/kv/miniflare-KVNamespaceObject/

# SQLiteを直接確認（ファイル名は環境により異なる）
sqlite3 ".wrangler/state/v3/kv/miniflare-KVNamespaceObject/[実際のファイル名].sqlite" \
  "SELECT key FROM _mf_entries;"

値はblob形式で別管理されるため、APIでの確認を推奨。

データのクリア

# 方法1: ディレクトリ削除（開発サーバー停止後）
rm -rf .wrangler/state

# 方法2: API経由（開発サーバー起動中）
curl -X DELETE http://localhost:4321/api/nad-expenses/clear

本番デプロイ

0. Cloudflare認証

wrangler login

1. Cloudflare KV Namespaceの作成

# 経費データ用
wrangler kv namespace create EXPENSES

# セッション用
wrangler kv namespace create SESSION

2. wrangler.tomlの更新

出力されたIDを設定:

[[kv_namespaces]]
binding = "EXPENSES"
id = "実際のnamespace_id"

[[kv_namespaces]]
binding = "SESSION"
id = "実際のnamespace_id"

3. デプロイ

bun run build
wrangler pages deploy dist

注意事項

• ローカルと本番のKVは完全に別物
• Amex CSVはShift_JISエンコーディング（自動判定）
• 重複インポート防止: 日付+金額+内容が同じ場合はスキップ
• .wrangler/ ディレクトリはgitignore済み