はじめに
名古屋の某大学で情報工学を学んでいる はる です。
今回は、初めて(ほぼ)個人でWebアプリを開発した経験を共有します。
開発の経緯や詳細な流れについては、こちらのQiita記事もご覧ください。
アプリURL
アプリGitHub
開発に至った理由
塾講師としてアルバイトをする中で､
受験生の進路選択において、以下の問題に気づきました:
- 情報不足: 多くの受験生が、志望学科について十分な情報を持たずに進路を決めている
- 進路の重要性: 学科選びは大学生活、ひいてはその後の人生に大きな影響を与える
- サポートの必要性: 大学受験塾での経験から、受験生が自分に最適な学科を選ぶための情報とツールが求められていると実感
これらの背景から、受験生がより良い進路選択を行えるよう支援するアプリケーションの開発に踏み切りました。
開発の推移
-
ハッカソンでの初期開発
大学主催のハッカソンで、所属大学向けに学科適性診断アプリを開発。
このフェーズでは、特定の大学に限定した診断機能に焦点を当てました -
個人開発フェーズ
ハッカソンで得たフィードバックを基に、機能を大幅に拡張。- ユーザー生成コンテンツ: 全ユーザーがクイズを作成できるようにし、診断対象の大学を多様化。
機能
ホーム画面
赤のボタン→ログイン･ログアウト
緑のボタン→クイズ一覧画面
青枠のボタン→クイズ作成画面
水色枠のボタン→作成したクイズの一覧･削除
ログイン･サインアップ画面
メールアドレス･パスワードを登録してログイン｡
パスワードはハッシュ化してDBに保存｡
クイズ作成画面
大学名･学部数･質問数･選択肢数を入力
学部名を入力
質問テキストを入力
1つの質問に対して､それぞれ選択肢のテキストを入力｡
選択肢それぞれに､各学部の得点を入力｡
クイズ一覧画面
クイズを始めるより､クイズ開始｡
他ユーザーが作成したクイズも表示される｡
クイズ画面
選択肢をクリックし､次へを押す
クイズ結果画面
ChatGPT-4o-miniからのコメントと､各学部の得点グラフを表示
作成済みクイズ表示･削除
クイズ削除は､クイズ作成者のみが行うことができる｡
ER図
意識した点
-
MVT原則の徹底
View（=Controllers）には、DB操作のコードをできるだけ書かず、役割を明確に分けることを意識｡ -
事前設計の重視
画面遷移図やER図を設計段階で作成することで、システム全体の見通しを持ちながら開発を進めることができた｡
まだまだな点
-
クイズ作成の手間
実際にアプリを使ってみると、各選択肢ごとに学部の得点を入力する必要があり、クイズ制作が非常に手間取ることが分かった ｡
※ UIがまだユーザーフレンドリーではない -
設計､技術選定の改善余地
バックエンドとフロントエンドの分離が十分に行われておらず、モダンな開発手法からはやや離れた構造になっている｡
これからやりたいこと
-
UI/UXの向上
クイズ作成画面の操作性を改善し、ユーザーフレンドリーなインターフェースを目指す -
システムアーキテクチャの刷新
バックエンドとフロントエンドを明確に分離することで、よりモダンな開発環境への移行を検討｡
Reactの導入など｡