はじめに

家計簿Webアプリケーションを作成しました。普通の家計簿と違うところは、細かく出費・収入を記録するのではなく、クレカの支出や給料の収入などの大きなお金の移動のみを記録して所持金を管理するところです。
私自身細かく家計簿に記録することが苦手で、何度も挫折したため自分にあった家計簿を作ろうと思いました。
また私は銀行口座を複数所持しているため、それらをまとめて管理するものが欲しいと考えていたため、その機能も追加しました。
私と同じように細かくお金を管理することが苦手で、銀行口座を複数持っている方には便利なものになると思います。
まだインターネット上に公開できていないため、なるべく早く公開できるようにしたいと思っています。

GitHub

バックエンド：https://github.com/HagisawaYuki/BBTB_Backend_Repo.git
フロントエンド：https://github.com/HagisawaYuki/BBTB_App.git

概要

ログインするとこのホーム画面で自身のお金の情報を見ることができます。
自身の銀行やクレカをクリックすると

図１　銀行ページ

図２　クレカページ
このようにそれぞれごとの情報を見ることができます。

ここでクレカや給料をクリックするとそれぞれの情報を編集することができます。
下のフッターからだと全てのエンティティを新規作成・編集することができます。
例えば給料だと下記のフォームから新規作成・編集します。
・編集

・新規作成

使用技術

バックエンド

　Java（フレームワーク：SpringBoot）
　SQL

フロントエンド

　Next.js

ツール

　MySQL
　draw.io(ER図)
　VSCode
　eclipse

ER図

開発のきっかけ

今までSpringBootとNext.jsを別々で使っていたが、組み合わせて一つのWebアプリを作れるのではという思いつきがきっかけです。また作るなら自分が使いたいWebアプリを作りたいと考えたので今回のような家計簿を作成してみました。

こだわった点

・月ごとの表示形式にして、先月や翌月のお金の情報も見ることができるようにした。
・編集フォームにて編集前の情報をデフォルト値として入力してある状態にした。
・銀行情報を見やすくして、複数の銀行を一括管理できるようにした。
・Next.jsでchakura.uiを用いることでデザインを均一にして統一感のあるようにデザインした。
・保守性を高めた。

反省点

・今回SpringSecurityを用いたかったが、Next.jsとの組み合わせで用いようとしたら、どうやってもエラーが出てしまって諦めてしまったこと。
・ページを増やしすぎて、それごとにfetch処理をしてしまっているせいで処理が遅くなってしまっていること。

これから追加したい機能

・カレンダー表示
・現金エンティティの追加（編集できるようにする）
・エンティティの削除機能
・パスワード変更機能
・年ごとのお金の表示
・銀行名を入力ではなく選択できるようにする
・インターネット上に載せる
・SpringSecurityを使う