Zenn
🕌

研究室配属の希望調査サイトを作成した

2023/04/06に公開
個人開発
idea

背景

僕の所属する大学の学科では3回生から4回生に上がるタイミングで卒業研究のために研究室に配属されます。配属先の決め方としては38個の研究室の中から第8希望までを各々が提出して、その後GPA(成績)によって配属先が決定されます。成績優先なのか、志望順位が優先なのかとか教科による重みづけがあるのかとか詳しいことはブラックボックス化されていて分かりません。成績がいい人は自分の好きなように希望を出せばいいんですが、そうではない人はある程度情報が必要になります。そこで今回作ったようなサイトは需要があるわけです。一年前に同じようなサイトを作ってる人がいたんですがherokuの有料化でサイトが止まっていたのでじゃあ僕が作ろうと思って作り出しました。(車輪の再発明かも)

技術選定

期末試験が終わるのが2/7とかで研究室紹介が2/16,希望提出締め切りが2/27とかでした。期末試験後に思い立ったのであまり時間がなく、できるだけ慣れた技術で作ろうと思って選んだのが以下です。

フロントエンド

Next.js
MUI(CSSライブラリ)

バックエンド

auth0(ユーザー認証)
ruby on rails(APIモード)

デプロイ先

Vercel(フロントエンド)
Heroku(バックエンド)

ER図

機能

  • ユーザー登録

  • ユーザー情報設定

  • 各研究室希望者の分布

  • 各研究室希望者のGPA分布の表示
    GPA分布ページ

工夫点

フロントエンド

  • Next.jsでコンポーネント化することを意識した。
    • useApiAgentカスタムフック
  • テーブルのレスポンシブデザイン
    • 携帯画面では各研究室の行を2行にしたり、paddingを小さくして横スクロールをしなくていいようにした。
  • 自分が投票しているところは背景が黄色になるようにして分かりやすくした。
  • GPA分布は希望順位ごとに色をグラデーションで変えた。

バックエンド

  • UserテーブルとLaboratoryテーブルが多対多の関係だったので中間テーブルを作成した
  • 他の学校とか学科の希望調査にも対応できるようなDB設計にした。
    • Surveyテーブルにyearカラムを付け加えて同じ学科の違う年度対応もした
  • auth0を用いることでpassword、メールアドレス管理を自分でしなくていいようにした。
  • CORS対策

その他

  • 京大メールアドレス認証を必須とした。
  • モノレポで管理

結果

Twitterと学科のグループラインで広報した結果、最終的に投票者数は63人、登録者数は112人になりました。当初の目標として投票者数が50人いくといいなと思っていたので成功だと思います。作って良かった。

課題

  • 嘘の成績を書く人はそこそこいてあんまりGPA分布に関する信頼性はなかった。MAXが4.3なので4.3以上と書いてると明らかに嘘とわかるが4とかだと本当か嘘かわかんなかった。「嘘の情報は書いていません」みたいなチェックボタン画面があっても良かったのかも。
  • 研究室データをrails consoleで一個一個手入力してた。もう少し上手いやり方があったと思う。
  • 京大生なら誰でも入力できる状態ではあった。他の学科の人が入力するメリットが特にないのでスルーした。
  • 1ユーザーあたり投票は1つまでという実装をしたはずだが時々二重でrequestが飛んできて複数投票されていた。手元で再現できず原因がわからなかったので自分で重複データを削除することになってしまった。
  • テストを書いてない
  • newでデータ更新を行なってしまっている

サイト

https://ku-lab-match.vercel.app

Discussion