静的HTML教材の誤答結果をClaude Codeへ貼り、前提を1段ずつたどる

静的HTML教材の問題ページで正誤を出せても、誤答した項目のどの前提から確認し直すべきかまでは分かりません。僕は、採点結果に固定の学習項目IDを残し、その結果を、教材ファイルを参照できるClaude Codeの会話へ手動で貼り付ける運用にしました。

「HTML教材の採点結果は、問題文ではなく学習項目IDに結び付ける」では誤答した項目を固定IDで残す設計を、「HTML教材で復習先を探すため、学習項目の前提関係をJSONで持つ」では項目同士の直接の前提を持つ設計を書きました。この記事では、この2つをつなぎ、誤答したIDから前提を1段ずつ確認する流れをまとめます。

まず全体像

問題ページは結果をコピーするだけです。前提をたどる処理と確認はClaude Code側で行います。

問題ページが出すのは、誤答を識別するためのテキスト

問題ページは、最初に選んだ答えと正解を比べ、結果を1問1行のテキストへまとめます。公開用の架空データなら、出力は次の形です。

[自己テスト結果] book=sample 2026-07-14
concept-functions q=q1 x(a)
集計: o=0 x=1 -=0 (全1問)

ここに含めるのは、教材ID、学習項目ID、問題ID、正誤、誤答時に選んだ選択肢です。問題文と解説そのものはコピー結果へ含めません。

問題ページのコードでは、解答中の状態はページ上の要素に持ち、「結果をコピー」を押したときだけクリップボードへ書きます。ブラウザ内保存（localStorage／sessionStorage）や、Claudeへの自動送信を行う処理は置いていません。

前提JSONは「先に必要な項目」から「それを使う項目」へ向ける

前提JSONでは、fromを先に必要な学習項目、toをそれを使う学習項目として、直接の関係だけを持ちます。記事用の架空データは次の2本です。

{
  "schema": 1,
  "edges": [
    { "from": "concept-values", "to": "concept-variables" },
    { "from": "concept-variables", "to": "concept-functions" }
  ]
}

concept-functionsで誤答した場合は、toがそのIDになっている辺を探します。最初に見つかる直接の前提はconcept-variablesです。さらに戻る必要がある場合だけ、今度はtoがconcept-variablesの辺を探し、concept-valuesを確認候補にします。

すべての前提を一度に「理解できていない」と決め付けるのではなく、直近の前提から1段ずつ確認するための順序です。循環、存在しないID、同じ辺の重複は、前提をたどる前に教材データの検査で止めます。

Claude Codeには、前提候補を断定させず1段ずつ確認させる

僕が作った手順では、Claude Codeは次の順で進めます。

貼り付けた結果から、誤答した学習項目IDを拾う
前提JSONで、そのIDへ入る辺を1段だけたどる
直接の前提について短い確認問題を出す
そこでつまずいた場合だけ、さらに1段前の項目を確認する

前提JSONから分かるのは、教材内で決めた項目の前後関係です。どの項目で実際につまずいたかは、確認問題への答えを見ないと決められません。グラフは診断結果ではなく、確認する順番を絞るために使います。

手動の貼り付けも外部送信として扱う

問題ページからClaudeへ自動送信しなくても、コピーした結果を貼った時点で外部サービスへの送信になります。僕は、自分の解答結果と、自分で作って外部送信してよいと判断した教材データだけに限定し、第三者の結果、個人情報、機密を含めません。

Claude Codeに参照させる問題データや前提JSONも、送信してよい範囲だけを対象にします。保存期間やモデル改善への利用条件は固定ではないため、送信前に利用中の設定とAnthropicのデータ保持に関する説明を確認します。

架空データで流れを確認する

説明用の架空データでconcept-functionsの誤答を入力すると、前提JSONに定めた辺の向きを逆向きにたどり、concept-variables、concept-valuesの順に候補を取得できました。教材データの検査では、存在しないID、自己ループ、重複した辺、循環をエラーにします。

まとめ

静的HTML教材でも、誤答結果に固定の学習項目IDを残し、前提JSONの入る辺を1段ずつたどれば、次に確認する項目を絞れます。Claude Codeは前提候補を答えとして断定するのではなく、短い確認問題で確かめる役割にしました。

手動貼り付けでも外部送信であることは変わりません。送信する内容は、自分で作り、外部へ出してよいと判断したデータだけに限定します。