• #Vue
  • #CF精算表
  • #レイアウト
  • #リファクタリング
  • #eurekapu
eurekapu-nuxt4

CF精算表ページに年次推移表を追加、列幅をピクセル単位で揃えて財務3表を縦並びにした

別リポジトリ eurekapu-nuxt4 で /cashflow-statement/v2/statement と /v2/accounting/annual-table の年次推移表を1つのコンポーネントに統一し、CF精算表のCF計算書直下に年次推移表を差し込んで「BS精算表 → PL → CF計算書 → 年次推移表」の縦並びを成立させた。途中で何度も列幅が1〜2pxずつズレて、table-layout: fixed と列幅定数化に行き着くまで4〜5回テーブルを書き直した1日。最後に /simplify レビューを3エージェント並列で走らせ、574行を451行まで削った（-123行）。

今日やったこと

1. V2AnnualTableSection.vue を新規作成して2ページの年次推移表を統一

/v2/statement（CF精算表）と /v2/accounting/annual-table（会計データ年次推移）で、それぞれ別のテーブル実装が動いていた。同じ年次推移表なのに見た目もスタイルも揃わず、片方を直すともう片方がズレる状態。1つのコンポーネント V2AnnualTableSection.vue に寄せて、両ページから呼び出す形に整理した。

スタイルはCF精算表のグレースケール基調に合わせ、当期純利益の行だけ黄色でハイライトを入れる。当期純利益はBS・PL・CF・年次推移表のどこを見ても同じ数字に着地するため、視線の起点としてここだけ色を立てた。

2. CF計算書の直下に年次推移表を追加して財務3表を縦並びに

V2CfStatementSheet.vue のCF計算書セクションの下に V2AnnualTableSection を差し込み、1ページの中で「BS精算表 → PL → CF計算書 → 年次推移表」が縦に並ぶ構成にした。BS・PL・CFが同じスクロール上で連続するため、「PLの当期純利益」と「年次推移表の当期純利益」を目線の上下移動だけで突き合わせられる。

3. 借/貸列・期首列を削除して勘定科目・補助科目・年度列だけにした

最初は CF精算表のスタイルそのままで借/貸列と期首残高列を残していたが、ユーザーから「年次推移表に借/貸はいらない」「期首は別ページにあるから消していい」と指摘が入り、列を削った。残ったのは勘定科目・補助科目・各年度の列だけ。情報密度が下がる代わりに、年度間の数字の流れを横に追いやすくなった。

CF計算書ページでは勘定科目を畳みたい要望もあり、compact プロパティを追加した。CF精算表ページでは compact: true で補助科目を畳み、会計データページでは compact 未指定で補助科目を全表示する分岐にした。

<V2AnnualTableSection
  :data="annualData"
  :compact="true"
/>

4. 列幅をピクセル単位で揃えるまでに4回書き直した

ここから列幅合わせの泥仕合に入った。CF精算表のテーブルと年次推移表のテーブルで「項目列の幅」「年度列の幅」を完全に揃えないと、縦並びにしたとき列の境界線がガタガタになる。

最初は min-width だけで揃えていたが、ブラウザが内容に応じて1〜2pxずつ調整して、CF表と年次推移表で列境界が微妙にズレた。table-layout: auto だとセル内容で幅が変動するため、table-layout: fixed に切り替えて列幅を定数化した。

.annual-table {
  table-layout: fixed;
}

.item-col {
  min-width: 18rem;
  width: 22rem;  /* 352px に固定 */
}

.year-col {
  width: 120px;
}

item-col を min-width: 18rem; width: 22rem で352pxに固定、各 year-col を120pxで固定。これで列幅は揃ったが、今度は年度列のヘッダー文字（「2025年」など）がブラウザによって潰れる問題が発生した。year-col に明示的な width: 120px を追加して解決。

DevToolsで列の左端x座標を測ると、307→659→779→899→1019→1139 の等間隔に並び、CF表と年次推移表で1pxもズレない状態に到達した。

5. /simplify レビューを3エージェント並列で走らせて574→451行に削った

列幅合わせが終わった時点で V2AnnualTableSection.vue は574行になっていた。/simplify レビューを3エージェント並列で走らせ、採用した修正を入れた。

採用した修正:

  • PL 8グループのDRY化: PL小計を出すグループ（売上総利益、営業利益、経常利益…）が8つあり、それぞれテンプレートで個別に書いていた。グループ名・対象勘定科目リスト・小計ラベルをメタデータ配列にまとめ、v-for で展開する形に再構成
  • 不要なテンプレート削除: 開発中に残った重複テンプレートと使っていない slot を削除
  • 574行 → 451行（-123行）: メタデータ駆動への置き換えで純減

PLグループのDRY化は、後で「営業外損益のサブカテゴリを追加」みたいな変更が来たときに、メタデータ配列に1行足すだけで済むようになる。8箇所のテンプレートを書き換える作業から1行追加に変わる。

学び

  • table-layout: fixed を使う場面は「複数テーブルの列幅を揃えたいとき」: 単一テーブルなら auto で問題ないが、上下に並ぶ別テーブル同士で列境界を揃えたい場合、fixed + 明示的な width 指定がほぼ必須。min-width だけだと内容に応じてブラウザが微調整してズレる
  • 同じ表を2ページで使うなら最初から1コンポーネントに寄せる: 別ページで別実装になると、片方を直したときにもう片方を直し忘れて見た目が乖離する。compact のような分岐プロパティで吸収できる範囲なら、1コンポーネントに統一した方が後がラク
  • /simplify の並列レビューは3エージェントが目安: 1エージェントだと指摘が偏り、5エージェントだと重複が増える。3つだとカバレッジと冗長性のバランスがいい
  • 列幅をピクセルで詰めるときはDevToolsで列のx座標を測る: 「見た目で揃ってる」は1〜2pxのズレを見逃す。要素のbounding rectのxを測ると、ズレが数値で出る

明日やること

  • V2AnnualTableSection に「年度範囲指定」プロパティを足し、3年分・5年分・全期間で切り替えられるようにする
  • CF計算書ページの年次推移表で、当期純利益と同じく「最終CF残高」もハイライトを検討する
  • 会計データページ側で compact 未指定時の補助科目表示を、デフォルトで折りたたみアイコン付きにできないか試す