はじめに
こんにちは、くまごろーと申します。
Webエンジニアになることを目標に、2020年7月から独学でJavaを中心に学習中です。
今回、SpringBootでチャット相談機能付きの家計簿アプリを作成したので、アプリについて説明させていただきます！
どんなアプリ？
「お金でわからないことはすぐ相談できる」がコンセプトのチャット相談機能付家計簿アプリ。家計簿機能と質問機能を実装しています。
このアプリでできること
家計簿をつけられる
- 出入金記録を投稿・編集・削除できる
- 履歴をカテゴリ毎に絞り込んだり、並べ替えたりできる
- 履歴はカレンダー形式・グラフ形式で表示できる
- 予算を設定できるので、「あと何円使えるか」わかりやすい
「お金のわからないこと」を質問・相談できる
- お金のことでわからないことはアプリ内で質問・相談できる
- 質問・相談を特定のワードで検索したり、カテゴリー別に表示できる
- 後で見たい質問・相談は「お気に入り」登録できる
なぜ作ったのか？
きっかけ
私は夫と二人暮らし＆共働きだったのですが、半年前、夫が体調を崩して休職に入りました。それまでお金についてはかなり大雑把に管理していたのですが、夫の休職によって家計管理・節約をきっちりやる必要が出てきました・・・
「こういうの欲しいな」
家計簿アプリを探してみたのですが、様々なアプリを見る中で「ユーザーとしてこういうものが欲しいな」という希望が浮かび上がってきました。
- アプリ内で「お金」について気軽に質問・相談できる機能が欲しい
- 他の人のお金のやりくり・家計簿を見本にしたい
- 自分の家計簿を公開して、アドバイスが欲しい
ポートフォリオとしてアプリを作成するにあたって、これらを解決するようなアプリを作ってみることにしました。
実装機能
基本機能
| 機能 | |
|---|---|
| 1 | 会員登録・退会機能 |
| 2 | ログイン機能 |
| 3 | ユーザー設定変更機能 |
| 4 | ゲストログイン機能 |
家計簿機能
| 機能 | |
|---|---|
| 5 | 予算設定機能 |
| 6 | 出入金記録・編集・削除機能 |
| 7 | 履歴表示機能（一覧形式） |
| 8 | 履歴表示機能（カレンダー形式） |
| 9 | 履歴絞込機能 |
| 10 | 履歴ソート機能 |
| 11 | 出入金分析機能（グラフ表示） |
質問・相談機能
| 機能 | |
|---|---|
| 12 | 質問&相談投稿・編集・削除機能 |
| 13 | コメント投稿・編集・削除機能 |
| 14 | お気に入り機能 |
| 15 | カテゴリー別表示機能 |
| 16 | 検索機能 |
工夫した点
家計簿機能
- 予算設定機能を導入することで、「あと何円使えるのか」をわかりやすく表示
- 絞込・ソート機能やカレンダー表示機能で、自分が確認したい履歴だけを表示できるようにした
質問・相談機能
- 後から読み返すことができるよう「お気に入り」機能を実装
- カテゴリ分け・検索機能を実装して、欲しい情報にすぐアクセスできるように
使用技術
- Java 11.0.7
- SpringBoot 2.3.5
- Spring Security 5.3.5
- Spring Data JPA 2.3.5
- Spring Cloud for Amazon Web Services 2.2.5
- HTML(Thymeleaf), CSS
- MaterializeCSS 1.0.0
- JavaScript
- jQuery 3.5.1
- Chart.js 2.8.0
- FullCalendar 3.5.1
- AWS
- EC2
- RDS
- S3
- ELB
- Route53
- ACM
- MySQL 8.0.20
- Nginx 1.18.0
- Tomcat 9.0.39
DB設計
学習開始当初、当然ながらDB設計の知識は全くありませんでした。基本情報の勉強や、初学者向けのQiita記事で必要最低限の知識を身に着けアプリ作成に臨みました。設計段階でER図を作成し、その後は発生した問題・課題に応じて仕様を変更していきました。
各テーブルについて
| テーブル名 | 説明 |
|---|---|
| users | 登録ユーザーの情報 |
| money_records | ユーザーの家計簿データ |
| categories | 出入金カテゴリの情報 |
| posts | 質問・相談の投稿情報 |
| comments | 投稿対するコメントの情報 |
| likes | 投稿への「お気に入り」登録情報 |
インフラ環境
- 今回はEC2、RDS、ELB、S3、Route53、ACMを利用しました。
- ELBはACMを使用するために導入しており、EC2冗長化等は行っておりません（ゆくゆくは挑戦したい）
- S3については、ユーザーのアイコン画像を格納するために導入しています。
意識して取り組んだこと
公式ドキュメント・英語記事から逃げない
独学でのアプリ作成は想像以上に困難でした。最初の内は日本語のソースを優先的に探していましたが全く進展しませんでした。「これではだめだ」と思い、自分に以下のルールを課しました。
- 日本語・英語で選り好みしない。
- 日本語ページを2,3確認して、問題が解決しなければ英語記事・公式ドキュメントを参照。
- 二次情報（質問記事等）を参照して、理屈がわからなければ公式ドキュメントを確認する。
このルールを徹底した結果、英語・公式ドキュメントへの抵抗感がかなり減りました。そして、エラーが解消するまでの所要時間もかなり短縮することができました。
読みやすいコードを心掛ける
学習開始当初、「数週間前に自分が書いたコードが全く分からない」という体験をして、「後から見た時にすぐ理解できるコード」「他人読んでもわかるコード」を心掛けました。
具体的には、以下の点について意識しました。
- 要所要所でコメントを残す
- 変数名は意味のあるもの、他人が読んで用途を理解できるものにする。
- 用途に応じてクラス・メソッドを分割する。（一つのクラス・メソッドにごちゃごちゃと書かない）
チーム開発を意識
個人開発ですが、以下の点について意識しながら開発に取り組みました。
- Git,Github上でソースを管理
- issueを作成、ブランチを切って作業を実施
- こまめにcommitを実施、プルリクエストを作成してマージ
今後やっていきたいこと
機能面
- 質問・相談時の画像投稿機能
- ユーザー間のフォロー機能
- 家計簿機能で使用しているグラフ表示機能を質問・相談機能にも導入 （自分の家計簿を公開して相談したり、回答者が家計簿を提示してアドバイスできるようにしたい）
- レスポンシブ対応
インフラ面
- EC2,RDSの冗長化
- Dockerを用いた開発・本番環境の構築
- CircleCIを用いたCI/CDパイプラインの構築
- セキュリティ対策
さいごに
実際にアプリを作成してみて痛感したのは、「作りたいものを思った通りに作り上げる難しさ」です。当然な話ですが、「こんな機能が欲しい」と思っても、技術が無ければ実現できません。独学でアプリを作成していく中で、何度も壁にぶち当たりました。正直、実現できていないものもあります。その困難さに直面して、逆にモチベーションが非常に上がりました。まだまだ未熟ですが、今後も努力を継続していきます。
ここまで読んでいただき、ありがとうございました。ご意見・ご質問等あれば、コメントで教えていただけると幸いです。