実務未経験者がJavaとSpringBootを使用しWebアプリを制作

# 目次
- 0.9/23追記
- 1.はじめに
- 2.制作期間
- 3.成果物のリンク・ソースコード
- 4.作成に至った経緯
- 5.実装した機能・使用した技術
- 6.アプリケーションの概要
- 7.制作過程
- 8.振り返り
- 9.まとめ
# 0.9/23追記
無事Javaエンジニアとして内定をいただいたため、限定公開していたこの投稿を全体公開いたします。これからシステムエンジニアを目指す方やスクールに通わず独学で勉強している方などの参考材料にしていただければ幸いです。質問や要望等がありましたら、コメント欄にてお願いいたします。

# 1.はじめに
　2021年12月頃からJavaの勉強をし始め、2022年4月からWebアプリケーションの制作を通してJavaのフレームワークであるSpringBootの学習しておりました。今回の投稿ではその中で学んだことや振り返り、今後の課題をまとめていきます。
　製作期間の都合上、実装できなかった機能や勉強不足な点も多々あり不完全でありますがリリースすることを目標に制作したためherokuで一旦公開しております。採用担当の方、同じエンジニアを目指す初学者の方、エンジニアを目指そうか迷っている方の目に留まれば幸いです。

# 2.制作期間
  2022年4月6日-2022年6月30日

# 成果物のリンク・ソースコード
Github→要望があれば公開予定
リンク→要望があれば公開予定

# 3.作成に至った経緯
　前職では2年間、管理会社の営業として働いており、様々な規模の分譲マンションを担当していました。その中でも中規模クラスの分譲マンションで、管理人が業務の大半をマンション内の清掃時間に充てる日が多く、管理事務所を不在にする時間が長い状態が続いていました。その結果、マンションに関する事務的は受付業務や問い合わせに対応できないことが増え、住民から苦情が来ることが何度かありました。
　この問題を解決するために、webアプリを導入することで管理人の受付業務や住民へのお知らせなどをPC上で一括して行えるようにすることで、少ない滞在時間でも受付業務や問い合わせの対応をできるようにする狙いがあります。

# 5.実装した機能・技術
### 使用技術
###### フロントエンド
- HTML/CSS
- Bootstrap
- thymeleaf
###### バックエンド
- Java11
###### フレームワーク
- SpringBoot
###### インフラ
- MYSQL
- heroku
###### テスト
- Junit4
###### API
- GoogleCalendarAPI

### 実装機能
- ログイン機能
- 管理者権限・ユーザー権限
- メールを使用した問い合わせ機能
- 検索機能
- CRUD機能
- パスワードのハッシュ化

# 6.アプリケーションの概要
### 予約アプリケーション
　管理人が事務所を不在にしている間でも、マンション内の施設（集会室や会議室）の予約申請ができるアプリです。
今までは管理事務所まで住民が着て申請書類に記入し提出が必要でしたが、住民1人1人にIDを発行しログイン後に申請が可能になっています。
　それに対して管理人は専用のアカウントを設け、各申請に対してPC上で許可をしていく仕組みとなっています。マンションの規模によっては有料駐車場の貸し出しや駐輪場等の貸し出しを行っているケースもあるため、機能の拡張も可能です。
　問い合わせ機能については当時CCが常設されていたため、あってもなくてもよいかなと制作後に思いました。
### ユーザー種類
| ユーザーネーム | パスワード | 権限 |
|:-------- |:-------- |:----------- |
| admin    | password1234   | ADMIN |
| bob      | password1234   | USER  |
| lisa     | password1234   | USER  |
| mike     | password1234   | ADMIN |
| tom      | password1234   | USER  |

### 機能
- 管理者｜ユーザー登録・権限付与、全ユーザーの申請履歴の表示・登録・削除・変更、掲示板投稿
- ユーザー｜利用申請の登録・編集・削除、問い合わせ、ログインユーザーの申請履歴の表示
### 開発環境
MAMPでローカル環境構築。
Eclipseでコーディング→Githubでコード管理→herokuでデプロイ

# 7.制作過程
### ①要件定義　
##### 必ず実装が必要な機能
- 申請履歴の表示
- 承認された申請がカレンダー上に表示される機能　　
- ログイン機能　　　　
##### 可能なら実装したい
- お問い合わせの実装
- 権限の付与（管理人が使用するアカウントと住民が使用するユーザーアカウントを区別できるようにする）
- 権限・ユーザー名の表示
- パスワードのエンコード化

### ②DB設計　
ER図後日添付予定

### ③画面遷移図の作成
全体のページ構成を決めるためにdraw.ioというソフトを使用し簡単に構成図を作成しました。　
![qiita用画面遷移図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728519/848e367e-935e-7a97-7c1c-799aed3b8f99.png)


### ④各種機能の実装
#### ログイン・ログアウト機能
ユーザー登録時には管理者(admin)とユーザー（user）に分け、権限を付与しています。ログイン時には権限によって表示されるサイドメニューが異なります。
![LoginGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728519/5403cfd6-9217-40d5-36f4-810e10ebb20e.gif)

#### CRUD機能
登録・詳細表示・更新・削除処理ができます。
![meetingsRegisterGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728519/13377944-5bff-6978-8595-58db443555c2.gif)


#### 申し込み情報の反映
全ユーザーからの申し込みを管理者が確認し、承認するとGoogleClendarに値が反映され表示されます。承認されていない場合は反映されません。![calendarGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728519/916435de-91a5-6a7b-6ffa-d61fa2a151bb.gif)


#### ユーザー登録機能
権限登録ができます。
![UserRegisterGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728519/aae32191-192c-bdf6-118c-554edc6f98a2.gif)

#### お問い合わせ機能
application.propertiesに送信先のアドレスを設定することで、web上からのお問い合わせが設定したメールに送信されます。今回はGmailを使用しています。


# 振り返り
- #### どのようにすれば自分に身につくか
　実際にコーディングするまでは、市販の教材やUdemyなどのビデオ教材を使ってインプットをすればアプリ制作に関わる知識が自分に身につくと思っていました。しかし、いざ作業に取り掛かると多くのエラーに直面し、事前に勉強していた知識だけでは解決できませんでした。その都度発生するエラーと向き合い、1つ1つ解決することで同じエラーが起きてもある程度対処できるようになりました。
　
- #### 課題を解決するためのアプローチ
　エラーを解消するために、同じような事象の解決例がネット上で多く投稿されていますが、その投稿のみをコピペするだけではどういった流れで処理が進んでいるのか理解が進まないと感じました。そこで、発生した問題を切り分けて分析し、検証し解消に導く。1つの問題が解決してもまた新しい問題が発生するなど忍耐力が求められましたが限られた製作期間を考えると実務でも同じことが求められると感じました。
- #### 勉強の過程
 今回の予約アプリを制作するうえで１番の失敗といえるのが勉強の過程です。エンジニアとして働くうえでは言語の学習はもちろんですが、コーディングに夢中になるあまりにテストやGithubなど実務で必要とする内容の勉強を怠っていました。


# 8.今後の課題
実装できなかった機能があり不完全である状態のため、今後の課題も残しておきます。

### バリデーションが不完全
　予約の申し込みをする際に一日の中の一定時間を予約できるようにしたかったが、日にちを跨いでの申請ができてしまう状態です。
![RegisterErrorGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728519/814b8a5b-e6d2-7a5a-c871-17e2ac22a0f2.gif)


### ページネーションの実装
　トップページのお知らせを表示する箇所もそうですが、長期間運用するとデータの量が膨大になります。そうなった場合、ページを開いた際の読み込むデータ量が多くなるため負荷がかかる可能性が高いです。申請や投稿件数が増え続けることを想定しページネーションを実装したかったですが知識不足のため、実装できませんでした。

## 9.まとめ
　課題や反省点は多くありましたが、今回のアプリケーション制作を通して学んだことはインプットのみでは自分に身につかないということです。模写でも良いので最初は実際にコードを書いてみて、その都度直面する問題を地道に解決する。最終的にデプロイまでできたのは、この姿勢を崩さなかったことなんじゃないかなと思っています。

　自分の勉強のためにさらに機能の改善をしていきたいと考えています。長文となりましたが、最後まで見ていただきありがとうございました。