CF計算書ステップ教材を5分割・正式名称統一・SVG量産で作り直した記録

前日までに9ページのステップ学習コンテンツを立ち上げていたが、Ch0（基礎知識）が1ファイルに詰め込まれていた。ページを開くと延々とスクロールが続き、目次も肥大していた。今日はこの構造を解体して5ページに分け、略語の正式名称統一、SVG図の追加、ナビゲーションの共通コンポーネント化まで朝から夜まで走り切った。

Ch0の5分割リファクタリング

なぜ分割したか

Ch0は「はじめに」「3つの活動区分」「間接法のしくみ」「作成方法」「まとめ」の5トピックを1つのch0.vueに押し込んでいた。スクロール量が膨大で、読者が途中で離脱する構造になっていた。

分割後の構成

ファイル	内容
`ch0.vue`	はじめに
`ch0-1.vue`	3つの活動区分
`ch0-2.vue`	間接法のしくみ
`ch0-3.vue`	作成方法
`ch0-summary.vue`	まとめ

サイドバーのsteps配列も5エントリに書き換えた。各ページの末尾には「次へ/前へ」のナビゲーションを配置し、1ページあたりのスクロール量を画面2〜3枚分に収めた。

タイトル決定

SEO調査でGoogle検索ボリュームを確認し、「Excelで作るキャッシュ・フロー計算書」に決定した。「Excel CF計算書」「Excel キャッシュフロー」など複数の候補を比較して、検索意図との一致度が高いものを選んだ。

BS/PL/CF略語を正式名称に統一

ch0からstep7まで全ファイルを対象に、略語を正式名称に置換した。

Before	After
BS	貸借対照表
PL	損益計算書
CF（書類を指す文脈）	キャッシュ・フロー計算書
CF（お金の流れを指す文脈）	キャッシュ・フロー
赤字	損失

CFだけは機械的な一括置換ができない。「CF計算書を作成する」のCFは書類名、「営業CFがプラス」のCFはお金の流れ。12ファイルを1つずつ開いて文脈を読みながら手で書き分けた。

SVG図の大量作成

学習の全体像SVG

Step1〜7の独立論点構造を1枚のSVGで図示した。左幹線にStep1が根元として立ち、そこからStep2〜6が独立した論点として分岐する。右幹線では各Stepの結果がStep7（CF計算書の完成）に合流する。「どのStepからでも読める」ことを読者に視覚で伝える意図で作った。

各Stepの詳細SVG

CF計算書のひな型から該当行だけを抜き出し、各StepのSVGに埋め込んだ。Step3なら投資活動のCF行、Step4なら財務活動のCF行、という具合に。読者が「今どの行を学んでいるか」を一目で把握できるようにした。

主なSVG:

ニューアート（7638）: 直接法vs間接法の実数値を並べた比較SVG
Step3: 投資CF表示、受取利息の2段階表示（発生→受取）、受取額計算のウォーターフォール
Step4: 財務CF表示、支払利息の2段階表示、短期借入金ロールオーバー、純額vs総額の比較
Step5: 固定資産の取得・減価償却・売却を投資CFとして表示
Step6: 法人税等・配当金のCF表示

会社法条文の追加

StandardRefシステムの拡張

既存のStandardRefコンポーネントは会計基準のみ対応していた。会社法の条文を参照したい場面が出てきたので、JSONデータに会社法を追加し、フロントエンドのマップも拡張した。

追加した条文:

会社法第34条第2項: 出資の払込場所
会社法第445条: 資本金の額

タイトルマップの追加

従来のStandardRefは条文番号だけを表示していた。ラベルに基準名と条文タイトルを並べて表示するよう改善し、マウスオーバーしなくても何の条文かわかるようにした。

全ステップで本文中のカッコ書き参照とStandardRefの漏れを検出・補完する作業も実施。段落表示も<p>タグから<br>方式に切り替えて、参考HTMLと同等の段落間隔を再現した。

StepNavコンポーネント化

問題

12ページそれぞれに「次のページへ」「前のページへ」のリンクをベタ書きしていた。ページの追加・削除のたびに全ファイルのリンクを手で修正する必要があった。

解決

共通のStepNavコンポーネントを作成し、propsでcurrentIndexを渡すだけで前後リンクを生成するようにした。デザインも黒背景ベタ塗りから白背景カード+ブルーシェブロン+ホバーエフェクトに変更。

flexスクロールコンテナのpadding問題

StepNavを配置したら、コンテンツ下部のpadding-bottomがスクロールコンテナ内で効かない現象が発生した。親要素にdisplay: flexが指定されていたのが原因だった。flexコンテナでオーバーフローが発生すると、ブラウザがpadding-bottomをスクロール領域に含めない実装がある。display: flexを削除して解決した。

/* Before: padding-bottomがスクロール末尾で無視される */
.content-area {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 4rem;
}

/* After: flexを外してpadding-bottomを有効にする */
.content-area {
  overflow-y: auto;
  padding-bottom: 4rem;
}

この問題はChrome/Edgeで再現し、仕様上の挙動（CSS Overflow Module Level 3のscrollable overflow region定義）と一致する。flexレイアウトとスクロールを組み合わせる場合は注意が必要。

SVG表示のクライアントサイドナビゲーション問題

StepNav経由でページ遷移したとき、SVG画像が表示されない問題に遭遇した。フルリロードでは表示される。

原因を追うと、SVGのsrcパスが/&/images/のように壊れていた。Nuxtのクライアントサイドナビゲーションが画像パスを再解決する際、パスの先頭にゴミが付いていた。.nuxtキャッシュを削除してpnpm devを再起動したら解消した。ビルドキャッシュに古いルーティング情報が残っていたのが原因だった。

開発中にルーティング構造を変更したら.nuxtを消す、という基本を再確認した。

# 原因: Codespacesの残骸
git config core.hooksPath
# → /workspace/.git/hooks

# 修正: ローカルの正しいパスに戻す
git config --unset core.hooksPath

今日の試行錯誤

#	テーマ	試したこと	結果	気づき
1	SVGパス破損	クライアントサイド遷移で`/&/images/`パスが出現	`.nuxt`削除で解消	ルーティング変更後はキャッシュを疑う
2	flex+padding	`display:flex`のスクロールコンテナでpadding-bottom無効	flex削除で解決	CSS仕様上の挙動。flex+overflow+paddingの組み合わせは罠
3	CF略語置換	全ファイル一括sed	文脈で意味が変わる	書類名と金流名の使い分けは手作業が必要
4	LFS hook	pushしてもhookが動かない	hooksPathの残骸	環境を変えたらgit configを確認する
5	colspan不整合	Excelビューアの表示崩れ	全Stepで手修正	HTMLテーブルのcolspanは列数と合計を必ず一致させる

今日の学び

Ch0の分割でページ離脱率の構造的原因を潰した。1ページの情報量は画面2〜3枚分が限界
CF略語の正式名称統一は、文脈依存の判断が必要で自動化が難しい。sed一発では解決しない作業こそ教材の品質を左右する
flexコンテナのスクロールとpaddingの組み合わせはCSS仕様レベルの罠。知っていれば30秒で直せるが、知らないと1時間ハマる
core.hooksPathの残骸は見えないバグの典型。環境を変えたらgit configの棚卸しをする