【個人開発】駆け出しエンジニアがJavaで予約管理アプリを作ってみた

# はじめに
SIerにキャリアチェンジして1年目の駆け出しエンジニアがJavaでアプリ製作をしてみました。アウトプットとして、本記事にその記録を残したいと思います。
# 作成者のプロフィール
私のプロフィールとしては以下の通りです。
・社会人4年目
・前職はメーカで生産技術職を3年経験
・元々ITに興味があったので今年SIerに転職して1年目
・ITに関する経験①
　大学時代にC言語で初歩的な読み書きの経験はあり。マクロ作成など簡易的なコード作成はできたが、本格的な特定言語の開発経験は大学時代に関しては無し。
・ITに関する経験②
　社会人1,2年目にプログラミングのオンラインスクールで学習経験あり。この時、初めてJavaのアプリ開発に着手。内容についてはスクールでの学習期間のみでは理解が不足していたので、その後もスクールで着手したアプリの復習や改良繰り返し、スクールでの学習期間終了後もJavaの学習を継続。
 ・SIerへ転職後の研修でJavaを用いたアプリ（ECサイト）作成の経験あり。オンラインスクールでの学習経験が活かせる研修であり、この研修においてはほぼすべてのコードを設計書通りに実装できるような状態だった。
 ・SIerへ転職後の実務では開発の経験無し。
 # 本件のアプリ開発背景
 エンジニアとして将来的な独立を目指しており、まずは学習経験のあるJavaを用いたアプリ開発に着手しました。
 これまでの開発経験としては、オンラインスクールで日報管理システムの開発経験がありましたが、カリキュラムがコードをほぼコピペすると完成できるようになっていたので、開発というよりはコードの内容を理解するといった側面が強かったです。また、転職後の研修でECサイトの製作経験があり、この時はコードを読み書きできるような状態でした。設計書通りに実装するといった内容でしたが、スクールでの経験を活かしてほぼすべての機能を実装できるような状態でした。
 以上の開発経験は**自力で一から着手するといった形式ではなかった**ので、今回Javaを用いて一からアプリ開発を経験しておきたいと思い、本件に着手しました。一から開発とはいえ、ほとんどの機能はITに関する経験②の通り、プログラミングスクールで開発した日報管理システムをベースにしました。今回開発したアプリ特有の機能やデザインの部分は一から着手し、流用可能な部分は既存の機能をコピペしたという形です。
 # 予約管理アプリを選定した理由
 それほど深い理由はなく、ChatGPTから推薦された中から需要がありそうで機能的なアプリを開発したいと思い、予約管理アプリを選定しました。
 # 予約管理アプリの概要
以下3つの機能を実装した予約管理アプリをホットペッパービューティを参考にしながら作成した。
①会員管理、ログイン機能
②予約機能
③予約確認・削除機能
 
 
 # 開発期間
 GitHub上の履歴を確認すると2023年5~12月でしたが、間で資格取得の勉強を優先したので、毎日2時間ほど取り組み、実質2,3ヶ月といったところでしょうか。
 # 成果物
 GitHubで公開しております。
 reserve_system
 https://github.com/Sasaki514/reserve_system
 # 使用技術
 |種類|使用技術名|
 |---|---|
 フロントエンド|HTML, CSS
 バックエンド|Java（サーブレット、JSP）
 開発環境|Eclipse IDE(4.6.3)
 インフラ|Apache Tomcat v8.0
 DB|MySQL(5.7.33)
 DB連携|Hibernate(5.2.13final)
 # ER図
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3563748/43d55117-da1b-ec53-7db9-06955f851298.png)
 # 実装機能
 ### ①会員登録機能
 ログイン画面から会員登録できるように会員登録画面へのリンクを設置しました。会員登録画面では必要な会員情報を入力すると、会員テーブルにデータを登録できます。登録が完了すると、ログイン画面に戻りフラッシュメッセージが表示されます。
 ![新規会員登録.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3563748/d1cb6b21-1220-8a89-6efb-7d00074b2783.gif)
 ### ②ログイン・ログアウト機能
 ログイン画面ではID、パスワードを会員テーブルと照合してトップページへと遷移することが可能です。また、トップページではヘッダ部分にログインしたユーザの会員名やログアウトのリンクが表示されています。ログアウトを選択すると、ログイン情報が削除され、トップページへ遷移します。本機能でもログイン・ログアウト後にフラッシュメッセージが表示されるように実装しました。
 ![ログイン_ログアウト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3563748/8cf87d79-ed74-8d1e-615b-4434644c0f35.gif)
 ### ③予約機能
 ログインしたユーザはトップページの「予約する」リンクから予約画面へ遷移できます。予約画面は表から日付と時刻を指定して予約日時をDBに登録することができます。表は列に本日から10日分の日付を取得して表示しており、行には8～20時まで1時間ずつ表示しています。「◎」が予約可能日時となっており、予約確定画面へ遷移するリンクとなっています。予約確定画面へ遷移し、「予約を確定する」を選択すると、DBに予約日時が登録されるといった仕組みになっています。
 ![予約機能.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3563748/203dde71-400f-ae79-c841-008d71f7e146.gif)
 ちなみに、本アプリの実装で一番苦戦したのが、下記の表のように月を跨いで日付を取得した際の月の表示方法です。後の課題でも述べますが、かなり力技で解決しました。最終的には理想通りに実装できたので後に備忘録でも残したいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3563748/fe8d6f7a-c078-77df-59f1-4c5380a1bbb9.png)
 ### ④予約確認・取消機能
 ログインユーザの予約日時を確認・取消できるようにトップページに「予約確認」のリンクを設けました。予約確認画面へ遷移すると、自身の予約日時は「〇」ので表記されており、リンクへ飛ぶと予約の取消が可能です。予約の取消が確定されると、予約テーブルからその予約日時のデータが削除されることになります。
 ![予約確認_取消.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3563748/c8ca739f-73b0-5514-d9fe-b77fd08d0e78.gif)
 # 総括
 今回の取り組みについて全体的な総括を述べます。
 まず、今回の取り組みにおいてはChatGPTを最大限活用しました。基本的に理想通りに実装ができない、コードがわからない状況においてはChatGPTに投げることで、具体的なコードを用いて理想にかなり近い、かつ分かりやすく回答してくれ、実装と同時に理解が不足している点に関しては復習しながら進めることができました。通常のWeb検索よりは分かりやすさやスピードも含め比べものにならない程、有用なツールだと思います。また、実装の部分だけでなく、設計に関わる部分についても効果的な助言をくれます。たまに誤った解釈で回答される時もありますが、間違いなく実装する速度を向上させてくれるツールですので、今後も有効活用していきたいと思いました。
 また、設計は重要だなと感じました。自分はまだ機能を実装する能力しかないので、実装する機能について検討する機会はほぼ初めてだったのですが、目前の機能実装のためのコーディング中心であまり設計を考慮せずに取り組んだため、後戻り作業が多くなってしまいました。とはいえ、今回の開発当初はどのような機能を実装すべきか分かったとしても、実際に記述するコードに関する知識を有していなかったため、今回でまた多くのコードに触れることができたので良い経験になったと思います。
 # 課題
 ### 力任せなコーディング
 今回、機能は実装できても、冗長性や効率性から最適なコードであるという答えに辿り着いた機会は少なく、力任せに実装した機能が多かったです。具体的には以下3点です。できれば備忘録として別で記事を書きたいと思っています。
 ・サーブレット間の値の受け渡し方についての最適な手法。URLにパラメータを持たせるorセッションに値を格納する？
 ・予約機能・予約確認機能のスケジュールにおける予約済みor空きの表示する際の予約済みデータの照合方法。予約済みデータを表示期間の日時と照合して予約済みor空きを表示しているが、表示期間が10日間と短期間であるのに対して、過去の予約済みデータを全て照合させてしまっている。より効率的な方法があると思う。
 ・CSSの設計。CSSについても流用できるクラスが幾つかあったがその場凌ぎで類似のクラスを複数使用してしまった。HTML, CSSについては現状、優先順位が低いが継続して学習する。
# 今後の展望
独立に向けてアウトソーシングの案件サイトにて、Javaの案件などを見てそれ参考にアプリ開発に着手していく予定です。その際には設計の観点を意識して取り組みたいと思います。