[{"data":1,"prerenderedAt":769},["ShallowReactive",2],{"content-/cf-statement-step-learning-overhaul":3,"all-pages-for-dir":767,"og-image-/cf-statement-step-learning-overhaul":768},{"id":4,"title":5,"body":6,"category":746,"description":747,"extension":748,"meta":749,"navigation":416,"path":750,"project_name":751,"published":752,"publishedAt":753,"seo":754,"stem":755,"tags":756,"todo":764,"unpublished":752,"updatedAt":765,"__hash__":766},"pages/2026-04/2026-04-21/cf-statement-step-learning-overhaul.md","CF計算書ステップ教材を5分割・正式名称統一・SVG量産で作り直した記録",{"type":7,"value":8,"toc":719},"minimark",[9,13,17,22,26,34,37,106,109,112,115,119,122,176,179,183,187,190,194,197,200,235,238,242,245,248,262,265,268,279,283,286,289,292,299,302,312,462,465,469,472,487,493,496,499,502,506,509,513,516,527,577,580,696,699,715],[10,11,5],"h1",{"id":12},"cf計算書ステップ教材を5分割正式名称統一svg量産で作り直した記録",[14,15,16],"p",{},"前日までに9ページのステップ学習コンテンツを立ち上げていたが、Ch0（基礎知識）が1ファイルに詰め込まれていた。ページを開くと延々とスクロールが続き、目次も肥大していた。今日はこの構造を解体して5ページに分け、略語の正式名称統一、SVG図の追加、ナビゲーションの共通コンポーネント化まで朝から夜まで走り切った。",[18,19,21],"h2",{"id":20},"ch0の5分割リファクタリング","Ch0の5分割リファクタリング",[23,24,25],"h3",{"id":25},"なぜ分割したか",[14,27,28,29,33],{},"Ch0は「はじめに」「3つの活動区分」「間接法のしくみ」「作成方法」「まとめ」の5トピックを1つの",[30,31,32],"code",{},"ch0.vue","に押し込んでいた。スクロール量が膨大で、読者が途中で離脱する構造になっていた。",[23,35,36],{"id":36},"分割後の構成",[38,39,40,53],"table",{},[41,42,43],"thead",{},[44,45,46,50],"tr",{},[47,48,49],"th",{},"ファイル",[47,51,52],{},"内容",[54,55,56,66,76,86,96],"tbody",{},[44,57,58,63],{},[59,60,61],"td",{},[30,62,32],{},[59,64,65],{},"はじめに",[44,67,68,73],{},[59,69,70],{},[30,71,72],{},"ch0-1.vue",[59,74,75],{},"3つの活動区分",[44,77,78,83],{},[59,79,80],{},[30,81,82],{},"ch0-2.vue",[59,84,85],{},"間接法のしくみ",[44,87,88,93],{},[59,89,90],{},[30,91,92],{},"ch0-3.vue",[59,94,95],{},"作成方法",[44,97,98,103],{},[59,99,100],{},[30,101,102],{},"ch0-summary.vue",[59,104,105],{},"まとめ",[14,107,108],{},"サイドバーのsteps配列も5エントリに書き換えた。各ページの末尾には「次へ/前へ」のナビゲーションを配置し、1ページあたりのスクロール量を画面2〜3枚分に収めた。",[23,110,111],{"id":111},"タイトル決定",[14,113,114],{},"SEO調査でGoogle検索ボリュームを確認し、「Excelで作るキャッシュ・フロー計算書」に決定した。「Excel CF計算書」「Excel キャッシュフロー」など複数の候補を比較して、検索意図との一致度が高いものを選んだ。",[18,116,118],{"id":117},"bsplcf略語を正式名称に統一","BS/PL/CF略語を正式名称に統一",[14,120,121],{},"ch0からstep7まで全ファイルを対象に、略語を正式名称に置換した。",[38,123,124,134],{},[41,125,126],{},[44,127,128,131],{},[47,129,130],{},"Before",[47,132,133],{},"After",[54,135,136,144,152,160,168],{},[44,137,138,141],{},[59,139,140],{},"BS",[59,142,143],{},"貸借対照表",[44,145,146,149],{},[59,147,148],{},"PL",[59,150,151],{},"損益計算書",[44,153,154,157],{},[59,155,156],{},"CF（書類を指す文脈）",[59,158,159],{},"キャッシュ・フロー計算書",[44,161,162,165],{},[59,163,164],{},"CF（お金の流れを指す文脈）",[59,166,167],{},"キャッシュ・フロー",[44,169,170,173],{},[59,171,172],{},"赤字",[59,174,175],{},"損失",[14,177,178],{},"CFだけは機械的な一括置換ができない。「CF計算書を作成する」のCFは書類名、「営業CFがプラス」のCFはお金の流れ。12ファイルを1つずつ開いて文脈を読みながら手で書き分けた。",[18,180,182],{"id":181},"svg図の大量作成","SVG図の大量作成",[23,184,186],{"id":185},"学習の全体像svg","学習の全体像SVG",[14,188,189],{},"Step1〜7の独立論点構造を1枚のSVGで図示した。左幹線にStep1が根元として立ち、そこからStep2〜6が独立した論点として分岐する。右幹線では各Stepの結果がStep7（CF計算書の完成）に合流する。「どのStepからでも読める」ことを読者に視覚で伝える意図で作った。",[23,191,193],{"id":192},"各stepの詳細svg","各Stepの詳細SVG",[14,195,196],{},"CF計算書のひな型から該当行だけを抜き出し、各StepのSVGに埋め込んだ。Step3なら投資活動のCF行、Step4なら財務活動のCF行、という具合に。読者が「今どの行を学んでいるか」を一目で把握できるようにした。",[14,198,199],{},"主なSVG:",[201,202,203,211,217,223,229],"ul",{},[204,205,206,210],"li",{},[207,208,209],"strong",{},"ニューアート（7638）",": 直接法vs間接法の実数値を並べた比較SVG",[204,212,213,216],{},[207,214,215],{},"Step3",": 投資CF表示、受取利息の2段階表示（発生→受取）、受取額計算のウォーターフォール",[204,218,219,222],{},[207,220,221],{},"Step4",": 財務CF表示、支払利息の2段階表示、短期借入金ロールオーバー、純額vs総額の比較",[204,224,225,228],{},[207,226,227],{},"Step5",": 固定資産の取得・減価償却・売却を投資CFとして表示",[204,230,231,234],{},[207,232,233],{},"Step6",": 法人税等・配当金のCF表示",[18,236,237],{"id":237},"会社法条文の追加",[23,239,241],{"id":240},"standardrefシステムの拡張","StandardRefシステムの拡張",[14,243,244],{},"既存のStandardRefコンポーネントは会計基準のみ対応していた。会社法の条文を参照したい場面が出てきたので、JSONデータに会社法を追加し、フロントエンドのマップも拡張した。",[14,246,247],{},"追加した条文:",[201,249,250,256],{},[204,251,252,255],{},[207,253,254],{},"会社法第34条第2項",": 出資の払込場所",[204,257,258,261],{},[207,259,260],{},"会社法第445条",": 資本金の額",[23,263,264],{"id":264},"タイトルマップの追加",[14,266,267],{},"従来のStandardRefは条文番号だけを表示していた。ラベルに基準名と条文タイトルを並べて表示するよう改善し、マウスオーバーしなくても何の条文かわかるようにした。",[14,269,270,271,274,275,278],{},"全ステップで本文中のカッコ書き参照とStandardRefの漏れを検出・補完する作業も実施。段落表示も",[30,272,273],{},"\u003Cp>","タグから",[30,276,277],{},"\u003Cbr>","方式に切り替えて、参考HTMLと同等の段落間隔を再現した。",[18,280,282],{"id":281},"stepnavコンポーネント化","StepNavコンポーネント化",[23,284,285],{"id":285},"問題",[14,287,288],{},"12ページそれぞれに「次のページへ」「前のページへ」のリンクをベタ書きしていた。ページの追加・削除のたびに全ファイルのリンクを手で修正する必要があった。",[23,290,291],{"id":291},"解決",[14,293,294,295,298],{},"共通の",[30,296,297],{},"StepNav","コンポーネントを作成し、propsでcurrentIndexを渡すだけで前後リンクを生成するようにした。デザインも黒背景ベタ塗りから白背景カード+ブルーシェブロン+ホバーエフェクトに変更。",[23,300,301],{"id":301},"flexスクロールコンテナのpadding問題",[14,303,304,305,308,309,311],{},"StepNavを配置したら、コンテンツ下部のpadding-bottomがスクロールコンテナ内で効かない現象が発生した。親要素に",[30,306,307],{},"display: flex","が指定されていたのが原因だった。flexコンテナでオーバーフローが発生すると、ブラウザがpadding-bottomをスクロール領域に含めない実装がある。",[30,310,307],{},"を削除して解決した。",[313,314,319],"pre",{"className":315,"code":316,"language":317,"meta":318,"style":318},"language-css shiki shiki-themes vitesse-light vitesse-light","/* Before: padding-bottomがスクロール末尾で無視される */\n.content-area {\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  padding-bottom: 4rem;\n}\n\n/* After: flexを外してpadding-bottomを有効にする */\n.content-area {\n  overflow-y: auto;\n  padding-bottom: 4rem;\n}\n","css","",[30,320,321,330,344,361,374,387,405,411,418,424,433,444,457],{"__ignoreMap":318},[322,323,326],"span",{"class":324,"line":325},"line",1,[322,327,329],{"class":328},"sxvE3","/* Before: padding-bottomがスクロール末尾で無視される */\n",[322,331,333,337,341],{"class":324,"line":332},2,[322,334,336],{"class":335},"shFtX",".",[322,338,340],{"class":339},"s4oTP","content-area",[322,342,343],{"class":335}," {\n",[322,345,347,351,354,358],{"class":324,"line":346},3,[322,348,350],{"class":349},"sz8Xr","  display",[322,352,353],{"class":335},":",[322,355,357],{"class":356},"snbK4"," flex",[322,359,360],{"class":335},";\n",[322,362,364,367,369,372],{"class":324,"line":363},4,[322,365,366],{"class":349},"  flex-direction",[322,368,353],{"class":335},[322,370,371],{"class":356}," column",[322,373,360],{"class":335},[322,375,377,380,382,385],{"class":324,"line":376},5,[322,378,379],{"class":349},"  overflow-y",[322,381,353],{"class":335},[322,383,384],{"class":356}," auto",[322,386,360],{"class":335},[322,388,390,393,395,399,403],{"class":324,"line":389},6,[322,391,392],{"class":349},"  padding-bottom",[322,394,353],{"class":335},[322,396,398],{"class":397},"sM54T"," 4",[322,400,402],{"class":401},"stQ0i","rem",[322,404,360],{"class":335},[322,406,408],{"class":324,"line":407},7,[322,409,410],{"class":335},"}\n",[322,412,414],{"class":324,"line":413},8,[322,415,417],{"emptyLinePlaceholder":416},true,"\n",[322,419,421],{"class":324,"line":420},9,[322,422,423],{"class":328},"/* After: flexを外してpadding-bottomを有効にする */\n",[322,425,427,429,431],{"class":324,"line":426},10,[322,428,336],{"class":335},[322,430,340],{"class":339},[322,432,343],{"class":335},[322,434,436,438,440,442],{"class":324,"line":435},11,[322,437,379],{"class":349},[322,439,353],{"class":335},[322,441,384],{"class":356},[322,443,360],{"class":335},[322,445,447,449,451,453,455],{"class":324,"line":446},12,[322,448,392],{"class":349},[322,450,353],{"class":335},[322,452,398],{"class":397},[322,454,402],{"class":401},[322,456,360],{"class":335},[322,458,460],{"class":324,"line":459},13,[322,461,410],{"class":335},[14,463,464],{},"この問題はChrome/Edgeで再現し、仕様上の挙動（CSS Overflow Module Level 3のscrollable overflow region定義）と一致する。flexレイアウトとスクロールを組み合わせる場合は注意が必要。",[18,466,468],{"id":467},"svg表示のクライアントサイドナビゲーション問題","SVG表示のクライアントサイドナビゲーション問題",[14,470,471],{},"StepNav経由でページ遷移したとき、SVG画像が表示されない問題に遭遇した。フルリロードでは表示される。",[14,473,474,475,478,479,482,483,486],{},"原因を追うと、SVGのsrcパスが",[30,476,477],{},"/&/images/","のように壊れていた。Nuxtのクライアントサイドナビゲーションが画像パスを再解決する際、パスの先頭にゴミが付いていた。",[30,480,481],{},".nuxt","キャッシュを削除して",[30,484,485],{},"pnpm dev","を再起動したら解消した。ビルドキャッシュに古いルーティング情報が残っていたのが原因だった。",[14,488,489,490,492],{},"開発中にルーティング構造を変更したら",[30,491,481],{},"を消す、という基本を再確認した。",[18,494,495],{"id":495},"直接法の実例考察",[14,497,498],{},"ニューアート（7638）の直接法→間接法変更について、有報の記載理由（「他社との比較を容易にするため」）の裏側を考察した。",[14,500,501],{},"建前は比較可能性だが、本当の理由は作成コストにある。直接法は取引ごとにキャッシュの受払を集計する必要があり、連結子会社が増えるほど作業量が膨らむ。担当者が退職したタイミングで「もう間接法でいい」となるケースは実務で珍しくない。この考察をch0の直接法セクションに反映した。",[18,503,505],{"id":504},"excelビューアのhtmlレイアウト修正","ExcelビューアのHTMLレイアウト修正",[14,507,508],{},"各Stepに埋め込んでいるExcelビューアのHTMLで、入力変数セクションのcolspanが不整合を起こしていた。テーブルの列数とcolspanの合計が一致せず、Chromeがセルを勝手にリサイズしていた。全7ステップのHTMLを開いて、colspanの数値を手作業で修正した。",[18,510,512],{"id":511},"git-lfs-push問題の解決","Git LFS push問題の解決",[14,514,515],{},"SVGや画像をpushしようとしたらLFS hookが動かず、大きなファイルがそのままpushされそうになった。",[14,517,518,519,522,523,526],{},"調べると",[30,520,521],{},"core.hooksPath","が",[30,524,525],{},"/workspace/.git/hooks","を指していた。GitHub Codespacesで開発していた時期の設定が残骸として残っていた。正しいパスに修正したらpre-push hookが復活し、LFSが自動的にファイルをトラッキングするようになった。",[313,528,532],{"className":529,"code":530,"language":531,"meta":318,"style":318},"language-bash shiki shiki-themes vitesse-light vitesse-light","# 原因: Codespacesの残骸\ngit config core.hooksPath\n# → /workspace/.git/hooks\n\n# 修正: ローカルの正しいパスに戻す\ngit config --unset core.hooksPath\n","bash",[30,533,534,539,552,557,561,566],{"__ignoreMap":318},[322,535,536],{"class":324,"line":325},[322,537,538],{"class":328},"# 原因: Codespacesの残骸\n",[322,540,541,545,549],{"class":324,"line":332},[322,542,544],{"class":543},"senZ8","git",[322,546,548],{"class":547},"sdGka"," config",[322,550,551],{"class":547}," core.hooksPath\n",[322,553,554],{"class":324,"line":346},[322,555,556],{"class":328},"# → /workspace/.git/hooks\n",[322,558,559],{"class":324,"line":363},[322,560,417],{"emptyLinePlaceholder":416},[322,562,563],{"class":324,"line":376},[322,564,565],{"class":328},"# 修正: ローカルの正しいパスに戻す\n",[322,567,568,570,572,575],{"class":324,"line":389},[322,569,544],{"class":543},[322,571,548],{"class":547},[322,573,574],{"class":356}," --unset",[322,576,551],{"class":547},[18,578,579],{"id":579},"今日の試行錯誤",[38,581,582,601],{},[41,583,584],{},[44,585,586,589,592,595,598],{},[47,587,588],{},"#",[47,590,591],{},"テーマ",[47,593,594],{},"試したこと",[47,596,597],{},"結果",[47,599,600],{},"気づき",[54,602,603,625,645,662,679],{},[44,604,605,608,611,617,622],{},[59,606,607],{},"1",[59,609,610],{},"SVGパス破損",[59,612,613,614,616],{},"クライアントサイド遷移で",[30,615,477],{},"パスが出現",[59,618,619,621],{},[30,620,481],{},"削除で解消",[59,623,624],{},"ルーティング変更後はキャッシュを疑う",[44,626,627,630,633,639,642],{},[59,628,629],{},"2",[59,631,632],{},"flex+padding",[59,634,635,638],{},[30,636,637],{},"display:flex","のスクロールコンテナでpadding-bottom無効",[59,640,641],{},"flex削除で解決",[59,643,644],{},"CSS仕様上の挙動。flex+overflow+paddingの組み合わせは罠",[44,646,647,650,653,656,659],{},[59,648,649],{},"3",[59,651,652],{},"CF略語置換",[59,654,655],{},"全ファイル一括sed",[59,657,658],{},"文脈で意味が変わる",[59,660,661],{},"書類名と金流名の使い分けは手作業が必要",[44,663,664,667,670,673,676],{},[59,665,666],{},"4",[59,668,669],{},"LFS hook",[59,671,672],{},"pushしてもhookが動かない",[59,674,675],{},"hooksPathの残骸",[59,677,678],{},"環境を変えたらgit configを確認する",[44,680,681,684,687,690,693],{},[59,682,683],{},"5",[59,685,686],{},"colspan不整合",[59,688,689],{},"Excelビューアの表示崩れ",[59,691,692],{},"全Stepで手修正",[59,694,695],{},"HTMLテーブルのcolspanは列数と合計を必ず一致させる",[18,697,698],{"id":698},"今日の学び",[201,700,701,704,707,710],{},[204,702,703],{},"Ch0の分割でページ離脱率の構造的原因を潰した。1ページの情報量は画面2〜3枚分が限界",[204,705,706],{},"CF略語の正式名称統一は、文脈依存の判断が必要で自動化が難しい。sed一発では解決しない作業こそ教材の品質を左右する",[204,708,709],{},"flexコンテナのスクロールとpaddingの組み合わせはCSS仕様レベルの罠。知っていれば30秒で直せるが、知らないと1時間ハマる",[204,711,712,714],{},[30,713,521],{},"の残骸は見えないバグの典型。環境を変えたらgit configの棚卸しをする",[716,717,718],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}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);}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}",{"title":318,"searchDepth":332,"depth":332,"links":720},[721,726,727,731,735,740,741,742,743,744,745],{"id":20,"depth":332,"text":21,"children":722},[723,724,725],{"id":25,"depth":346,"text":25},{"id":36,"depth":346,"text":36},{"id":111,"depth":346,"text":111},{"id":117,"depth":332,"text":118},{"id":181,"depth":332,"text":182,"children":728},[729,730],{"id":185,"depth":346,"text":186},{"id":192,"depth":346,"text":193},{"id":237,"depth":332,"text":237,"children":732},[733,734],{"id":240,"depth":346,"text":241},{"id":264,"depth":346,"text":264},{"id":281,"depth":332,"text":282,"children":736},[737,738,739],{"id":285,"depth":346,"text":285},{"id":291,"depth":346,"text":291},{"id":301,"depth":346,"text":301},{"id":467,"depth":332,"text":468},{"id":495,"depth":332,"text":495},{"id":504,"depth":332,"text":505},{"id":511,"depth":332,"text":512},{"id":579,"depth":332,"text":579},{"id":698,"depth":332,"text":698},"dev","Ch0の1ファイル詰め込みを5ページに分割し、BS/PL略語を正式名称に統一、StepNavコンポーネント化、会社法条文追加、SVG図の大量作成まで1日で走り切った開発ログ","md",{},"/cf-statement-step-learning-overhaul","eurekapu-nuxt4",false,"2026-04-21T00:00:00.000Z",{"title":5,"description":747},"2026-04/2026-04-21/cf-statement-step-learning-overhaul",[757,758,759,760,761,762,763],"CF計算書","教材開発","SVG","リファクタリング","Vue","会社法","SEO","memo",null,"4VHXKAuQOVSF5cSrbNVDeYLBIY0BBwMe4b9XhHeVHsA",[],"https://log.eurekapu.com/og/blog/cf-statement-step-learning-overhaul.png?v=2026-04-21T00%3A00%3A00.000Z&title=CF%E8%A8%88%E7%AE%97%E6%9B%B8%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E6%95%99%E6%9D%90%E3%82%925%E5%88%86%E5%89%B2%E3%83%BB%E6%AD%A3%E5%BC%8F%E5%90%8D%E7%A7%B0%E7%B5%B1%E4%B8%80%E3%83%BBSVG%E9%87%8F%E7%94%A3%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2&author=Kei%20Komatsu&sig=ee9ee01c1024b46e",1780786053950]