このプロジェクトは以下のディレクトリ構成で構築されています:
marumie/
├── webapp/ # フロントエンド(一般ユーザー向け)
│ ├── src/
│ │ ├── app/ # Next.js App Router
│ │ ├── client/ # クライアントサイドコンポーネント
│ │ ├── server/ # サーバーサイドロジック
│ │ └── types/ # 型定義
│ ├── tests/ # テストファイル
│ └── package.json
├── admin/ # 管理画面
│ ├── src/
│ │ ├── app/ # Next.js App Router
│ │ ├── client/ # クライアントサイドコンポーネント
│ │ ├── server/ # サーバーサイドロジック
│ │ ├── types/ # 型定義
│ │ └── middleware.ts
│ ├── tests/ # テストファイル
│ └── package.json
├── shared/ # 共通モデル・型定義・ユーティリティ
│ ├── models/ # 共通データモデル
│ └── utils/ # 共通ユーティリティ関数
├── data/ # サンプルデータ
│ ├── sampledata.csv
│ └── test_current_liabilities.csv
├── supabase/ # Supabaseローカル開発環境設定
│ ├── config.toml
│ └── templates/
├── prisma/ # データベーススキーマ・マイグレーション
│ ├── schema.prisma
│ ├── migrations/
│ └── seed.cjs
├── logs/ # ログファイル
└── docs/ # 設計ドキュメント(その時点での設計メモなので必ずしも正確ではないです)
└── images/ # ドキュメント用画像
- webapp/: 一般ユーザー向けのフロントエンドアプリケーション(家計簿データの可視化)
- admin/: 管理者向けの管理画面(データ登録・管理機能)
- shared/: webapp と admin で共通して使用するモデル、型定義、ユーティリティ関数
- data/: サンプルデータファイル
- supabase/: Supabase ローカル開発環境の設定ファイルとテンプレート
- prisma/: データベーススキーマ定義、マイグレーションファイル、シードデータ
- logs/: ログファイルやデバッグ用データ
- docs/: プロジェクトの設計ドキュメント
- Frontend: Next.js 15, React 19, TypeScript
- Backend: Prisma ORM, Supabase
- Styling: Tailwind CSS v4
- Charts: Recharts, ApexCharts, Nivo
- Database: PostgreSQL (via Supabase)
- Development: pnpm, Biome
- Testing: Jest
※ 表示されている値は実際の値ではありません。
このプロジェクトは Supabase ローカル開発環境を使用してローカル開発を行います。
- 初回セットアップ(推奨)
pnpm run dev:setupこのコマンドで依存関係のインストール、データベースのリセット・マイグレーション・シードデータの投入を一括実行します。
- 開発サーバーの起動
pnpm run dev # Webapp + 管理画面を同時起動(Supabase自動起動)pnpm run dev # Webapp + 管理画面を同時起動(推奨)
pnpm run dev:webapp # Webappのみ起動
pnpm run dev:admin # 管理画面のみ起動pnpm run db:reset # データベース完全リセット(データ削除 + マイグレーション + シード)
pnpm run db:migrate # マイグレーション実行
pnpm run db:seed # シードデータ投入
pnpm run db:studio # Prisma Studio起動pnpm run lint # 全体のLint実行
pnpm run format # コードフォーマット実行
pnpm run typecheck # 型チェック実行
pnpm run test # テスト実行pnpm run supabase:start # Supabaseローカル環境起動
pnpm run supabase:stop # Supabaseローカル環境停止
pnpm run supabase:status # Supabase状態確認pnpm run clean # 全てのnode_modulesとSupabaseを停止
pnpm run fresh # クリーンインストール + セットアップ- Vercel で行われる webapp の build 過程で自動的にマイグレーションが実行されます
- 以下のコマンドでマイグレーションを実行してください:
pnpm run db:migrate-
メインアプリ: https://marumie-kakeibo-hrn0327.netlify.app/o/team-mirai
-
管理画面: https://marumie-kakeibo-hrn0327-admin.netlify.app/users
-
Supabase Studio: https://supabase.com/dashboard/org/wxvunoocumzfosnxunct
-
メインアプリ: http://localhost:3000
-
管理画面: http://localhost:3001
-
Supabase Studio: http://127.0.0.1:54323
webapp/.env.local に以下を追加してモックデータを有効化:
USE_MOCK_DATA=true
設定後、トランザクションページのバックエンドがモックデータを返すようになります。
各金融機関から取得した CSV を「まる見え家計簿」で利用可能な統一フォーマットに変換できます。
data/
├── config.yaml # 変換設定ファイル
├── convert_csv.sh # 変換スクリプト
├── input/ # 変換元CSVファイルの配置先
│ ├── 2025-01/ # 年月ごとにディレクトリを作成
│ ├── 2025-02/
│ └── ...
└── output/ # 変換後CSVファイルの出力先
├── 2025-01/
├── 2025-02/
└── ...
-
入力ファイルの配置
data/input/以下に年月ディレクトリ(YYYY-MM形式)を作成し、各金融機関から取得した CSV ファイルを配置します。mkdir -p data/input/2025-01 # CSVファイルをdata/input/2025-01/にコピー -
設定ファイルの編集(必要に応じて)
data/config.yamlで以下を設定できます:- 銀行・カードごとの列マッピング(日付、摘要、金額など)
- ファイル名パターン(例:
UFJ_sample_*.csv) - カテゴリ分類ルール(キーワードによる自動分類)
-
変換スクリプトの実行
cd data bash convert_csv.sh変換された CSV ファイルは
data/output/YYYY-MM/unified_YYYY-MM.csvに出力されます。 -
変換結果のアップロード
管理画面( http://localhost:3001 )の「CSV アップロード」機能から、
data/output/内の統一 CSV ファイルをアップロードします。
現在、以下の金融機関に対応しています:
- UFJ 銀行(
UFJ_sample_*.csv)
新しい金融機関を追加する場合は、data/config.yaml の banks セクションに設定を追加してください。
このプロジェクトは GNU Affero General Public License v3.0 の下でライセンスされています。
このプロジェクトへのコントリビューションを行う場合は、コントリビューターライセンス契約(CLA) への同意が必要です。
このソフトウェアを使用する場合は、適切なライセンス表示を行ってください。詳細は LICENSE ファイルをご確認ください。