現在、専門学校でプログラミング教育に携わっており、担当している学生たちは今後Ruby技術者認定試験 Silverの受験を予定しています。
試験対策を進める中で感じたのが、学習教材の不足です。
市販の参考書や問題集はありますが、出題数には限りがあります。また、同じ問題を繰り返し解いていると、知識を理解しているというより答えを覚えてしまうケースも少なくありません。
そこで学生向けにオリジナル問題を作成してみることにしました。
実は問題を作ること自体は、それほど大きなハードルではありませんでした。
以前、高校教員として勤務していた経験があり、定期テストや小テスト、検定対策問題などを作成していたためです。
学習目標を整理し、理解度を確認するための問題を作るという作業には慣れていました。
しかし今回は少しアプローチを変えてみました。
問題を自分で作るのではなく、生成AIに作らせてみることにしたのです。
もちろん、AIが作った問題をそのまま採用するわけではありません。
- 問題文は適切か
- 選択肢に誤りはないか
- Rubyの仕様として正しいか
- Silver試験レベルに合っているか
といった観点で、私は「作問者」ではなく「レビュー担当」として関わることにしました。
実際に試してみると、問題のたたき台を作るスピードは非常に速く、人間は品質確認や難易度調整に集中できます。
作成した問題はGitHub上でRuby Silver向けのオリジナル問題集として公開し、学生に解かせてみました。
ただここで、新たな課題も見えてきました。
- 学習履歴が残らない
- 正答率が分からない
- 苦手分野を分析できない
- 模擬試験形式で取り組みにくい
せっかくなら、学習サービスとして使える形にできないかなー
そこで今回、ChatGPTを活用しながらRuby Silver学習サービスの設計を行ってみました。
この記事では、実際にどのような流れで設計を進めたのかを紹介します。
なお、次回の記事では、この設計書をもとにClaude Codeを使ってLaravelアプリを実装していく予定です。
ChatGPTとの設計をスタート
まずChatGPTに伝えたのは、現在の状況と実現したいことです。
- GitHubでRuby Silver向け問題集を公開している
- Webアプリとして公開したい
- 学習履歴を残したい
- 苦手問題を復習できるようにしたい
- できるだけ無料で運用したい
- すでに契約しているレンタルサーバを利用したい
最初は漠然としたアイデアしかありませんでしたが、ChatGPTとの対話を進めることで、少しずつサービスの形が見えてきました。
ChatGPTは、「まずMVP（最小構成）を決めましょう」という方向で整理してくれました。
これまで学校現場で学生を指導していた際、学生からの要望として多く聞いていたのが、要件定義や設計では「思いついた機能をたくさん並べてしまう」ことでした。
私自身も学生にアドバイスしていたことでもあったので、納得して進めることができました。
機能を増やすことよりも、「まず利用できる状態にする」ということだね
結果として、初期リリースでは以下の機能に絞ることにしました。
- 会員登録・ログイン
- 1問1答学習
- 模擬試験
- ダッシュボード
- 苦手問題復習
学習モードの整理
設計の中で最初に決めたのが「学習モード」です。
最初は単純に問題を出題するだけでも良いと思っていました。
しかし実際の試験対策を考えると、用途は大きく2つあります。
1問1答モード
知識の定着を目的とした学習モードです。
特徴は、
- 1問ごとに回答
- すぐに採点
- その場で解説表示
という流れです。
間違えた場合も、その場で解説を確認できるため、理解しながら進めることができます。
通学時間や自宅でのちょっとした隙間時間にスマホでサッと取り組めるようにします
模擬試験モード
本番を意識した実践形式です。
こちらは、
- Round1〜Round6の問題を混在
- 50問出題
- 回答中は正誤を表示しない
- 最後に一括採点
という形式にしました。
また、結果画面では正答率だけでなく、間違えた問題をまとめて確認できるようにしました。
机に向かって取り組めるよう、実際の試験に近い体験を目指しました
問題データ管理をどうするか
今回の設計で一番悩んだのが問題管理です。
一般的な学習サイトであれば、
- 管理画面から問題を登録
- データベースに保存
という構成が多いと思います。
しかし今回は、もともとGitHubで問題を公開していました。
そこでChatGPTから提案されたのが、「GitHubを問題データのマスターにする」という方式です。
イメージとしては、
GitHub
↓
questions:sync
↓
データベース
という流れです。
問題はJSONファイルとして管理し、Laravelのコマンドで同期します。
この方法のメリットは非常に大きく、
- Gitで履歴管理できる
- Pull Requestでレビューできる
- 問題の修正履歴が残る
- バックアップを兼ねられる
という運用が可能になります。
教育用コンテンツとの相性も良く、結果的にこの方式を採用することにしました。
技術選定
続いて技術選定です。
今回は既に利用しているサーバ環境も考慮し、Laravelで開発することにしました。
構成は以下の通りです。
- Laravel
- MySQL
- Tailwind CSS
- Laravel Breeze
最近はReactやNext.jsを使った構成も増えていますが、今回は学習サービスということもあり、まずはシンプルな構成を優先しました。
また、運用コストを抑えるため、既に契約しているレンタルサーバ上で動作させる想定です。
データベース設計
ChatGPTとのやり取りでは、データベース設計もかなり細かく整理しました。
主なテーブルは以下の通りです。
- users
- questions
- choices
- user_answers
- exams
- exam_results
- exam_answers
- study_logs
当初は問題とユーザーだけあれば良いと思っていましたが、
- 学習履歴
- 模擬試験履歴
- 苦手問題分析
- ダッシュボード集計
などを考えると、それなりにテーブル設計が必要になります。
ChatGPTに相談しながら整理することで、「将来的に必要になるもの」も見据えた設計にすることができました。
ワイヤーフレーム作成
設計の後半では画面設計も行いました。
作成した画面は、
- トップページ
- ダッシュボード
- 1問1答
- 模擬試験
- 試験結果
- 苦手問題
- 管理画面
などです。
個人的に良かったのは、機能だけでなくユーザー導線まで整理できたことです。
例えばログイン後は、
ダッシュボード
↓
1問1答 または 模擬試験
↓
結果確認
↓
苦手問題復習
という流れになります。
実際に画面遷移を整理してみると、
「この画面が必要だった」
「この情報はいらないかもしれない」
といった気付きもありました。
ChatGPTを使って感じたこと
今回の設計で感じたのは、ChatGPTは設計そのものを代わりにやってくれるというより、「設計の壁打ち相手」として非常に優秀だということです。
アイデアを投げると、
- 抜け漏れを指摘してくれる
- 代替案を提示してくれる
- 設計を構造化してくれる
ため、自分一人で考えるよりも圧倒的に整理が早く進みました。
もちろん最終的な判断は人間が行う必要があります。
しかし、「何を決めるべきか」を明確にしてくれるだけでも非常に価値があると感じました。
次回予告
今回の段階で、
- 要件定義
- データベース設計
- Model設計
- Service設計
- Route設計
- Controller設計
- ワイヤーフレーム
- 開発ロードマップ
まで完成しました。
次回は、この設計書をClaude Codeに渡し、Laravelアプリとして実装していきます。
設計から実装まで生成AIがどこまで開発を支援できるのか、とっても楽しみです！
