キャッシュフロー精算表を財務諸表講座に移植：Excel の色分けと調整ロジックに合わせ直す

動いたページに、Excel の意図が乗っていなかった

朝、財務諸表講座の PC 版ストーリーを開いて、Claude Code に計画を1つ頼んだ。 題材は、前に作ったキャッシュフロー精算表（以下、CF精算表）のページである。 Excel で組んだ精算表の考え方を、講座の流れの中へ持ち込みたかった。

最初のコミットの時点で、ページはもう動いていた。 左に取引カード、右に精算表が並び、カードにカーソルを載せると精算表の対応するマスが強調される。 ただ、Excel で作ったときにわざと仕込んでいたものが、この画面には乗っていなかった。

抜けていたものは1回では出そろわず、指摘は3回に分かれた。 色分けに込めた意味を自分の言葉で伝えたのは、その3回目である。

計画書は、調査と突き合わせ表から組んだ

まず調査用のエージェントを2つ走らせてもらい、報告がそろうのを待った。 次に、精算表の列と行の突き合わせ表を計算で確かめさせてから、計画書を書かせた。 図を1枚添え、Codex でレビューしたうえで Chrome に表示してもらった。

判断が要る項目は5つあった。 計画書のページ下部に並んだボタンで選び、回答を送信した。 回答を反映した版を Codex に再レビューさせると、結果は「致命的な指摘なし」だった。 そこで「y」とだけ返して、実装に進めた。

初版はテスト8件が通り、固定列のずれを直した

計算部分（fsCfws.ts）から書かせ、テスト8件が通った。 続けて、左の取引カード、右の精算表、2つを並べる部品、ページの順に作らせた。

途中で、右へスクロールすると固定した列がずれる不具合が出たので、直してもらった。 仕上げに、3つのマスにまたがる利息の取引を使い、1440px のエミュレーションで強調表示を確かめさせた。 コンソールのエラーとハイドレーションの不一致も見させ、ここで最初のコミット（207b537c）を打った。 デプロイはまだしていない。

1回目の指摘：営業と投資の色分け

Excel のほうでは、営業活動と投資活動の色をわざと分けている。 それに気づいてもらえたかを聞き、合わせてほしいと頼んだ。 見るべきページも、あとから貼り付けて伝えた。

Excel 版の色の定義ファイルが見つかったので、どの列にどの色を当てているかを読ませた。 Excel 版の塗り色をそのまま使って、ページの色を直してもらった（467fa4fb）。 確認は Chrome で、左端の営業と右端の投資、財務の両方を見させた。

2回目の指摘：利益剰余金の行の調整

色は合ったが、中身がまだ違った。 キャッシュフローの調整のやり方が Excel と違い、とくに利益剰余金の行は全然違うと思った。

そこで、Excel そのものと、Excel を出力するためのスクリプトのロジックを全部見るように頼んだ。 Excel 側のロジックは Codex に調査させ、その結論と Claude Code の書き直しを突き合わせてもらった。 調整を Excel と同じやり方にしたコミットが 604acdf4 である。

このとき、取引カードと表示倍率も直してもらった。 カードは借方と貸方の2行をやめ、1行目にスライダーと金額、2行目に小さく「科目／科目 → 入る列」を出す形にした。 スライダー1本で金額を動かしやすくするためである。 精算表には、表示倍率（100、90、80、70%）の切り替えを付けた。

3回目の指摘：オレンジの行と列は対応している

ここでようやく、色分けの意味を自分の言葉で伝えた。

精算表の営業活動のオレンジの行と、オレンジの列と、キャッシュフロー計算書のオレンジの行は対応している。 言い換えると、投資活動の列と投資活動の行も対応している。 だから営業の行では、キャッシュフロー計算書の投資活動と財務活動の列は使わない。 その使わない領域を、本当に薄いグレーでグレーアウトしてほしいと頼んだ。 合計値のグレーとはかぶらないように、とも付け加えた。

精算表の下半分（取引の行）で、区分の違う列のマスを薄いグレーにしてもらった。 たとえば営業の行なら、投資、財務、現金振替の列がグレーになる。 このコミット（df4fd01c）は、origin/main へのプッシュまでしてもらった。

Excel の色分けは、見た目の区別ではなく、どの行がどの列へ入るかを示す印だった。 1回目に写したのは色だけで、その対応はグレーアウトを入れてはじめて画面に出た。

指摘事項を計画書に残す

ここで、今回の実装にあたって計画書を作っていたかを確かめた。 作っていたなら、自分が指摘した事項と、あるべき調整の方法をきちんと書き残しておいてほしいと頼んだ。

計画書を更新させ、表示が崩れていないことを確かめてから、コミットとプッシュをしてもらった。 指摘した事項も、あるべき調整の方法も、これで会話の中ではなく計画書の側に残った。

Excel のダウンロードを付ける

途中で、Excel のダウンロードの話も出ていた。 使えるライブラリと既存の生成の仕組みを確かめさせてから、出力用のスクリプトと Python のビルド手順を作らせた。

検証は、実際の Excel で再計算し、すべての数式を読み戻す形でやらせた。 途中、シェルにスクリプトを直接書いて流したところで詰まったので、ファイルに書き出して実行し直してもらった。 375px ではみ出しがないことも見させ、ブックを作り直して再検証した。

ページの 0 の表示も直し、コミットとプッシュまで済ませた（22354911）。 ページ見出しの行の右端にある「Excel をダウンロード」から、新しいブックが落とせる。

マゼンタとスライダーの主張が強い

画面のスクリーンショットを貼って、気になるところを伝えた。 マゼンタの部分と、スクロールバーのような目盛りを動かす部品と、チェックボックスの主張が強い。 右側の精算表とトーンアンドマナーを合わせたかったので、まずはマゼンタを薄くすれば合うかもしれないと伝えた。 チェックボックスはそのままでいいかな、とも伝えた。

スクロールバーと呼んだ部品は、金額を動かすスライダーのことだった。 スライダーのマゼンタを1段薄い色（#F48FB1）にしてもらい、チェックボックスは今の色のまま残した。 あわせて計画書の進捗表（§7）を更新させ、コミットとプッシュをしてもらった（b6862fbe）。

翌日は確認から始める

明日続きをやりたいので、進捗を記録し、引き継ぎプロンプトをダウンロードフォルダのテキストファイルに書き出してもらった。 明日は、自分が確認するところから始める。 進捗は計画書の §7 に入っていて、プッシュも済んでいる。 引き継ぎは handoff-fs-cfws-2026-10-18.txt に書き出された。

変更のたびに走ったセキュリティレビュー

10時台から11時台にかけて、変更のたびに自動のセキュリティレビューが走った。 記録は12件あり、結論が残っている7件はいずれも「脆弱性なし」だった。 残りの5件は、依頼の行だけで結論の行が残っていない。 7件のうち6件は、差分だけを見たうえでの判定だと断っていた。 7件のうち1件は、この作業とは別のローカルのビルドスクリプトが対象だった。

学び

• Excel の色分けは、区分ごとの行と列の対応を示す印だった。色だけ写しても対応は写らず、使わないマスをグレーアウトしてはじめて画面に出た
• 調整のロジックは画面の見た目からは合わせられなかった。Excel 本体と出力スクリプトの両方を読ませて、利益剰余金の行まで Excel と同じやり方にそろえた