【個人開発】プログラミング初心者がテスト成績を管理するアプリを作成しました。

# はじめに
前職は、公立中学校で教師をしていました。
授業の中で、毎回小テストを行っていたのですが、結果が視覚的に分かりやすくなるよう、折れ線グラフにして記録させていました。その結果、生徒の小テストに対するやる気が向上していきました。
しかし、生徒一人ひとりのデータを個別に折れ線グラフにする作業が非常に手間であるという課題がありました。
また、学期末の成績を出す際、生徒が小テストや、実力テスト、定期考査など異なる種類のテストを受ける中で、成績の伸びを正確に把握することが難しいと感じていました。

# サービス概要
### My Progress Report
URL: https://myprogressreports.com/
![Qiita](https://i.gyazo.com/3b9d9476285cc3be6170a7004b44fcf9.jpg)
テスト成績を管理するアプリです。
* ユーザーはテストの名前、取得点数、そして最大得点が何点かを入力し、自動的に達成率が計算されます
* これまでのテスト履歴を一覧で確認し、達成率の推移を折れ線グラフで視覚的に把握することが可能です
* ユーザーはグラフを使って成績の推移や勉強時間との関係を視覚的に確認できます

# 使い方
|トップ画面| 👤 学校登録機能 |
|:-:|:-:|
|[![Image from Gyazo](https://i.gyazo.com/3ea6ee8e367ae2dfbff75f05ed748b0c.gif)](https://gyazo.com/3ea6ee8e367ae2dfbff75f05ed748b0c)|[![Image from Gyazo](https://i.gyazo.com/b5584e5be81eba58fee83a595bed1361.png)](https://gyazo.com/b5584e5be81eba58fee83a595bed1361)|
|このアプリで教師、生徒ができること、管理者へのログインを誘導しています。|まずは、学校を登録します。学校が登録されると自動で学校コードが発行されます。それは、先生や生徒がログインする時の学校コードになります。|

| 👤 先生、クラス名追加機能 | 👤 先生の編集機能 |
|:-:|:-:|
|[![Image from Gyazo](https://i.gyazo.com/3f342cc72ca305161a83f067b3b34234.gif)](https://gyazo.com/3f342cc72ca305161a83f067b3b34234)|[![Image from Gyazo](https://i.gyazo.com/5e5d5a31d82e5231eee913d3acb773e7.gif)](https://gyazo.com/5e5d5a31d82e5231eee913d3acb773e7)|
|学校を登録したら、学校の先生やクラス名を登録することができます。|登録した先生を編集することができます。|

| 👩‍🏫 テスト要素追加機能 | 👩‍🏫 生徒一覧機能 |
|:-:|:-:|
|[![Image from Gyazo](https://i.gyazo.com/0ab1c7e326794c2adc2df591a636351b.gif)](https://gyazo.com/0ab1c7e326794c2adc2df591a636351b)|[![Image from Gyazo](https://i.gyazo.com/b2220df83fb74d606e52a7f6aa54c6bc.gif)](https://gyazo.com/b2220df83fb74d606e52a7f6aa54c6bc)|
|テストの科目や、テスト名、満点などテストの要素を追加することができます。|生徒一覧機能から、学校の生徒一覧を確認することができます。そこから生徒の詳細見たり、編集を行ったりすることができます。|

| 👩‍🏫 テスト結果一覧機能 | 👩‍🏫 平均達成率ランキング |
|:-:|:-:|
|[![Image from Gyazo](https://i.gyazo.com/846f3a2fad7484cad955719663405c58.gif)](https://gyazo.com/846f3a2fad7484cad955719663405c58)|[![Image from Gyazo](https://i.gyazo.com/742fc40a9204eb8b7574156b60815c8e.gif)](https://gyazo.com/742fc40a9204eb8b7574156b60815c8e)|
|テスト結果一覧画面で、生徒の成長をグラフで確認できたり、そのテストの生徒の目標などの詳細情報、編集を行うことができます。|全てのテストの平均達成率を出し、学年ごとのランキングを確認することができます。|

| 👥 テスト結果入力機能 | 👥 テスト結果編集機能 |
|:-:|:-:|
|[![Image from Gyazo](https://i.gyazo.com/36b7fcae37bbdb03d7e6283cb24aa666.gif)](https://gyazo.com/36b7fcae37bbdb03d7e6283cb24aa666)|[![Image from Gyazo](https://i.gyazo.com/8971b2a360a27fa1cb9eb418986f9e1c.gif)](https://gyazo.com/8971b2a360a27fa1cb9eb418986f9e1c)|
|テスト結果を入力します。先生が事前に登録した、テスト名、満点、教科がドロップダウンで出てくるようにして、入力する手間を省いています。|登録したテスト結果を編集したり、削除したりすることができます。|

| 👥 グラフで見る機能 | 👥 目標を設定する機能 |
|:-:|:-:|
|[![Image from Gyazo](https://i.gyazo.com/51af809c55b196848aab2049abd42bdd.gif)](https://gyazo.com/51af809c55b196848aab2049abd42bdd)|[![Image from Gyazo](https://i.gyazo.com/0bb6a7d791eb89aaa832fd46ce9c95c9.gif)](https://gyazo.com/0bb6a7d791eb89aaa832fd46ce9c95c9)|
|テスト結果を入力すると、教科ごとのグラフを作成してくれます。また、学習時間と達成率の相関図も確認することができます。|テストに向けて、目標を設定することができます。|

| 👥 目標とテスト結果を比較する機能 |
|:-:|
|[![Image from Gyazo](https://i.gyazo.com/0a165c41dec122197e248f052012d301.png)](https://gyazo.com/0a165c41dec122197e248f052012d301)|
|目標とテスト結果の比較ができます。目標を達成したら緑で目標達成、達成できなかったら青で目標未達成と表示されます。|

# 使用技術について
| カテゴリ | 技術 |
| --- | --- |
| フロントエンド | Rails 7.1.3.2 (Hotwire/Turbo), Bootstrap |
| バックエンド | Rails 7.1.3.2 (Ruby 3.1.4 ) |
| データベース | PostgreSQL |
| インフラ | Heroku |

### 苦労した点
1 複数の立場でのログイン管理
 * **課題**: Deviseを使用して管理者、教師、生徒の3つの異なる立場でログインする必要がありました。
 * **解決策**: Deviseをカスタマイズし、各立場に応じた認証方法を実装しました。教師と生徒はeメール以外の方法でログインする機能を追加しました。

2 学校コードに基づくログインルーティングの実装
 * **課題**: 学校コードを持ってから生徒と教師がログインするためのルーティングを実装する必要がありました。
 * **解決策**: 学校コードを使用してログインする際のルーティングを設定し、それぞれのユーザーが適切なアカウントにアクセスできるようにしました。

3 教科ごとのテスト結果のグラフ化と重複の防止
 * **課題**: 同じテスト名のテストでも、異なる教科ごとにテスト結果のグラフを出力し、結果が重複しないようにする必要がありました。
 * **解決策**: データベースにおけるテスト結果の教科ごとの管理を実装し、各教科ごとに異なるグラフを生成するためのデータ処理を追加しました。

# おわりに
自分でアプリを開発する経験がなかったため、何から始めれば良いのか全くわからず、とても苦労しました。
何とか形にはなりましたが、自分のアプリはどこに向かっているのか、分からず思考が停止することも多々ありました。個人開発は、アイデアを出す時からこのようなサービスを出すというゴールまで、イメージして実装していくことが一番大切なのだと学びました。