都道府県クイズに統計編12ページを増設し、89問へ拡張した日

何をやったか

朝の時点では4ページ24問しかなかった都道府県クイズに、統計編のページを8つ足して、最終的に12ページ89問まで広げた。さらにCodex（gpt-5.5）にレビューを通したら10件の致命的な誤りが返ってきて、夜にかけて全部直させた。

最初のページを書いていたとき、正誤の状態管理が各ページにバラバラに書かれているのに気づいた。localStorageから読んで、未正解だけフィルターして、リセットして、というロジックが4ページ分そっくり並んでいた。

これを usePrefectureQuiz という共通composableに抽出させた。

// 純粋関数として切り出し
const filterUnsolved = (questions: QuizQuestion[], solvedIds: string[]) =>
  questions.filter(q => !solvedIds.includes(q.id))

副作用（localStorageの読み書き）はcomposable内の onMounted と watch に閉じ込めて、フィルタリングや正解判定は純粋関数に分けるよう指示した。4ページに展開してから後続のページを書き始めたので、追加ページではcomposableを呼ぶだけで済んだ。

統計の元データはTurso DBの book-knowledge-base に格納してある『日本国勢図会2024/25』の付録IIから引いてもらった。47都道府県の人口、人口密度、15歳未満比率、65歳以上比率、1世帯あたり人員。

SQLは自分では書かない。「人口密度の上位5県と下位5県を一覧で出して」と日本語で頼むと、Claude Codeが裏でDBを叩いて該当セクションを引いてくる。

製造業出荷額や貿易港の輸出入額は「47都道府県の合計」が出せる。だが地価（円/m²）や人口密度は単純に足せない。

最初の実装では全ページで「全国合計：◯円」をフッターに出していて、地価ページで「全国合計：750万円/m²」みたいな意味不明な数字が表示されていた。画面を見て違和感を拾い、QuizQuestion 型に totalLabel? を追加させた。

type QuizQuestion = {
  // ...
  totalLabel?: string  // "1位の値: 5,432千円/m²" など
}

合算できる指標は「全国合計」、合算できない指標は「1位の値」を表示する分岐をフッター側に入れてもらった。

合計55問→89問。

iPhoneサイズで4択ボタンが縦に1列に伸びて、画面の半分以上を占めているのを発見した。CSSの @media (max-width: 480px) で1列固定の指定になっていたのが原因。

ブレイクポイントを360pxに切り上げて、375px以上では2列を維持するよう12ファイル並列で直させた。

ひと通り出来上がったところでCodex（gpt-5.5）にレビューを通した。返ってきた指摘がかなり厳しかった。

「画面の数字に違和感を持つ係」は自分でやり、修正案の生成と適用はCodexとClaude Codeに回す、という分担で全件片付けた。

12ページの正答率を1本のミニバーで集約表示するUIを目次トップに追加させた。実装済み12ページと「準備中」表示の管理もここでまとめてもらった。子供が「あとどれくらい残ってる」を一目で把握できる。

夜に翌週以降の Phase 5-8（米・果物・畜産・水産など産業編）の計画書を書かせて、Codexに2回通した。

Phase 2-4 の指示書のときも別途3回レビューを回して、計9件の指摘を全反映させてから次セッションに引き継いだ。