簿記学習サイトのクイズ入口をハブ化 — 問題文UIから矢印キー移動まで一気に整理した

朝、積み残しの確認から

朝イチで「昨日の積み残しを教えて」と聞くと、5つ返ってきた。未コミット42ファイル、仕訳問題集の統合計画（未実装）、リンク監査の残り、DNS本番切替、サーバー更新の中断。本流はWordPress脱却移行の締めのはずだった。

だが最初に手を付けたのは、前日に計画だけ作っておいた仕訳問題集まわりの統合。ちょうどOpus 5が使えるようになった日だったので、サブエージェントとワークフローを使いながら進めるよう頼んだ。

並列で走らせる

まずクイズページの3タブ化をOpus 5のサブエージェントで進めさせた。それが終わったところで、Vue移植と科目別出題の2エージェントを並列起動。同一リポジトリでの同時作業になるので、ファイル所有権を先に分けて指示させている。

完了報告は数字付きで上がってきた。科目別出題は全92科目のid配列が独立実装と完全一致、移植は機械照合で全チェック合格。そのうえでdevサーバーを立てて描画も確認させた。正解をクリックすると緑の◎が出て、選択領域がハイライトされる。

ここまでは順調だった。

問題文の中で勘定科目を探した

自分で解いてみて引っかかったのが問題文だった。「支払保険料勘定は5つの要素のどこの勘定科目？」という一文を読んで、解く前にまず肝心の勘定科目名を文の中から探した。問われている内容より先に、対象がどこにあるかで詰まる。

そこで指示を出した。リード文を「次の勘定科目は5つの要素のどこに属しますか？」に固定し、改行して勘定科目名を大きめのフォントで独立表示する。

移植作業中のエージェントに横からこの指示を差し込ませた。勘定科目名・正解データ・判定ロジックは原本の1対1保持のまま、見せ方だけを変えさせる。エージェントを走らせながら仕様を差し替えても、そのまま吸収して進んでいくのは今日の発見のひとつだった。

矢印キーで次の問題へ

次の問題に進むたびにボタンまでマウスを動かすのも省きたい。←/→の矢印キーで前後の問題に移動できるショートカットを追加させた。

既存のショートカット実装（Ctrl+Enterの流儀）に合わせ、入力中や修飾キー併用時には反応しない安全対策つき。実測で→を2回押して1問目から3問目へ、←で1つ戻ることまで確認済みの報告が来た。

リンクが付いていない、の犯人

http://localhost:3708/quiz を触っていて、問題集一覧にリンクが付いていない、five-choiceのパンくずも問題集に飛ばない、と続けて指摘した。

調べさせると、パンくずのほうはDOM上リンクが生きていた。ビルドとのファイルロック競合を避けるために止めていたdevサーバーが原因で、死んで見えていただけ。リンクが欠けていた側は直させて、devサーバー再起動後にパンくずのクリックまで実測させた。

鍵はどうなっているのか

勘定科目から選ぶ一覧ページの刷新も別エージェントに任せた。原本の注記78件・脚注3件・ラベル107件がすべて文字列一致、リンク35・ロック53も現行と一致という報告のあと、新レイアウトを自分の目でも確認した。

その一覧を眺めていて、青リンクとロックが混ざっているのが気になった。もともとカテゴリ別に鍵をかけていたはずで、これでは結局かかっていないようなものでは、と一瞬思った。

聞いてみると、科目に新しく鍵をかけたのではなく、従来の章単位ロックをそのまま科目視点に写しただけだという。無料開放している章にその科目の問題が1問でもあれば青リンクになり、未ログインでも解ける。ログインすると解ける数が増える科目もある。

「あー、鍵がかかってないうちってことか」と声に出た。かかっていないのではなく、かかっていない範囲が先に見えている構造だった。

入口をハブにする

もうひとつ気になっていたのが /quiz の入口だった。もともと仕訳問題集だけだった場所に英単語クイズが同居して、開いた瞬間にどこへ行けばいいか迷う。

そこで、まず「簿記の問題」と「英単語の問題」の2つを選び、そこから分野別・勘定科目別・回答履歴の復習に降りていくハブ構造への再設計を依頼した。

ついでの整理も頼んだ。five-choiceから1つ戻ると、戻り先に「5つの要素」という選択肢自体が存在しないという導線の穴があった。ハブの簿記側に「仕訳問題集」「基礎: 5つの要素」「入門レベルの選択問題」を選択肢として並べ、基礎トレーニングの入口をハブに一本化させた。

ハブのカードには大小の傾斜が付いていたので意図を聞いた。音声入力の書き起こしでは「傾斜」が「傾聴」になっていたのに、質問の意図はそのまま通じた。設計判断の説明は受けたうえで、傾斜はやめてフラットに変更。

カード自体は、左側が説明・右側がSVG画像のレイアウトを作らせた。SVGは新規に描かせず、ログインモーダルのオンボーディングで使っていた既存のイラストから合う1枚を選ばせている。仕訳問題集のカードに載ったのは、借方・貸方のボタンで仕訳を選ぶ操作デモの図。4候補の中で、この問題集で実際にやる操作を見せる唯一の図だった。

道に逸れていた

カード刷新のエージェントを起動したところで手が止まった。よく考えたら、eurekapu-nuxt4の話をさっきからずっとやっている。もともとはWordPress脱却移行の残課題をつぶすセッションだった。

「もともと何やってましたっけ」と聞くと、本流の現在地を整理して返してきた。そこで、エージェントが動いている間にWordPress側の締めを並行で進めさせた。memo更新→学習ゲートのクイズ3問に全問正解→コミット、と流し、両サイトのデプロイと旧URLの301チェーンが本番の200まで通ることの実測確認までこの日のうちに済んだ。

なお、このセッションからの本番デプロイはこの日3回に及んでいて、同日の別記事覚えのないデプロイの犯人は自分の別セッションだったで書いた「犯人」のセッションでもある。途中では別セッションのステージ済みファイル1,606件がコミットに混入しかける事故もあったが、soft resetと部分コミットで復旧している。

午後の答え合わせ

14時半にもう一度「これってどういう進捗でしたっけ」と聞いた。

このセッションで依頼した作業はすべて完了・検証付きで、残っているのは自分の判断待ち4項目とコミット・デプロイだけ、変更は未コミットのまま保全されている——とディスク上の確認込みで返ってきた。判断待ちの4つは持ち越しになった。

学びメモ

• 問題文のUIは「何が問われているか」より先に「対象がどこにあるか」で詰まる。勘定科目名を改行して独立表示にしただけで、文の中を探す動作が消えた
• 同一リポジトリでサブエージェントを並列させるときは、ファイル所有権を先に分けて指示させると衝突しない
• 走行中のエージェントに仕様変更を差し込んでも吸収して進む。「止めて出し直す」前提を捨ててよかった
• 「リンクが付いていない」の原因が自分側（止めていたdevサーバー）ということがある。指摘の前にサーバーの生死を見る
• 鍵の仕様は「新しくかけた」のではなく「既存の章単位ロックを別視点に写した」だけ、という整理で腹落ちした
• 道に逸れたと気づいたら「もともと何やってたっけ」と聞けば現在地が返ってくる。逸れた側の作業はエージェントに持たせたまま本流に戻れた