【サーバー不要】模擬試験の効果を最大化させるツールを作ってみた【バイブコーディング】

経緯

私はAWS認定試験に向けた学習のために、Udemyの模擬試験を利用しています。
こちらの模試は解説も充実しているものの、苦手分野についてはもっと基礎から説明してほしい場合もあります。

そんなときには生成AIのGeminiに問題文をコピペして投げて解説を要求するのですが、その際フォーマットが整っていないためにGeminiが「どこからどこまでが問題文なのか」「私はどの選択肢を選択したのか」「本当の正解はどれなのか」を理解してくれないことが多々あります。
そのため、毎回手作業でマークダウン的な感じに修正していたのですが、あまりにも非効率な単純作業の繰り返しなので、「ツール化できるんじゃないか」と思い、今回の開発が始まりました。

資格学習における生成AI利用のススメ

※こちらの記事でも少し紹介しています。

以下の３つの用途で生成AIを利用しています。

1. 資格取得までの計画を一緒に立てる
2. 模擬試験の解説をしてもらう
3. 知識補完用のクイズを出してもらう

この２,３には模擬試験の結果を共有することが必要なのですが、その際に手動でフォーマットを整える手間を削減するツールがあれば効率が爆上がりするわけです。

結果を簡潔に

できたもの

HTML/CSS/JavaScriptで記述されたHTMLファイルをオフラインで動かすツール

↓こういった形式です。問題文はすごい適当に書いたので、悪しからず。

できること

Udemyの特定の模擬試験をコピペして渡すと、マークダウン形式に整形して返す。
複数の問題の一括コピペにも対応。

所要時間

最初のプロンプトを投げてから4~50分くらいで最終成果物ができました。

ツール作り開始

前提

元のフォーマット

＜問題文＞
正解

選択肢①

選択肢②
回答は不正解です

選択肢③

選択肢④

人間の目で見てもなかなかわかりづらいですね。
この場合、選択肢①が正答で、選択肢③が私の選んだ間違い選択肢ということです。

最初のプロンプト

※「渡される形式」と「理想的な出力」の部分は、実際は模擬試験からコピペしたものをそのまま貼りました。模擬試験は有料コンテンツなので、ここでは汎化して書き換えています。

Context

Udemyの模擬試験を使って、AWSの資格試験合格に向けて勉強しています。
その中で、Udemyの解説では理解しきれず、Geminiをはじめとした生成AIに問題と解答をコピペして解説を依頼することがあります。その際、Udemyからそのまま貼り付けるとフォーマットが整っておらず、生成AI側に問題を正しく伝えることができません。

Scope

そこで、Udemyの模擬試験を貼り付けると生成AIにも意図が伝わりやすい形式に整形できるツールがあればよいなと考えています。

Task

これらの要件を達成でき、かつ簡単に作成できるツールを提案してください。さらに、開発・実装方法まで案内してください。

Appendix

Udemyの模試の形式は次の通りです。

• 渡される形式

＜問題文＞
正解

選択肢①

選択肢②
回答は不正解です

選択肢③

選択肢④

• 理想的な出力

＜問題文＞

* 選択は正解です: 選択肢①
* 選択肢②
* 選択は不正解です: 選択肢③
* 選択肢④

最初に返ってきたもの

• 素のhtmlを作成して、ローカルで実行するという提案
• HTML/CSS/JavaScriptのコード案

この時点で、最初の要求はすべて満たしたコードが返ってきました。

が、もう少しブラッシュアップできそうだったので以下の様に改善を繰り返しました。

その後の改善

1. 最初に提示した問題と異なるフォーマットの問題への対応
   • 正誤ステータスの表示
     • 最初に提示したものは「回答は不正解です」などの表示だったが、他に「選択は不正解です」といった表示パターンもある
       →両方のパターンを洗い出して提示
   • 問題文の終わり判定
     • 最初に提示した問題文は「（Nつ選択）」で終わるものだったため、それを頼りに判定する仕様となってしまっていた
       →最終的に「（Nつ選択）」「か。」「してください。」の３つを問題文の終わり判定として利用することに
2. 細かいUI改善
   • 「入力をクリア」ボタンの追加、色や位置の変更
3. 後半で、複数の問題を一気に整形することに対応するアップデートを依頼
   • 複数の問題をコピペしたときの現在の形式と理想の形式を貼ったうえで、どのようにそれを実現できそうかを提案

苦労した点

• さっきまでできてたのに！が発生する
  • Aを修正→Bを修正→Cを修正...と指示を繰り返すと、Cが直ったはいいけどAがダメな感じに戻っちゃったみたいなことが起きがち
• 回避策
  1. 「該当箇所だけ変更してそこだけ教えてね」と指示して、全体を改変されることを防ぐ
  2. 「Cを〇〇にしてね。AとBは変更しないでね」と明示的に伝える

バイブコーディングするうえで大事なこと

• 一発目のプロンプトで8割が決まる
• 生成AIは、対話を繰り返すとパフォーマンスが下がっていく
• 改善要望はAsIsとToBeを明確に示して

最後に

ここまでお読みいただきありがとうございました。この記事が何かの助けになればうれしいです。

「こういうツールほしいなー、ここをこうして...」と考えた後、まず「サーバーはどうしよう」ってなりますよね。そこでめんどくさくなって投げ出すことも多いと思います。その時間をカットして、生成AIに任せてちょっとした修正を繰り返すだけでほしかったツールが手に入ると考えると本当に夢のような時代です。

「いつか作りたいな」と思っているツールの要件を今すぐ生成AIに投げてみれば、作業効率を大幅に向上させられるかもしれません！