作成したWEBアプリリンク
ユーザ作成が面倒な人は、「ユーザ：test,パス:test」でログインできます
*無料プランのため、初期サイト表示に時間がかかります。

(Ver2追記)
それすら面倒な人は、ゲストログインできます
Ver2の記事

1. はじめに

一個くらいWEBアプリを作っておきたいよなという思いと、勉強になるかなという考えで実行に至った。

意識したこととしては、別記事に書いたが　参考：作成前に書いた記事
「形にする、突き詰める、あきらめない」

2. アプリ概要

大喜利投稿サイトを作成　//当初、投稿サイト(某X)みたいなのを考えたが、ありきたりと思い変えた
できることは以下

ユーザ管理（登録、ログイン）
お題の一覧表示、登録
回答の一覧表示、登録、投票
回答の集計

3. ツール・技術・環境

使用ツール

A5m2：DB表示
VScode：エディタ
DockerDesktop：Dockerを使用してローカル環境を構築
Render：デプロイするクラウドプラットフォーム

使用技術

言語：Java
フレームワーク：Spring Boot
テンプレートエンジン：Thymeleaf
フロントエンドUIフレームワーク: Bootstrap
データマッパー：MyBatis
ビルドツール：Maven
バージョン管理：Git (GitHub)
デプロイ先：Render
データベース：PostgreSQL
コンテナ化：Docker

ブランチ

以下の二ブランチで作成

開発用:devlop
　・ローカルでチェックアウトし、編集するブランチ
　・Rnederにはこちらも登録しているので、デプロイまで確認できる
本番：main
　・安定稼働するものを配置
　・devlopが問題なさそうな時に、マージ (GitHubで)

環境

ローカル
　・アプリ：Tomcat（Spring Bootには埋め込みTomcatサーバーが含まれている）
　・DB：DockerDesktop
デプロイ時
　・アプリ：Dockerコンテナ
　・DB：Renderサービス

Render画面

4. 詳細

機能一覧

以下の機能をもつ

ログイン・ログアウト
ユーザ登録
お題一覧/登録
お題回答/投票(/閲覧)
投票結果確認

画面一覧

ログイン画面：登録済みのユーザでログインできる
ユーザ登録画面：ユーザを登録することができる
お題一覧画面(ホーム)：回答・投票を受け付けているお題を表示
*回答・投票済みの時はボタン表示を変更
回答画面：お題に対して回答をする。回答済みのお題は非活性となる(回答は一回まで)
投票画面：回答に対して投票ができる
　
回答閲覧画面：投票済みのお題は回答を閲覧することができる。また、投票先を変更することもできる。投票済みの回答には、「済」スタンプが雑につく。
結果画面：受付時間が過ぎたお題について、投票数を表示する。一位の回答には、「一位」スタンプが雑につく。
お題追加画面：お題を追加することができる。全項目必須。精査は特にしてない。

DB

以下の４テーブルを作成した

アカウントTBL
回答TBL
お題TBL
投票TBL

＊A5m2で表示
回答、投票はお題に対して一回だけという思想のもと作成した。
投票テーブルでは、お題とユーザを主キーに持たせた。投票は変更できるので、その時は、投票テーブルのレコードを「削除→追加」とすることで実現した。

5. 開発の進め方

以下の流れで作成していった

Githubの看板でやるべきことを記載(issue)
今日の目標分をTODOに持ってくる
ローカルで作成・動作確認(devlopブランチ)
Githubコミットプッシュ/デプロイ　＊Rnederがプッシュをトリガーにデプロイ実行
問題なければ、devlopブランチをmainブランチにマージ
mainでも問題なければDONEに持って行って終了

やりながら思いついた「これもできたらいいな」はissueをすぐ切って、後でやる！
いきなりてんこ盛りにしないことを心がけた。

また、chatGPTをフル活用した。エラー情報を検索することもしたが、エラー文を丸投げして、要約させたりもした。

6. やってみての感想

なんだかんだ、継続して作成できたので満足である。あまりこだわり過ぎてもな見た目に関しては、妥協をガンガンしていったのは良かった。
なんとなくで理解していた技術について、手を動かすことで、嫌でも理解しなければならないので、身になる理解ができた。
自分は手を動かさないと理解できないタイプなのだろう。これはこの先向き合っていかなければ・・・

反省

環境構築時に結構エラーを受けて、何とか解決できた。その時にナレッジを記事に出来ればよかった。
chatGPTに丸投げで、思考を放棄することがあったのは半々だな・・
また、テストコードをサボったのは反省したい

7. さいごに

雑になったところもあると自覚しているので、第二弾はリファクタリングをしていきたい。
また、機能追加などもしていきたい。

皆さんも、一つくらいWEBアプリを作成してみてもいいのでは？知識も身に付き、自身にもなる。なにより、自分の思考を形にすることはとても楽しいよ！

8. 参考

参考にしたyoutube

こちらは初心者にはとても分かりやすく丁寧でした。技術はほとんどこちらの動画で紹介されたものを使用した。また、質問対応もしてくださる投稿者様であった。

目次