キャッシュフロー計算書ページの実装ログ

やったこと

キャッシュフロー計算書（以下CF計算書）の専用ページを新規実装した。既存のCF精算表ページとは別に、最終成果物としてのCF計算書を表示・操作するためのページ。

全体構成

6タブ構成

タブのナビゲーションはVue RouterのクエリパラメータとMiller Columnsで管理している。大カテゴリは論点ベース（「資金調達はどうなっているか」）で、中カテゴリがシート単位。

Piniaストア設計

cfStatementStore で以下を一元管理する。

• ローンデータ（金融機関、金利、残高、返済条件）
• 投資データ（固定資産の取得・売却・減価償却）
• BS期首残高
• 対象期間

// cfStatementStore の getter イメージ
const cfStatement = computed(() =>
  buildCfStatement(loans.value, investments.value, bsOpeningBalances.value, period.value)
)

ストアはデータの保持と期間フィルタリングだけを担当し、CF計算書の構築ロジックはストアの外に出した。

cf-builder.ts -- 純粋関数によるCF構築

CF計算書の各セクション（営業/投資/財務）の金額算出は cf-builder.ts に純粋関数として切り出した。

// B/S科目の増減からCF項目を導出
const buildOperatingCf = (bsChanges: BsChanges, plData: PlData): CfSection => { ... }
const buildInvestingCf = (investments: Investment[]): CfSection => { ... }
const buildFinancingCf = (loans: Loan[], period: Period): CfSection => { ... }

引数で全ての依存を受け取り、副作用なしで結果を返す。テストも書きやすい。

財務シート

金融機関別のサマリーテーブルと、ローン個別の返済予定表を表示する。

• サマリー: 金融機関ごとに借入残高、当期返済額、期末残高を集計
• 返済予定表: 月次の元本/利息/残高を一覧表示。対象期間の行をハイライト

投資シート

固定資産の期首残高、当期取得、減価償却費、期末残高をテーブルで表示。取得・売却がある場合はCF計算書の投資活動セクションに自動反映される。

シート間ドリルダウン

金額セルをクリックすると関連シートへ遷移する仕組みを入れた。

• CF計算書の「借入金の返済」→ 財務シートの該当ローン
• CF精算表の仕訳 → 元帳の該当行
• 財務サマリーの金融機関行 → 返済予定表

Vue Routerのクエリパラメータで遷移先のタブとフォーカス位置を指定している。

// ドリルダウンの例
const drillDown = (target: string, id: string) => {
  router.push({ query: { tab: target, focus: id } })
}

ローンシミュレーターとの連携

別ページのローンシミュレーターで条件を変更した結果を、「CF計算書に同期」ボタンでcfStatementStoreに反映できるようにした。シミュレーターの出力をストアのloanデータ形式に変換して注入する。

Codexレビュー

実装後、Codex（GPT-5.3）にコードレビューを依頼。指摘を受けて計画をv2に更新した。主な指摘は以下。

• ストアの責務が大きくなりすぎる懸念 → getter の分割を検討
• ドリルダウンのクエリパラメータ設計 → 型安全なヘルパー関数の追加
• cf-builder の関数シグネチャ → 入力型の整理

振り返り

• 純粋関数でCFロジックを組んだのは正解。ストアの変更に引きずられずにテストできる
• Miller Columnsによるタブ管理はこの規模だとちょうどいい。タブが増えてもフラットに並べるより見通しがいい
• ドリルダウンはユーザー体験として良いが、遷移先の表示状態（スクロール位置、ハイライト）の管理が地味に面倒
• Codexレビューは計画段階で入れると効果的。実装後だと手戻りが大きい