電工一種の過去問アプリを作成中
第一種電気工事士の過去問を、ブラウザで解くローカル学習アプリを組み立てた作業記録。
一種の学科は、分野ごとに細かくドリルできる過去問サイトが二種ほど多くない。普通の過去問は年度通しなので、「問1だけを別年で連続」がやりにくい。電工は問番号帯がある程度まとまっている（序盤は計算寄り、終盤は法規、最後は配線図、など）。別資格の学習動画で言っていた「問1なら別年の問1をたくさん」を、電工にも転用したかった。
先に必須機能を決めた。
- 分野別演習
- 問番号横断（例: 問1だけ複数年）
- 間違えた問題だけ復習
- 学習ログ（日付つき ○△×。保存はローカル）
データは年度だけでなく、分野タグ・問番号枠・論点IDで持つ。演習軸は年度 / 分野 / 問番号枠の3つ。
事前に公式の学科PDF（問題・解答）は作業ディレクトリに集めてあった。一覧TSVもあり、対象イメージは最新〜10年分。最終的にアプリは2017〜2026・16回・800問になった。
素材の続きからWEBアプリ・問題画像・分野タグ・OCR下書きまでを並行で進めた。
AIとの壁打ちで出た必須機能・あると強い機能・データモデル・学習ログの形・素材パイプライン・スコープ外を仕様メモに固定した。「分野サイトが薄い」「問番号横断が欲しい」「問1〜10は計算の塊になりやすい」も前提として書いた。
指示は「PDF最新10年分でWEBアプリを作る。図は切り抜く。解説もつけられるならつける。トークンとサブエージェントは使ってよい」。実装は静的SPA（React + TypeScript + Vite）。バックエンド・ログイン・外部DB・公開デプロイは初版対象外。進捗は localStorage のみ。PDFの事情（白紙ページ、古い年は文字抽出不能、図のベクター分解）から、問題単位の画像カードを基本にした。解説は動画が正、AIは補助。
データ型として Exam / Question / VideoExplanation / AiExplanation / Progress を置いた。データ生成は3サブエージェントに分け、2017〜2020、2021〜2023、2024〜2026を並行で作った。問題カード（WebP）800枚。共通配線図・参照図 36枚（各試験15問が参照、合計240問）。公式問題・解答PDFリンク 32本はすべて HTTP 200 を確認した。
問題画像は公式レイアウトを維持し、文・図・写真・イロハニをひとまとまりで表示。問30〜34や問41〜50などの共通図は別画像として拡大できるようにした。
「最新から過去10年分を問題単位でPNGにしたい」という依頼も並行した。図だけ切り出すのではなく、問題文・図・選択肢を含む問題カード単位にした。15試験回・問題PNG 750枚、共通配線図など34枚、容量約200MB。切り出し用スクリプトはSPA配下の scripts に置いた。
2017〜2020は画像PDFのため、表の罫線を画像解析して行分割した。2018・2019・2020はページ構成が揃っておらず、試験回ごとに行数と下部表の境界を調整した。2021〜2026は既存WebPを劣化させずPNG化した。各回50問のコンタクトシートで連番・空画像・最低寸法・分割位置を検査した。アプリ本体は16試験・800問。PNGまとめの15回・750枚は別途成果物という位置づけ。
最新〜約10年の問題PDFを読み、問ごとに分野ラベルを付けてTSVにした。テキストが読める年は PyMuPDF。画像PDF・CID文字化けは macOS Vision OCR。キーワード規則で静電、直流、交流RLC、変圧器、電動機、高圧受電、法規、配線図などに振った。
品質は2024〜2026が比較的埋まる。OCR年は問番号欠落や誤結合があり、抽出失敗が残る。タグ付与時点の集計では850行中、抽出失敗204・その他62・要人手確認266。自動分類は初版。
問番号帯の傾向（自動ラベルの最多ベース）はこんな感じだった。
| 問番号帯 | ざっくり中身 |
|---|---|
| 1〜5 | 静電・直流・交流RLC・三相など理論計算 |
| 6〜10 | 単相3線・配電・変圧器・分岐・電動機寄り |
| 11〜17 | 照明・蓄電池・発電など機器 |
| 18〜23 | 送配電・雷害・高圧受電・保護 |
| 24〜34 | 施工・材料・接地・受電設備 |
| 35〜40 | 測定・法規 |
| 41〜50 | 配線図 |
分野タグの正本も固定した。辞書は約30タグで、安定キーは tag_id。850問への紐づけは自動初版。問番号帯のデフォルトタグもTSVにした。アプリは表示名ではなく tag_id
を持つ。表示名は後から変えられる。問41–50は原則配線図タグ。要人手確認は画像を見ながら直す。
PNG化のあと、選択肢を画像のままにするよりテキストで持った方がスマホ表示・検索・将来のDB化に有利、という話になった。一種の選択肢には分数・上付き・φ・cosなどの数式が多い。Canvasで数式画像を再現するのではなく、LaTeXをJSONに保存しKaTeXで表示する方針にした。通常文はテキスト、数式はKaTeX、回路図・写真・複雑な配線図は画像、というハイブリッド。
正本はJSON、共通描画はコンポーネント、校正用にTSV、と役割を分けた。試験JSONを schemaVersion: 2 へ。800問すべてに
contentStatus（image-only / ocr-draft / reviewed）。本文と選択肢は text / math / image のブロック配列。reviewed
かつ4選択肢が揃った問題だけ構造化表示。未校正は問題カード画像。構造化後も「原本画像を確認」で公式切り抜きと照合できるようにした。
800問をOCRして下書きJSONとTSVを作った。OCRは最終確定ではなく校正用下書き。Ω・φ・√3・cos・分数・図中文字は誤りやすい。エンジンは macOS Vision（日本語+英語）。対象は16試験・800問、認識行 8,952。4選択肢境界まで自動認識したのは496問。math-review 222問、low-confidence 647問。
公開JSON側の800問は自動OCR後も image-only のまま残した。誤文字・誤数式をアプリに出さないため。校正して reviewed にした問題だけ公開JSONへ上げる。
初回のAI解説は分野テンプレが多く弱かった。3区分で第2波を回し、問題画像と公式正答を見ながら2〜5文の問題固有解説へ全面更新した。AIを第一表示: 776問 / 確認済み動画を第一表示: 24問。動画問題用AIフォールバック:
24問。レビュー済みAI本文: 800件、完全重複0、needs-review 0。
学習画面を実データへ接続した。
- 年度・期を選んで50問 / 全800問からランダム50問
- イロハニ回答、正誤、採点、正答率
- 誤答一覧と誤答だけ再挑戦、全年度横断の誤答復習
- ブックマークとブックマークだけ演習
- localStorage の保存と再読込
- 公式問題画像の拡大、公式PDFリンク、著作権・切り抜き注記
- PCは問題と共通図の2ペイン、SPは共通図ボタンと拡大モーダル
ホームは索引JSONのみ。年度演習は選択試験JSONを遅延読込。ランダム・誤答・ブックマークの横断モードでは16試験JSONを取得する。
担当外の年度を再点検し、画像・正答・計算・カテゴリ・共通図・動画・法令年度を交差確認した。解説が公式正答と違う結論を3件修正。2026年問22の機器誤認を1件修正。公式9科目に対するカテゴリずれを53件修正。2025下期・2026上期の定型文100件を問題固有文へ。誤答一覧が午前午後・上下期を区別できないUIは期を併記して直した。
画像は2021〜2026の11試験・550問をコンタクトシート再確認。異常候補15枚と共通図24枚を個別表示し、隣問混入・番号ずれ・欠落・白紙などの確実な異常は0件。
機械検査とブラウザ確認の結果は次のとおり。
| 検査 | 結果 |
|---|---|
| データ検査 | 16試験 / 800問 / 動画24問 / reviewed AI 800件 PASS |
| 画像検査 | 問題画像800枚 / 共通図36枚 PASS |
| 単体テスト | PASS（最終確認時点で3ファイル・9テスト） |
| lint | 警告・エラー0 |
| production build | TypeScript + Vite PASS（KaTeXフォントも出力） |
| 公式PDFリンク | 32本到達可 |
PlaywrightでPC 1440px / SP 390pxを操作。年度50問、ランダム、採点、誤答、再挑戦、ブックマーク、localStorage再読込、共通図、動画iframe、直リンク、AIフォールバックを確認。productionプレビューでコンソールエラー・警告0。KaTeXは分数LaTeXの自動テストも通した。
回答済みのイロハニにカーソルを乗せると、矢印の右下に処理中アイコンが付いていた。原因は無効ボタンに cursor: wait が当たっていたこと。回答後は無効なだけで読み込み中ではないため
cursor: default に変更した。
その後、OCR下書きを問題画面側へつなぐ作業も入った。構造化表示と画像表示を両立しつつ、校正前データをそのまま確定扱いしない方針は維持している。
いま動くもの。
- ローカル静的SPA（開発サーバで起動）
- 試験データJSON
- 問題・共通図アセット
- 別途PNGまとめ
- 仕様メモ・タグTSV・分野分析TSV・本ログ
まだ残っていること。
- 校正用TSVと原本画像の照合（通常文）
- 選択肢境界が弱い問題の修正、math-review 222問のLaTeX確定
- 図・写真を image ブロックへ切り分け、reviewed を公開JSONへ promote
- 構造化表示のブラウザ最終目視（校正が進んだあと）
- 分野別 / 問番号横断UIと
tag_idの本接続 - タグの人手確認（要人手確認の消化）
AI解説は公式問題画像と公式正答を根拠にした短い学習補助であり、全800問を有資格者が法令・JIS・メーカー一次資料まで校閲したものではない。実務判断では現行の一次資料に戻る。問題・正答の著作権は一般財団法人 電気技術者試験センターに帰属する。公開デプロイはしていない。
ここまでやっても使い勝手のいいところまでは仕上がらなかったが
分野別と問Xの横断ができるようになったのは効率があがる。
学習ログが問に対して1日分なので、これを何セットも用意して周回できるようにしたい。
直すところはまだまだある。