やったこと
tax-assistantリポジトリにあったCF精算表ビューアをmdx-playgroundに移植して、データの品質修正とExcel出力機能を一気に仕上げた。
移植とdata.json分割
もともと1ファイル341KBだった data.json を、シート別の10ファイルに分割した。public/data/cashflow-worksheet/sheets/Q3-*.json にそれぞれ配置し、index.json は目次（問題番号・タイトル・章）だけを持つ構成に変更。ページ表示時は選択されたシートのJSONだけを読み込む。
Vue scoped CSSとSVGの罠
仕訳チェック時に精算表セルへ矢印アニメーションを出す機能で、SVG要素が動的に生成されるため Vue の scoped CSS が適用されない問題に遭遇した。scoped は data-v-xxxx 属性セレクタをコンパイル時に付与するが、JSで直接DOMに追加したSVG要素にはこの属性がない。
対処として、矢印用のスタイルを :deep() で書くか、scoped外のグローバルスタイルブロックに分離した。
全10シートのrowTotal/Balance修正
テスト (_all_sheets_check.test.ts) を回すと大量のエラーが出た。修正パターンは4種類に分類できた。
- composable定数不足 -- 新しい勘定科目が
BS_CATEGORIES/PL_ACCOUNTS/CF_CATEGORIESに登録されていない。getBSCategoryは最長一致で判定するので、登録順序ではなく文字列長が重要 - BS間非現金取引 -- 例えば
備品 / 未払金のような取引。Excel元データでは現金側にしかcf_itemがないが、ビューアでは両側に同じcf_itemを追加して相殺させる必要がある - 複合仕訳の金額不一致 -- 現金1,500 / 投資有価証券1,000 + 売却益500 のようなケース。1エントリだと
computeCfRefsが現金金額をBS勘定に誤マッピングするので、帳簿価額と差益の2エントリに分割 - PL誤分類 -- 社債発行費のようなPL費目が、
isPLAccountの判定漏れでBS扱いになりBalanceが合わない
この修正作業を繰り返すうちにワークフローが固まったので、.claude/skills/cf-worksheet-repair/SKILL.md としてスキル化した。
3カラムMiller Columnsレイアウト
UIを「論点 → セクション → コンテンツ」の3カラム構成に改修した。左カラムで問題を選び、中カラムで「前提条件」「当期の仕訳」を切り替え、右カラムに仕訳パネルと精算表を表示する。選択状態は localStorage に保存して、リロードしても維持される。
右カラム内では仕訳と精算表をモバイル時はタブ切り替え、デスクトップ時は横並びで表示する。
チェック行ロジック: crossCheckDiff
精算表の最終行にある crossCheckDiff は、ExcelのBR171セルに対応する検算値。計算式は:
crossCheckDiff = (期首残高 + 税引前利益 + CF増減) - 現金振替期末残高
これが0なら精算表全体の整合性が取れている。各CF列ごとの cfColumnDiffs と合わせて、行方向・列方向の両方からクロスチェックする仕組み。
複合仕訳のグループ表示
JSONデータに group フィールドを持つエントリを同一グループとして束ねて表示する。借方は合算、貸方は個別表示。チェックボックスのON/OFFもグループ単位で連動する。
<!-- 複合仕訳: 借方は合計、貸方は個別に表示 -->
<div class="compound-layout">
<div class="compound-debit">{{ 合計金額 }}</div>
<div v-for="entry in entryGroup" class="compound-credit-row">
{{ entry.credit.account }} {{ entry.credit.amount }}
</div>
</div>
Excelダウンロード機能
ExcelJSで4シート構成のxlsxを生成する。
| シート | 内容 |
|---|---|
| 仕訳 | 全仕訳 + CF分解ヘルパー列(対象BS科目・符号付き金額) |
| CF分解表 | 仕訳シートの各行をCF項目ごとに分解した中間テーブル |
| CF精算表 | BS科目 x CF項目のマトリクス。値は仕訳シートへのSUMIFS数式 |
| CF計算書 | 営業/投資/財務の3区分サマリー |
CF精算表シートの各セルにはSUMIFS数式を埋め込んでいるので、Excel上でデータを変更すると自動で再計算される。ハードコード値ではなく数式参照にしたのは、ユーザーが仕訳を追加・修正したときにも対応できるようにするため。
小計後項目の追加
CF計算書の営業活動CFに「小計」行を設け、その後に「法人税等の支払額」「利息の受取額」「配当金の受取額」「利息の支払額」を表示するようにした。CF_CATEGORIES に operatingPostSubtotal カテゴリを追加して対応。
振り返り
一番時間がかかったのはデータ修正。10シート分の仕訳データを1つずつ検証して、rowTotal = 0 かつ Balance OK にする作業は地道だった。スキル化したことで、今後シートを追加するときは同じワークフローで回せる。
scoped CSSとSVGの問題は、Vueの仕組みを理解していれば当然の挙動だが、実際にハマると気づくまでに時間を使う類のバグだった。