この記事は、セゾンテクノロジー Advent Calendar 2025 の14日目の記事です。シリーズ2ではHULFT・DataSpiderの開発メンバーによる投稿をお届けします。
はじめに
最近、ローカル環境だけで動く簡易的な4択テストが欲しいなと思う場面がありました。
「ブラウザだけで動く軽いテストアプリが欲しい」「単一選択と複数選択が混ざる問題を作りたい」
そんな用途で、市販のLMS1を使うほどではない場面です。
そこで今回、ChatGPTを使って「ローカルで動くブラウザの4択テスト」を作ってみました。
実現したかった要件は以下のとおりです。
- Windows 11のローカルPCだけで動作する
- ブラウザだけで実行（HTML/JavaScriptのみ）
- 単一選択と複数選択の混在
- 問題シャッフル、選択肢シャッフル
- 1問ずつ出題し、回答するたびに正誤表示
- 問題はテキスト形式ファイルから読み込む
- 各問題の回答に解説
この記事では、ChatGPTとの対話だけでアプリを完成させたプロセスを紹介します。
完成したテストアプリ
まずは完成物のスクリーンショットです。
-
HTMLファイルをダブルクリックするだけで起動
-
初期画面はこんな感じ
-
問題ファイルを選択すると
-
テストを開始する
-
正解を選択して回答した場合は背景が緑っぽくなる
-
複数選択問題にも対応
-
不正解を選択して回答した場合は背景が赤っぽくなる
-
全問の回答を終えると結果が表示される
問題のデータはこんな形式で作れます。
#TYPE: single
#Q: 株式会社セゾンテクノロジーが販売するソフトウェア「HULFT」がリリースされたのはいつか。
#A: 1990年
#A: *1993年
#A: 1995年
#A: 2000年
#EXPL:「HULFT」は1993年に新製品として発売されました。リリース当初の製品名は「HUL-FT」でした。
なお、1991年は「HULFT」の開発が始まった年です。
また、1995年は「HULFT3」、1999年は「HULFT5」がリリースされた年です。
ChatGPT に相談した内容
今回の開発はすべて ChatGPT との対話のみで行いました。
最初は単純なサンプルコードを生成してもらい、その後に追加で改修を依頼しました。
最初に提示した要件は以下のとおり。
- ブラウザで実施できる4択テストを作りたい
- ローカルマシン(Windows 11)だけで動く
- 単一選択問題と複数選択問題を混在させたい
- 問題・回答はテキスト形式ファイルで入力
- コンパイル不要なスクリプト言語だと助かる
驚いたのは、回答速度と完成度の高さ。
たった1分程度で、最終版と比較しても8割以上の完成度のサンプルコードが作成されました。
もちろん、本格的な製品コードにすぐ適用できるレベルではありませんが、個人的にローカルで使うようなものと考えたら十分に事足りるものでした。
その後、以下の改修を依頼。
- 問題シャッフル、選択肢シャッフル機能の追加
- 正解確認を全問回答後ではなく、1問回答後に変更
- 解説（#EXPL）を複数行対応にする
ChatGPTにはプロトタイピングが非常に向いており、要望を投げると短時間でコードが更新されていきました。
実装したテストアプリの仕様まとめ
読み込む問題ファイル仕様
| タグ | 内容 |
|---|---|
| #TYPE | 回答の選択肢数(single=単一、multiple=複数) |
| #Q | 問題文 |
| #A | 回答の選択肢(正解には先頭に*付ける) |
| #EXPL | 解説(複数行可) |
Webアプリの動作仕様
- テキストファイルを読み込んでパース
- 回答の選択肢数によって自動で radio / checkbox を切り替え
- 1問ごとに画面を切り替え
- 回答すると即座に正誤結果を表示
- 全問題終了後にスコア表示
ChatGPTを使って開発した感想
実際にやってみて感じたメリットは以下の通りです。
✔ プロトタイプ開発が異常に早い
要件を自然言語で伝えるだけでコードが生成される。
要件変更・UI変更もプロンプト1つで済む。
✔ ローカルで動く小規模アプリと相性が良い
サーバー側の実装が不要なため、HTML/JavaScriptの生成に強いと言われるChatGPTが特に活きる。
✔ テストデータの形式調整が楽
「複数行の解説に対応して」と言うだけでコードが修正される。
まとめ
今回は、ChatGPTと対話しながらローカルで動く4択テストアプリを作成しました。
短時間で初版ができ、改善もすぐ反映されるため、プロトタイプ開発の効率が非常に高いと感じました。
ChatGPTを活用すると「こういう小さな便利ツール」をサクッと作れるので、学習・業務の補助におすすめです。
読んでくださってありがとうございました。今更感があるような内容ではありましたが、業務でちょっとしたツールが欲しいなどあればお試しいただければと思います。
-
Learning Management Systemの略で、学習管理システムのこと ↩