👛

Smart家計簿 – Firebase × Flutter × AI支援で作った Web 家計簿 (MVP)

に公開
AI
Firebase
Flutter
個人開発
Copilot
idea

🚀 はじめに

こんにちは、DAISUKEです。
今回は、自分用に始めて Web 向け家計簿アプリ を一から作って、Firebase Hosting にデプロイし、GitHub にも公開したので紹介します。

このアプリは、Flutter（Web 対応） と Firebase を使い、
ChatGPT / GitHub Copilot（無料枠） を活用しながら設計から実装まで進めた個人開発プロジェクトです。

⚙️ 使用技術スタック

項目 内容
フレームワーク Flutter (Web / 将来的に Android / iOS も対応)
言語 Dart / Flutter
認証 Firebase Authentication
データベース Cloud Firestore
グラフ表示 fl_chart
CSV入出力 独自実装 (CSVインポート・エクスポート機能)
状態管理 Riverpod
テーマ Material 3
ホスティング Firebase Hosting
開発支援 ChatGPT / GitHub Copilot（無料枠）

💡 アプリ概要と主な機能

Smart家計簿は、日々の収入・支出を記録し、
カテゴリ別の割合表示や月別集計などができるシンプルな家計簿 Web アプリです。

主な機能一覧

  • メール/パスワードまたは匿名でログイン（認証）
  • 収入／支出の登録／編集／削除
  • 月別一覧表示・当月収支合計表示
  • カテゴリ別支出の円グラフ表示と月次推移の棒グラフ（過去 6 ヶ月比較など）
  • CSVファイルの インポート／エクスポート（バックアップ・他ツールからのデータ移行対応）
  • カテゴリ編集画面（名前や色などを編集できる）

画面構成

画面 説明 画像
ログイン画面 Firebase Authentication によるログイン / ログアウト ログイン画面
入力画面 支出／収入の登録（カテゴリ・金額・日付など） 入力画面
一覧画面 月ごとの登録履歴を表示、削除操作など 一覧画面
集計画面 円グラフでカテゴリ別割合、棒グラフで過去月比較等 集計画面
カテゴリ編集画面 分類カテゴリを追加・編集・削除できる画面 カテゴリ編集画面

🔍 データ設計

このアプリは公開前提を意識していて、認証ユーザーごとにデータを分けています。

users/{userId}/categories/{categoryd}
users/{userId}/entries/{entryId}

Firestore ドキュメントの主なフィールド例：
categories

フィールド 型 説明
color Number カラーコード
id String ID
name String 名前
order Number 順番

entries

フィールド 型 説明
amount Number 金額
category String 分類カテゴリーのID
date String 選択日付
title String 項目名
type String “income” または “expense”

💬 AI支援を使った開発プロセス

このアプリの設計と実装では、ChatGPT と GitHub Copilot（無料枠） を組み合わせて開発しました。

  • 要件定義・設計の整理は ChatGPT に相談
  • UI や CRUD ロジックなどのコード生成は Copilot に依頼
  • 実装後は Copilot 生成のコードを確認 → 修正・追加依頼 を繰り返すスタイル
  • Copilot Chat は月 50 回まで無料で利用でき、今回 2 月分の無料枠をフル活用
  • 気づき：複数回修正を繰り返すと、一部の機能を“忘れて” 過去に要求した内容が削除されてしまうことがあった
    → GitHub Copilot版のCLAUDE.mdである「copilot-instructions.md」を作成すると解決しそうです。

🏗️ 実装ハイライト

  • Flutter + Riverpod による UI 状態管理
  • fl_chart を使った円グラフと棒グラフの描画
  • CSV 入出力：ユーザーがファイルをアップロードして一括登録できる機能や、データを CSV にエクスポートする機能を実装
  • Firebase Firestore 上にユーザー別データを保存
  • Material 3 デザインの採用でモダン UI 実現

🧭 今後の展望

今後追加したい機能リスト

  • テンプレート登録機能（繰り返し使用する項目をテンプレート化し、一括で登録する機能）
  • Android / iOS 版アプリ化（Flutter）→ アプリ版には端末にデータを保存する機能を実装予定
  • AI による支出アドバイス機能

まずは自分で使用してみて、少しづつブラッシュアップしていければと思います。

🙏 おわりに

Firebase × Flutter の組み合わせと AI 開発支援を活用して、
個人で実用的な Web 家計簿を短時間で立ち上げることができました。

もし気になった方はぜひ GitHub リポジトリもチェックしてみてください：

🔗 Smart家計簿 リポジトリ

ご質問・ご要望があればお気軽にコメントお待ちしています 🙌

Discussion