[{"data":1,"prerenderedAt":639},["ShallowReactive",2],{"content-/cf-step-learning-pages":3,"all-pages-for-dir":637,"og-image-/cf-step-learning-pages":638},{"id":4,"title":5,"body":6,"category":618,"description":619,"extension":620,"meta":621,"navigation":622,"path":623,"project_name":624,"published":625,"publishedAt":626,"seo":627,"stem":628,"tags":629,"todo":635,"unpublished":625,"updatedAt":635,"__hash__":636},"pages/2026-04/2026-04-20/cf-step-learning-pages.md","CF精算表ステップ学習ページの構築 - Codexレビューで致命的問題を2つ潰した記録",{"type":7,"value":8,"toc":603},"minimark",[9,14,18,23,26,30,33,38,46,52,59,63,70,75,78,82,85,350,363,366,369,461,465,468,471,474,490,493,497,500,514,517,521,524,563,570,573,587,590,599],[10,11,13],"h1",{"id":12},"cf精算表ステップ学習ページの構築","CF精算表ステップ学習ページの構築",[15,16,17],"p",{},"CF計算書の参考書をベースに、精算表の作り方をステップごとに学べるページ群を作った。最初の設計が2箇所で破綻していたのをCodexレビューが拾い、プランを書き直してから実装に入った1日。",[19,20,22],"h2",{"id":21},"方針決定-ドラフトmdを経由しない","方針決定: ドラフトMDを経由しない",[15,24,25],{},"当初は「memo/にドラフトMDを書く→レビュー→content/に清書」の流れを想定していた。しかしCF精算表ページはインタラクティブ要素（Excel HTMLの拡大表示、3カラムレイアウト、目次スクロール追従）を多用する。MDXの表現力では足りないと判断し、最初からVueコンポーネントとして直接構築する方針に切り替えた。",[19,27,29],{"id":28},"codexレビューが致命的問題を2つ検出した","Codexレビューが致命的問題を2つ検出した",[15,31,32],{},"プランを書き終えた段階でCodexにレビューを投げたところ、即座に2点を突き返された。",[34,35,37],"h3",{"id":36},"問題1-memo配下はcloudflare-pagesで配信されない","問題1: memo/配下はCloudflare Pagesで配信されない",[15,39,40,41,45],{},"当初プランではExcelのHTML出力を ",[42,43,44],"code",{},"memo/excel-html/"," に置く設計だった。Codexの指摘:",[47,48,49],"blockquote",{},[15,50,51],{},"memo/ はgitignore対象外だがCloudflare Pagesの公開ディレクトリ（public/）に含まれない。本番でアクセスすると404になる。",[15,53,54,55,58],{},"修正: ",[42,56,57],{},"public/excel-html/"," に移動し、ビルド時に静的ファイルとして配信されるようにした。",[34,60,62],{"id":61},"問題2-v-htmlでグローバルcss汚染が起きる","問題2: v-htmlでグローバルCSS汚染が起きる",[15,64,65,66,69],{},"ExcelのHTML出力をそのまま ",[42,67,68],{},"v-html"," で描画すると、Excel由来のCSSセレクタがページ全体に漏れる。Codexの指摘:",[47,71,72],{},[15,73,74],{},"Excelが吐くHTMLにはtd, th, body等の要素セレクタが含まれる。v-htmlで挿入するとscoped CSSの外側からグローバルに汚染する。",[15,76,77],{},"修正: ExcelHtmlViewerコンポーネントを作り、Shadow DOM的にスタイルを隔離する方針に変更した。",[19,79,81],{"id":80},"excelhtmlviewerコンポーネント","ExcelHtmlViewerコンポーネント",[15,83,84],{},"Codexの指摘を受けて設計したコンポーネント。核心部分:",[86,87,92],"pre",{"className":88,"code":89,"language":90,"meta":91,"style":91},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Ctemplate>\n  \u003Cdiv class=\"excel-viewer\" @click=\"openModal\">\n    \u003Ciframe :srcdoc=\"htmlContent\" sandbox=\"\" class=\"preview\" />\n  \u003C/div>\n  \u003CTeleport to=\"body\">\n    \u003Cdiv v-if=\"isOpen\" class=\"modal-overlay\" @click=\"close\" @keydown.esc=\"close\">\n      \u003Ciframe :srcdoc=\"htmlContent\" sandbox=\"\" class=\"fullscreen\" />\n    \u003C/div>\n  \u003C/Teleport>\n\u003C/template>\n","vue","",[42,93,94,110,150,196,206,228,282,321,331,340],{"__ignoreMap":91},[95,96,99,103,107],"span",{"class":97,"line":98},"line",1,[95,100,102],{"class":101},"shFtX","\u003C",[95,104,106],{"class":105},"sHkkW","template",[95,108,109],{"class":101},">\n",[95,111,113,116,119,123,126,130,134,136,139,141,143,146,148],{"class":97,"line":112},2,[95,114,115],{"class":101},"  \u003C",[95,117,118],{"class":105},"div",[95,120,122],{"class":121},"s4oTP"," class",[95,124,125],{"class":101},"=",[95,127,129],{"class":128},"sMJiu","\"",[95,131,133],{"class":132},"sdGka","excel-viewer",[95,135,129],{"class":128},[95,137,138],{"class":121}," @click",[95,140,125],{"class":101},[95,142,129],{"class":128},[95,144,145],{"class":132},"openModal",[95,147,129],{"class":128},[95,149,109],{"class":101},[95,151,153,156,159,162,164,166,169,171,174,176,179,181,183,185,188,190,194],{"class":97,"line":152},3,[95,154,155],{"class":101},"    \u003C",[95,157,158],{"class":105},"iframe",[95,160,161],{"class":121}," :srcdoc",[95,163,125],{"class":101},[95,165,129],{"class":128},[95,167,168],{"class":132},"htmlContent",[95,170,129],{"class":128},[95,172,173],{"class":121}," sandbox",[95,175,125],{"class":101},[95,177,178],{"class":128},"\"\"",[95,180,122],{"class":121},[95,182,125],{"class":101},[95,184,129],{"class":128},[95,186,187],{"class":132},"preview",[95,189,129],{"class":128},[95,191,193],{"class":192},"s5V_Q"," /",[95,195,109],{"class":101},[95,197,199,202,204],{"class":97,"line":198},4,[95,200,201],{"class":101},"  \u003C/",[95,203,118],{"class":105},[95,205,109],{"class":101},[95,207,209,211,214,217,219,221,224,226],{"class":97,"line":208},5,[95,210,115],{"class":101},[95,212,213],{"class":105},"Teleport",[95,215,216],{"class":121}," to",[95,218,125],{"class":101},[95,220,129],{"class":128},[95,222,223],{"class":132},"body",[95,225,129],{"class":128},[95,227,109],{"class":101},[95,229,231,233,235,238,240,242,245,247,249,251,253,256,258,260,262,264,267,269,272,274,276,278,280],{"class":97,"line":230},6,[95,232,155],{"class":101},[95,234,118],{"class":105},[95,236,237],{"class":121}," v-if",[95,239,125],{"class":101},[95,241,129],{"class":128},[95,243,244],{"class":132},"isOpen",[95,246,129],{"class":128},[95,248,122],{"class":121},[95,250,125],{"class":101},[95,252,129],{"class":128},[95,254,255],{"class":132},"modal-overlay",[95,257,129],{"class":128},[95,259,138],{"class":121},[95,261,125],{"class":101},[95,263,129],{"class":128},[95,265,266],{"class":132},"close",[95,268,129],{"class":128},[95,270,271],{"class":121}," @keydown.esc",[95,273,125],{"class":101},[95,275,129],{"class":128},[95,277,266],{"class":132},[95,279,129],{"class":128},[95,281,109],{"class":101},[95,283,285,288,290,292,294,296,298,300,302,304,306,308,310,312,315,317,319],{"class":97,"line":284},7,[95,286,287],{"class":101},"      \u003C",[95,289,158],{"class":105},[95,291,161],{"class":121},[95,293,125],{"class":101},[95,295,129],{"class":128},[95,297,168],{"class":132},[95,299,129],{"class":128},[95,301,173],{"class":121},[95,303,125],{"class":101},[95,305,178],{"class":128},[95,307,122],{"class":121},[95,309,125],{"class":101},[95,311,129],{"class":128},[95,313,314],{"class":132},"fullscreen",[95,316,129],{"class":128},[95,318,193],{"class":192},[95,320,109],{"class":101},[95,322,324,327,329],{"class":97,"line":323},8,[95,325,326],{"class":101},"    \u003C/",[95,328,118],{"class":105},[95,330,109],{"class":101},[95,332,334,336,338],{"class":97,"line":333},9,[95,335,201],{"class":101},[95,337,213],{"class":105},[95,339,109],{"class":101},[95,341,343,346,348],{"class":97,"line":342},10,[95,344,345],{"class":101},"\u003C/",[95,347,106],{"class":105},[95,349,109],{"class":101},[15,351,352,354,355,358,359,362],{},[42,353,158],{}," + ",[42,356,357],{},"srcdoc"," でExcel由来のCSSを完全に隔離した。クリックでモーダル拡大、Escキーで閉じる。",[42,360,361],{},"sandbox","属性でスクリプト実行も防いでいる。",[19,364,365],{"id":365},"全9ページの構成",[15,367,368],{},"index（概要）+ ch0（前提知識）+ step1〜7の計9ページを作成した。",[370,371,372,385],"table",{},[373,374,375],"thead",{},[376,377,378,382],"tr",{},[379,380,381],"th",{},"ページ",[379,383,384],{},"内容",[386,387,388,397,405,413,421,429,437,445,453],"tbody",{},[376,389,390,394],{},[391,392,393],"td",{},"index",[391,395,396],{},"学習ロードマップと全体像",[376,398,399,402],{},[391,400,401],{},"ch0",[391,403,404],{},"CF計算書の基礎知識（直接法・間接法）",[376,406,407,410],{},[391,408,409],{},"step1",[391,411,412],{},"営業CFの税引前利益からスタート",[376,414,415,418],{},[391,416,417],{},"step2",[391,419,420],{},"減価償却費の加算調整",[376,422,423,426],{},[391,424,425],{},"step3",[391,427,428],{},"運転資本の増減",[376,430,431,434],{},[391,432,433],{},"step4",[391,435,436],{},"投資CFの固定資産取得・売却",[376,438,439,442],{},[391,440,441],{},"step5",[391,443,444],{},"財務CFの借入・返済",[376,446,447,450],{},[391,448,449],{},"step6",[391,451,452],{},"現金同等物の増減額",[376,454,455,458],{},[391,456,457],{},"step7",[391,459,460],{},"全体の検算とバランス確認",[19,462,464],{"id":463},"_3カラムレイアウト","3カラムレイアウト",[15,466,467],{},"左カラムにステップ一覧（現在地をハイライト）、中央にコンテンツ本体、右カラムに目次がスクロールに追従する。IntersectionObserver APIで見出しの通過を検知し、目次のアクティブ項目を切り替えている。",[19,469,470],{"id":470},"ドラフトビューアーの実装",[15,472,473],{},"Vueページ化の前段階として、memo/に置いたMarkdownドラフトをブラウザで確認するビューアーも作った。",[475,476,477,484,487],"ul",{},[478,479,480,483],"li",{},[42,481,482],{},"marked.js","でクライアントサイドレンダリング",[478,485,486],{},"note.com風の余白とフォントサイズ（本文16px、行間1.8）",[478,488,489],{},"画像クリックでライトボックス展開",[15,491,492],{},"このビューアーは開発時のプレビュー用で、本番には含めない。",[19,494,496],{"id":495},"書籍キーワードddの結果","書籍キーワードDDの結果",[15,498,499],{},"CF計算書の参考書に登場するキーワードをTursoDB上の用語マスタと突合した。結果:",[475,501,502,505,508],{},[478,503,504],{},"全キーワード数: 142",[478,506,507],{},"マスタに存在: 74",[478,509,510],{},[511,512,513],"strong",{},"カバー率: 52%",[15,515,516],{},"残り48%のうち、CF精算表特有の用語（「小計」「利息及び配当金の受取額」等）が大半を占めた。これらをマスタに追加する作業は別チケットとして積み残した。全ドラフトのレビュー文書を作成し、各ステップで参照すべき基準条文を洗い出した。",[19,518,520],{"id":519},"standardrefvueコンポーネント","StandardRef.vueコンポーネント",[15,522,523],{},"レビュー文書の作成中に「基準条文をその場で読みたい」という要求が出たため、StandardRef.vueを新規作成した。",[86,525,527],{"className":88,"code":526,"language":90,"meta":91,"style":91},"\u003CStandardRef code=\"IAS7\" paragraph=\"18\" />\n",[42,528,529],{"__ignoreMap":91},[95,530,531,533,536,539,541,543,546,548,551,553,555,558,560],{"class":97,"line":98},[95,532,102],{"class":101},[95,534,535],{"class":105},"StandardRef",[95,537,538],{"class":121}," code",[95,540,125],{"class":101},[95,542,129],{"class":128},[95,544,545],{"class":132},"IAS7",[95,547,129],{"class":128},[95,549,550],{"class":121}," paragraph",[95,552,125],{"class":101},[95,554,129],{"class":128},[95,556,557],{"class":132},"18",[95,559,129],{"class":128},[95,561,562],{"class":101}," />\n",[15,564,565,566,569],{},"クリックすると条文テキストがインラインで展開される。TursoDBから条文データを取得し、",[42,567,568],{},"\u003Cdetails>","要素で折りたたむ。ページ遷移せずにコンテキストを保ったまま条文を確認できる。",[19,571,572],{"id":572},"今日の学び",[475,574,575,578,584],{},[478,576,577],{},"プランをCodexに投げる習慣が根付いてきた。今回は2つとも「実装してからでは手戻りが大きい」タイプの問題で、事前に潰せたのは大きい",[478,579,580,583],{},[42,581,582],{},"iframe srcdoc","はCSS隔離の手段として手軽に動く。Shadow DOMより記述量が少なく、Excel HTMLのように「外部が生成した汚いHTML」を封じ込めるには十分",[478,585,586],{},"カバー率52%という数字は低く見えるが、CF精算表はニッチな領域で汎用用語マスタとの乖離は想定内。足りない用語を追加すれば70%台に届く見込み",[19,588,589],{"id":589},"関連記事",[475,591,592],{},[478,593,594],{},[595,596,598],"a",{"href":597},"/cf-worksheet-repair","CF精算表シートデータの検証・修正",[600,601,602],"style",{},"html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .s5V_Q, html code.shiki .s5V_Q{--shiki-default:#999999;--shiki-default-font-style:italic;--shiki-dark:#999999;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":91,"searchDepth":112,"depth":112,"links":604},[605,606,610,611,612,613,614,615,616,617],{"id":21,"depth":112,"text":22},{"id":28,"depth":112,"text":29,"children":607},[608,609],{"id":36,"depth":152,"text":37},{"id":61,"depth":152,"text":62},{"id":80,"depth":112,"text":81},{"id":365,"depth":112,"text":365},{"id":463,"depth":112,"text":464},{"id":470,"depth":112,"text":470},{"id":495,"depth":112,"text":496},{"id":519,"depth":112,"text":520},{"id":572,"depth":112,"text":572},{"id":589,"depth":112,"text":589},"dev","CF精算表の学習コンテンツをVueページとして構築。Codexレビューで配信不可パスとCSS汚染を検出し、設計を修正した過程を記録","md",{},true,"/cf-step-learning-pages","eurekapu-nuxt4",false,"2026-04-20T00:00:00.000Z",{"title":5,"description":619},"2026-04/2026-04-20/cf-step-learning-pages",[630,631,632,633,634],"CF精算表","Vue","Codex","ステップ学習","ExcelHtmlViewer",null,"nXOQXuELoauC5cngSzi6n5hKyQQuRr4kp5LpU1awHbU",[],"https://log.eurekapu.com/og/blog/cf-step-learning-pages.png?v=2026-04-20T00%3A00%3A00.000Z&title=CF%E7%B2%BE%E7%AE%97%E8%A1%A8%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E5%AD%A6%E7%BF%92%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E6%A7%8B%E7%AF%89%20-%20Codex%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A7%E8%87%B4%E5%91%BD%E7%9A%84%E5%95%8F%E9%A1%8C%E3%82%922%E3%81%A4%E6%BD%B0%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=2618e8d9b8787c49",1780786053442]