[{"data":1,"prerenderedAt":217},["ShallowReactive",2],{"content-/bookkeeping-quiz-hub-redesign":3,"all-pages-for-dir":194,"related-/bookkeeping-quiz-hub-redesign":195,"og-image-/bookkeeping-quiz-hub-redesign":216},{"id":4,"title":5,"body":6,"category":175,"concepts":176,"description":177,"extension":178,"meta":179,"navigation":180,"ogImage":176,"path":181,"project_name":182,"published":183,"publishedAt":184,"seo":185,"stem":186,"tags":187,"todo":176,"unpublished":183,"updatedAt":176,"__hash__":193},"pages/2026-07/2026-07-25/bookkeeping-quiz-hub-redesign.md","簿記学習サイトのクイズ入口をハブ化 — 問題文UIから矢印キー移動まで一気に整理した",{"type":7,"value":8,"toc":161},"minimark",[9,13,18,22,25,28,31,34,37,40,43,46,49,52,55,58,62,69,72,75,78,81,84,87,90,97,100,103,106,109,112,115,118,127,130,133,136,139],[10,11,5],"h1",{"id":12},"簿記学習サイトのクイズ入口をハブ化-問題文uiから矢印キー移動まで一気に整理した",[14,15,17],"h2",{"id":16},"朝積み残しの確認から","朝、積み残しの確認から",[19,20,21],"p",{},"朝イチで「昨日の積み残しを教えて」と聞くと、5つ返ってきた。未コミット42ファイル、仕訳問題集の統合計画（未実装）、リンク監査の残り、DNS本番切替、サーバー更新の中断。本流はWordPress脱却移行の締めのはずだった。",[19,23,24],{},"だが最初に手を付けたのは、前日に計画だけ作っておいた仕訳問題集まわりの統合。ちょうどOpus 5が使えるようになった日だったので、サブエージェントとワークフローを使いながら進めるよう頼んだ。",[14,26,27],{"id":27},"並列で走らせる",[19,29,30],{},"まずクイズページの3タブ化をOpus 5のサブエージェントで進めさせた。それが終わったところで、Vue移植と科目別出題の2エージェントを並列起動。同一リポジトリでの同時作業になるので、ファイル所有権を先に分けて指示させている。",[19,32,33],{},"完了報告は数字付きで上がってきた。科目別出題は全92科目のid配列が独立実装と完全一致、移植は機械照合で全チェック合格。そのうえでdevサーバーを立てて描画も確認させた。正解をクリックすると緑の◎が出て、選択領域がハイライトされる。",[19,35,36],{},"ここまでは順調だった。",[14,38,39],{"id":39},"問題文の中で勘定科目を探した",[19,41,42],{},"自分で解いてみて引っかかったのが問題文だった。「支払保険料勘定は5つの要素のどこの勘定科目？」という一文を読んで、解く前にまず肝心の勘定科目名を文の中から探した。問われている内容より先に、対象がどこにあるかで詰まる。",[19,44,45],{},"そこで指示を出した。リード文を「次の勘定科目は5つの要素のどこに属しますか？」に固定し、改行して勘定科目名を大きめのフォントで独立表示する。",[19,47,48],{},"移植作業中のエージェントに横からこの指示を差し込ませた。勘定科目名・正解データ・判定ロジックは原本の1対1保持のまま、見せ方だけを変えさせる。エージェントを走らせながら仕様を差し替えても、そのまま吸収して進んでいくのは今日の発見のひとつだった。",[14,50,51],{"id":51},"矢印キーで次の問題へ",[19,53,54],{},"次の問題に進むたびにボタンまでマウスを動かすのも省きたい。←/→の矢印キーで前後の問題に移動できるショートカットを追加させた。",[19,56,57],{},"既存のショートカット実装（Ctrl+Enterの流儀）に合わせ、入力中や修飾キー併用時には反応しない安全対策つき。実測で→を2回押して1問目から3問目へ、←で1つ戻ることまで確認済みの報告が来た。",[14,59,61],{"id":60},"リンクが付いていないの犯人","リンクが付いていない、の犯人",[19,63,64,68],{},[65,66,67],"code",{},"http://localhost:3708/quiz"," を触っていて、問題集一覧にリンクが付いていない、five-choiceのパンくずも問題集に飛ばない、と続けて指摘した。",[19,70,71],{},"調べさせると、パンくずのほうはDOM上リンクが生きていた。ビルドとのファイルロック競合を避けるために止めていたdevサーバーが原因で、死んで見えていただけ。リンクが欠けていた側は直させて、devサーバー再起動後にパンくずのクリックまで実測させた。",[14,73,74],{"id":74},"鍵はどうなっているのか",[19,76,77],{},"勘定科目から選ぶ一覧ページの刷新も別エージェントに任せた。原本の注記78件・脚注3件・ラベル107件がすべて文字列一致、リンク35・ロック53も現行と一致という報告のあと、新レイアウトを自分の目でも確認した。",[19,79,80],{},"その一覧を眺めていて、青リンクとロックが混ざっているのが気になった。もともとカテゴリ別に鍵をかけていたはずで、これでは結局かかっていないようなものでは、と一瞬思った。",[19,82,83],{},"聞いてみると、科目に新しく鍵をかけたのではなく、従来の章単位ロックをそのまま科目視点に写しただけだという。無料開放している章にその科目の問題が1問でもあれば青リンクになり、未ログインでも解ける。ログインすると解ける数が増える科目もある。",[19,85,86],{},"「あー、鍵がかかってないうちってことか」と声に出た。かかっていないのではなく、かかっていない範囲が先に見えている構造だった。",[14,88,89],{"id":89},"入口をハブにする",[19,91,92,93,96],{},"もうひとつ気になっていたのが ",[65,94,95],{},"/quiz"," の入口だった。もともと仕訳問題集だけだった場所に英単語クイズが同居して、開いた瞬間にどこへ行けばいいか迷う。",[19,98,99],{},"そこで、まず「簿記の問題」と「英単語の問題」の2つを選び、そこから分野別・勘定科目別・回答履歴の復習に降りていくハブ構造への再設計を依頼した。",[19,101,102],{},"ついでの整理も頼んだ。five-choiceから1つ戻ると、戻り先に「5つの要素」という選択肢自体が存在しないという導線の穴があった。ハブの簿記側に「仕訳問題集」「基礎: 5つの要素」「入門レベルの選択問題」を選択肢として並べ、基礎トレーニングの入口をハブに一本化させた。",[19,104,105],{},"ハブのカードには大小の傾斜が付いていたので意図を聞いた。音声入力の書き起こしでは「傾斜」が「傾聴」になっていたのに、質問の意図はそのまま通じた。設計判断の説明は受けたうえで、傾斜はやめてフラットに変更。",[19,107,108],{},"カード自体は、左側が説明・右側がSVG画像のレイアウトを作らせた。SVGは新規に描かせず、ログインモーダルのオンボーディングで使っていた既存のイラストから合う1枚を選ばせている。仕訳問題集のカードに載ったのは、借方・貸方のボタンで仕訳を選ぶ操作デモの図。4候補の中で、この問題集で実際にやる操作を見せる唯一の図だった。",[14,110,111],{"id":111},"道に逸れていた",[19,113,114],{},"カード刷新のエージェントを起動したところで手が止まった。よく考えたら、eurekapu-nuxt4の話をさっきからずっとやっている。もともとはWordPress脱却移行の残課題をつぶすセッションだった。",[19,116,117],{},"「もともと何やってましたっけ」と聞くと、本流の現在地を整理して返してきた。そこで、エージェントが動いている間にWordPress側の締めを並行で進めさせた。memo更新→学習ゲートのクイズ3問に全問正解→コミット、と流し、両サイトのデプロイと旧URLの301チェーンが本番の200まで通ることの実測確認までこの日のうちに済んだ。",[19,119,120,121,126],{},"なお、このセッションからの本番デプロイはこの日3回に及んでいて、同日の別記事",[122,123,125],"a",{"href":124},"/claude-code-multi-session-deploy-mystery","覚えのないデプロイの犯人は自分の別セッションだった","で書いた「犯人」のセッションでもある。途中では別セッションのステージ済みファイル1,606件がコミットに混入しかける事故もあったが、soft resetと部分コミットで復旧している。",[14,128,129],{"id":129},"午後の答え合わせ",[19,131,132],{},"14時半にもう一度「これってどういう進捗でしたっけ」と聞いた。",[19,134,135],{},"このセッションで依頼した作業はすべて完了・検証付きで、残っているのは自分の判断待ち4項目とコミット・デプロイだけ、変更は未コミットのまま保全されている——とディスク上の確認込みで返ってきた。判断待ちの4つは持ち越しになった。",[14,137,138],{"id":138},"学びメモ",[140,141,142,146,149,152,155,158],"ul",{},[143,144,145],"li",{},"問題文のUIは「何が問われているか」より先に「対象がどこにあるか」で詰まる。勘定科目名を改行して独立表示にしただけで、文の中を探す動作が消えた",[143,147,148],{},"同一リポジトリでサブエージェントを並列させるときは、ファイル所有権を先に分けて指示させると衝突しない",[143,150,151],{},"走行中のエージェントに仕様変更を差し込んでも吸収して進む。「止めて出し直す」前提を捨ててよかった",[143,153,154],{},"「リンクが付いていない」の原因が自分側（止めていたdevサーバー）ということがある。指摘の前にサーバーの生死を見る",[143,156,157],{},"鍵の仕様は「新しくかけた」のではなく「既存の章単位ロックを別視点に写した」だけ、という整理で腹落ちした",[143,159,160],{},"道に逸れたと気づいたら「もともと何やってたっけ」と聞けば現在地が返ってくる。逸れた側の作業はエージェントに持たせたまま本流に戻れた",{"title":162,"searchDepth":163,"depth":163,"links":164},"",2,[165,166,167,168,169,170,171,172,173,174],{"id":16,"depth":163,"text":17},{"id":27,"depth":163,"text":27},{"id":39,"depth":163,"text":39},{"id":51,"depth":163,"text":51},{"id":60,"depth":163,"text":61},{"id":74,"depth":163,"text":74},{"id":89,"depth":163,"text":89},{"id":111,"depth":163,"text":111},{"id":129,"depth":163,"text":129},{"id":138,"depth":163,"text":138},"dev",null,"Nuxt移行版の簿記学習サイトで仕訳問題集まわりを統合。勘定科目名を独立表示する問題文UI、矢印キーでの問題移動、簿記と英単語を分けるハブ画面の再設計まで、Opus 5のサブエージェントを並列で回した一日の記録。","md",{},true,"/bookkeeping-quiz-hub-redesign","eurekapu-nuxt4",false,"2026-07-25T00:00:00.000Z",{"title":5,"description":177},"2026-07/2026-07-25/bookkeeping-quiz-hub-redesign",[188,189,190,191,192],"簿記","クイズ","UI改善","Nuxt","サブエージェント","YcVjY15bIkvg4yK4eX3FWERuGKl48HiYbiosFIQvLJ0",[],[196,200,204,208,212],{"title":197,"path":198,"publishedAt":199},"語源英単語トレーナーに想起練習を実装し、ストリーム型クイズUXを移植するまで","/gogen-eitango-stream-quiz-ux","2026-07-20T00:00:00.000Z",{"title":201,"path":202,"publishedAt":203},"レッスンページの表示改善 — テーブルは余白で区切り、コードブロックは折り返してhighlight.jsで着色する","/lesson-page-table-code-formatting","2026-07-03T00:00:00.000Z",{"title":205,"path":206,"publishedAt":207},"消費税のインタラクティブ教材をNuxtで構築 — 調査エージェント2本を並行で走らせてコースページを実装した","/consumption-tax-course-build","2026-07-02T00:00:00.000Z",{"title":209,"path":210,"publishedAt":211},"書棚のKindle蔵書識別と漫画フィルタを整える","/kindle-bookshelf-ui-improvements","2026-06-19T00:00:00.000Z",{"title":213,"path":214,"publishedAt":215},"宅建オリジナル教科書プロジェクト Phase 1.5 着手 — 金型 5_1『宅地建物取引業・免許』の本文 + SVG 17 枚をサブエージェント並列で生成した","/takken-textbook-phase-1-5-start","2026-06-14T00:00:00.000Z","https://log.eurekapu.com/og/blog/bookkeeping-quiz-hub-redesign.png?v=2026-07-25T00%3A00%3A00.000Z&title=%E7%B0%BF%E8%A8%98%E5%AD%A6%E7%BF%92%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%82%AF%E3%82%A4%E3%82%BA%E5%85%A5%E5%8F%A3%E3%82%92%E3%83%8F%E3%83%96%E5%8C%96%20%E2%80%94%20%E5%95%8F%E9%A1%8C%E6%96%87UI%E3%81%8B%E3%82%89%E7%9F%A2%E5%8D%B0%E3%82%AD%E3%83%BC%E7%A7%BB%E5%8B%95%E3%81%BE%E3%81%A7%E4%B8%80%E6%B0%97%E3%81%AB%E6%95%B4%E7%90%86%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=7b152b54dd098b24",1785099347374]