未経験&独学で、SpringBoot・AWSを使ってポートフォリオ作ってみた

#はじめに
こんにちは、くまごろーと申します。
Webエンジニアになることを目標に、2020年7月から独学でJavaを中心に学習中です。
今回、SpringBootでチャット相談機能付きの家計簿アプリを作成したので、アプリについて説明させていただきます！

#どんなアプリ？
「お金でわからないことはすぐ相談できる」がコンセプトのチャット相談機能付家計簿アプリ。家計簿機能と質問機能を実装しています。


[![Image from Gyazo](https://i.gyazo.com/987d86e72e7e6db6e69a2790d79f9955.gif)](https://gyazo.com/987d86e72e7e6db6e69a2790d79f9955)

#このアプリでできること
###家計簿をつけられる

1. 出入金記録を投稿・編集・削除できる
2. 履歴をカテゴリ毎に絞り込んだり、並べ替えたりできる
3. 履歴はカレンダー形式・グラフ形式で表示できる
4. 予算を設定できるので、「あと何円使えるか」わかりやすい

###「お金のわからないこと」を質問・相談できる
1. お金のことでわからないことはアプリ内で質問・相談できる
2. 質問・相談を特定のワードで検索したり、カテゴリー別に表示できる
3. 後で見たい質問・相談は「お気に入り」登録できる

#なぜ作ったのか？
###きっかけ
私は夫と二人暮らし＆共働きだったのですが、半年前、夫が体調を崩して休職に入りました。それまでお金についてはかなり大雑把に管理していたのですが、夫の休職によって家計管理・節約をきっちりやる必要が出てきました・・・
###「こういうの欲しいな」
家計簿アプリを探してみたのですが、様々なアプリを見る中で「ユーザーとしてこういうものが欲しいな」という希望が浮かび上がってきました。

- アプリ内で「お金」について気軽に質問・相談できる機能が欲しい
- 他の人のお金のやりくり・家計簿を見本にしたい
- 自分の家計簿を公開して、アドバイスが欲しい

ポートフォリオとしてアプリを作成するにあたって、これらを解決するようなアプリを作ってみることにしました。

#実装機能
###基本機能
|  | 機能 |
|:-:|:-:|
| 1  |会員登録・退会機能 |
| 2 | ログイン機能  |
| 3 |ユーザー設定変更機能   |
| 4 | ゲストログイン機能  |

###家計簿機能
|  | 機能 |
|:-:|:-:|
| 5  | 予算設定機能  |
| 6  | 出入金記録・編集・削除機能  |
| 7  | 履歴表示機能（一覧形式）  |
| 8  | 履歴表示機能（カレンダー形式）  |
| 9  | 履歴絞込機能  |
| 10  | 履歴ソート機能  |
| 11  | 出入金分析機能（グラフ表示）  |


###質問・相談機能
|  | 機能 |
|:-:|:-:|
| 12  |質問&相談投稿・編集・削除機能   |
| 13  | コメント投稿・編集・削除機能  |
| 14  | お気に入り機能  |
| 15  |カテゴリー別表示機能   |
| 16  | 検索機能  |

#工夫した点
###家計簿機能
- 予算設定機能を導入することで、「あと何円使えるのか」をわかりやすく表示
- 絞込・ソート機能やカレンダー表示機能で、自分が確認したい履歴だけを表示できるようにした

[![Image from Gyazo](https://i.gyazo.com/8fbbdb9d6cd753ce73917b4faa42e0b8.gif)](https://gyazo.com/8fbbdb9d6cd753ce73917b4faa42e0b8)

[![Image from Gyazo](https://i.gyazo.com/4f3d9a44dc279d8f67a28dd20b706735.gif)](https://gyazo.com/4f3d9a44dc279d8f67a28dd20b706735)

###質問・相談機能
- 後から読み返すことができるよう「お気に入り」機能を実装
- カテゴリ分け・検索機能を実装して、欲しい情報にすぐアクセスできるように
　
[![Image from Gyazo](https://i.gyazo.com/810e609ab4f31426091eb2c2af64d133.gif)](https://gyazo.com/810e609ab4f31426091eb2c2af64d133)

#使用技術

- 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図を作成し、その後は発生した問題・課題に応じて仕様を変更していきました。

![PiggyBank-ER.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673146/8b4ec87c-bc05-aaa1-ec2c-a522ad9575d2.png)

###各テーブルについて
| テーブル名 | 説明 |
|:-:|:-:|
| users | 登録ユーザーの情報 |
| money_records | ユーザーの家計簿データ |
| categories | 出入金カテゴリの情報 |
| posts | 質問・相談の投稿情報 |
| comments | 投稿対するコメントの情報 |
| likes | 投稿への「お気に入り」登録情報 |

#インフラ環境
- 今回はEC2、RDS、ELB、S3、Route53、ACMを利用しました。
- ELBはACMを使用するために導入しており、EC2冗長化等は行っておりません（ゆくゆくは挑戦したい）
- S3については、ユーザーのアイコン画像を格納するために導入しています。

![infra.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673146/d8840131-18e5-361c-36eb-1cead642d816.png)





#意識して取り組んだこと
###公式ドキュメント・英語記事から逃げない
独学でのアプリ作成は想像以上に困難でした。最初の内は日本語のソースを優先的に探していましたが全く進展しませんでした。「これではだめだ」と思い、自分に以下のルールを課しました。

- 日本語・英語で選り好みしない。
- 日本語ページを2,3確認して、問題が解決しなければ英語記事・公式ドキュメントを参照。
- 二次情報（質問記事等）を参照して、理屈がわからなければ公式ドキュメントを確認する。

このルールを徹底した結果、<b>英語・公式ドキュメントへの抵抗感がかなり減りました。そして、エラーが解消するまでの所要時間もかなり短縮することができました。</b>

###読みやすいコードを心掛ける
学習開始当初、「数週間前に自分が書いたコードが全く分からない」という体験をして、<b>「後から見た時にすぐ理解できるコード」「他人読んでもわかるコード」</b>を心掛けました。
具体的には、以下の点について意識しました。

- 要所要所でコメントを残す
- 変数名は意味のあるもの、他人が読んで用途を理解できるものにする。
- 用途に応じてクラス・メソッドを分割する。（一つのクラス・メソッドにごちゃごちゃと書かない） 

###チーム開発を意識
個人開発ですが、以下の点について意識しながら開発に取り組みました。

- Git,Github上でソースを管理
- issueを作成、ブランチを切って作業を実施
- こまめにcommitを実施、プルリクエストを作成してマージ


#今後やっていきたいこと
###機能面
- 質問・相談時の画像投稿機能
- ユーザー間のフォロー機能
- 家計簿機能で使用しているグラフ表示機能を質問・相談機能にも導入
（自分の家計簿を公開して相談したり、回答者が家計簿を提示してアドバイスできるようにしたい）
- レスポンシブ対応

###インフラ面
- EC2,RDSの冗長化
- Dockerを用いた開発・本番環境の構築
- CircleCIを用いたCI/CDパイプラインの構築
- セキュリティ対策
 
#さいごに

実際にアプリを作成してみて痛感したのは、<b>「作りたいものを思った通りに作り上げる難しさ」</b>です。当然な話ですが、「こんな機能が欲しい」と思っても、技術が無ければ実現できません。独学でアプリを作成していく中で、何度も壁にぶち当たりました。正直、実現できていないものもあります。その困難さに直面して、逆にモチベーションが非常に上がりました。まだまだ未熟ですが、今後も努力を継続していきます。

ここまで読んでいただき、ありがとうございました。ご意見・ご質問等あれば、コメントで教えていただけると幸いです。
　
#参考
Github: https://github.com/kumaGoro95/ExpensesApp