家計簿アプリの仕様書

1. 概要

初心者向けの家計簿アプリを開発します。 モノレポを使って、プロジェクトを構築します。

2. 機能一覧

✅ フロントエンド（React Native + Expo）

1. 収入・支出の記録
   • 金額、カテゴリ、日付を登録
   • 収入（プラス）、支出（マイナス）の区別
2. データの編集・削除
   • 登録済みの収入・支出データを編集・削除可能
3. 収支データの一覧表示
   • 日付順にリスト表示
   • カテゴリごとに絞り込み可能
4. グラフ表示（react-native-gifted-charts 使用）
   • 月ごとの収支（棒グラフ）
   • カテゴリごとの支出割合（円グラフ）
5. カテゴリ管理
   • カテゴリの追加・編集・削除
6. データ保存先
   • Cloudflare WorkersのAPIを利用

✅ バックエンド（Cloudflare Workers + Hono）

1. 収支データの管理（CRUD）
   • 収支データの追加、取得、編集、削除
2. カテゴリデータの管理（CRUD）
   • カテゴリの追加、取得、編集、削除
3. Cloudflare D1 を使用したデータ保存
   • SQLite互換のD1データベースを利用

3. データベース設計（Cloudflare D1 / SQLite）

📊 収支データ（transactions テーブル）

カラム名	型	説明
id	INTEGER	主キー（自動増加）
amount	REAL	金額（収入はプラス、支出はマイナス）
type	TEXT	income or expense
category_id	INTEGER	categories.id への外部キー
date	TEXT	YYYY-MM-DD 形式の日付

📊 カテゴリ（categories テーブル）

カラム名	型	説明
id	INTEGER	主キー（自動増加）
name	TEXT	カテゴリ名（例：食費、交通費、給料 など）

4. API 設計（Cloudflare Workers + Hono）

メソッド	エンドポイント	説明
GET	/transactions	収支データ一覧を取得
POST	/transactions	収支データを追加
PUT	/transactions/:id	収支データを更新
DELETE	/transactions/:id	収支データを削除
GET	/categories	カテゴリ一覧を取得
POST	/categories	新しいカテゴリを追加

5. 画面構成

🏠 ホーム画面

• 月ごとの収入・支出グラフ
• 最新の収支リスト表示

📜 収支リスト画面

• 収支の一覧表示
• フィルター機能（カテゴリ・日付）
• 追加ボタン（収支登録画面へ遷移）

➕ 収支登録・編集画面

• 金額入力
• カテゴリ選択
• 収入or支出の選択
• 日付選択

📊 グラフ画面

• 月ごとの収入・支出グラフ（棒グラフ）
• カテゴリ別支出割合（円グラフ）

📂 カテゴリ管理画面

• カテゴリ一覧
• 追加・編集・削除

6. 使用技術

言語

• TypeScript

📱 フロントエンド（React Native + Expo）

• react-native
• expo
• expo-router（画面遷移）
• react-native-gifted-charts（グラフ表示）
• NativeWind（Tailwindスタイル）
• gluestack-ui（UIコンポーネントライブラリー）

🌐 バックエンド（Cloudflare Workers + Hono）

• Cloudflare Workers（APIサーバー）
• Hono（軽量フレームワーク）
• Cloudflare D1（SQLite互換DB）
• drizzle（ORM）

---

7. 想定するユーザー

👶 初心者向けのアプリ開発教材

• Expoを使ったReact Nativeの基礎が学べる
• APIに対応するアプリ構築の学習

💰 個人の家計管理用

• 簡単なUIで日々の収支を記録
• グラフでお金の流れを視覚化

---

8. まとめ

✅ フロントエンド → React Native（Expo）で直感的なUI
✅ バックエンド → Cloudflare Workers + Honoで軽量API
✅ データ管理 → D1（クラウド）対応
✅ グラフ表示 → react-native-gifted-charts で収支を可視化

この仕様で開発を進めれば、初心者でも扱いやすく、後からバックエンドの導入が容易な家計簿アプリ になる！ 🚀🔥