2026年5月9日の開発日記
朝5時台から夜まで、Vue/Nuxt のUI改善とCodex連携、PC環境棚卸しまで広く触った日。前日の積み残しを掘り起こすところから始めて、クイズ画面の貸借バランス問題を計画書→Codex 5回レビュー→実装→テストまで一気通貫で抜けた。並行してコクピットのレスポンシブを1920〜375pxまで7段階で検証し、モーダルズームの自動fitとSVG viewBox補正で見た目の歪みを潰した。breadcrumbは130ファイルを一括変換、Dropbox 2.6万件同期の謎は古いPCの残骸で決着。
今日のタイムライン

今日やったこと
1. クイズ画面のBS/PL全科目事前表示と動的初期残高(Codex 5回レビュー → 実装)
問題ごとにBS/PLに勘定がセットされる方式から、chapter/sectionで問題セットを特定し、出てくる勘定科目を全部事前に枠表示して各科目の初期残高を動的算出する方式に切り替えた。資本金は1000固定、それ以外は問題系列を逆算して常にプラスを保つ。
主な成果:
- 計画書を
memo/2026-05-09/quiz-bs-pl-preset-balance-plan.mdに作成 - Codex (gpt-5.5) で5回レビュー:1回目で動的算出方式へ発想転換、3回目で純資産マイナス防止、5回目OK
- accountMapping.ts に新規関数追加、practice.vue 修正、22テストpass
- dev サーバで24科目枠と貸借一致(11,200 = 3,100 + 8,100)を目視確認
詳細: クイズ画面のBS/PL全科目事前表示と動的初期残高をCodex 5回レビューで実装
2. クイズ画面のCS/BS/PLをコクピットスタイル統一+delta-popup・装飾点線
クイズの財務三表をコクピット側のスタイル(タイトルバー#d1d5db、テーブルベース、GL階調、0.825rem、カード枠撤去)に書き換え、BSは資産合計から流動/固定/その他流動でブレイクダウン。マイナス表記は▲統一。CS表示時だけbodyを1480pxへブレイクアウト、ヘッダーはmax-width維持。delta-popupを acct: prefix限定で実装し、PL→BS当期純利益・PL→CS税引前・CS→BS現金の3組の装飾点線をシーケンス制御。←/→/Ctrl+Enterのキーボードショートカットも追加。
主な成果:
- 3表を同じ読み口で揃え、視線が一方向に流れる構造に
- delta-popupを集計値に出さず個別科目だけに限定(花火大会化を防止)
- カウントアップ完了1.7秒後に点線が1本ずつ出るシーケンス
<kbd>タグ付きナビボタン
詳細: クイズ画面のCS/BS/PLをコクピットスタイルに統一しdelta-popupと装飾点線で連携を可視化
3. コクピットのレスポンシブ強化+モーダル自動ズーム
cockpit-00-summaryを1920/1366/1280/1100/900/768/375の7幅で順に検証して横スクロールを撲滅。1920pxはwide-sectionを1480pxで頭打ちにしてセンタリング、375pxはBSテーブルを1列積みに変更。statements-grid狭幅版にssエリアが入っていなかったバグも修正。モーダル拡大時に自動でビューポートにフィットする applyFitZoom と±ズームボタンを追加。CSS zoom配下でSVGオーバーレイ座標が getBoundingClientRect 由来 path 座標とずれる問題は、SVGに動的viewBoxを当てて座標系を揃えて解決。
主な成果:
- 1920〜375pxで横スクロール0px
- iPadでモーダル拡大時、左ペインの巨大空白を解消
- 自動fit機能でユーザーが毎回−を押す手間が消えた
- viewBox動的化でズーム中もオーバーレイがずれない
詳細: コクピット財務三表ページのレスポンシブ強化とモーダルの自動ズーム機能
4. CFリファレンスのMillerColumnLayoutを企業ライフサイクル順に再構成
cashflow-statement/reference のトップエリアを280px→90pxまで圧縮し、右コンテンツに topic-header(タイトル+グレー説明)を移設。31トピックを企業ライフサイクル順(基礎知識→株主資本→運転資本→借入金→固定資産→法人税)に並び替え、7セクションに区切って明示。型を拡張して section フィールドを追加、ナビ部分のテンプレート書き換え、CSSで nav-col を block レイアウトに、セクション内で2カラム保持。
主な成果:
- ファーストビューがコンテンツで埋まるレイアウトに
- リスト全体が会社のストーリー順になった
- 簿記3級ノートのフェーズ表示と同じ読み口に揃った
詳細: キャッシュフロー実務リファレンスのMillerColumnLayoutを企業ライフサイクル順に再構成
5. 全レッスンページのbreadcrumb統一(130ファイル一括変換)
簿記3級スライド・会計入門・case100ノート・cockpit・CFリファレンスなどでbreadcrumbの形がバラついていたのを、共通コンポーネントを作って10レイアウトを置換。case100ノート系130ファイルは一括変換スクリプトで処理。
主な成果:
- 共通コンポーネント1箇所修正で10レイアウト同期
- スクリプトで130ファイル10秒(手動なら65分換算)
- 別セッションがステージングしていてやり直しになる事故も経験
詳細: 全レッスンページのbreadcrumbを共通コンポーネント化して130ファイル一括変換
6. 将棋盤デモにキーボードショートカット+持ち駒ハイライト+SVG駒
mdx-playground の shogi-board-demo.vue に3機能を追加。←/→で局面進退、持ち駒選択中はその駒を青枠ハイライト、文字列表示の持ち駒をSVG駒画像に置換。
主な成果:
- onMounted/onBeforeUnmountでkeydownリスナー登録・解除
- 打ち予告 computed で青枠ハイライト
- CSSをSVGにフィットさせて駒の見た目が本物に近づいた
詳細: 将棋盤デモにキーボードショートカットと持ち駒ハイライト・SVG駒を実装
7. Dropbox古いPC残骸の謎解き+SQL Serverサービス棚卸し
Dropboxが2.6万件のファイルを延々同期している原因を調査。仮説1(PCバックアップでDownloads丸ごと)→Documentsしかチェックされておらず却下、仮説2(Documents暴走)→ローカルは830件だけだが、ユーザー仮説「古いPCの残骸」が正解だった(ホスト名で確定)。Pictures/ClipboardImages の自動アップロードはバックアップ対象外と判明。
並行してWindowsスタートアップ整理。SQL Server 2014(会計ソフトC=弥生のインスタンス)と2016(税務ソフト系=達人のDB、約1.4GB)と2017(インストーラ残骸)を発見。会計ソフトC側は本体アンインストール済みなのに残骸サービスだけ動いていて空のmasterのみ。Codex (gpt-5.5) でStartType Manual/Disabled運用が永続的に効くこと確認、UAC承認で会計ソフトCを停止+Disabledにして117MB解放。税務ソフト側は手動起動が面倒なので据え置き。
主な成果:
- 古いPC残骸のクラウドバックアップを削除画面まで誘導
- 会計ソフトC残骸サービスをStop+Disabledに(117MB解放)
- StartTypeレジストリ書き換えで永続的に効くことをCodexで確認
詳細: Dropboxが2.6万件同期する謎とSQL Serverの残骸を整理した話
今日の試行錯誤
| # | テーマ | 試したこと | 結果 | 気づき |
|---|---|---|---|---|
| 1 | クイズ初期残高 | スクリプトで事前生成 | Codex指摘で却下 | 動的算出のほうがシンプル、自動生成ファイル不要 |
| 2 | クイズ初期残高 | 動的算出に切り替え | 5回レビューでOK | 純資産マイナス防止・判定式統一など3回目までで詰まる |
| 3 | コクピットモバイル | モーダル左ペイン min-height: 100dvh | 巨大空白発生 | デスクトップ2列時だけ高さ揃える条件を追加 |
| 4 | コクピットズーム | CSS zoom + getBoundingClientRect | SVGオーバーレイずれ | viewBox動的化で座標系を揃えて解決 |
| 5 | quizブレイクアウト | 全画面でwide-section化 | 累積/単体ヘッダーまで広がる | bodyだけ広げてヘッダーはmax-width維持 |
| 6 | delta-popup | 全要素に適用 | 集計値も光って花火大会 | acct: prefix限定で個別科目だけに |
| 7 | 装飾点線 | カウントアップ中に出す | 注意が散る | 1700ms待ってから1本ずつシーケンス描画 |
| 8 | breadcrumb | 個別ファイル手修正 | 10レイアウト分が辛い | 共通コンポーネント化+130ファイル一括変換 |
| 9 | Dropbox 2.6万件 | PCバックアップ仮説 | Documentsだけだった | 古いPCの残骸クラウドバックアップが正体 |
| 10 | スタートアップ調査 | Win32_StartupCommandだけ参照 | オフ判定が漏れる | StartupApprovedレジストリで照合し直す |
| 11 | Chrome DevTools | resize_pageを使う | メディアクエリが追従しない瞬間あり | emulateで切り替えると安定 |
| 12 | git ステージング | breadcrumb直後にコミット | 別セッションが先にステージしていた | unstage→自分の担当分だけ再ステージ |
今日の学び
- 事前生成スクリプトより動的算出を疑う:成生成ファイル2本がそのまま消えた
- Codex 5回は重くない:本文を毎回渡せばresume --lastで文脈が続く
- 判定式は1箇所に集約:会社設立特例を §5.3 / §6 / §7 で揃えるだけで指摘が消えた
- CSS zoom はオーバーレイの天敵:SVGの座標系をviewBoxで明示すればズーム下でも保つ
- 共通コンポーネント化は30ファイルあたりで逆転する:手動65分とスクリプト10秒の差
- 残骸サービスはアンインストーラの仕様:本体は消えてもSQL Serverインスタンスだけ残ることがある
- Codexにセカンドオピニオン依頼するときは
-m gpt-5.5を必ず付ける、resume --lastで文脈を引き継ぐ
明日やること
- クイズ chapter=8 のアクセス制限解除して目視確認
- 達人を Stream Deck の Multi Action で Start-Service+起動連鎖(やる気になったら)
- cockpit-01-foundation 以降の他ページもbreadcrumb確認
- 将棋盤デモのその他駒(飛・桂・香)もSVG化