0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Claude Codeで15資格 2,233問の学習アプリを一晩で作ってGitHub Pagesに置いた話

0
Posted at

TL;DR

  • AWS Specialty 6種 + AI Practitioner + 簿記2級 + FP2級 + 中小企業診断士 + 応用情報 + ITパスポート + MOS Excel/Word の 15 試験・2,233 問 を 1 リポジトリに収録
  • HTML/CSS/Vanilla JS のみ。ビルド無し・サーバー無し・課金無し。python -m http.server だけで動く
  • GitHub Pages に自動デプロイ.github/workflows/deploy-pages.yml
  • 中身は Claude Code(CLI 型コーディングエージェント)にプロンプトと設計図を渡して並列生成
  • リポジトリ: https://github.com/similarmetal/quiz-kit
  • デモ: https://similarmetal.github.io/quiz-kit/
  • ライセンス: MIT

「資格を受けるたびに問題集を Kindle で 2,000〜4,000 円払って買う」のがだるくなったので、Claude Code に 設計図と原則だけ渡して、一晩で全部作らせてみた という記事です。

エンジニア向けに どう作ったか(再現可能なところ) を中心に書きます。


何ができたか

ブラウザで開くとこういう画面です。

┌─ クラウド・インフラ ────────────────────────────┐
│  AWS Security Specialty (SCS-C03)        226 問 │
│  AWS GenAI Developer Pro (AIP-C01)       155 問 │
│  AWS ML Engineer Associate (MLA-C01)     110 問 │
│  AWS DevOps Pro (DOP-C02)                140 問 │
│  AWS Advanced Networking (ANS-C01)       120 問 │
│  AWS Database Specialty (DBS-C01)        130 問 │
│  AWS AI Practitioner (AIF-C01)           105 問 │
├─ 会計・ファイナンス ─────────────────────────────┤
│  日商簿記 2 級                            227 問 │
│  FP 技能検定 2 級                          200 問 │
├─ 経営・法務 ─────────────────────────────────────┤
│  中小企業診断士 1 次                       380 問 │
│  ビジネス実務法務検定 2 級                 150 問 │
├─ IT 基礎・情報処理 ──────────────────────────────┤
│  応用情報技術者                            140 問 │
│  IT パスポート                              90 問 │
│  MOS Excel Associate (MO-200)              30 問 │
│  MOS Word Associate (MO-100)               30 問 │
└──────────────────────────────────────────────────┘
合計 15 試験 / 2,233 問
  • 4 択(複数選択あり)で出題
  • 解答後に 誤答ごとの解説 が出る ← ここが今回いちばん力を入れたポイント
  • 自己評価 4 段階で SM-2 簡易版 SRS(間隔反復) が動く
  • 進捗は localStorage のみ。サーバー送信・Cookie・トラッキングタグなし

Claude Code(Anthropic 公式の CLI 型エージェント)は IDE 拡張やデスクトップアプリ版もありますが、本記事では CLI で claude を起動し、CLAUDE.md をリポジトリに置いてプロンプトを資産化したパターンを扱います。


技術スタック(あえての「Vanilla 縛り」)

レイヤ 選択 理由
UI HTML + CSS + Vanilla JS(フレームワークなし) ビルド不要 / Pages にそのまま置ける / コピペで動く
データ JSON(ドメイン別ファイル) 静的配信+fetch() で十分
永続化 localStorage サーバー無し・個人情報送信なしを担保
SRS SM-2 簡易版(app.js 内) Anki と同方式・依存ライブラリ無し
ホスティング GitHub Pages(公式 actions/deploy-pages@v4 main push で自動デプロイ
CI GitHub Actions(JSON スキーマ検証) AI 生成データの整合チェック

「React / Next.js じゃないの?」と思うかもしれませんが、

  • このアプリは ステート管理が極小(現在の問題 index / 自己評価 / SRS 状態だけ)
  • ビルドステップを足すと AI 生成成果物のレビューが遅くなる
  • ブラウザだけで「fork → 開く → 動く」を成立させたい

ので Vanilla で十分でした。03-quiz-app/python -m http.server で配るだけです。


ディレクトリ構造(=AI への指示書)

quiz-kit/
├── CLAUDE.md                       Claude Code が最初に読むコンテキスト
├── 00-design/                      学習設計の哲学・MCQ品質基準・SRSアルゴリズム
│   ├── 01-philosophy.md
│   ├── 02-mcq-best-practices.md
│   ├── 03-data-schema.md
│   └── 04-srs-algorithm.md
├── 01-syllabus/                    各資格の試験範囲(最終確認日つき)
│   ├── aws-scs-c03.md
│   ├── boki-2.md
│   └── ...
├── 02-prompts/                     ★ AI への指示テンプレート(資産化)
│   ├── 00-master-prompt.md
│   ├── 10-question-generation/
│   ├── 20-review-prompts/
│   └── 30-personalization/
├── 03-quiz-app/                    ★ デプロイ対象(HTML/JS/JSON)
│   ├── index.html
│   ├── quiz.html
│   ├── stats.html
│   ├── app.js
│   ├── styles.css
│   └── data/
│       ├── categories.json
│       ├── exams/{code}.json
│       └── questions/{code}/{domain}.json
├── scripts/                        整合性チェック・個人情報スキャン
└── .github/workflows/
    ├── ci.yml
    └── deploy-pages.yml

ポイントは 00-design/02-prompts/ が「人間向けドキュメント」じゃなくて「AI 向け仕様書」 になっているところ。CLAUDE.md から相互参照して読ませます。


GitHub Pages へのデプロイ

.github/workflows/deploy-pages.yml の中身はこれだけ。

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Configure Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact (03-quiz-app/)
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./03-quiz-app

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

03-quiz-app/ だけアップロードしているのがミソで、リポジトリには CLAUDE.md / プロンプト / シラバスなど AI 用の中間成果物 が大量に入っていますが、それらは Pages には出さず、完成物だけを配信 しています。

リポジトリ側の設定は

  1. Settings → Pages → Source = GitHub Actions
  2. main に push する

これだけ。https://<org>.github.io/<repo>/ で即公開されます。

actions/deploy-pages@v4環境名が github-pages で固定。リポジトリの「Environments」に同名 environment が出現するので、ブランチ保護や Required reviewers をかけたい場合はここから設定します。


Claude Code に一晩で 2,233 問書かせた「仕込み」5 つ

ここからが本題です。「AI に丸投げ」では絶対にこの規模・品質にはなりません。仕込み方が 9 割 でした。

仕込み 1: プロンプトを Markdown でリポジトリに資産化する

ChatGPT / Claude のチャット欄に毎回プロンプトを書き直すと、

  • 品質が毎回ブレる
  • 過去の合意事項が失われる
  • レビュー / 差分管理ができない

ので、02-prompts/ 配下に 試験ごと・用途ごとに .md を切って Git 管理 しました。

02-prompts/
├── 00-master-prompt.md                   全試験共通の振る舞い
├── 10-question-generation/
│   ├── aws-scs-c03.md                    SCS-C03 専用の生成ルール
│   ├── boki-2.md
│   └── ...
├── 20-review-prompts/
│   └── quality-review.md                 品質スコアの自己採点ルール
└── 30-personalization/
    └── weak-area-analysis.md             弱点抽出

Claude Code はリポジトリ内のファイルを view で読めるので、依頼が

02-prompts/10-question-generation/aws-scs-c03.md
に従って Domain 1 を 30 問生成して

の一行で済む。プロンプトが PR レビュー可能になる のが効きました。

仕込み 2: CLAUDE.md で「禁止事項」と「学術根拠」を縛る

CLAUDE.md はリポジトリ直下に置くと Claude Code が自動でコンテキストに入れてくれるファイルです。ここで全試験共通の縛りを宣言します(抜粋)。

## 守るべき原則

### 原則1: 学術研究に基づく設計
- Roediger & Karpicke (2006): Active Recall
- Burton et al. (1990): Distractor plausibility
- Scaria et al. (2025): Concept Map MCQ
- Bloom's Taxonomy: 認知レベル配分

### 原則2: 認知レベル配分
L1 Remember 10% / L2 Understand 20% / L3 Apply 30% /
L4 Analyze 25% / L5 Evaluate 10% / L6 Create 5%

### 原則3: ディストラクターの質
各誤答は以下のいずれかでなければならない:
- 誤概念ベース / 混同ベース / 古い知識ベース / 部分正解ベース

### 原則4: 解説には誤答ごとの説明を必ず含める

## 禁止事項
- 公式試験問題のコピー
- 試験範囲外の知識を要求する問題
- 「上記すべて」「上記いずれでもない」の選択肢
- 解説・選択肢にプレースホルダ(「(誤った選択肢)」等)を残す
- 学習者の個人プロファイル(CLAUDE.local.md の居住地・業種等)を
  シナリオの固有地名・固有設定にそのまま反映する

「論文を引け」と書くと、生成される問題が 「AI っぽい面白い問題」から「教育設計に沿った問題」 にだいぶ寄ります。さらに 個人情報をプロンプトに渡している場合、それを公開リポジトリに転記しない という安全弁も明示しています(CLAUDE.local.md.gitignore 済)。

仕込み 3: シラバスを構造化して食わせる

「AWS Security の問題を作って」だと出題範囲がブレるので、01-syllabus/aws-scs-c03.md公式のドメインと weight% を Markdown で先に整理しました。

# AWS Certified Security – Specialty (SCS-C03)

最終確認日: 2026-04-15

## 試験ドメイン

| Domain | Name | Weight |
|--------|------|--------|
| 1 | Threat Detection and Incident Response | 14% |
| 2 | Security Logging and Monitoring | 18% |
| 3 | Infrastructure Security | 20% |
| 4 | Identity and Access Management | 16% |
| 5 | Data Protection | 18% |
| 6 | Management and Security Governance | 14% |

CLAUDE.md に「最終確認日が 6 ヶ月以上古ければ web_search で最新版を確認してから生成」と書いてあるので、AWS のように半年スパンで試験範囲が変わる試験でも自動追随できます。

仕込み 4: サブエージェントを並列で叩く

ここが一番効きました。Claude Code は subagent を並列起動 できるので、

  • 直列:「SCS-C03 の 7 ドメインを順番に」 → 2〜3 時間
  • 並列:「1 ドメイン = 1 subagent を 7 個同時に」 → 15 分

になります。15 試験 × 平均 5 ドメイン ≒ 75 ジョブを夜寝てる間に走らせて、朝起きたら全部 JSON で吐かれている、という構成です。

Claude Code は subagent ごとに別コンテキストを持つので、メインの会話履歴を汚さずに「実行→結果サマリだけ報告」 をやらせられます。1 つの subagent には

02-prompts/10-question-generation/aws-scs-c03.md と
01-syllabus/aws-scs-c03.md を読み、
Domain 3 (Infrastructure Security) の問題を 40 問生成して
03-quiz-app/data/questions/scs-c03/domain-3.json に保存して

くらいの粒度で投げます。

仕込み 5: 出力スキーマを完全に固定する

「いい感じの問題」を返されると後で辛いので、00-design/03-data-schema.mdJSON スキーマを 1 ファイルで定義 し、それと完全一致しないと不合格 というルールにしました。

{
  "id": "scs-c03-domain1-001",
  "version": "1.0",
  "exam": { "code": "SCS-C03", "vendor": "AWS", "year": 2026 },
  "domain": { "id": "domain-1", "name": "Threat Detection and Incident Response", "weight_percent": 14 },
  "topic": "GuardDuty",
  "cognitive_level": "L3-Apply",
  "difficulty": "medium",
  "stem": "ある企業が AWS Organizations 配下で 50 を超えるアカウントを運用している。…",
  "options": [
    {
      "id": "A",
      "text": "AWS Organizations で GuardDuty の委任管理者を指定し、組織全体で自動有効化を構成する",
      "is_correct": true,
      "explanation": "正解。委任管理者により、組織全体の GuardDuty 管理を 1 アカウントから実施できる。"
    },
    {
      "id": "B",
      "text": "各アカウントで GuardDuty を有効化し、Security Hub の組織機能で findings を集約する",
      "is_correct": false,
      "explanation": "Security Hub は集約には使えるが、GuardDuty の有効化自体は別途必要。"
    }
    // ... C, D
  ],
  "explanation": "AWS Organizations と GuardDuty の統合により、委任管理者を指定すると…",
  "references": [
    { "title": "Managing GuardDuty accounts with AWS Organizations",
      "url": "https://docs.aws.amazon.com/guardduty/latest/ug/guardduty_organizations.html" }
  ],
  "common_mistakes": [
    "Security Hub だけで全部できると思い込む(GuardDuty 有効化は別タスク)"
  ],
  "quality_score": {
    "stem_clarity": 5,
    "distractor_plausibility": 4,
    "cognitive_level_match": 5,
    "explanation_completeness": 5,
    "overall": 4.75
  }
}

common_mistakesreferences(公式 URL)・quality_score(自己採点)まで生成させているので、「あとで人間がレビューする時にどこを見ればいいか」がデータ自体に書いてある 状態になります。

最後に scripts/integration-check.py

  • id の重複
  • スキーマ違反
  • exams/{code}.jsontotal_questions と、questions/{code}/*.json の合計が一致するか

を CI で回し、ALL CHECKS PASSED になるまで自動で直させました。

やってはいけないこと
公式試験問題のコピー / Braindump は当然 NG。CLAUDE.md で禁止事項に明記し、シラバスも一次情報(AWS 公式 Exam Guide / IPA 公開シラバス等)からの構造化に留めています。生成された問題は「AI が作った類題」であって公式問題ではありません。


SRS(間隔反復)の実装

学習アプリで一番大事なのが SRS です。Anki と同じ SM-2 を、依存無しで app.js に直書きしました。

// answer_quality: 0=完全に忘れた, 1=なんとか思い出した, 2=正解, 3=楽勝で正解
function updateSRS(q, answer_quality) {
  if (answer_quality < 2) {
    q.repetition = 0;
    q.interval_days = 1;
    q.ease_factor = Math.max(1.3, q.ease_factor - 0.2);
  } else {
    q.repetition += 1;
    if (q.repetition === 1)      q.interval_days = 1;
    else if (q.repetition === 2) q.interval_days = 3;
    else if (q.repetition === 3) q.interval_days = 7;
    else if (q.repetition === 4) q.interval_days = 14;
    else q.interval_days = Math.ceil(q.interval_days * q.ease_factor);

    if (answer_quality === 3) {
      q.ease_factor = Math.min(2.5, q.ease_factor + 0.1);
    }
  }
  q.due_date = addDays(today(), q.interval_days);
}

間違えたら間隔リセット、正解した問題だけ間隔が伸びる」というのが SM-2 の核です。localStorage にこの状態を持つので、サーバー無しで Anki 体験ができる

復習スケジュールは標準的に

Day 0  学習
Day 1  復習1 (3日後)
Day 4  復習2 (7日後)
Day 11 復習3 (14日後)
Day 25 復習4 (~35日後)
Day 60 復習5 (~90日後)

になります。Roediger & Karpicke (2006) の研究では「再読 34% vs 検索 80%」と差が出ていて、SRS はこの効果を 時間軸で最大化する ための仕掛けです。


どう使ってほしいか

A. 資格を受ける人

そのままどうぞ。https://similarmetal.github.io/quiz-kit/ を開いて、好きな試験を選ぶだけ。

  • AWS Specialty を複数受ける人:SCS / AIP / MLA / DOP / ANS / DBS が 1 つに入っているのは多分このキットだけ
  • 副業エンジニアで簿記 2 級 / FP 2 級 も:技術と金融を同じアプリで回せる
  • 応用情報 / IT パスポート / MOS も同居

B. 自分の試験を作りたい人

リポジトリを fork して、

  1. 01-syllabus/<your-exam>.md にシラバスを書く
  2. 02-prompts/10-question-generation/<your-exam>.md に試験固有ルールを書く
  3. 03-quiz-app/data/exams/<your-exam>.json にメタデータを足す
  4. Claude Code に「 のドメイン X を N 問生成して」と頼む

で、英語試験・社内研修・別ジャンルの国家資格にもそのまま使えます。シラバスを書き換えて自分の試験を作るテンプレ として MIT で全部公開しています。

C. Claude Code の使い方を覗きたい人

CLAUDE.md / 00-design/ / 02-prompts/ がそのまま読み物になっています。今回効いた 4 点は再掲:

  1. プロンプトを .md でリポジトリに資産化
  2. CLAUDE.md で学術根拠と禁止事項を縛る
  3. subagent 並列で時間圧縮
  4. JSON スキーマ+CI で品質ガード

注意事項(重要)

楽しい話のあとに必ず書いておきます。

  • 問題は すべて AI 生成。事実誤認・古い情報・解釈の揺れが含まれ得ます。学習補助としてのみご利用ください。
  • 公式試験問題のコピー・Braindump ではありません。各認定機関(AWS, Inc. / 日本商工会議所 / 東京商工会議所 / 日本 FP 協会 / 中小企業診断協会 / IPA / Microsoft / Certiport)と本プロジェクトは 一切関係ありません
  • 法律・税務・金融の問題は 専門家の助言ではありません
  • 試験範囲・受験料・実施日程の最新情報は 必ず各認定機関の公式サイト で確認してください。
  • 商標・サービス名(AWS, Amazon Bedrock, SageMaker, GuardDuty 等)はそれぞれの権利者に帰属します。

まとめ

  • 資格学習の最大の敵は 続かないこと
  • 続けるには 1 問単位で・ブラウザ 1 枚で・課金無しで 始められる必要がある。
  • それを Claude Code に 設計図と原則だけ渡して、subagent 並列で一晩 で作らせて、GitHub Pages に置きました。
  • リポジトリ:https://github.com/similarmetal/quiz-kit
  • デモ:https://similarmetal.github.io/quiz-kit/

スターを押してもらえると次の試験追加が早くなります。不具合は Issue、問題の事実誤認は PR をいただけるとめちゃくちゃ嬉しいです。あなたの次の合格証が、このキットから生まれたら最高の感想です。

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?