LoginSignup
6
8

More than 1 year has passed since last update.

開発未経験の素人がSpringBoot & AWSでポートフォリオを作成したら

Last updated at Posted at 2022-05-26

この度ポートフォリオとして、SpringBootで食事記録管理アプリを作成いたしました。
こちらの記事では、アプリの機能などを紹介していきます。

どんなアプリ?

健康に関する悩みやグチを相談,共有できる食事管理アプリです。
MyVideo_0_AdobeCreativeCloudExpress_AdobeCreativeCloudExpress.gif

何が出来る?

日々の食事の記録がつけられる

・食事の記録を投稿・編集・削除できる
・記録はカレンダー形式で表示されるので、いつ何を食べたかスグに振り返ることが出来る
MyVideo_1_AdobeCreativeCloudExpress_AdobeCreativeCloudExpress.gif

健康に関する悩みを相談したり、グチを聞いてもらえる

・健康の悩みを共有、質問できる
・投稿をカテゴリーで検索して、同じような悩みを抱えている人がどう過ごしているのか等を知ることが出来る
MyVideo_2_AdobeCreativeCloudExpress_AdobeCreativeCloudExpress (1).gif

作成背景

 健康を意識した生活で生じた悩みやストレスを第三者に打ち明け、前向き&継続的に健康生活に取り組めるようなアプリ を作成したいと思い、 Boyaki-Diningを作成いたしました。

 私事ですが、21年秋ごろの定期健診で尿酸値が高いと診断され、食事・運動に気を付けた生活を始めました。しかしリモートワークとコロナ禍による閉塞感に加え、悩みを相談する相手が身近にいないことから、 健康に気を使う暮らしがストレスになり、既存のアプリやメモ帳だけでは思ったように食事管理が続きませんでした。

 アプリ作成のアイディアを思いついたのは、あるラジオ番組のお悩み相談のコーナーでした。 「自身の悩みを第三者に打ち明ける、話だけでも聞いてもらうと気持ちが楽になる」 ということに気づき、 これを食事管理アプリの機能の一部として実装出来ないか考えました。また、コロナ禍における健康づくり に悩んでいる人がとても多いことを同ラジオ番組で知ってから、より一層アプリ制作の意欲が高まり、開発を始めました。

使用技術

バックエンド

  • Java 17
  • Spring boot 2.6.6
    • Spring Data JPA
    • Spring Security
    • Spring Validaton
    • Spring Cloud for Amazon Web Services
  • mybatis 2.2.2
  • passay 1.6.1
  • junit 5.8.2
  • dbunit 2.6.0
  • mockito 4.0.0

フロントエンド

  • HTML(Thymeleaf), CSS
  • javaScript
    • JQuery 3.5.1
    • fullcalendar 3.5.1
    • Vue
    • Axios

データベース

  • MySQL 8.0.20
  • h2database 1.4.200

h2はテスト時のデータベースとして使用しています。

インフラ

  • AWS
    • VPC
    • EC2
      • Nginx 1.20.0
      • Tomcat 9.0.60
    • RDS
    • S3
    • Route53

実装機能

  • アカウント周辺機能
    • 会員登録・退会機能
    • ログイン機能
    • ゲストログイン機能
    • パスワードを忘れた際の再設定機能
    • プロフィール、パスワード変更機能
    • BMI計算機能
  • 管理機能
    • 公序良俗に反するような投稿,コメントの削除機能
  • 食事管理機能
    • 食事記録の登録・編集・削除機能
    • 写真のアップロード機能
  • 相談・グチ機能
    • 相談、グチの投稿
    • 相談、グチの投稿に対するコメント機能
    • 相談、グチの投稿に対するいいね機能
    • 投稿種別絞り込み機能
    • 検索機能

DB設計

database.jpg

インフラ設計

sample.jpg
ACMを利用したSSL認証ではなく、EC2内のサーバ(Nginx)にサーバ証明書を設定してhttps接続を実現しています。

アプリ作成にあたり意識したこと

コーディング後にテストを実施する

 アプリ作成開始時は、テストコードとは何ぞやというところからのスタートでした。主にQiitaの記事でテストデータの準備,テストコードの書き方等を学び、後は書籍や公式ドキュメントを参考にしながらテストコードを書いていきました。結果、エラーや不具合を事前に見つけたり、エラー解消にかかる時間を削減することが出来ました。

チーム開発を意識した実装

 Git,Githubでソースコードを管理し、実装したい機能に合わせてissuesを作成し、
「コーディング→単体テスト→結合テスト→プルリクして確認後にマージ」という流れで開発を進めました。

見直した時に分かりやすいコードにしておく

 こちらはソースコード見直し時間の短縮を狙って行いました。初めて使うライブラリのメソッドや複数の条件分岐をもつメソッドにコメントを残したり、ファイル名や変数名はなるべく分かりやすい名前を付けていました。ただ、命名に関しては完璧ではないものもあり、まだまだ勉強中です。

苦労したこと、反省点

サーバ、インフラ構築に手間取った

 某動画学習サイトで、AWSを用いたインフラ構築を参考にWebサーバを準備しました。サーバやインフラの知識を学びながら構築していったので、想定よりも完成がかなり遅れてしまいました。特にSSL認証やContent-Security-Policyの設定に相当時間を食われてしまいました。
 退屈だと感じても、先にこちらの勉強を進めておくべきだったと反省しています。

似た処理を複数のクラスに記述している

 ユーザがパスワードを変更した際にパスワード履歴テーブルにレコードが追加されるのですが、新規登録機能・パスワード再設定機能・パスワード更新機能でそれぞれSQLを作成しています。機能ごとにメソッド,SQLを作成していたので、共通の処理で済むということに後から気づきました。。。こちらは今後の改善点として、リファクタリングを行う予定です。

MyBatisに拘らなくても良かった

 「SQLとソースコードを分離できるなんてメチャクチャ便利じゃん!」と思い、全てのデータアクセスをMyBatisで実現しました。しかし振り返ってみると「単純なデータを取るだけならJpaRepositoryでも良かったのでは?」と思ってしまいました。複雑なテーブル結合が絡むデータ取得だけをMyBatisで実現していたら、SQLを書いているxmlファイルの管理が今よりも楽になったかもしれません。

食事管理機能がインパクトに欠けている

 このアプリの食事管理機能は「いつ何を食べたか」を記録してカレンダー形式で表示するシンプルなもので、既存のアプリと比較するとカロリー計算などのサポート機能がありません。機能拡張のアイディアとしては、

  • 記録フォームに魚,野菜などの分類を設け、「〇〇類を食べ過ぎです!」などのメッセージを画面に出す
  • プロフィールから目標を設定し、カレンダーに反映させてモチベーション向上を図る
  • 運動量から、おおよその消費カロリーを計算する

というようなことを考えております。

ポートフォリオ作成を経て得られたもの

テストコードを書く習慣

 ポートフォリオ作成前にサンプルアプリを作って勉強していた時は、テストコードの書き方すら知りませんでした。開発中はテストでOKになってからコミットするように徹底していたので、自然と習慣として身に付きました。
 テストコードを書くようになってから、「アプリを起動して画面ごとに動きをチェックして、エラーが出たら停止して修正して・・・」というイケてない作業時間を大幅に削ることに成功しました。

バックエンド以外の知識

 反省点でも書きましたが、サーバやインフラについて勉強しながらWebサーバを構築していました。その甲斐あってポートフォリオ作成開始時に比べ、基礎的な知識+基本のセキュリティ設定方法が身に付きました。
 また、javascriptとvue.jsの基礎もイチから勉強していました。非同期通信(axios)を実現したくて始めた基礎勉強が想像以上に楽しく、アプリ制作のモチベーションupにも影響してきました(コレが完成したらVueとSpringでSPAアプリを作ってみたい!くらいのモチベーションです)。
 Spring Bootで学んだことも沢山ありますが、それ以外の技術的な収穫がかなり大きいと個人的に感じています。

「出来ることが増えていく」という嬉しさ、達成感

 こちらは精神的な収穫ですが、座学だけでは決して得られなかった経験です。実装に苦戦した機能が想定通りに動いたときの喜び は、プログラミング経験のある方なら少なからず思い当たるものがあるかと思います。開発中は困難にぶつかることのほうが多かったですが、それを乗り越えた時の達成感は言葉では表せないほどです。私の一番のモチベーションは「今まで出来なかったことが、学んだことを生かして出来るようになる」なのですが、今回のアプリ制作でそれを再確認できました。

さいごに

 思い通りの機能が実現できた時の達成感と、自身の技術力の拙さを知ることが出来たので、ポートフォリオを作成して本当に良かったと思っています。まだまだ改善点の多いアプリですので、今後の自主学習と並行してリファクタリングも少しずつ進めていく所存です。

 ご意見・ご質問・ご指摘等あれば、コメントで教えていただけると幸いです。
ここまで読んでいただき本当にありがとうございます。

ソースコード

6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8