[{"data":1,"prerenderedAt":501},["ShallowReactive",2],{"content-/2026-04-29-cf-annual-table-column-alignment":3,"all-pages-for-dir":499,"og-image-/2026-04-29-cf-annual-table-column-alignment":500},{"id":4,"title":5,"body":6,"category":481,"description":482,"extension":483,"meta":484,"navigation":226,"path":485,"project_name":486,"published":487,"publishedAt":488,"seo":489,"stem":490,"tags":491,"todo":497,"updatedAt":497,"__hash__":498},"pages/2026-04/2026-04-29/cf-annual-table-column-alignment.md","CF精算表ページに年次推移表を追加、列幅をピクセル単位で揃えて財務3表を縦並びにした",{"type":7,"value":8,"toc":470},"minimark",[9,13,34,38,43,56,59,63,73,77,80,94,162,166,169,183,316,335,338,342,351,354,381,384,387,435,438,466],[10,11,5],"h1",{"id":12},"cf精算表ページに年次推移表を追加列幅をピクセル単位で揃えて財務3表を縦並びにした",[14,15,16,17,21,22,25,26,29,30,33],"p",{},"別リポジトリ eurekapu-nuxt4 で ",[18,19,20],"code",{},"/cashflow-statement/v2/statement"," と ",[18,23,24],{},"/v2/accounting/annual-table"," の年次推移表を1つのコンポーネントに統一し、CF精算表のCF計算書直下に年次推移表を差し込んで「BS精算表 → PL → CF計算書 → 年次推移表」の縦並びを成立させた。途中で何度も列幅が1〜2pxずつズレて、",[18,27,28],{},"table-layout: fixed"," と列幅定数化に行き着くまで4〜5回テーブルを書き直した1日。最後に ",[18,31,32],{},"/simplify"," レビューを3エージェント並列で走らせ、574行を451行まで削った（-123行）。",[35,36,37],"h2",{"id":37},"今日やったこと",[39,40,42],"h3",{"id":41},"_1-v2annualtablesectionvue-を新規作成して2ページの年次推移表を統一","1. V2AnnualTableSection.vue を新規作成して2ページの年次推移表を統一",[14,44,45,48,49,51,52,55],{},[18,46,47],{},"/v2/statement","（CF精算表）と ",[18,50,24],{},"（会計データ年次推移）で、それぞれ別のテーブル実装が動いていた。同じ年次推移表なのに見た目もスタイルも揃わず、片方を直すともう片方がズレる状態。1つのコンポーネント ",[18,53,54],{},"V2AnnualTableSection.vue"," に寄せて、両ページから呼び出す形に整理した。",[14,57,58],{},"スタイルはCF精算表のグレースケール基調に合わせ、当期純利益の行だけ黄色でハイライトを入れる。当期純利益はBS・PL・CF・年次推移表のどこを見ても同じ数字に着地するため、視線の起点としてここだけ色を立てた。",[39,60,62],{"id":61},"_2-cf計算書の直下に年次推移表を追加して財務3表を縦並びに","2. CF計算書の直下に年次推移表を追加して財務3表を縦並びに",[14,64,65,68,69,72],{},[18,66,67],{},"V2CfStatementSheet.vue"," のCF計算書セクションの下に ",[18,70,71],{},"V2AnnualTableSection"," を差し込み、1ページの中で「BS精算表 → PL → CF計算書 → 年次推移表」が縦に並ぶ構成にした。BS・PL・CFが同じスクロール上で連続するため、「PLの当期純利益」と「年次推移表の当期純利益」を目線の上下移動だけで突き合わせられる。",[39,74,76],{"id":75},"_3-借貸列期首列を削除して勘定科目補助科目年度列だけにした","3. 借/貸列・期首列を削除して勘定科目・補助科目・年度列だけにした",[14,78,79],{},"最初は CF精算表のスタイルそのままで借/貸列と期首残高列を残していたが、ユーザーから「年次推移表に借/貸はいらない」「期首は別ページにあるから消していい」と指摘が入り、列を削った。残ったのは勘定科目・補助科目・各年度の列だけ。情報密度が下がる代わりに、年度間の数字の流れを横に追いやすくなった。",[14,81,82,83,86,87,90,91,93],{},"CF計算書ページでは勘定科目を畳みたい要望もあり、",[18,84,85],{},"compact"," プロパティを追加した。CF精算表ページでは ",[18,88,89],{},"compact: true"," で補助科目を畳み、会計データページでは ",[18,92,85],{}," 未指定で補助科目を全表示する分岐にした。",[95,96,101],"pre",{"className":97,"code":98,"language":99,"meta":100,"style":100},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003CV2AnnualTableSection\n  :data=\"annualData\"\n  :compact=\"true\"\n/>\n","vue","",[18,102,103,116,139,155],{"__ignoreMap":100},[104,105,108,112],"span",{"class":106,"line":107},"line",1,[104,109,111],{"class":110},"shFtX","\u003C",[104,113,115],{"class":114},"sHkkW","V2AnnualTableSection\n",[104,117,119,122,126,129,132,136],{"class":106,"line":118},2,[104,120,121],{"class":110},"  :",[104,123,125],{"class":124},"senZ8","data",[104,127,128],{"class":110},"=",[104,130,131],{"class":110},"\"",[104,133,135],{"class":134},"s4oTP","annualData",[104,137,138],{"class":110},"\"\n",[104,140,142,144,146,148,150,153],{"class":106,"line":141},3,[104,143,121],{"class":110},[104,145,85],{"class":124},[104,147,128],{"class":110},[104,149,131],{"class":110},[104,151,152],{"class":114},"true",[104,154,138],{"class":110},[104,156,158],{"class":106,"line":157},4,[104,159,161],{"class":160},"sG7-3","/>\n",[39,163,165],{"id":164},"_4-列幅をピクセル単位で揃えるまでに4回書き直した","4. 列幅をピクセル単位で揃えるまでに4回書き直した",[14,167,168],{},"ここから列幅合わせの泥仕合に入った。CF精算表のテーブルと年次推移表のテーブルで「項目列の幅」「年度列の幅」を完全に揃えないと、縦並びにしたとき列の境界線がガタガタになる。",[14,170,171,172,175,176,179,180,182],{},"最初は ",[18,173,174],{},"min-width"," だけで揃えていたが、ブラウザが内容に応じて1〜2pxずつ調整して、CF表と年次推移表で列境界が微妙にズレた。",[18,177,178],{},"table-layout: auto"," だとセル内容で幅が変動するため、",[18,181,28],{}," に切り替えて列幅を定数化した。",[95,184,188],{"className":185,"code":186,"language":187,"meta":100,"style":100},"language-css shiki shiki-themes vitesse-light vitesse-light",".annual-table {\n  table-layout: fixed;\n}\n\n.item-col {\n  min-width: 18rem;\n  width: 22rem;  /* 352px に固定 */\n}\n\n.year-col {\n  width: 120px;\n}\n","css",[18,189,190,201,217,222,228,238,256,276,281,286,296,311],{"__ignoreMap":100},[104,191,192,195,198],{"class":106,"line":107},[104,193,194],{"class":110},".",[104,196,197],{"class":134},"annual-table",[104,199,200],{"class":110}," {\n",[104,202,203,207,210,214],{"class":106,"line":118},[104,204,206],{"class":205},"sz8Xr","  table-layout",[104,208,209],{"class":110},":",[104,211,213],{"class":212},"snbK4"," fixed",[104,215,216],{"class":110},";\n",[104,218,219],{"class":106,"line":141},[104,220,221],{"class":110},"}\n",[104,223,224],{"class":106,"line":157},[104,225,227],{"emptyLinePlaceholder":226},true,"\n",[104,229,231,233,236],{"class":106,"line":230},5,[104,232,194],{"class":110},[104,234,235],{"class":134},"item-col",[104,237,200],{"class":110},[104,239,241,244,246,250,254],{"class":106,"line":240},6,[104,242,243],{"class":205},"  min-width",[104,245,209],{"class":110},[104,247,249],{"class":248},"sM54T"," 18",[104,251,253],{"class":252},"stQ0i","rem",[104,255,216],{"class":110},[104,257,259,262,264,267,269,272],{"class":106,"line":258},7,[104,260,261],{"class":205},"  width",[104,263,209],{"class":110},[104,265,266],{"class":248}," 22",[104,268,253],{"class":252},[104,270,271],{"class":110},";",[104,273,275],{"class":274},"sxvE3","  /* 352px に固定 */\n",[104,277,279],{"class":106,"line":278},8,[104,280,221],{"class":110},[104,282,284],{"class":106,"line":283},9,[104,285,227],{"emptyLinePlaceholder":226},[104,287,289,291,294],{"class":106,"line":288},10,[104,290,194],{"class":110},[104,292,293],{"class":134},"year-col",[104,295,200],{"class":110},[104,297,299,301,303,306,309],{"class":106,"line":298},11,[104,300,261],{"class":205},[104,302,209],{"class":110},[104,304,305],{"class":248}," 120",[104,307,308],{"class":252},"px",[104,310,216],{"class":110},[104,312,314],{"class":106,"line":313},12,[104,315,221],{"class":110},[14,317,318,320,321,324,325,327,328,330,331,334],{},[18,319,235],{}," を ",[18,322,323],{},"min-width: 18rem; width: 22rem"," で352pxに固定、各 ",[18,326,293],{}," を120pxで固定。これで列幅は揃ったが、今度は年度列のヘッダー文字（「2025年」など）がブラウザによって潰れる問題が発生した。",[18,329,293],{}," に明示的な ",[18,332,333],{},"width: 120px"," を追加して解決。",[14,336,337],{},"DevToolsで列の左端x座標を測ると、307→659→779→899→1019→1139 の等間隔に並び、CF表と年次推移表で1pxもズレない状態に到達した。",[39,339,341],{"id":340},"_5-simplify-レビューを3エージェント並列で走らせて574451行に削った","5. /simplify レビューを3エージェント並列で走らせて574→451行に削った",[14,343,344,345,347,348,350],{},"列幅合わせが終わった時点で ",[18,346,54],{}," は574行になっていた。",[18,349,32],{}," レビューを3エージェント並列で走らせ、採用した修正を入れた。",[14,352,353],{},"採用した修正:",[355,356,357,369,375],"ul",{},[358,359,360,364,365,368],"li",{},[361,362,363],"strong",{},"PL 8グループのDRY化",": PL小計を出すグループ（売上総利益、営業利益、経常利益…）が8つあり、それぞれテンプレートで個別に書いていた。グループ名・対象勘定科目リスト・小計ラベルをメタデータ配列にまとめ、",[18,366,367],{},"v-for"," で展開する形に再構成",[358,370,371,374],{},[361,372,373],{},"不要なテンプレート削除",": 開発中に残った重複テンプレートと使っていない slot を削除",[358,376,377,380],{},[361,378,379],{},"574行 → 451行（-123行）",": メタデータ駆動への置き換えで純減",[14,382,383],{},"PLグループのDRY化は、後で「営業外損益のサブカテゴリを追加」みたいな変更が来たときに、メタデータ配列に1行足すだけで済むようになる。8箇所のテンプレートを書き換える作業から1行追加に変わる。",[35,385,386],{"id":386},"学び",[355,388,389,412,421,429],{},[358,390,391,396,397,400,401,404,405,408,409,411],{},[361,392,393,395],{},[18,394,28],{}," を使う場面は「複数テーブルの列幅を揃えたいとき」",": 単一テーブルなら ",[18,398,399],{},"auto"," で問題ないが、上下に並ぶ別テーブル同士で列境界を揃えたい場合、",[18,402,403],{},"fixed"," + 明示的な ",[18,406,407],{},"width"," 指定がほぼ必須。",[18,410,174],{}," だけだと内容に応じてブラウザが微調整してズレる",[358,413,414,417,418,420],{},[361,415,416],{},"同じ表を2ページで使うなら最初から1コンポーネントに寄せる",": 別ページで別実装になると、片方を直したときにもう片方を直し忘れて見た目が乖離する。",[18,419,85],{}," のような分岐プロパティで吸収できる範囲なら、1コンポーネントに統一した方が後がラク",[358,422,423,428],{},[361,424,425,427],{},[18,426,32],{}," の並列レビューは3エージェントが目安",": 1エージェントだと指摘が偏り、5エージェントだと重複が増える。3つだとカバレッジと冗長性のバランスがいい",[358,430,431,434],{},[361,432,433],{},"列幅をピクセルで詰めるときはDevToolsで列のx座標を測る",": 「見た目で揃ってる」は1〜2pxのズレを見逃す。要素のbounding rectのxを測ると、ズレが数値で出る",[35,436,437],{"id":437},"明日やること",[355,439,442,451,457],{"className":440},[441],"contains-task-list",[358,443,446,450],{"className":444},[445],"task-list-item",[447,448],"input",{"disabled":226,"type":449},"checkbox"," V2AnnualTableSection に「年度範囲指定」プロパティを足し、3年分・5年分・全期間で切り替えられるようにする",[358,452,454,456],{"className":453},[445],[447,455],{"disabled":226,"type":449}," CF計算書ページの年次推移表で、当期純利益と同じく「最終CF残高」もハイライトを検討する",[358,458,460,462,463,465],{"className":459},[445],[447,461],{"disabled":226,"type":449}," 会計データページ側で ",[18,464,85],{}," 未指定時の補助科目表示を、デフォルトで折りたたみアイコン付きにできないか試す",[467,468,469],"style",{},"html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}",{"title":100,"searchDepth":118,"depth":118,"links":471},[472,479,480],{"id":37,"depth":118,"text":37,"children":473},[474,475,476,477,478],{"id":41,"depth":141,"text":42},{"id":61,"depth":141,"text":62},{"id":75,"depth":141,"text":76},{"id":164,"depth":141,"text":165},{"id":340,"depth":141,"text":341},{"id":386,"depth":118,"text":386},{"id":437,"depth":118,"text":437},"diary","別リポジトリ eurekapu-nuxt4 で /v2/statement と /v2/accounting/annual-table の年次推移表を統一し、CF精算表のCF計算書直下に年次推移表を差し込んで財務3表の縦並びを実現した。table-layout: fixed と列幅定数化でピクセル単位の完全一致まで詰めた記録。","md",{},"/2026-04-29-cf-annual-table-column-alignment","eurekapu-nuxt4",false,"2026-04-29T00:00:00.000Z",{"title":5,"description":482},"2026-04/2026-04-29/cf-annual-table-column-alignment",[492,493,494,495,496],"Vue","CF精算表","レイアウト","リファクタリング","eurekapu",null,"w9jw5qZL15tXkCpxmHMAi_hNu6hmpjKj4zhrJ1XM7J0",[],"https://log.eurekapu.com/favicon.svg",1777533703068]