「借金管理、AIに任せてみた」──React×TypeScriptで作る未来の借金ダッシュボード
借金・貸付の管理を手軽に行えるダッシュボード的なやつ
画面はこんな感じです。
下記の一連の流れを行うことが可能です。
借りているユーザーに対し、借入の取引履歴を作成(借金)
↓
借りているユーザーに対し、返済の取引履歴を作成(返済)
・
・
・
上記の流れを行うことにより、取引履歴が蓄積され、
借りている側 は、誰にどのぐらい借金しているのかがグラフで一目でわかり
貸している側 も、同様に誰にどのぐらい貸しているかを確認することができます。
また、取引履歴を用いて作成された今後の返済経過予測をグラフ上で確認できるため
貸している側は返済予定をイメージしやすくなり、返済状態の悪化にいち早く察知できるため、
貸しているユーザーに対しての催促等のアクションへ瞬時に映ることができます。
↓だいたいざっくり上記のような、ものを作りました
なんで作ったん
大元となるものは、高校生だった頃(2018年ごろ)に友達が、ノートで借用の履歴を管理していたのをみて
大変そうだなぁ、と思いざっくりとPHPで作りました。
ただ、PHPのレンタルサーバーのサービス終了が7月に行われると言う危機に直面したため
PHPではなく、フロント・バックともに大規模な改修を加え、リリースした形となります。
構成図
構成図に起こす必要があったのか、と思うぐらいにシンプルな構成になっています。
言語(ライブラリ)としては
フロントは、React,TypeScript
バックエンドは、Express,TypeScript
で作成しました。
また、AIの波に完全に乗っかりフロントのコードはBoltというサービスで70%ほど書いてもらいました。（むっちゃ楽やったわ...恐るべし...）
お金に関係してくるサービスのため、
GCPに置いてあるVMで、毎日0時ごろにDB内容をバックアップし、30日間保存しておくようにしています。
AIの多大なる活躍により、環境構築→開発→デプロイまでの流れが2日間ほどで行えました。
（その後追加改修を加えた部分が結構ありますが.....）
使いたいわ、どうやって使うん？
という貴重なユーザーのために、ざっくりと画像付きで説明します。
①「アカウントをお持ちではない方はこちら」ボタンを押下し、ユーザー登録を行います。
②その後、再度ログイン画面が出現するので、先ほど登録した内容を入力しログインします。
③ダッシュボード画面が表示されたら、＋ボタンを押下し、借りているユーザーの情報を追加します。
- 新規ユーザーを追加する場合は、仮登録のため名前だけの入力で作成できます。
(他の既存のユーザーとも取引きを行う予定がある場合は、本登録時に全てのデータを引き継げるためメールアドレスも入力することをおすすめします。） - 既存ユーザーを追加する場合は、本登録が完了しているユーザーのメールアドレスを入力するだけになります。
④ダッシュボード画面下部にある、「取引を追加」を押下し取引履歴情報を入力します。
⑤追加ボタンを押下すると、ダッシュボード画面にもどり、先ほど登録された取引履歴が追加されていることがわかります。
⑥ユーザー選択から、先ほど取引履歴で選択したユーザーを選択すると、そのユーザーに対しての借金・返済状態を確認することができます。
⑦上記の流れを行うことでAIによる今後の返済予定の予測を確認することができます。
（グラフにカーソルを当てると、返済予測の根拠を見ることができます。）
⑧仮登録(③で新規で作成したユーザー)のユーザーを招待し、本登録を行う。
ダッシュボード画面のユーザー選択部分の右側にある、「メールアイコン」ボタンを押下すると
QRコードが出現するので、本登録させたいユーザーに提示し、QRコードを読み取ってもらってください。
その後訪れた画面で、登録を行えば本登録完了です。
本登録完了により、貸した側は貸付管理から返済状況を確認することができます。
以上が大まかな流れになります。
（貸付の場合も同様です。）
最後に
ニッチなサービスですが、今後も意欲的に便利そうな機能を追加していこうと思っています。
例えば、
- 返済期限日を入力できるようにし、期限○日前にはリマインドメールを送信するようにする。
- 取引履歴をCSVでインポート・エクスポートできるようにする。
- 取引履歴の絞り込み機能の拡充
- 承認機能を設け、借入・貸付時、選択したユーザーの承認があるまでは取引履歴に反映されないようにする(取引履歴の重複や故意的に残り返済額を操作されるのを防ぐため) ※2025/05/13 機能追加済み
...etc
Githubにてソースコードを全て公開しておりますので、
バグやんけ！ とバグを発見した方や、機能足りへんわ！ と思った親切な方は
下記GithubのIssueに適当に書き込んでいただけると幸いです....
Discussion