react×laravel10で家計簿アプリ作成

カケポン: シンプルに使えて続けやすい家計簿アプリを作ってみた

はじめに

家計簿を「続ける」のが難しいからこそ、楽しく続けられる体験を追求したアプリを開発しました。

---

📱 アプリ全体像

カケポンは、3つの主要画面（ホーム・取引登録・カテゴリ分析）を軸に、日々の家計管理が無理なく続けられるUI設計になっています。

• ホーム（ダッシュボード）
  月ごとの収支サマリー、日別の取引一覧が一画面で確認可能。シンプルなグラフで支出傾向が直感的にわかります。

• 取引登録画面
  ＋ボタンからワンタップで登録開始。金額とカテゴリを選んで即保存できるので、記録が習慣化しやすい設計です。

• カテゴリ分析画面
  カテゴリ別の支出を円グラフで可視化。どこにお金を使っているかを定期的に振り返ることができ、支出の見直しにも役立ちます。

操作はすべてモバイルファーストで設計しており、片手でサクサク入力・確認ができる軽快な体験を提供しています。

---

🗄️ DB 設計図

本アプリのデータベースは、「ユーザー」「カテゴリ」「収支の記録」「月別予算」など、家計簿に必要な最小限かつ拡張性のある構成を採用しています。

ユーザーごとのデータ分離により、個人利用に特化

収入・支出のカテゴリを個別に管理し、柔軟な分類が可能

収支記録は日付・カテゴリ・金額・メモ付きで記録でき、集計に最適で、予算管理機能も備えています。

📄 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 + TypeScript (Vite)
• Laravel 10 + Sanctum
• AWS (Route53, CloudFront, S3, ECS Fargate, RDS, S3)
• GitHub Actions (CI/CD)

実装ポイント

1. 完全 SPA 化でレスポンス向上
2. モバイルファーストデザイン
3. 自動デプロイワークフローの構築
4. AWS 上でのインフラ IaC 設計

関連リンク

• 設計資料: https://drive.google.com/drive/folders/1PmtkIZxj6BMiNiYzRp1_RseaNJvh7naz?usp=sharing

---