今回は先日合格した危険物乙種4類の勉強の時に作りました、過去問題ドリルのWebシステムを紹介します。
基本的にバイブコーディングでローカルWebサーバー内で完結させましたので、セキュリティマネジメントはほぼ考慮しませんでした。一つのAIを使った総合学習メソッドとしてのサンプルとしてご覧ください。

■背景

危険物乙種4類を受けようと思った時に、いつも通り過去問題を集中して解いて学習すれば大丈夫と思いました。その方法でFP3級や基本情報技術者を取ってきたからです。しかし乙4の過去問題はネットにあるのはあるのですが少ないのです。

こちらは比較的多いのですが、100問はやっぱり少ないです。
危険物乙4完全攻略
https://hazardous-material.com/past-questions/

では、真面目に参考書を見ながらカラーペンで線引きしながら勉強するかというと、意味記憶力が壊滅している私には無理な相談なので、自前で過去問題ドリルシステムを構築することにしました。

■過去問題のデータを用意

用意したのは「乙種4類危険物取扱者試験」という問題集。令和6年版をメルカリで安く買いました。お好みで最新版にしていただいてもいいです。

乙種4類 危険物取扱者試験 令和8年版 [ 公論出版 ]
価格：1,870円（税込、送料無料) (2026/3/8時点)

紙の本ですので、スキャンします。電子書籍版があれば画面キャプチャでいいのですが、無い物はしょうがないですので手間ですが全ページスキャンしましょう。本格的にするなら裁断して正確にスキャンしますが私は非破壊のブックスキャナーを使ってます。「iOCHOW」などが有名ですね。

iOCHOWドキュメントスキャナーブックスキャナーS52200万画素非破壊自動平坦化A3サイズ対応多言語OCR機能USB書画カメラ
価格：42,785円（税込、送料別) (2026/3/8時点)

このタイプはどうしても歪んでスキャンされてしまいますので読み取りOCRのミスが増えます。このミスをAIで補完してやるのです。

方法は何でもかまいませんが、私はClaudeのプロジェクトに20ページぐらいずつページ画像をアップロードし、画像の歪みを考慮してもらいつつOCR処理して貰いました。プロンプトには「歪みのある画像で取り込まれた画像ですが、不明な部分は前後の文脈から予想して補完してください」などの一文を入れるといいでしょう。

コツとしては、OCRスキャン→解説と問題・回答に分離→解説はmarkdown、問題と解答はJSONの構造化データ、といった具合に段階を踏んだ方が精度が上がります。プロンプトは使用するアーキテクチャやモデルによって最適解が違いますのでそれぞれに工夫してください。

■データ化の詳細

解説部分はmarkdownとしてデータ化します。AI学習データとしてプロジェクトのナレッジに置いておきます。問題と答えは以下のようなJSON形式が良いです。

{
  "id": 問題番号,
  "difficulty": "★の数 or null",
  "question": "問題文",
  "choices": [{"number": 1, "text": "選択肢テキスト"}, ...],
  "answer": 正解番号,
  "explanation": "解説テキスト",
  "image": "画像ファイル名 or null"
}

このようにしておくと、プログラム側でいくらでも対応できます。AIのプロンプトにこの形状のJSONデータにして出力させるようにしてください。

画像が必要な問題であれば、画像のアドレスを入れることができます。

■システムの作成

過去問題システムもバイブコーディングで作成しました。AIに依頼するポイントとしては以下を意識した方が良いでしょう。

まず「オーバーエンジニアリングしない」ことです。自分だけが使うローカルツールにデータベースや認証は不要です。今回はPHPとJSONファイルだけで完結させました。
ファイル構成はindex.php（出題・回答・進捗表示をすべて1ファイルに）、過去問題.json（問題データ）、progress.json（進捗の自動生成）の3つだけです。シンプルな構成をAIに最初に伝えておくと、余計な機能を提案されずに済みます。

次に「仕様を言葉で明確に伝える」ことです。「未回答と不正解の問題だけをランダムに出題し、正解したら次に進む」という動作仕様を最初のプロンプトに書いておくと、後から修正する手間が減ります。進捗管理のキー設計（今回はトピック名と問題IDの組み合わせ）もあらかじめ決めてからAIに渡した方が、データ構造がぶれません。

また「段階的に作る」ことも重要です。一度に全機能を頼むより、まず出題と回答だけ動くものを作り、そこに進捗保存、統計表示、科目フィルターと順番に足していく方がミスが少なく、途中で方針変更もしやすいです。

最初から完璧を目指さなくてもいいです。システムを使いながら「おかしいな？」と思ったことをその場で作業コストほぼ０で対応できるのがバイブコーディングの長所ですので、未完成でもいいので動かしてみる方が良いです。公開する物ではないのですので。

■私が実装した機能

最後に私が実装した機能を紹介します。一度に実装したのでは無く段階的に実装し、最終的には以下のようになりました。バイブコーディングのよいところは、この程度の規模ならAIに仕様を丸投げして大胆に機能を追加したり修正できるところです。不完全でもいいのでまずは立ち上げてみる事ができます。

出題画面はシンプルな1ページ構成で、ヘッダーに回答済み数、正解数、不正解数、除外数、正答率をリアルタイムで表示します。科目ごと（法令・物理化学・性質消火）の正答率も並べて確認できます。

出題範囲は「未出題のみ」と「未出題＋不正解」の2モードをラジオボタンで切り替えられます。問題はランダムに出題され、回答後は正誤とともに全選択肢と解説が表示されます。正解には「✓正解」、誤選択には「✗」が付くので、どこを間違えたか一目でわかります。

問題文・選択肢・解説をまとめてクリップボードにコピーするボタンも付けました。これはClaude等のAIに貼り付けてさらに深掘り解説を求めるために使っています。

問題ごとに「解答しない」ボタンがあり、計算が複雑で点効率の悪い問題などを出題対象から除外できます。

分析ページでは全体統計として総問題数・回答済み数・初回正解数・初回正答率を確認できます。
科目別には初回正答率と現在正答率を並べて比較できます。初回と現在の2軸を持たせているのは、最初に間違えた問題を復習で正解に変えた場合の伸びを把握するためです。未正解の問題一覧と除外した問題の一覧も科目別に表示され、未正解の問題は「再挑戦」リンクから直接その問題を開けます。除外した問題は「復帰」ボタンで出題対象に戻せます。

■ローカルWebサーバーの紹介

ローカルWebサーバーの構築には、いくつか定番のアプリがあります。

XAMPPはWindows・Mac・Linux対応の老舗で、Apache・PHP・MySQLをまとめてインストールできます。コントロールパネルから各サービスの起動・停止を管理できるため、初心者にも扱いやすいです。
https://www.apachefriends.org/jp/index.html

MAMPはMac向けに使いやすいGUIを持ったパッケージで、Windows版もあります。PHPのバージョンをGUIから簡単に切り替えられるのが便利です。

https://www.mamp.info/

LaragonはWindows専用ですが、軽量で起動が速く、インストールも簡単です。ポータブル運用もできるため、USBに入れて持ち運ぶことも可能です。近年Windows環境では人気が高まっています。
https://laragon.org/

今回の過去問システムはデータベース不要・PHPのみで動くシンプルな構成なので、どのアプリを選んでも問題なく動作します。インストールしてドキュメントルートにファイルを置くだけで、すぐにブラウザから 「localhost」 でアクセスできます。