こんにちは、この記事では私が 1年目の実務経験を積んだ後に1から開発した家計簿アプリ「MoneyTrack」 の機能紹介を行います。
完成度としては「まだまだ発展途上」ですが、AWS・Docker・Gradleの技術スタックを実践的に使って構築したこと、そして0からアプリを設計し、形にするまでの一連の経験は非常に勉強になりました。
💬 ご意見募集！
「こんな機能もあると良いのでは？」
「ここの設計はこうした方が良いのでは？」
など、ご意見・フィードバックをぜひQiitaのコメント欄にていただけると嬉しいです！
🔗 URL（ドメインを取得して公開済）
🛠 使用技術スタック（一部）
- Java 21（Amazon Corretto）
- Spring Boot
- Thymeleaf
- PostgreSQL
- Docker（ローカル開発環境＋EC2での本番環境構築）
- AWS（EC2）
- Gradle（ビルド＆JARファイル作成）
🔎 機能紹介の構成（全9機能）
① ログイン画面
- 登録済みのユーザーがメールアドレスとパスワードでログイン
- ログイン失敗時はエラーメッセージを表示
-
Spring Securityを使用して認証を実装
② ユーザー登録画面
- メールアドレス・パスワード・ニックネームを入力してアカウントを作成
- 入力値のバリデーション機能も実装済
③ ユーザー登録成功画面
- 登録完了メッセージを表示
- 成功後はログインページへの遷移を案内
④ ホーム画面
- 今月の収支サマリを表示
- 開始日、終了日、及び決まった時期の検索を実装
- 最新の取引やカテゴリ別の支出割合も表示（chart.jsを使用）
- 他画面も共通でヘッダーの実装及びサイドバーの実装
- (2025/06/07追記)円グラフの配色の追加
⑤ 取引入力/編集画面
- 日付・金額・カテゴリ・メモを入力して取引を追加
- 取引タイプに合わせてカテゴリーが変化
- 必須項目のバリデーション実装
- 既存取引の編集にも対応
⑥ 取引履歴
- 過去の取引を一覧で表示
- 日付やカテゴリー、金額でのソート機能を実装
- 日付、カテゴリーのフィルター機能を実装
- 開始日、終了日、及び決まった時期の検索を実装
- (2025/06/07追記)内容が長い場合でも確認できるようにツールチップの追加
⑦ ユーザー情報の変更
- ユーザーIDなどのプロフィール情報を変更
⑧パスワード変更
- 現在のパスワードと新しいパスワードを入力して変更可能
- 入力チェック（再入力一致など）も実装
⑨ カテゴリ管理
- 権限が管理者のみ表示可能のページ
- 収入・支出カテゴリの追加・編集・削除
- 各取引で使用されているカテゴリが反映
🧩 反省点・今後の改善予定
今回「MoneyTrack」を開発してみて、いくつか反省点や課題が見つかりました。
-
管理者ユーザーの登録画面を作成していない
→ 初期ユーザー登録はSQLレベルで対応しており、アプリ側からの登録手段が未実装です -
Bootstrapの使い方が不十分で、画面の表示バランスが崩れている部分がある
→ 特にレイアウトのレスポンシブ対応やフォームの整形で未熟さが目立ちました -
サイドバー設計ミスにより、右1/3程度が空白のままになっている
→ 当初の仕様では常時表示サイドバーを想定していたが、後から非表示に変更したことで画面の余白が残ったままになっています -
モバイル対応が全くできていない
→ 現在はPC表示前提であり、スマートフォンではレイアウトが崩れてしまいます
(2025/06/07追記)
→上記の取り消し線の内容について、Bootstrapを利用してレスポンシブへの対応及び全体的なレイアウト修正、メニューバーの変更を行いました
-
家計簿アプリとしては機能不足・UI未完成な点が多い
→ レポート機能や予算管理、通知など、実運用に必要な機能がまだまだ実装できていません
これらの点を今後の学習・改善ポイントとしながら、より実用的なWebアプリを作れるよう成長していきたいと思います
📝 さいごに
正直、 「これが1年やってきた成果として妥当なのか？」 と少し不満もありますが、それだけに「まだまだ学ばなければならないことが山ほどある」と痛感しています。
Qiitaのコメント欄を通じて、みなさんの経験や視点を共有していただけると嬉しいです。
まだまだ技術不足ですが、どうぞよろしくお願いします！