🎉
カケポン: react×laravel10で楽しく続けられるミニマル家計簿アプリを作ってみた
カケポン: 楽しく続けられるミニマル家計簿アプリを作ってみた
家計簿アプリ「カケポン」を一から開発した経験をまとめました。
📱 アプリ全体像
カケポンは、3つの主要画面（ホーム・取引登録・カテゴリ分析）を軸に、日々の家計管理が無理なく続けられるUI設計になっています。
-
ホーム（ダッシュボード）
月ごとの収支サマリー、日別の取引一覧が一画面で確認可能。シンプルなグラフで支出傾向が直感的にわかります。 -
取引登録画面
＋ボタンからワンタップで登録開始。金額とカテゴリを選んで即保存できるので、記録が習慣化しやすい設計です。 -
カテゴリ分析画面
カテゴリ別の支出を円グラフで可視化。どこにお金を使っているかを定期的に振り返ることができ、支出の見直しにも役立ちます。
操作はすべてモバイルファーストで設計しており、片手でサクサク入力・確認ができる軽快な体験を提供しています。
🗄️ DB 設計図
本アプリのデータベースは、「ユーザー」「カテゴリ」「収支の記録」「月別予算」など、家計簿に必要な最小限かつ拡張性のある構成を採用しています。
ユーザーごとのデータ分離により、個人利用に特化
収入・支出のカテゴリを個別に管理し、柔軟な分類が可能
収支記録は日付・カテゴリ・金額・メモ付きで記録でき、集計に最適で、予算管理機能も備えています。
☁️ インフラ構成図
カケポンのインフラは AWS 上に構築されたコンテナベースのモダンな構成を採用しています。
- フロントエンドは React (Vite) 製の SPA を S3 + CloudFront 上にホスティングし、高速かつセキュアな配信を実現
- バックエンド API（Laravel） は ECS Fargate にコンテナとしてデプロイ。ロードバランサ経由でリクエストを受け付け
- MySQL (RDS) はプライベートサブネット内に配置し、外部アクセスを遮断。セキュアなデータ管理を実現
- Route 53 + ACM により独自ドメイン・SSL 対応を構成
- CI/CD は GitHub Actions を使い、main ブランチへの push をトリガーに API を自動デプロイ
シンプルながらスケーラビリティとセキュリティを意識した設計で、個人開発でも本番運用に耐える構成を目指しました。
🧭 コンセプト
- 毎日続けられるミニマルで快適な UI
- カテゴリ別に支出・収入をスッキリ整理
- 習慣化支援／共有家計管理／固定費設定などの拡張も見据えた設計
🛠 技術スタック
- フロントエンド: React (Vite + TypeScript)
- バックエンド: Laravel 10 (REST API)
- 認証: Laravel Sanctum（セッション管理）
- インフラ: AWS (Fargate, ECS, RDS, Route53, ACM, S3, CloudFront)
- CI/CD: GitHub Actions (main ブランチ push → 自動デプロイ)
⚙️ 実装ポイント
- SPA 構成で UX 重視の高速レスポンス
- モバイルファースト UI で快適な入力体験
- GitHub Actions によるステージング〜本番の自動デプロイ
- AWS 上でのドメイン取得／SSL／DB 設計まで一貫構築
📘 詳細設計資料 →
Discussion