2026年4月22日の開発日記

朝6時に別表テキスト教材のVue変換から始まり、SVG図解22枚の制作、E2Eテスト修正、インタラクティブ別表アプリの設計、書籍2冊のOCR+DB格納まで、15時間を超えるセッションが走った1日。eurekapu-nuxt4のコンテンツ基盤が一段階形になった。

今日のタイムライン

今日やったこと

1. 別表テキスト教材のVue変換

ドラフト状態のマークダウン（10チャプター・3600行）を11個のVueページに変換した。Cloudflareにデプロイすると空白が返ってきて、原因はprocess.cwd() + memo/でファイルシステムを直接読んでいたこと。stepsレイアウトをルートパス自動切替に汎用化し、全ファイルを統一した。

主な成果:

• 10チャプター+indexの11ファイルをVueページ化
• stepsレイアウトを汎用化（sidebarConfigsに1エントリ追加するだけで新コース対応）
• プレースホルダーSVG 25ファイルをpublic/にコピーしてビルド通過
• トップページに「テキスト教材」セクション追加

詳細: 3600行のドラフトMDを11個のVueページに変換し、stepsレイアウトを汎用化した記録

2. 別表デフォルメSVG図解制作

22個のプレースホルダーSVGを実際の図解に置き換えた。別表四・五(一)・五(二)・十四(二)のデフォルメ版を制作。寄付金のウォーターフォールチャートはv1からv4まで4回描き直して計算構造を可視化した。「簿記3級のフロー×ストックと同じ構造」というコンセプトで概念図も作り、「正規化テーブル」アプローチを整理した。

主な成果:

• プレースホルダー22枚を実図解に置換（並列5エージェント）
• デフォルメ版別表を各種制作（四、五(一)I/II、五(二)概要/ディテール、十四(二)）
• ウォーターフォールチャートv1→v4の反復改善
• 論点別3点セットSVG（別表間の転記フロー可視化）
• 正規化テーブルで別表の構造を再整理する提案

詳細: 別表デフォルメSVG図解を22枚制作しウォーターフォールチャートをv4まで磨いた記録

3. E2Eテスト修正 & PR #5マージ

PR #5のCIが失敗していたが、mainブランチでも直近3回全て失敗しており、既存の問題だった。3つの原因（セレクタ変更、オンボーディングオーバーレイ、回答記録ロジック）を1つずつ潰し、36テスト全パスに持ち込んでPR #5をマージした。

主な成果:

• トップページのセレクタ修正（.hero-heading→.concept-heading）
• localStorage事前セットでオンボーディングオーバーレイを回避
• revealAnswer→全選択方式に変更してanswers配列に確実に記録
• CI全パス→PR #5マージ完了

詳細: Playwright E2Eテストが3つの原因で落ち続けていた問題を特定・修正してPR #5をマージした

4. インタラクティブ別表アプリの設計

仕訳のチェックボックスをON/OFFすると別表四・五(一)のSVGが連動する「触れる別表」アプリを設計した。Codex 4回のレビューで致命的な論点を1つずつ潰した。実装は次セッションに持ち越し。

主な成果:

• 法人税の中間納付+期末決算をテストケースに設計
• Codexレビュー4回で計画書を精緻化（繰越損益金の洗替え、中間分の両建て、税引前利益の分離、priorJigyozeiの繰越式修正）
• 計算ロジック（純粋関数）→Vueページ→サイドバー追加の実装順を確定

詳細: 仕訳チェックボックスで別表四・五(一)が連動するインタラクティブアプリの設計

5. 書籍OCR + Turso DB格納

2冊の専門書をyomitoku OCRでデジタル化し、Turso DBに格納した。201ページ（図124件）と320ページ（図44件）。2セッションともTurso移行後のAPI変更に引っかかり、同じ修正を2回繰り返した。

主な成果:

• 201ページの参考書: 124図のリネーム→DB格納
• 320ページの専門書: 44図のリネーム→DB格納
• Turso移行後のAPIシグネチャ変更を把握（db_path不要、init_books_dbスキップ）

詳細: yomitoku OCRで専門書2冊をデジタル化してTurso DBに格納した記録

今日の試行錯誤

今日の学び

• stepsレイアウトのルートパス自動切替は、1行の設定追加で新コースに対応できる汎用パターンとして使い回せる
• Playwright E2Eテストでは、オンボーディングやオーバーレイなどの初回表示要素をlocalStorageで事前制御するのが定石
• ウォーターフォールチャートは「何から何を引いて何が残るか」の視覚構造が命。テーブルに数字を並べただけでは構造が見えない
• Codexレビューは「致命的な点だけ指摘して」と制約をかけると的確に刺さる。4回の反復で計算ロジックの矛盾を全て潰せた
• 「別表は正規化されていないテーブル」という視点は、RDBの正規化理論を知っている人に別表を説明するときに強力なアナロジーになる

明日やること

• インタラクティブ別表アプリの実装（計算ロジック→Vueページ→サイドバー追加）
• デフォルメ別表SVGのドラフトへの組み込み（プレースホルダー置換済み分の品質確認）

関連記事

• 3600行のドラフトMDを11個のVueページに変換し、stepsレイアウトを汎用化した記録
• 別表デフォルメSVG図解を22枚制作しウォーターフォールチャートをv4まで磨いた記録
• Playwright E2Eテストが3つの原因で落ち続けていた問題を特定・修正してPR #5をマージした
• 仕訳チェックボックスで別表四・五(一)が連動するインタラクティブアプリの設計
• yomitoku OCRで専門書2冊をデジタル化してTurso DBに格納した記録