[{"data":1,"prerenderedAt":547},["ShallowReactive",2],{"content-/2026-04-22-diary":3,"all-pages-for-dir":545,"og-image-/2026-04-22-diary":546},{"id":4,"title":5,"body":6,"category":526,"description":527,"extension":528,"meta":529,"navigation":473,"path":530,"project_name":531,"published":532,"publishedAt":533,"seo":534,"stem":535,"tags":536,"todo":543,"updatedAt":543,"__hash__":544},"pages/2026-04/2026-04-22/diary-2026-04-22.md","2026年4月22日の開発日記 - 別表教材を一気にVue化・SVG化、E2Eテストも修正してマージ",{"type":7,"value":8,"toc":509},"minimark",[9,14,18,22,29,32,37,45,51,67,78,81,85,88,92,109,117,119,123,126,130,159,167,169,173,176,180,191,199,201,205,208,212,223,231,233,236,435,437,440,457,459,462,482,484,487],[10,11,13],"h1",{"id":12},"_2026年4月22日の開発日記","2026年4月22日の開発日記",[15,16,17],"p",{},"朝6時に別表テキスト教材のVue変換から始まり、SVG図解22枚の制作、E2Eテスト修正、インタラクティブ別表アプリの設計、書籍2冊のOCR+DB格納まで、15時間を超えるセッションが走った1日。eurekapu-nuxt4のコンテンツ基盤が一段階形になった。",[19,20,21],"h2",{"id":21},"今日のタイムライン",[15,23,24],{},[25,26],"img",{"alt":27,"src":28},"タイムライン","/2026-04/2026-04-22/timeline-2026-04-22.png",[19,30,31],{"id":31},"今日やったこと",[33,34,36],"h3",{"id":35},"_1-別表テキスト教材のvue変換","1. 別表テキスト教材のVue変換",[15,38,39,40,44],{},"ドラフト状態のマークダウン（10チャプター・3600行）を11個のVueページに変換した。Cloudflareにデプロイすると空白が返ってきて、原因は",[41,42,43],"code",{},"process.cwd() + memo/","でファイルシステムを直接読んでいたこと。stepsレイアウトをルートパス自動切替に汎用化し、全ファイルを統一した。",[15,46,47],{},[48,49,50],"strong",{},"主な成果:",[52,53,54,58,61,64],"ul",{},[55,56,57],"li",{},"10チャプター+indexの11ファイルをVueページ化",[55,59,60],{},"stepsレイアウトを汎用化（sidebarConfigsに1エントリ追加するだけで新コース対応）",[55,62,63],{},"プレースホルダーSVG 25ファイルをpublic/にコピーしてビルド通過",[55,65,66],{},"トップページに「テキスト教材」セクション追加",[15,68,69,72,73],{},[48,70,71],{},"詳細:"," ",[74,75,77],"a",{"href":76},"/beppyo-vue-conversion","3600行のドラフトMDを11個のVueページに変換し、stepsレイアウトを汎用化した記録",[79,80],"hr",{},[33,82,84],{"id":83},"_2-別表デフォルメsvg図解制作","2. 別表デフォルメSVG図解制作",[15,86,87],{},"22個のプレースホルダーSVGを実際の図解に置き換えた。別表四・五(一)・五(二)・十四(二)のデフォルメ版を制作。寄付金のウォーターフォールチャートはv1からv4まで4回描き直して計算構造を可視化した。「簿記3級のフロー×ストックと同じ構造」というコンセプトで概念図も作り、「正規化テーブル」アプローチを整理した。",[15,89,90],{},[48,91,50],{},[52,93,94,97,100,103,106],{},[55,95,96],{},"プレースホルダー22枚を実図解に置換（並列5エージェント）",[55,98,99],{},"デフォルメ版別表を各種制作（四、五(一)I/II、五(二)概要/ディテール、十四(二)）",[55,101,102],{},"ウォーターフォールチャートv1→v4の反復改善",[55,104,105],{},"論点別3点セットSVG（別表間の転記フロー可視化）",[55,107,108],{},"正規化テーブルで別表の構造を再整理する提案",[15,110,111,72,113],{},[48,112,71],{},[74,114,116],{"href":115},"/beppyo-svg-deformed-design","別表デフォルメSVG図解を22枚制作しウォーターフォールチャートをv4まで磨いた記録",[79,118],{},[33,120,122],{"id":121},"_3-e2eテスト修正-pr-5マージ","3. E2Eテスト修正 & PR #5マージ",[15,124,125],{},"PR #5のCIが失敗していたが、mainブランチでも直近3回全て失敗しており、既存の問題だった。3つの原因（セレクタ変更、オンボーディングオーバーレイ、回答記録ロジック）を1つずつ潰し、36テスト全パスに持ち込んでPR #5をマージした。",[15,127,128],{},[48,129,50],{},[52,131,132,143,146,156],{},[55,133,134,135,138,139,142],{},"トップページのセレクタ修正（",[41,136,137],{},".hero-heading","→",[41,140,141],{},".concept-heading","）",[55,144,145],{},"localStorage事前セットでオンボーディングオーバーレイを回避",[55,147,148,151,152,155],{},[41,149,150],{},"revealAnswer","→全選択方式に変更して",[41,153,154],{},"answers","配列に確実に記録",[55,157,158],{},"CI全パス→PR #5マージ完了",[15,160,161,72,163],{},[48,162,71],{},[74,164,166],{"href":165},"/e2e-test-fix-onboarding","Playwright E2Eテストが3つの原因で落ち続けていた問題を特定・修正してPR #5をマージした",[79,168],{},[33,170,172],{"id":171},"_4-インタラクティブ別表アプリの設計","4. インタラクティブ別表アプリの設計",[15,174,175],{},"仕訳のチェックボックスをON/OFFすると別表四・五(一)のSVGが連動する「触れる別表」アプリを設計した。Codex 4回のレビューで致命的な論点を1つずつ潰した。実装は次セッションに持ち越し。",[15,177,178],{},[48,179,50],{},[52,181,182,185,188],{},[55,183,184],{},"法人税の中間納付+期末決算をテストケースに設計",[55,186,187],{},"Codexレビュー4回で計画書を精緻化（繰越損益金の洗替え、中間分の両建て、税引前利益の分離、priorJigyozeiの繰越式修正）",[55,189,190],{},"計算ロジック（純粋関数）→Vueページ→サイドバー追加の実装順を確定",[15,192,193,72,195],{},[48,194,71],{},[74,196,198],{"href":197},"/interactive-beppyo-design","仕訳チェックボックスで別表四・五(一)が連動するインタラクティブアプリの設計",[79,200],{},[33,202,204],{"id":203},"_5-書籍ocr-turso-db格納","5. 書籍OCR + Turso DB格納",[15,206,207],{},"2冊の専門書をyomitoku OCRでデジタル化し、Turso DBに格納した。201ページ（図124件）と320ページ（図44件）。2セッションともTurso移行後のAPI変更に引っかかり、同じ修正を2回繰り返した。",[15,209,210],{},[48,211,50],{},[52,213,214,217,220],{},[55,215,216],{},"201ページの参考書: 124図のリネーム→DB格納",[55,218,219],{},"320ページの専門書: 44図のリネーム→DB格納",[55,221,222],{},"Turso移行後のAPIシグネチャ変更を把握（db_path不要、init_books_dbスキップ）",[15,224,225,72,227],{},[48,226,71],{},[74,228,230],{"href":229},"/yomitoku-book-ocr-turso","yomitoku OCRで専門書2冊をデジタル化してTurso DBに格納した記録",[79,232],{},[19,234,235],{"id":235},"今日の試行錯誤",[237,238,239,261],"table",{},[240,241,242],"thead",{},[243,244,245,249,252,255,258],"tr",{},[246,247,248],"th",{},"#",[246,250,251],{},"テーマ",[246,253,254],{},"試したこと",[246,256,257],{},"結果",[246,259,260],{},"気づき",[262,263,264,282,299,316,333,350,367,384,401,418],"tbody",{},[243,265,266,270,273,276,279],{},[267,268,269],"td",{},"1",[267,271,272],{},"ドラフト表示",[267,274,275],{},"Cloudflareにデプロイして確認",[267,277,278],{},"空白表示",[267,280,281],{},"process.cwd()+memo/はローカル専用。Cloudflareにmemo/は存在しない",[243,283,284,287,290,293,296],{},[267,285,286],{},"2",[267,288,289],{},"レイアウト選択",[267,291,292],{},"Miller Columnレイアウトを提案された",[267,294,295],{},"却下",[267,297,298],{},"まずはシンプルなstepsレイアウトで十分",[243,300,301,304,307,310,313],{},[267,302,303],{},"3",[267,305,306],{},"ビルドエラー",[267,308,309],{},"SVGパスの解決失敗",[267,311,312],{},"public/にコピーで解消",[267,314,315],{},"Viteはpublic/の静的ファイルをそのまま配信する",[243,317,318,321,324,327,330],{},[267,319,320],{},"4",[267,322,323],{},"ウォーターフォールv1",[267,325,326],{},"別表十四(二)の計算構造をSVG化",[267,328,329],{},"「構造が見えない」と指摘",[267,331,332],{},"テーブル形式だけではウォーターフォールにならない",[243,334,335,338,341,344,347],{},[267,336,337],{},"5",[267,339,340],{},"ウォーターフォールv3",[267,342,343],{},"別表四の仮計から矢印で接続",[267,345,346],{},"テキストはみ出し",[267,348,349],{},"縦方向に広げて計算式を明示する必要がある",[243,351,352,355,358,361,364],{},[267,353,354],{},"6",[267,356,357],{},"E2Eテスト",[267,359,360],{},"オンボーディングがクリックをブロック",[267,362,363],{},"localStorage事前セットで回避",[267,365,366],{},"テスト環境ではlocalStorageが空。前提条件のセットアップが必要",[243,368,369,372,375,378,381],{},[267,370,371],{},"7",[267,373,374],{},"回答テスト",[267,376,377],{},"revealAnswer→Nextで結果画面へ",[267,379,380],{},"answers配列が空",[267,382,383],{},"revealAnswerはanswersに追加しない。checkAnswerだけが記録する",[243,385,386,389,392,395,398],{},[267,387,388],{},"8",[267,390,391],{},"Codexレビュー1回目",[267,393,394],{},"計画書を提出",[267,396,397],{},"繰越損益金の洗替え漏れ指摘",[267,399,400],{},"全チェックOFFでも期末=期首+当期純利益",[243,402,403,406,409,412,415],{},[267,404,405],{},"9",[267,407,408],{},"Codexレビュー3回目",[267,410,411],{},"数値修正後に再提出",[267,413,414],{},"税引前利益の矛盾指摘",[267,416,417],{},"accountingPreTaxProfitとtaxableIncomeは別変数にすべき",[243,419,420,423,426,429,432],{},[267,421,422],{},"10",[267,424,425],{},"Turso API",[267,427,428],{},"init_books_db()を呼び出し",[267,430,431],{},"エラー",[267,433,434],{},"Turso移行後はテーブル既存のためスキップが必要",[79,436],{},[19,438,439],{"id":439},"今日の学び",[52,441,442,445,448,451,454],{},[55,443,444],{},"stepsレイアウトのルートパス自動切替は、1行の設定追加で新コースに対応できる汎用パターンとして使い回せる",[55,446,447],{},"Playwright E2Eテストでは、オンボーディングやオーバーレイなどの初回表示要素をlocalStorageで事前制御するのが定石",[55,449,450],{},"ウォーターフォールチャートは「何から何を引いて何が残るか」の視覚構造が命。テーブルに数字を並べただけでは構造が見えない",[55,452,453],{},"Codexレビューは「致命的な点だけ指摘して」と制約をかけると的確に刺さる。4回の反復で計算ロジックの矛盾を全て潰せた",[55,455,456],{},"「別表は正規化されていないテーブル」という視点は、RDBの正規化理論を知っている人に別表を説明するときに強力なアナロジーになる",[79,458],{},[19,460,461],{"id":461},"明日やること",[52,463,466,476],{"className":464},[465],"contains-task-list",[55,467,470,475],{"className":468},[469],"task-list-item",[471,472],"input",{"disabled":473,"type":474},true,"checkbox"," インタラクティブ別表アプリの実装（計算ロジック→Vueページ→サイドバー追加）",[55,477,479,481],{"className":478},[469],[471,480],{"disabled":473,"type":474}," デフォルメ別表SVGのドラフトへの組み込み（プレースホルダー置換済み分の品質確認）",[79,483],{},[19,485,486],{"id":486},"関連記事",[52,488,489,493,497,501,505],{},[55,490,491],{},[74,492,77],{"href":76},[55,494,495],{},[74,496,116],{"href":115},[55,498,499],{},[74,500,166],{"href":165},[55,502,503],{},[74,504,198],{"href":197},[55,506,507],{},[74,508,230],{"href":229},{"title":510,"searchDepth":511,"depth":511,"links":512},"",2,[513,514,522,523,524,525],{"id":21,"depth":511,"text":21},{"id":31,"depth":511,"text":31,"children":515},[516,518,519,520,521],{"id":35,"depth":517,"text":36},3,{"id":83,"depth":517,"text":84},{"id":121,"depth":517,"text":122},{"id":171,"depth":517,"text":172},{"id":203,"depth":517,"text":204},{"id":235,"depth":511,"text":235},{"id":439,"depth":511,"text":439},{"id":461,"depth":511,"text":461},{"id":486,"depth":511,"text":486},"diary","会計教材の別表コンテンツをVueページ11本に変換し、デフォルメSVG22枚を制作。E2Eテスト3原因を修正してPRマージ。インタラクティブ別表アプリの設計をCodex4回レビューで詰め、書籍2冊のOCR+DB格納も完了した1日","md",{},"/2026-04-22-diary","daily-log",false,"2026-04-22T00:00:00.000Z",{"title":5,"description":527},"2026-04/2026-04-22/diary-2026-04-22",[537,538,539,540,357,541,542],"日記","別表","Vue","SVG","OCR","Codex",null,"oDVKqWAmOX1HXkyS_6DL7WSw1NqetLEsVKywhdiG8KE",[],"https://log.eurekapu.com/favicon.svg",1776929993640]