【結論】claude code eラーニングの解決策 / 実行コマンド
Claude Codeでeラーニング教材を作る場合は、教材原文、学習目標、採点基準をファイル化してから生成を依頼します。
最初から1枚の巨大HTMLを作らせるより、問題データと表示ロジックを分離すると修正と再利用が容易です。
作業用リポジトリを初期化してClaude Codeを起動します。
mkdir learning-app && cd learning-app
git init
printf '# 教材\n' > content.md
claude具体的な手順・設定方法
content.mdへ根拠となる教材を配置し、対象年齢、到達目標、出題数を冒頭に明記します。Viteなどの構成を使う場合は、Claudeに実行前の計画を提示させ、依存関係を確認してから承認します。
問題文、選択肢、正解、解説、出典見出しを
questions.jsonへ保存させます。npm testとnpm run buildを実行させ、正解判定、再挑戦、キーボード操作、モバイル表示を検証します。
npm create vite@latest . -- --template vanilla
npm install
npm run dev実践プロンプト / 活用テクニック
教材に存在しない知識を勝手に追加させず、各設問の根拠を原文の見出しへ結び付けます。
誤答選択肢が曖昧でないかもチェックさせます。
content.mdだけを根拠に、4択問題を10問作成してください。
questions.jsonにはid、question、choices、answerIndex、explanation、sourceHeadingを保存してください。
教材にない事実は追加しないでください。
その後、Viteの画面を実装し、採点、再挑戦、進捗表示、キーボード操作のテストを追加して実行してください。注意点・よくあるエラーと対処法
生成した教材の正確性は、必ず教員や内容専門家が原文と照合します。
著作物を教材化する場合は、複製・翻案・配布の権利を確認します。
学習履歴や氏名を保存する場合は、個人情報をソースコードや公開リポジトリへ含めません。
ブラウザで不具合が出たら、コンソールログと再現手順を渡し、推測ではなくテストで修正を確認します。