Rork で家計簿アプリを作る：データ可視化と CSV エクスポート機能付きチュートリアル

家計管理は多くの人にとって課題ですが、自分専用の家計簿アプリを作って運用できれば、お金の流れが格段に見える化しやすくなります。本チュートリアルでは、Rork AI を使ってデータ可視化と CSV エクスポート機能を備えた家計簿アプリを短時間で実装する方法を、段階を追って解説します。

なぜ家計簿アプリは初心者向けか

家計簿アプリは「初めてのアプリ開発」に最適な題材です。理由は以下の通り：

ビジネスロジックが明確：入力→保存→表示→分析という直線的なフロー
基本機能に需要がある：自分自身で日常的に使える実用性
拡張性が高い：チャート、CSV、通知など、段階的に機能追加できる
UI/UX の実践学習：金銭管理に関わるUI には配慮が必要で、デザイン学習になる

Rork の自然言語プロンプトなら、複雑な実装を AI が解決してくれるため、プロトタイプから実運用レベルまで素早く進められます。

Rork プロンプトエンジニアリングのポイント

家計簿アプリを Rork で作る際に重要なプロンプトのポイントを紹介します。

データモデルの指定

最初のステップは、Rork に対して「何を保存するのか」を明確に伝えることです。以下のようなプロンプトを使用します：

次のデータモデルを持つ家計簿アプリを作成してください：
- 支出エントリ：日付、カテゴリ（食費、交通費、娯楽、その他）、金額、メモ
- カテゴリ別の月間合計を計算する機能
- AsyncStorage で永続化する
- 全てのエントリを表示するリスト画面を含む

このようにフィールド名、カテゴリの選択肢、永続化方法を明記することで、Rork は正確な実装を生成します。

UI/UX 指示の詳細化

プロンプトに「見た目」に関する指示も含めることが大切です：

UI要件：
- 新規支出の入力フォーム：日付・カテゴリ・金額・メモの4フィールド
- 日付は DatePicker で選択可能
- カテゴリはドロップダウンから選択
- フォーム送信時に入力値をバリデーション（金額は0より大きい数値のみ）
- 支出一覧は降順（最新が上）で表示

このレベルの具体性があると、生成されるアプリの操作感がぐっと良くなります。

データ可視化の実装

家計簿の真価は「見える化」にあります。Rork で円グラフと棒グラフを組み込む手順を解説します。

円グラフ（パイチャート）の追加

カテゴリ別の支出割合を把握するなら円グラフが最適です。Rork で円グラフを追加する際のプロンプト例：

chart ライブラリ（react-native-svg-charts など）を使用して、
カテゴリ別の月間支出を円グラフで表示してください。
 
仕様：
- グラフのデータ：[{ label: "食費", value: 15000 }, ...]
- 色は category ごとに異なる色を自動割り当て
- グラフをタップすると、そのカテゴリの詳細を表示
- グラフのレジェンドは下部に表示

データの構造化が重要です。支出エントリから以下のように集計します：

// 期待される出力例
const chartData = [
  { label: "食費", value: 45000 },
  { label: "交通費", value: 12000 },
  { label: "娯楽", value: 8000 },
  { label: "その他", value: 5000 }
];

棒グラフによる時系列表示

月別の支出推移を見る場合は棒グラフです。過去6ヶ月の月別支出合計を表示するプロンプト：

react-native-svg-charts を使用して、
過去6ヶ月の月別支出合計を棒グラフで表示してください。
 
仕様：
- X軸：月（1月、2月...または 1月、2月...）
- Y軸：支出額（JPY）
- バーをタップして、その月の詳細カテゴリ別内訳を表示

CSV エクスポート機能

家計簿アプリの実用性を高める最重要機能が CSV エクスポートです。Excel や Google Sheets で分析したいユーザーが多いため、必須機能と言えます。

CSV 生成ロジック

Rork にエクスポート機能を追加するプロンプト：

以下の機能を実装してください：
1. AsyncStorage に保存された全支出エントリを取得
2. CSV 形式に変換（ヘッダー：日付,カテゴリ,金額,メモ）
3. CSV ファイルを生成し、共有メニュー経由でメール添付やクラウドストレージに保存可能にする
4. ファイル名は「budget_2026-03.csv」のように年月を含める
 
実装のポイント：
- 日付は YYYY-MM-DD 形式
- 金額は数値（カンマなし）
- メモに改行やカンマが含まれる場合はダブルクォートで括る

実際の CSV 出力例：

日付,カテゴリ,金額,メモ
2026-03-26,食費,1200,昼食
2026-03-26,交通費,800,タクシー
2026-03-25,娯楽,3000,"映画チケット、ポップコーン"
2026-03-25,その他,500,雑費

共有メカニズム

React Native の Share API を使うと簡単です。Rork に以下を指示：

Share API を使用して、生成した CSV ファイルをメール、LINE、Google Drive など、
OS のネイティブ共有メニューから選べるようにしてください。

AsyncStorage による永続化

支出データは AsyncStorage を使ってデバイスのローカルストレージに保存します。

保存と読み込み

Rork にこう指示すると正確に実装してくれます：

AsyncStorage を使用して以下を実装してください：
 
1. アプリ起動時：AsyncStorage から全支出エントリを読み込む
2. 新規支出追加時：新しいエントリを配列に追加し、AsyncStorage に保存
3. 支出削除時：該当エントリを配列から削除し、AsyncStorage に反映
4. データが存在しない場合：空配列で初期化
 
初期化キー："expenses"
各エントリの構造：{ id, date, category, amount, memo }

AsyncStorage の基本的なコード例：

import AsyncStorage from '@react-native-async-storage/async-storage';
 
// 保存
const saveExpense = async (expense) => {
  const existing = await AsyncStorage.getItem('expenses');
  const expenses = existing ? JSON.parse(existing) : [];
  expenses.push(expense);
  await AsyncStorage.setItem('expenses', JSON.stringify(expenses));
};
 
// 読み込み
const loadExpenses = async () => {
  const data = await AsyncStorage.getItem('expenses');
  return data ? JSON.parse(data) : [];
};

UI/UX デザイン Tips

金銭管理アプリは「ユーザーが安心して使える」という信頼感が最重要です。

入力フォームの工夫

デフォルト値：今日の日付を自動入力
カテゴリの視覚化：アイコンと色で各カテゴリを表現
確認画面：送信前に入力内容の概要を表示
成功フィードバック：追加後「保存しました」とトースト表示

リスト表示の最適化

日付のグルーピング：同じ日の支出をまとめて表示
金額の色分け：大きな支出は赤、小さな支出は黒など
スワイプで削除：リスト項目をスワイプして削除可能に
検索・フィルター：カテゴリやキーワードで絞り込み可能

グラフの見やすさ

色彩設定：同じアプリで使う色は統一し、カテゴリごとに固定
数値表示：グラフに実額（例：「15,000 円」）を併記
タッチ対応：グラフをタップして詳細表示
更新速度：データ追加後、リアルタイムでグラフが更新される

詳細なデザイン Tips については、Rork Max UI デザイン Tips をご参照ください。

開発のステップバイステップ

実装の全体フローを整理します。

Phase 1：基本形の構築（1時間）

Rork を起動
「家計簿アプリ」というテーマでプロジェクト作成
データモデルとフォーム画面を実装
AsyncStorage 連携確認

Phase 2：データ表示と管理（1時間）

支出一覧画面の実装
カテゴリ別集計ロジックの追加
削除機能の実装
テストデータで動作確認

Phase 3：グラフ機能の追加（1時間）

円グラフコンポーネントの追加
棒グラフコンポーネントの追加
タップ時の詳細表示
グラフのリアルタイム更新確認

Phase 4：エクスポート機能（30分）

CSV 生成ロジック実装
Share API 連携
ファイル名の自動生成
メール送信など各サービスでテスト

合計で 3.5〜4 時間で一通り完成させられます。

完成後のチューニング

アプリが完成したら、以下の点でさらに磨きをかけられます。

通知機能：月初に「今月の予算を設定してください」と通知
レポート機能：月末に「今月の支出サマリー」をメール配信
予算追跡：カテゴリごとに予算上限を設定し、超過時に警告
複数アカウント：家族用と仕事用を分けるサポート

Rork なら、これらの追加機能も短時間で実装できます。

全体を振り返って

Rork を使えば、3〜4 時間で本格的な家計簿アプリが完成します。データ可視化と CSV エクスポート機能があれば、金銭管理の実用性がぐんと上がります。

ポイントは：

プロンプトの具体性：データモデル、UI要件、機能要件を詳細に指示
段階的な実装：基本→表示→グラフ→エクスポートの順で進める
ユーザー体験：入力の簡潔性、見た目の美しさ、信頼感を重視

Rork で家計簿アプリを作成することで、プロンプトエンジニアリングの実践力も磨けます。ぜひ試してみてください。

参考リソース

データ可視化に関するオンライン教材や参考資料については、以下のような書籍も役立ちます：