手入力家計簿

プロジェクト概要

「自動連携より、自分で記録する」をコンセプトにした個人向け家計簿Webアプリです。

マネーフォワードなど自動連携機能がある家計簿アプリではクレジットカードで支払った情報がアプリに反映されるまで数日のラグがあります。

リアルタイムに当月の収支状況を把握するには全ての収支を手入力すれば把握できると気づいたため、あえて全て手入力の家計簿アプリを作成しました。

収支の手入力・カテゴリ管理・月次予算・グラフ分析・固定費の自動適用・月末精算など、日常的な家計管理に必要な機能を一通り備えています。ブラウザさえあれば使えるWebアプリとして設計し、PCでもスマートフォンでも同じ体験で利用できます。

技術スタック

フレームワーク・言語

Next.js 16（App Router） をベースフレームワークとして採用。サーバーコンポーネントでのデータ取得とクライアントコンポーネントの明確な分離を意識した設計にしています。言語は TypeScript で統一し、厳密な型付けにより型安全性を担保しています。

バックエンド・認証

Supabase をバックエンドとして採用。データベース（PostgreSQL）・認証・Row Level Securityを一元管理しています。認証は Google OAuth を利用し、@supabase/ssr によりサーバーコンポーネントからも安全にセッションを参照できる構成です。

スタイリング

Tailwind CSS v4 を採用。ユーティリティクラスベースで一貫したデザインを構築しています。

グラフ・UI

Recharts を用いてカテゴリ別の円グラフ・月別推移の棒グラフ・収支推移の折れ線グラフを実装しています。カテゴリの並び替えには dnd-kit を採用し、ドラッグ&ドロップでの直感的な操作を実現しています。

ホスティング

Vercel にデプロイ。東京リージョン（hnd1）を指定し、国内ユーザーへのレイテンシを最小化しています。

アーキテクチャ・設計方針

データベース設計

Supabase（PostgreSQL）上に必要なテーブルを構築しています。全テーブルに Row Level Security（RLS） を適用し、ログインユーザー自身のデータにのみアクセスできる設計です。

こだわったポイント

固定費の自動適用

毎月繰り返す固定費（家賃・サブスクなど）をマスタとして登録しておくと、その月に初めてホームを開いた際に自動でトランザクションへ展開されます。Next.js の after() を利用してレスポンス返却後にバックグラウンド処理として実行しており、画面表示を遅延させません。

CSVインポート

既存の家計簿データを移行できるよう、CSV形式での一括インポートに対応しています。

カテゴリのドラッグ&ドロップ並び替え

設定画面でのカテゴリ順序を dnd-kit によるドラッグ&ドロップで変更できます。並び順はDBに保存され、グラフや一覧表示にも反映されます。