Skip to content

gtn-74/marumie

 
 

Repository files navigation

みらいまる見え家計簿

License: AGPL v3 TypeScript Next.js

プロジェクト構成

このプロジェクトは以下のディレクトリ構成で構築されています:

ディレクトリ構造

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 ローカル開発環境を使用してローカル開発を行います。

開発環境セットアップ

  1. 初回セットアップ(推奨)
pnpm run dev:setup

このコマンドで依存関係のインストール、データベースのリセット・マイグレーション・シードデータの投入を一括実行します。

  1. 開発サーバーの起動
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          # テスト実行

Supabase 管理

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

ブラウザからの確認方法

モックデータの使用

webapp/.env.local に以下を追加してモックデータを有効化:

USE_MOCK_DATA=true

設定後、トランザクションページのバックエンドがモックデータを返すようになります。

サンプルデータ (まる見え家計簿用 CSV データの作成方法)

銀行・クレジットカード明細 CSV の変換

各金融機関から取得した CSV を「まる見え家計簿」で利用可能な統一フォーマットに変換できます。

ディレクトリ構成

data/
├── config.yaml          # 変換設定ファイル
├── convert_csv.sh       # 変換スクリプト
├── input/              # 変換元CSVファイルの配置先
│   ├── 2025-01/        # 年月ごとにディレクトリを作成
│   ├── 2025-02/
│   └── ...
└── output/             # 変換後CSVファイルの出力先
    ├── 2025-01/
    ├── 2025-02/
    └── ...

使い方

  1. 入力ファイルの配置

    data/input/ 以下に年月ディレクトリ(YYYY-MM形式)を作成し、各金融機関から取得した CSV ファイルを配置します。

    mkdir -p data/input/2025-01
    # CSVファイルをdata/input/2025-01/にコピー
  2. 設定ファイルの編集(必要に応じて)

    data/config.yaml で以下を設定できます:

    • 銀行・カードごとの列マッピング(日付、摘要、金額など)
    • ファイル名パターン(例: UFJ_sample_*.csv
    • カテゴリ分類ルール(キーワードによる自動分類)
  3. 変換スクリプトの実行

    cd data
    bash convert_csv.sh

    変換された CSV ファイルは data/output/YYYY-MM/unified_YYYY-MM.csv に出力されます。

  4. 変換結果のアップロード

    管理画面( http://localhost:3001 )の「CSV アップロード」機能から、data/output/ 内の統一 CSV ファイルをアップロードします。

サポートされている形式

現在、以下の金融機関に対応しています:

  • UFJ 銀行(UFJ_sample_*.csv

新しい金融機関を追加する場合は、data/config.yamlbanks セクションに設定を追加してください。

ライセンス

このプロジェクトは GNU Affero General Public License v3.0 の下でライセンスされています。

コントリビューション

このプロジェクトへのコントリビューションを行う場合は、コントリビューターライセンス契約(CLA) への同意が必要です。

ライセンス表示

このソフトウェアを使用する場合は、適切なライセンス表示を行ってください。詳細は LICENSE ファイルをご確認ください。

About

家計簿金の流れを透明性を持って公開するプラットフォームです

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.5%
  • Shell 1.7%
  • Other 1.8%