Webアプリ作成初心者が受験生に届くWebアプリを作りたかった

# はじめに

名古屋の某大学で情報工学を学んでいる **はる** です。  
今回は、初めて(ほぼ)個人でWebアプリを開発した経験を共有します。  
開発の経緯や詳細な流れについては、[こちらのQiita記事](https://qiita.com/hayashi1917/items/793d0252fc930c7451ed)もご覧ください。
[アプリURL](https://nitech-department-app.onrender.com/)
[アプリGitHub](https://github.com/hayashi1917/Nitech-Department-App)

# 開発に至った理由
塾講師としてアルバイトをする中で､
受験生の進路選択において、以下の問題に気づきました:

- **情報不足**: 多くの受験生が、志望学科について十分な情報を持たずに進路を決めている
- **進路の重要性**: 学科選びは大学生活、ひいてはその後の人生に大きな影響を与える
- **サポートの必要性**: 大学受験塾での経験から、受験生が自分に最適な学科を選ぶための情報とツールが求められていると実感

これらの背景から、受験生がより良い進路選択を行えるよう支援するアプリケーションの開発に踏み切りました。

# 開発の推移

1. **ハッカソンでの初期開発**  
   大学主催のハッカソンで、所属大学向けに学科適性診断アプリを開発。  
   このフェーズでは、特定の大学に限定した診断機能に焦点を当てました

2. **個人開発フェーズ**  
   ハッカソンで得たフィードバックを基に、機能を大幅に拡張。  
   - **ユーザー生成コンテンツ**: 全ユーザーがクイズを作成できるようにし、診断対象の大学を多様化。  

# 機能
### ホーム画面 
![スクリーンショット 2025-02-18 125007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/05d50db9-d25d-47b6-b942-948d412f7ca3.png)
赤のボタン→ログイン･ログアウト
緑のボタン→クイズ一覧画面
青枠のボタン→クイズ作成画面
水色枠のボタン→作成したクイズの一覧･削除

### ログイン･サインアップ画面
![スクリーンショット 2025-02-18 124718.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/db269c14-6d4d-4eb5-89c6-66bf0b8c4b52.png)
メールアドレス･パスワードを登録してログイン｡
パスワードはハッシュ化してDBに保存｡

### クイズ作成画面
![スクリーンショット 2025-02-18 124436.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/803f6ce3-7ebb-45cc-a5a6-21f9923e7ef7.png)
大学名･学部数･質問数･選択肢数を入力

![スクリーンショット 2025-02-18 124508.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/ce30a564-3279-4a55-85fd-6c995c02dce0.png)
学部名を入力

![スクリーンショット 2025-02-18 124601.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/eea6b858-31b6-4cc8-817f-f64ed07ab4a8.png)
質問テキストを入力

![スクリーンショット 2025-02-18 123713.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/7b23532e-94b8-4188-8152-b36e77f836d0.png)
1つの質問に対して､それぞれ選択肢のテキストを入力｡
選択肢それぞれに､各学部の得点を入力｡

### クイズ一覧画面
![スクリーンショット 2025-02-18 124655.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/6247fa5d-add1-4bc5-be1f-116596df3ec1.png)
クイズを始めるより､クイズ開始｡
他ユーザーが作成したクイズも表示される｡

### クイズ画面
![スクリーンショット 2025-02-19 023743.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/6ebabd0c-852c-44cd-aa5e-23312fc87768.png)
選択肢をクリックし､次へを押す

### クイズ結果画面
![スクリーンショット 2025-02-19 023839.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/e52ec668-d76b-43b3-9534-d6e91d1e524e.png)
ChatGPT-4o-miniからのコメントと､各学部の得点グラフを表示

### 作成済みクイズ表示･削除
![スクリーンショット 2025-02-18 124736.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/45c48f14-af1d-41f4-a70e-e344dd77ceff.png)
クイズ削除は､クイズ作成者のみが行うことができる｡

# ER図
![ER.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745562/0f14bfbf-f8c3-4d32-82aa-21429e099197.png)


# 意識した点

- **MVT原則の徹底**  
  View（=Controllers）には、DB操作のコードをできるだけ書かず、役割を明確に分けることを意識｡
- **事前設計の重視**  
  画面遷移図やER図を設計段階で作成することで、システム全体の見通しを持ちながら開発を進めることができた｡

---

# まだまだな点

- **クイズ作成の手間**  
  実際にアプリを使ってみると、各選択肢ごとに学部の得点を入力する必要があり、クイズ制作が非常に手間取ることが分かった  ｡
  ※ UIがまだユーザーフレンドリーではない

- **設計､技術選定の改善余地**  
  バックエンドとフロントエンドの分離が十分に行われておらず、モダンな開発手法からはやや離れた構造になっている｡

---

# これからやりたいこと

- **UI/UXの向上**  
  クイズ作成画面の操作性を改善し、ユーザーフレンドリーなインターフェースを目指す

- **システムアーキテクチャの刷新**  
  バックエンドとフロントエンドを明確に分離することで、よりモダンな開発環境への移行を検討｡
  Reactの導入など｡