「借金管理、AIに任せてみた」──React×TypeScriptで作る未来の借金ダッシュボード

# 借金・貸付の管理を手軽に行えるダッシュボード的なやつ
画面はこんな感じです。

![名称未設定 1 (1) のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/c284866f-07c2-4ae5-b4e7-b622786fbe34.png)

下記の一連の流れを行うことが可能です。

借りているユーザーに対し、借入の取引履歴を作成(借金)
↓
借りているユーザーに対し、返済の取引履歴を作成(返済)
・
・
・
上記の流れを行うことにより、取引履歴が蓄積され、
**借りている側** は、誰にどのぐらい借金しているのかがグラフで一目でわかり
**貸している側** も、同様に誰にどのぐらい貸しているかを確認することができます。

また、取引履歴を用いて作成された**今後の返済経過予測をグラフ上で確認できる**ため
貸している側は返済予定をイメージしやすくなり、**返済状態の悪化にいち早く察知できる**ため、
貸しているユーザーに対しての催促等のアクションへ瞬時に映ることができます。
<br>
↓だいたいざっくり上記のような、ものを作りました

https://income-expense-history.vercel.app/

 # なんで作ったん
 大元となるものは、高校生だった頃(2018年ごろ)に友達が、ノートで借用の履歴を管理していたのをみて
 大変そうだなぁ、と思いざっくりとPHPで作りました。
 
 ただ、PHPのレンタルサーバーのサービス終了が7月に行われると言う危機に直面したため
 PHPではなく、フロント・バックともに大規模な改修を加え、リリースした形となります。

  # 構成図
  ![名称未設定ファイル.drawio (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/186976e3-3b85-4e5d-b85e-4d52d26e7086.png)

構成図に起こす必要があったのか、と思うぐらいにシンプルな構成になっています。

言語(ライブラリ)としては
フロントは、React,TypeScript
バックエンドは、Express,TypeScript
で作成しました。

また、AIの波に完全に乗っかりフロントのコードはBoltというサービスで70%ほど書いてもらいました。（むっちゃ楽やったわ...恐るべし...）

お金に関係してくるサービスのため、
GCPに置いてあるVMで、毎日0時ごろにDB内容をバックアップし、30日間保存しておくようにしています。

AIの多大なる活躍により、環境構築→開発→デプロイまでの流れが2日間ほどで行えました。
（その後追加改修を加えた部分が結構ありますが.....）

# 使いたいわ、どうやって使うん？
という貴重なユーザーのために、ざっくりと画像付きで説明します。

### ①「アカウントをお持ちではない方はこちら」ボタンを押下し、ユーザー登録を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/abf901dc-d538-4e42-9995-435d5819a64d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/4bef495f-923c-40e4-bad0-a5151bc2c87f.png)

### ②その後、再度ログイン画面が出現するので、先ほど登録した内容を入力しログインします。

### ③ダッシュボード画面が表示されたら、＋ボタンを押下し、借りているユーザーの情報を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/41434f89-a442-474e-a2ba-ab89859c2f83.png)
- 新規ユーザーを追加する場合は、仮登録のため名前だけの入力で作成できます。
(他の既存のユーザーとも取引きを行う予定がある場合は、本登録時に全てのデータを引き継げるためメールアドレスも入力することをおすすめします。）
- 既存ユーザーを追加する場合は、本登録が完了しているユーザーのメールアドレスを入力するだけになります。

### ④ダッシュボード画面下部にある、「取引を追加」を押下し取引履歴情報を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/ee8c1214-9549-424f-b14e-1f6f03bd59dd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/43bc6ab5-c618-4e12-a97e-2e536f97a5b3.png)

### ⑤追加ボタンを押下すると、ダッシュボード画面にもどり、先ほど登録された取引履歴が追加されていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/91df44c1-df88-4fac-b815-2f194eb1932a.png)

### ⑥ユーザー選択から、先ほど取引履歴で選択したユーザーを選択すると、そのユーザーに対しての借金・返済状態を確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/dcd70bd0-d071-4724-95e2-9c52d9419e52.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/4a42fe8b-cbf9-45c8-95ee-f9f057275adb.png)


### ⑦上記の流れを行うことでAIによる今後の返済予定の予測を確認することができます。
（グラフにカーソルを当てると、返済予測の根拠を見ることができます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/2c59b23b-7d69-4166-951e-e1068c785569.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/c383c605-4b13-4041-b045-b3d72d7b79af.png)

### ⑧仮登録(③で新規で作成したユーザー)のユーザーを招待し、本登録を行う。
ダッシュボード画面のユーザー選択部分の右側にある、「メールアイコン」ボタンを押下すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/31346216-ba26-487d-b4a0-d79081481f61.png)
QRコードが出現するので、本登録させたいユーザーに提示し、QRコードを読み取ってもらってください。
![スクリーンショット 2025-05-11 17.18.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/041e9b76-f416-4d67-ad5c-401c2bd02ab8.png)
その後訪れた画面で、登録を行えば本登録完了です。
本登録完了により、貸した側は貸付管理から返済状況を確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2235105/5ee51643-838c-4fea-9b45-f79d4de4003d.png)


以上が大まかな流れになります。
（貸付の場合も同様です。）

# 最後に
ニッチなサービスですが、今後も意欲的に便利そうな機能を追加していこうと思っています。
例えば、
- 返済期限日を入力できるようにし、期限○日前にはリマインドメールを送信するようにする。
- 取引履歴をCSVでインポート・エクスポートできるようにする。
- 取引履歴の絞り込み機能の拡充
- 承認機能を設け、借入・貸付時、選択したユーザーの承認があるまでは取引履歴に反映されないようにする(取引履歴の重複や故意的に残り返済額を操作されるのを防ぐため) **※2025/05/13 機能追加済み**
...etc

Githubにてソースコードを全て公開しておりますので、
**バグやんけ！** とバグを発見した方や、**機能足りへんわ！** と思った親切な方は
下記GithubのIssueに適当に書き込んでいただけると幸いです....

https://github.com/benjaaamin0518/income_expense_history

https://github.com/benjaaamin0518/income_expense_history_backend