[{"data":1,"prerenderedAt":587},["ShallowReactive",2],{"content-/prefecture-quiz-statistics-12pages":3,"all-pages-for-dir":565,"related-/prefecture-quiz-statistics-12pages":566,"og-image-/prefecture-quiz-statistics-12pages":586},{"id":4,"title":5,"body":6,"category":545,"concepts":546,"description":547,"extension":548,"meta":549,"navigation":550,"ogImage":546,"path":551,"project_name":552,"published":553,"publishedAt":554,"seo":555,"source":556,"stem":557,"tags":558,"todo":546,"unpublished":553,"updatedAt":546,"__hash__":564},"pages/2026-05/2026-05-15/prefecture-quiz-statistics-12pages.md","都道府県クイズに統計編12ページを増設し、89問へ拡張した日",{"type":7,"value":8,"toc":530},"minimark",[9,13,17,21,25,28,36,144,155,159,166,169,173,176,186,230,233,237,240,243,247,250,253,257,260,344,347,350,357,360,364,367,420,423,426,429,433,436,456,459,462,476,479,526],[10,11,5],"h1",{"id":12},"都道府県クイズに統計編12ページを増設し89問へ拡張した日",[14,15,16],"h2",{"id":16},"何をやったか",[18,19,20],"p",{},"朝の時点では4ページ24問しかなかった都道府県クイズに、統計編のページを8つ足して、最終的に12ページ89問まで広げた。さらにCodex（gpt-5.5）にレビューを通したら10件の致命的な誤りが返ってきて、夜にかけて全部直させた。",[14,22,24],{"id":23},"phase-1-復習モードを共通composableに切り出す","Phase 1: 復習モードを共通composableに切り出す",[18,26,27],{},"最初のページを書いていたとき、正誤の状態管理が各ページにバラバラに書かれているのに気づいた。localStorageから読んで、未正解だけフィルターして、リセットして、というロジックが4ページ分そっくり並んでいた。",[18,29,30,31,35],{},"これを ",[32,33,34],"code",{},"usePrefectureQuiz"," という共通composableに抽出させた。",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// 純粋関数として切り出し\nconst filterUnsolved = (questions: QuizQuestion[], solvedIds: string[]) =>\n  questions.filter(q => !solvedIds.includes(q.id))\n","typescript","",[32,44,45,54,100],{"__ignoreMap":42},[46,47,50],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"sxvE3","// 純粋関数として切り出し\n",[46,55,57,61,65,69,72,76,79,83,86,89,91,94,97],{"class":48,"line":56},2,[46,58,60],{"class":59},"stQ0i","const ",[46,62,64],{"class":63},"senZ8","filterUnsolved",[46,66,68],{"class":67},"shFtX"," =",[46,70,71],{"class":67}," (",[46,73,75],{"class":74},"s4oTP","questions",[46,77,78],{"class":67},": ",[46,80,82],{"class":81},"sSkh3","QuizQuestion",[46,84,85],{"class":67},"[],",[46,87,88],{"class":74}," solvedIds",[46,90,78],{"class":67},[46,92,93],{"class":81},"string",[46,95,96],{"class":67},"[])",[46,98,99],{"class":67}," =>\n",[46,101,103,106,109,112,115,118,121,124,127,129,132,134,136,138,141],{"class":48,"line":102},3,[46,104,105],{"class":74},"  questions",[46,107,108],{"class":67},".",[46,110,111],{"class":63},"filter",[46,113,114],{"class":67},"(",[46,116,117],{"class":74},"q",[46,119,120],{"class":67}," =>",[46,122,123],{"class":59}," !",[46,125,126],{"class":74},"solvedIds",[46,128,108],{"class":67},[46,130,131],{"class":63},"includes",[46,133,114],{"class":67},[46,135,117],{"class":74},[46,137,108],{"class":67},[46,139,140],{"class":74},"id",[46,142,143],{"class":67},"))\n",[18,145,146,147,150,151,154],{},"副作用（localStorageの読み書き）はcomposable内の ",[32,148,149],{},"onMounted"," と ",[32,152,153],{},"watch"," に閉じ込めて、フィルタリングや正解判定は純粋関数に分けるよう指示した。4ページに展開してから後続のページを書き始めたので、追加ページではcomposableを呼ぶだけで済んだ。",[14,156,158],{"id":157},"phase-2-人口地理population-area-and-geography","Phase 2: 人口・地理（population, area-and-geography）",[18,160,161,162,165],{},"統計の元データはTurso DBの ",[32,163,164],{},"book-knowledge-base"," に格納してある『日本国勢図会2024/25』の付録IIから引いてもらった。47都道府県の人口、人口密度、15歳未満比率、65歳以上比率、1世帯あたり人員。",[18,167,168],{},"SQLは自分では書かない。「人口密度の上位5県と下位5県を一覧で出して」と日本語で頼むと、Claude Codeが裏でDBを叩いて該当セクションを引いてくる。",[14,170,172],{"id":171},"phase-3-非加算指標への対応manufacturing-trade-and-port-finance-and-land","Phase 3: 非加算指標への対応（manufacturing, trade-and-port, finance-and-land）",[18,174,175],{},"製造業出荷額や貿易港の輸出入額は「47都道府県の合計」が出せる。だが地価（円/m²）や人口密度は単純に足せない。",[18,177,178,179,181,182,185],{},"最初の実装では全ページで「全国合計：◯円」をフッターに出していて、地価ページで「全国合計：750万円/m²」みたいな意味不明な数字が表示されていた。画面を見て違和感を拾い、",[32,180,82],{}," 型に ",[32,183,184],{},"totalLabel?"," を追加させた。",[37,187,189],{"className":39,"code":188,"language":41,"meta":42,"style":42},"type QuizQuestion = {\n  // ...\n  totalLabel?: string  // \"1位の値: 5,432千円/m²\" など\n}\n",[32,190,191,204,209,224],{"__ignoreMap":42},[46,192,193,196,199,201],{"class":48,"line":49},[46,194,195],{"class":59},"type",[46,197,198],{"class":81}," QuizQuestion",[46,200,68],{"class":67},[46,202,203],{"class":67}," {\n",[46,205,206],{"class":48,"line":56},[46,207,208],{"class":52},"  // ...\n",[46,210,211,214,217,219,221],{"class":48,"line":102},[46,212,213],{"class":74},"  totalLabel",[46,215,216],{"class":59},"?",[46,218,78],{"class":67},[46,220,93],{"class":81},[46,222,223],{"class":52},"  // \"1位の値: 5,432千円/m²\" など\n",[46,225,227],{"class":48,"line":226},4,[46,228,229],{"class":67},"}\n",[18,231,232],{},"合算できる指標は「全国合計」、合算できない指標は「1位の値」を表示する分岐をフッター側に入れてもらった。",[14,234,236],{"id":235},"phase-4-観光教育防災","Phase 4: 観光・教育・防災",[18,238,239],{},"観光（tourism）、教育（education）、防災（disaster）の3ページを追加させた。「主要統計の1位を4択で当てる」というシンプルな形式に揃えた。",[18,241,242],{},"ここまでで実装済み12ページ。",[14,244,246],{"id":245},"フェーズ表記をやめて子供向けに整理","「フェーズ」表記をやめて子供向けに整理",[18,248,249],{},"開発中は内部的に「Phase 1〜4」と呼んでいたが、目次ページの本番表示で「Phase 1」と出ているのを見て、対象読者の子供にはわからないと気づいた。",[18,251,252],{},"「📊 統計クイズ」「🗾 地図クイズ」の2カテゴリに分けて、フェーズという言葉を画面から消させた。各ページ末尾の「トップに戻る」も「目次に戻る」に変えてもらった。",[14,254,256],{"id":255},"phase-8-既存12ページの増問5589問","Phase 8: 既存12ページの増問（55→89問）",[18,258,259],{},"12ページに本来欲しい問題数があと34問足りないと気づいて、増問パスを回させた。",[261,262,263,279],"table",{},[264,265,266],"thead",{},[267,268,269,273,276],"tr",{},[270,271,272],"th",{},"ページ",[270,274,275],{},"増問前",[270,277,278],{},"増問後",[280,281,282,294,304,315,324,333],"tbody",{},[267,283,284,288,291],{},[285,286,287],"td",{},"rice-and-grain",[285,289,290],{},"4問",[285,292,293],{},"10問",[267,295,296,299,301],{},[285,297,298],{},"area-and-geography",[285,300,290],{},[285,302,303],{},"8問",[267,305,306,309,312],{},[285,307,308],{},"finance-and-land",[285,310,311],{},"3問",[285,313,314],{},"6問",[267,316,317,320,322],{},[285,318,319],{},"education",[285,321,311],{},[285,323,314],{},[267,325,326,329,331],{},[285,327,328],{},"disaster",[285,330,311],{},[285,332,314],{},[267,334,335,338,341],{},[285,336,337],{},"他7ページ",[285,339,340],{},"各2問",[285,342,343],{},"各+2問",[18,345,346],{},"合計55問→89問。",[14,348,349],{"id":349},"スマホ375px幅で4択が縦1列に崩れる",[18,351,352,353,356],{},"iPhoneサイズで4択ボタンが縦に1列に伸びて、画面の半分以上を占めているのを発見した。CSSの ",[32,354,355],{},"@media (max-width: 480px)"," で1列固定の指定になっていたのが原因。",[18,358,359],{},"ブレイクポイントを360pxに切り上げて、375px以上では2列を維持するよう12ファイル並列で直させた。",[14,361,363],{"id":362},"codexレビューで10件の致命的誤りが噴出","Codexレビューで10件の致命的誤りが噴出",[18,365,366],{},"ひと通り出来上がったところでCodex（gpt-5.5）にレビューを通した。返ってきた指摘がかなり厳しかった。",[368,369,370,378,384,390,396,402,408,414],"ul",{},[371,372,373,377],"li",{},[374,375,376],"strong",{},"県内総生産の全国合計",": ハードコードしてあった数字が古いと指摘されたので、約580兆円に直した",[371,379,380,383],{},[374,381,382],{},"海岸線延長ランキング",": 順序が違ううえ、解説に「半数以上」と書いてあった部分が事実と合わないと指摘された",[371,385,386,389],{},[374,387,388],{},"港湾コンテナ取扱量",": 「総数」と「輸出のみ」が問題ごとに混在していたので「総数」に統一させた",[371,391,392,395],{},[374,393,394],{},"最深積雪ランキング",": 山岳の私的観測を含んでいたので公式観測ベースに直させて、守門岳を追加した",[371,397,398,401],{},[374,399,400],{},"活火山数",": 「全国の活火山数」と「都道府県別の活火山数」が混ざっていたので都道府県別データに統一させた",[371,403,404,407],{},[374,405,406],{},"平均標高ランキング",": 順序が違ったうえ、解説の旧値も古いまま残っていた",[371,409,410,413],{},[374,411,412],{},"人口密度低い順",": 解説の中で順位の根拠が自己矛盾していると指摘された",[371,415,416,419],{},[374,417,418],{},"軽種馬数値",": ソース注記が弱いと指摘されたので、出典を強化させた",[18,421,422],{},"「画面の数字に違和感を持つ係」は自分でやり、修正案の生成と適用はCodexとClaude Codeに回す、という分担で全件片付けた。",[14,424,425],{"id":425},"目次トップに進捗バーを追加",[18,427,428],{},"12ページの正答率を1本のミニバーで集約表示するUIを目次トップに追加させた。実装済み12ページと「準備中」表示の管理もここでまとめてもらった。子供が「あとどれくらい残ってる」を一目で把握できる。",[14,430,432],{"id":431},"phase-5-8-の計画書もcodexレビュー2回回す","Phase 5-8 の計画書もCodexレビュー2回回す",[18,434,435],{},"夜に翌週以降の Phase 5-8（米・果物・畜産・水産など産業編）の計画書を書かせて、Codexに2回通した。",[368,437,438,444,450],{},[371,439,440,443],{},[374,441,442],{},"Phase 6 の分割",": 1ページに詰め込みすぎていると指摘されたので 6A/6B に分割させた",[371,445,446,449],{},[374,447,448],{},"Phase 7 の重複県",": 同じ県が複数問の正解になりすぎる構成だと指摘されたので分散させる方針に切り替えた",[371,451,452,455],{},[374,453,454],{},"Phase 8 の「そば」を除外",": 公式の都道府県別出荷データが存在しないと指摘されたので、そばの問題はスコープから外した",[18,457,458],{},"Phase 2-4 の指示書のときも別途3回レビューを回して、計9件の指摘を全反映させてから次セッションに引き継いだ。",[14,460,461],{"id":461},"学び",[368,463,464,467,473],{},[371,465,466],{},"統計クイズは「データの信頼性」が命。出典に揺れがあると問題ごと事故る。Codexが拾った10件のうち半分はデータソースの揺れに起因していた",[371,468,469,470,472],{},"「全国合計」みたいな汎用UIは、合算できない指標が混ざった瞬間に破綻する。型に分岐を持たせる（",[32,471,184],{},"）と早期に詰められる",[371,474,475],{},"復習モードは早めに共通化させたのが効いた。あとから12ページに足していったが追加コストはほぼゼロだった",[14,477,478],{"id":478},"関連ファイル",[368,480,481,486,491,496,501,506,511,516,521],{},[371,482,483],{},[32,484,485],{},"apps/web/app/composables/usePrefectureQuiz.ts",[371,487,488],{},[32,489,490],{},"apps/web/app/pages/prefecture-quiz/statistics/population.vue",[371,492,493],{},[32,494,495],{},"apps/web/app/pages/prefecture-quiz/statistics/area-and-geography.vue",[371,497,498],{},[32,499,500],{},"apps/web/app/pages/prefecture-quiz/statistics/manufacturing.vue",[371,502,503],{},[32,504,505],{},"apps/web/app/pages/prefecture-quiz/statistics/trade-and-port.vue",[371,507,508],{},[32,509,510],{},"apps/web/app/pages/prefecture-quiz/statistics/finance-and-land.vue",[371,512,513],{},[32,514,515],{},"apps/web/app/pages/prefecture-quiz/statistics/tourism.vue",[371,517,518],{},[32,519,520],{},"apps/web/app/pages/prefecture-quiz/statistics/education.vue",[371,522,523],{},[32,524,525],{},"apps/web/app/pages/prefecture-quiz/statistics/disaster.vue",[527,528,529],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":42,"searchDepth":56,"depth":56,"links":531},[532,533,534,535,536,537,538,539,540,541,542,543,544],{"id":16,"depth":56,"text":16},{"id":23,"depth":56,"text":24},{"id":157,"depth":56,"text":158},{"id":171,"depth":56,"text":172},{"id":235,"depth":56,"text":236},{"id":245,"depth":56,"text":246},{"id":255,"depth":56,"text":256},{"id":349,"depth":56,"text":349},{"id":362,"depth":56,"text":363},{"id":425,"depth":56,"text":425},{"id":431,"depth":56,"text":432},{"id":461,"depth":56,"text":461},{"id":478,"depth":56,"text":478},"dev",null,"Phase 1の4ページ24問から、人口・地理・製造業・貿易・財政・観光・教育・防災まで合計12ページ89問へ拡張。Codexレビューで10件の致命的誤りを修正したログ。","md",{},true,"/prefecture-quiz-statistics-12pages","mdx-playground",false,"2026-05-15T00:00:00.000Z",{"title":5,"description":547},"make-diary","2026-05/2026-05-15/prefecture-quiz-statistics-12pages",[559,560,561,562,563],"prefecture-quiz","nuxt","vue","codex-review","quiz-design","wM6tqTDms4225bAHAKp0nrcGxl7kICVwO4gE0_4G1R8",[],[567,571,574,578,582],{"title":568,"path":569,"publishedAt":570},"全18講に触って動くシミュレーターを入れた日 — PR12本のレビューから講座導線の作り直しまで","/code-course-interactive-rollout","2026-07-26T00:00:00.000Z",{"title":572,"path":573,"publishedAt":570},"インタラクティブ教材を1枚に集約し、本文の線を減らした日","/interactive-content-consolidation",{"title":575,"path":576,"publishedAt":577},"Webサービスの技術構成 2026年版 — Vue.js/Nuxt/Astroの使い分けとその理由","/web-tech-stack-2026","2026-07-22T00:00:00.000Z",{"title":579,"path":580,"publishedAt":581},"英語の図解Artifactを日本語化して単独Vueページで公開するまで - AI導入5ステップの移植記録","/ai-adoption-steps-page","2026-07-17T00:00:00.000Z",{"title":583,"path":584,"publishedAt":585},"過去記事に散らばったSVG図版を一覧するギャラリービューアを作った","/svg-gallery-viewer","2026-07-01T00:00:00.000Z","https://log.eurekapu.com/og/blog/prefecture-quiz-statistics-12pages.png?v=2026-05-15T00%3A00%3A00.000Z&title=%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C%E3%82%AF%E3%82%A4%E3%82%BA%E3%81%AB%E7%B5%B1%E8%A8%88%E7%B7%A812%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E5%A2%97%E8%A8%AD%E3%81%97%E3%80%8189%E5%95%8F%E3%81%B8%E6%8B%A1%E5%BC%B5%E3%81%97%E3%81%9F%E6%97%A5&author=Kei%20Komatsu&sig=6aa4f95e94a71a62",1786424494334]