開発eurekapu-nuxt4

投資判断クイズ Part 2 を本ベースで起こした日

朝、起きてすぐPart 2の続きをやろうとして、計画書を探した。前回の Part 1 を作ったときの HTML プロトタイプだけが残っていて、計画書のマークダウンが見当たらない。先に HTML を読み返して論点を抽出し直すところから始まった。

題材は広瀬隆雄『Market Hack流 世界一わかりやすい米国式投資の技法』（東洋経済新報社, 2014）。Part 1 で骨組みは作ってあるので、Part 2 では章単位で深掘りしていきたい。

計画書の復元と Codex レビュー2回

HTMLから論点を拾い直して、Part 2 派遣指示書 v1 を書いた。Codexに投げると、致命的指摘が4件＋補足1件で返ってきた。

  • 章立てが Part 1 と重複している箇所がある
  • クイズ難易度の目安が示されていない
  • SVG図解の挿入タイミングが不明瞭
  • レジストリへの登録手順が曖昧
  • （補足）型定義の拡張が必要かもしれない

4件を反映してv1.1 → 再度Codexに投げる → 残った4件を反映してv1.2で確定した。1往復目で書き漏れが見えて、2往復目で構造の歪みが見えた。

方針のズレに気づいて転換した

v1.2 を見直していて、自分でもまだしっくり来ない違和感があった。指示書の本文を読むと「論点チェックリストから独自に起草する」と書いてある。

これは、自分が本来やりたかったことと違う。広瀬さんの本をオリジナルコンテンツに変換していくのが目的なのに、「論点だけ拾って独自起草」だと本のエッセンスが薄まる。本ベースに揃え直さないと、ただの一般的な投資クイズになってしまう。

指示書を書き直し、「Turso DB から書籍を chunk 単位で読み込み、本文に明示された重要ポイントだけをクイズ化する」方針に変えた。書籍は book-knowledge-base に markethack-us-investing という ID で格納済みだったので、そこから取りに行く。

chapter 1 sec-1 をパイロットで試作

いきなり全章には手を出さず、chapter 1 の sec-1（POINT 1-1〜1-7、約5,500字）でパイロットを作った。chunkを読み込み、本文から POINT として明示されている主張を順番に拾って、4択クイズに変換していく。

7ポイントから5問のクイズが出来上がり、誤答選択肢も本文の文脈に沿った形で作れた。「これなら本のエッセンスがそのまま残る」と確信が持てたので、残りの章に展開する判断をした。

残り17 sec をサブエージェント3並列で起こす

パイロットで型ができたので、残り17 sec を一気にやる。1個ずつ順番にやると半日溶けるので、サブエージェントを3並列で立ち上げて分担させた。

  • エージェントA: chapter 1 の残り sec
  • エージェントB: chapter 2 の sec 群
  • エージェントC: chapter 3 以降の sec 群

各エージェントには「指示書 v1.2 と書籍 ID を渡し、chunk 単位で読み込み、POINT 単位で4択クイズを起こす」と指示した。完成したクイズの素案 TS ファイルを3並列でドンドン書き出してくる。

合計18 sec / 74問のクイズ素案が、コーヒー1杯分の時間で揃った。

Vue実装フェーズ — 3択から4択への型拡張

素案が揃ったら、次は表示側。既存の QuizCard コンポーネントは3択前提で組まれていた。Choice 型を 'A' | 'B' | 'C' から 'A' | 'B' | 'C' | 'D' に拡張する。

// types/quiz.ts
export type Choice = 'A' | 'B' | 'C' | 'D'

これだけで型エラーがコード全体に波及した。wrong-A, wrong-B, wrong-C の3パターンしか想定していなかった解説キーに、wrong-D を足す必要が出てきた。

QuizCard の選択肢グリッドは3列固定だったので、3択時のみ横並び、4択時は2x2グリッドに切り替わるように直した。

<div
  :class="[
    'choices',
    choices.length === 3 ? 'choices--inline-3' : 'choices--grid-2x2'
  ]"
>

quizTopics.ts に investment セクションを追加し、Part 2 の18 sec をまとめて登録する。

quizRegistry.ts の自動生成

74問のレジストリエントリを手で書くと事故る。Python スクリプトを書いて、各クイズ TS ファイルからメタデータを抜き出し、quizRegistry.ts の挿入位置に追記する処理に置き換えた。スクリプトを走らせると、74件のエントリが綺麗に並んだ。

型エラー9件を系統的に潰す

3並列サブエージェントの成果物には、軽い差分が含まれていた。型チェックを走らせると9件のエラー。系統別に分けて潰した。

  • Choice拡張の波及（3件）: 'A' | 'B' | 'C' のままになっている箇所を Choice 型参照に置換
  • wrong-D 解説キー漏れ（4件）: 4択化したが wrong-D を埋めていない問題
  • quizRegistry の "complex" 表記揺れ（2件）: 一部エージェントが旧表記で生成していた

エラーを系統別に分類してから直すと、9件が3パスで片付いた。1件ずつ潰すより断然速い。

SVG図解18枚を3並列で追加

最後にSVG図解。各 sec ごとに「最重要1図」を入れる方針で、18 sec × 1図 = 18枚。これもサブエージェント3並列に投げた。

  • エージェントA: sec 1〜6
  • エージェントB: sec 7〜12
  • エージェントC: sec 13〜18

各エージェントにSVG作成ガイドラインを渡しておくと、トーンが揃った18枚が出来上がってきた。

学びメモ

  • 指示書の方針が固まっていないと、Codex に2往復させても根本のズレは消えない。今回も書籍本ベースに切り替えた瞬間に違和感が消えた。Codexは構造のチェックには強いが、「そもそも何をやりたいんだっけ」のズレは人間が拾うしかない。
  • 3並列サブエージェントは「型ができた後の量産フェーズ」で最も効く。パイロットを1つ作って型を固めてから並列に投げると、揺らぎが最小化される。型ができる前に並列に走らせると、3エージェントが3方向に散らばって後の統合コストが膨らむ。
  • 型拡張は中央で1箇所変えてから周辺を直す方が早い。Choice 型に 'D' を足してから波及エラーを潰したら、見落としが減って9件が3パスで片付いた。
  • 書籍本文を題材にすると、誤答選択肢の質が一段上がる。「本文の別の章で出てくる似た概念」を誤答に持ってくると、知識の混同を狙えるクイズになる。独自起草だと、ここの誤答が薄くなりがちだった。

振り返り

Part 1 では HTML プロトタイプで「動くか」を確認した。Part 2 では計画書を Codex で2往復させ、方針転換を1回挟み、Vue 実装まで一気通貫で書いた。「本のエッセンスをクイズに翻訳する」軸が定まった瞬間に、74問が淀みなく流れた。

明日以降の作業として残った項目は以下の通り。

  • 各 sec の Part 1 と Part 2 のリンク導線を整える（現状はトップから個別アクセスのみ）
  • 4択クイズが追加されたことを既存ユーザーに知らせる導線を /quiz トップに足す
  • SVG図解18枚のうち、文字が潰れている2枚（sec-9, sec-14）を作り直す