[{"data":1,"prerenderedAt":1274},["ShallowReactive",2],{"content-/interest-bearing-debt-cross-section-challenge":3,"all-pages-for-dir":1252,"related-/interest-bearing-debt-cross-section-challenge":1253,"og-image-/interest-bearing-debt-cross-section-challenge":1273},{"id":4,"title":5,"body":6,"category":1236,"concepts":1236,"description":1237,"extension":1238,"meta":1239,"navigation":223,"ogImage":1236,"path":1240,"project_name":1236,"published":1241,"publishedAt":1242,"seo":1243,"source":1236,"stem":1244,"tags":1245,"todo":1236,"unpublished":1241,"updatedAt":1242,"__hash__":1251},"pages/2025-12/2025-12-19/interest-bearing-debt-cross-section-challenge.md","有利子負債の領域横断表示：技術的課題と代替案",{"type":7,"value":8,"toc":1209},"minimark",[9,13,18,27,38,46,53,57,62,68,72,324,328,334,358,362,365,371,375,395,399,403,409,415,421,529,534,542,547,558,562,571,691,695,703,707,718,722,727,796,800,808,812,823,827,832,838,842,853,857,865,869,874,975,979,986,990,998,1002,1006,1012,1016,1022,1025,1062,1066,1073,1079,1097,1101,1146,1150,1154,1159,1173,1177,1184,1187,1198,1205],[10,11,5],"h1",{"id":12},"有利子負債の領域横断表示技術的課題と代替案",[14,15,17],"h2",{"id":16},"_1-やりたかったこと","1. やりたかったこと",[19,20,21,22,26],"p",{},"貸借対照表の可視化において、",[23,24,25],"strong",{},"有利子負債","（短期借入債務＋長期借入債務）を以下のように表示したい：",[28,29,34],"pre",{"className":30,"code":32,"language":33},[31],"language-text","┌─────────────────┐\n│    流動負債      │\n│  ┌───────────┐  │\n│  │ 買掛金     │  │\n│  │ 前受収益   │  │\n│  │ その他     │  │\n│  ├───────────┤  │◄─┐\n│  │ 短期借入金  │  │  │\n│  │ 短期リース  │  │  │ 有利子負債\n├─────────────────┤  │ （ラベルで括る）\n│    固定負債      │  │\n│  ├───────────┤  │  │\n│  │ 長期借入金  │  │  │\n│  │ 長期リース  │  │◄─┘\n│  ├───────────┤  │\n│  │ その他固定  │  │\n│  └───────────┘  │\n└─────────────────┘\n","text",[35,36,32],"code",{"__ignoreMap":37},"",[19,39,40,41],{},"この画像だとあの配置が逆になってますけどそういうことです\n",[42,43],"img",{"alt":44,"src":45},"alt text","/2025-12/2025-12-19/image.png",[19,47,48,49,52],{},"つまり、短期借入債務と長期借入債務を",[23,50,51],{},"流動負債セクションと固定負債セクションを跨いで","視覚的にグルーピングしたい。",[14,54,56],{"id":55},"_2-現在のレイアウト構造","2. 現在のレイアウト構造",[58,59,61],"h3",{"id":60},"_21-flexboxベースの構造","2.1 Flexboxベースの構造",[28,63,66],{"className":64,"code":65,"language":33},[31],"┌─────────────────────────────────────────────────┐\n│                    BS全体                        │\n│  ┌──────────────────┐  ┌──────────────────────┐ │\n│  │      資産        │  │        負債          │ │\n│  │  ┌────────────┐  │  │  ┌────────────────┐  │ │\n│  │  │  流動資産   │  │  │  │    流動負債     │  │ │\n│  │  │  (column)  │  │  │  │    (column)    │  │ │\n│  │  └────────────┘  │  │  └────────────────┘  │ │\n│  │  ┌────────────┐  │  │  ┌────────────────┐  │ │\n│  │  │  固定資産   │  │  │  │    固定負債     │  │ │\n│  │  │  (column)  │  │  │  │    (column)    │  │ │\n│  │  └────────────┘  │  │  └────────────────┘  │ │\n│  │                  │  │  ┌────────────────┐  │ │\n│  │                  │  │  │    純資産       │  │ │\n│  │                  │  │  └────────────────┘  │ │\n│  └──────────────────┘  └──────────────────────┘ │\n└─────────────────────────────────────────────────┘\n",[35,67,65],{"__ignoreMap":37},[58,69,71],{"id":70},"_22-コード構造簡略化","2.2 コード構造（簡略化）",[28,73,77],{"className":74,"code":75,"language":76,"meta":37,"style":37},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Ctemplate>\n  \u003C!-- 負債側 -->\n  \u003Cdiv class=\"liabilities-column\">\n    \u003C!-- 流動負債 -->\n    \u003Cdiv class=\"current-liabilities\">\n      \u003Cdiv v-for=\"item in currentLiabilities\" :key=\"item.label\">\n        {{ item.label }}\n      \u003C/div>\n    \u003C/div>\n\n    \u003C!-- 固定負債 -->\n    \u003Cdiv class=\"fixed-liabilities\">\n      \u003Cdiv v-for=\"item in fixedLiabilities\" :key=\"item.label\">\n        {{ item.label }}\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n","vue",[35,78,79,95,102,130,136,157,191,198,208,218,225,231,251,281,286,295,304,314],{"__ignoreMap":37},[80,81,84,88,92],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"shFtX","\u003C",[80,89,91],{"class":90},"sHkkW","template",[80,93,94],{"class":86},">\n",[80,96,98],{"class":82,"line":97},2,[80,99,101],{"class":100},"sxvE3","  \u003C!-- 負債側 -->\n",[80,103,105,108,111,115,118,122,126,128],{"class":82,"line":104},3,[80,106,107],{"class":86},"  \u003C",[80,109,110],{"class":90},"div",[80,112,114],{"class":113},"s4oTP"," class",[80,116,117],{"class":86},"=",[80,119,121],{"class":120},"sMJiu","\"",[80,123,125],{"class":124},"sdGka","liabilities-column",[80,127,121],{"class":120},[80,129,94],{"class":86},[80,131,133],{"class":82,"line":132},4,[80,134,135],{"class":100},"    \u003C!-- 流動負債 -->\n",[80,137,139,142,144,146,148,150,153,155],{"class":82,"line":138},5,[80,140,141],{"class":86},"    \u003C",[80,143,110],{"class":90},[80,145,114],{"class":113},[80,147,117],{"class":86},[80,149,121],{"class":120},[80,151,152],{"class":124},"current-liabilities",[80,154,121],{"class":120},[80,156,94],{"class":86},[80,158,160,163,165,168,170,172,175,177,180,182,184,187,189],{"class":82,"line":159},6,[80,161,162],{"class":86},"      \u003C",[80,164,110],{"class":90},[80,166,167],{"class":113}," v-for",[80,169,117],{"class":86},[80,171,121],{"class":120},[80,173,174],{"class":124},"item in currentLiabilities",[80,176,121],{"class":120},[80,178,179],{"class":113}," :key",[80,181,117],{"class":86},[80,183,121],{"class":120},[80,185,186],{"class":124},"item.label",[80,188,121],{"class":120},[80,190,94],{"class":86},[80,192,194],{"class":82,"line":193},7,[80,195,197],{"class":196},"sG7-3","        {{ item.label }}\n",[80,199,201,204,206],{"class":82,"line":200},8,[80,202,203],{"class":86},"      \u003C/",[80,205,110],{"class":90},[80,207,94],{"class":86},[80,209,211,214,216],{"class":82,"line":210},9,[80,212,213],{"class":86},"    \u003C/",[80,215,110],{"class":90},[80,217,94],{"class":86},[80,219,221],{"class":82,"line":220},10,[80,222,224],{"emptyLinePlaceholder":223},true,"\n",[80,226,228],{"class":82,"line":227},11,[80,229,230],{"class":100},"    \u003C!-- 固定負債 -->\n",[80,232,234,236,238,240,242,244,247,249],{"class":82,"line":233},12,[80,235,141],{"class":86},[80,237,110],{"class":90},[80,239,114],{"class":113},[80,241,117],{"class":86},[80,243,121],{"class":120},[80,245,246],{"class":124},"fixed-liabilities",[80,248,121],{"class":120},[80,250,94],{"class":86},[80,252,254,256,258,260,262,264,267,269,271,273,275,277,279],{"class":82,"line":253},13,[80,255,162],{"class":86},[80,257,110],{"class":90},[80,259,167],{"class":113},[80,261,117],{"class":86},[80,263,121],{"class":120},[80,265,266],{"class":124},"item in fixedLiabilities",[80,268,121],{"class":120},[80,270,179],{"class":113},[80,272,117],{"class":86},[80,274,121],{"class":120},[80,276,186],{"class":124},[80,278,121],{"class":120},[80,280,94],{"class":86},[80,282,284],{"class":82,"line":283},14,[80,285,197],{"class":196},[80,287,289,291,293],{"class":82,"line":288},15,[80,290,203],{"class":86},[80,292,110],{"class":90},[80,294,94],{"class":86},[80,296,298,300,302],{"class":82,"line":297},16,[80,299,213],{"class":86},[80,301,110],{"class":90},[80,303,94],{"class":86},[80,305,307,310,312],{"class":82,"line":306},17,[80,308,309],{"class":86},"  \u003C/",[80,311,110],{"class":90},[80,313,94],{"class":86},[80,315,317,320,322],{"class":82,"line":316},18,[80,318,319],{"class":86},"\u003C/",[80,321,91],{"class":90},[80,323,94],{"class":86},[58,325,327],{"id":326},"_23-問題点","2.3 問題点",[19,329,330,333],{},[23,331,332],{},"流動負債と固定負債は別々のFlexコンテナ","になっている。",[335,336,337,349,355],"ul",{},[338,339,340,341,344,345,348],"li",{},"各セクションは独立した ",[35,342,343],{},"\u003Cdiv>"," で、それぞれが ",[35,346,347],{},"flex-direction: column"," で項目を積み重ねている",[338,350,351,352],{},"Flexboxでは、",[23,353,354],{},"異なるコンテナ間を跨ぐ要素を作ることができない",[338,356,357],{},"CSSだけでは、流動負債の最下部と固定負債の最上部を「括弧で囲む」ような表現が困難",[14,359,361],{"id":360},"_3-今回採用した暫定対応","3. 今回採用した暫定対応",[19,363,364],{},"短期借入債務を流動負債から「除外」し、固定負債セクションに統合した「有利子負債」として表示：",[28,366,369],{"className":367,"code":368,"language":33},[31],"変更前:                    変更後:\n┌─────────────┐           ┌─────────────┐\n│  流動負債    │           │  流動負債    │\n│  買掛金      │           │  買掛金      │\n│  短期借入金  │  ───→     │  前受収益    │  ※短期借入なし\n│  前受収益    │           │  その他      │\n├─────────────┤           ├─────────────┤\n│  固定負債    │           │  固定負債    │\n│  長期借入金  │  ───→     │  有利子負債  │  ※短期+長期を統合\n│  その他      │           │  その他      │\n└─────────────┘           └─────────────┘\n",[35,370,368],{"__ignoreMap":37},[58,372,374],{"id":373},"_31-暫定対応の問題","3.1 暫定対応の問題",[335,376,377,383,389],{},[338,378,379,382],{},[23,380,381],{},"会計的に不正確",": 短期借入債務は流動負債に分類されるべき",[338,384,385,388],{},[23,386,387],{},"視覚的に誤解を招く",": 有利子負債全体が固定負債に見える",[338,390,391,394],{},[23,392,393],{},"本来の意図と異なる",": 2つのセクションを「跨ぐ」表現ではない",[14,396,398],{"id":397},"_4-代替案","4. 代替案",[58,400,402],{"id":401},"_41-案a-別レイヤーでラベル列を追加","4.1 案A: 別レイヤーでラベル列を追加",[19,404,405,408],{},[23,406,407],{},"概要",": 負債列の右側に、セクションを跨ぐラベル用の列を追加",[28,410,413],{"className":411,"code":412,"language":33},[31],"┌────────────┬────────┐\n│  流動負債   │        │\n│  買掛金     │        │\n│  前受収益   │        │\n│  短期借入金 │ 有     │\n│  短期リース │ 利     │\n├────────────┤ 子     │\n│  固定負債   │ 負     │\n│  長期借入金 │ 債     │\n│  長期リース │        │\n│  その他     │        │\n└────────────┴────────┘\n",[35,414,412],{"__ignoreMap":37},[19,416,417,420],{},[23,418,419],{},"実装方法",":",[28,422,424],{"className":74,"code":423,"language":76,"meta":37,"style":37},"\u003Cdiv class=\"bs-with-labels\">\n  \u003Cdiv class=\"liabilities-main\">\n    \u003C!-- 既存の負債表示 -->\n  \u003C/div>\n  \u003Cdiv class=\"debt-label-column\">\n    \u003C!-- position: absolute または Grid で位置調整 -->\n    \u003Cdiv class=\"interest-bearing-debt-label\"\n         :style=\"{ top: shortTermDebtTop, height: totalDebtHeight }\">\n      有利子負債\n    \u003C/div>\n  \u003C/div>\n\u003C/div>\n",[35,425,426,445,450,455,463,482,487,492,497,502,510,521],{"__ignoreMap":37},[80,427,428,430,432,434,436,438,441,443],{"class":82,"line":83},[80,429,87],{"class":86},[80,431,110],{"class":90},[80,433,114],{"class":113},[80,435,117],{"class":86},[80,437,121],{"class":120},[80,439,440],{"class":124},"bs-with-labels",[80,442,121],{"class":120},[80,444,94],{"class":86},[80,446,447],{"class":82,"line":97},[80,448,449],{"class":196},"  \u003Cdiv class=\"liabilities-main\">\n",[80,451,452],{"class":82,"line":104},[80,453,454],{"class":196},"    \u003C!-- 既存の負債表示 -->\n",[80,456,457,459,461],{"class":82,"line":132},[80,458,309],{"class":86},[80,460,110],{"class":90},[80,462,94],{"class":86},[80,464,465,467,469,471,473,475,478,480],{"class":82,"line":138},[80,466,107],{"class":86},[80,468,110],{"class":90},[80,470,114],{"class":113},[80,472,117],{"class":86},[80,474,121],{"class":120},[80,476,477],{"class":124},"debt-label-column",[80,479,121],{"class":120},[80,481,94],{"class":86},[80,483,484],{"class":82,"line":159},[80,485,486],{"class":196},"    \u003C!-- position: absolute または Grid で位置調整 -->\n",[80,488,489],{"class":82,"line":193},[80,490,491],{"class":196},"    \u003Cdiv class=\"interest-bearing-debt-label\"\n",[80,493,494],{"class":82,"line":200},[80,495,496],{"class":196},"         :style=\"{ top: shortTermDebtTop, height: totalDebtHeight }\">\n",[80,498,499],{"class":82,"line":210},[80,500,501],{"class":196},"      有利子負債\n",[80,503,504,506,508],{"class":82,"line":220},[80,505,213],{"class":86},[80,507,110],{"class":90},[80,509,94],{"class":86},[80,511,512,514,517,519],{"class":82,"line":227},[80,513,107],{"class":86},[80,515,516],{"class":196},"/",[80,518,110],{"class":90},[80,520,94],{"class":86},[80,522,523,525,527],{"class":82,"line":233},[80,524,319],{"class":86},[80,526,110],{"class":90},[80,528,94],{"class":86},[19,530,531,420],{},[23,532,533],{},"メリット",[335,535,536,539],{},[338,537,538],{},"既存のFlexbox構造を大きく変更しない",[338,540,541],{},"会計的に正確な配置を維持",[19,543,544,420],{},[23,545,546],{},"デメリット",[335,548,549,552,555],{},[338,550,551],{},"位置計算が複雑（各項目の高さを計算してラベル位置を決定）",[338,553,554],{},"レスポンシブ対応が難しい",[338,556,557],{},"アニメーション時の同期が必要",[58,559,561],{"id":560},"_42-案b-css-gridへの移行","4.2 案B: CSS Gridへの移行",[19,563,564,566,567,570],{},[23,565,407],{},": Flexboxから CSS Grid に移行し、",[35,568,569],{},"grid-row"," でセクション横断を実現",[28,572,576],{"className":573,"code":574,"language":575,"meta":37,"style":37},"language-css shiki shiki-themes vitesse-light vitesse-light",".balance-sheet {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr auto;\n  /* 資産 | ラベル | 負債 | ラベル */\n}\n\n.interest-bearing-debt-label {\n  grid-row: 5 / 9;  /* 複数行にまたがる */\n  grid-column: 4;\n}\n","css",[35,577,578,589,604,630,635,640,644,653,675,687],{"__ignoreMap":37},[80,579,580,583,586],{"class":82,"line":83},[80,581,582],{"class":86},".",[80,584,585],{"class":113},"balance-sheet",[80,587,588],{"class":86}," {\n",[80,590,591,595,597,601],{"class":82,"line":97},[80,592,594],{"class":593},"sz8Xr","  display",[80,596,420],{"class":86},[80,598,600],{"class":599},"snbK4"," grid",[80,602,603],{"class":86},";\n",[80,605,606,609,611,615,619,622,624,626,628],{"class":82,"line":104},[80,607,608],{"class":593},"  grid-template-columns",[80,610,420],{"class":86},[80,612,614],{"class":613},"sM54T"," 1",[80,616,618],{"class":617},"stQ0i","fr",[80,620,621],{"class":599}," auto",[80,623,614],{"class":613},[80,625,618],{"class":617},[80,627,621],{"class":599},[80,629,603],{"class":86},[80,631,632],{"class":82,"line":132},[80,633,634],{"class":100},"  /* 資産 | ラベル | 負債 | ラベル */\n",[80,636,637],{"class":82,"line":138},[80,638,639],{"class":86},"}\n",[80,641,642],{"class":82,"line":159},[80,643,224],{"emptyLinePlaceholder":223},[80,645,646,648,651],{"class":82,"line":193},[80,647,582],{"class":86},[80,649,650],{"class":113},"interest-bearing-debt-label",[80,652,588],{"class":86},[80,654,655,658,660,663,666,669,672],{"class":82,"line":200},[80,656,657],{"class":593},"  grid-row",[80,659,420],{"class":86},[80,661,662],{"class":613}," 5",[80,664,665],{"class":196}," / ",[80,667,668],{"class":613},"9",[80,670,671],{"class":86},";",[80,673,674],{"class":100},"  /* 複数行にまたがる */\n",[80,676,677,680,682,685],{"class":82,"line":210},[80,678,679],{"class":593},"  grid-column",[80,681,420],{"class":86},[80,683,684],{"class":613}," 4",[80,686,603],{"class":86},[80,688,689],{"class":82,"line":220},[80,690,639],{"class":86},[19,692,693,420],{},[23,694,533],{},[335,696,697,700],{},[338,698,699],{},"CSSネイティブでセクション横断が可能",[338,701,702],{},"複雑なJavaScript計算が不要",[19,704,705,420],{},[23,706,546],{},[335,708,709,712,715],{},[338,710,711],{},"大規模なリファクタリングが必要",[338,713,714],{},"既存のアニメーションロジックの書き直し",[338,716,717],{},"各企業で項目数が異なるため、動的なgrid-row計算が必要",[58,719,721],{"id":720},"_43-案c-svgオーバーレイ","4.3 案C: SVGオーバーレイ",[19,723,724,726],{},[23,725,407],{},": 括弧やラベルをSVGで描画し、既存のHTML上にオーバーレイ",[28,728,730],{"className":74,"code":729,"language":76,"meta":37,"style":37},"\u003Cdiv class=\"bs-container\" ref=\"bsContainer\">\n  \u003C!-- 既存のFlexbox構造 -->\n  \u003Csvg class=\"debt-bracket-overlay\">\n    \u003Cpath :d=\"bracketPath\" />\n    \u003Ctext :x=\"labelX\" :y=\"labelY\">有利子負債\u003C/text>\n  \u003C/svg>\n\u003C/div>\n",[35,731,732,763,768,773,778,783,788],{"__ignoreMap":37},[80,733,734,736,738,740,742,744,747,749,752,754,756,759,761],{"class":82,"line":83},[80,735,87],{"class":86},[80,737,110],{"class":90},[80,739,114],{"class":113},[80,741,117],{"class":86},[80,743,121],{"class":120},[80,745,746],{"class":124},"bs-container",[80,748,121],{"class":120},[80,750,751],{"class":113}," ref",[80,753,117],{"class":86},[80,755,121],{"class":120},[80,757,758],{"class":124},"bsContainer",[80,760,121],{"class":120},[80,762,94],{"class":86},[80,764,765],{"class":82,"line":97},[80,766,767],{"class":196},"  \u003C!-- 既存のFlexbox構造 -->\n",[80,769,770],{"class":82,"line":104},[80,771,772],{"class":196},"  \u003Csvg class=\"debt-bracket-overlay\">\n",[80,774,775],{"class":82,"line":132},[80,776,777],{"class":196},"    \u003Cpath :d=\"bracketPath\" />\n",[80,779,780],{"class":82,"line":138},[80,781,782],{"class":196},"    \u003Ctext :x=\"labelX\" :y=\"labelY\">有利子負債\u003C/text>\n",[80,784,785],{"class":82,"line":159},[80,786,787],{"class":196},"  \u003C/svg>\n",[80,789,790,792,794],{"class":82,"line":193},[80,791,319],{"class":86},[80,793,110],{"class":90},[80,795,94],{"class":86},[19,797,798,420],{},[23,799,533],{},[335,801,802,805],{},[338,803,804],{},"既存構造を変更せずに追加可能",[338,806,807],{},"自由な視覚表現（括弧、矢印など）",[19,809,810,420],{},[23,811,546],{},[335,813,814,817,820],{},[338,815,816],{},"DOM要素の位置取得が必要（getBoundingClientRect）",[338,818,819],{},"リサイズ・アニメーション時の再計算",[338,821,822],{},"SVGとHTMLの座標系の管理",[58,824,826],{"id":825},"_44-案d-会計区分を維持しつつ色で関連付け","4.4 案D: 会計区分を維持しつつ色で関連付け",[19,828,829,831],{},[23,830,407],{},": 短期・長期を各セクションに残しつつ、同じ色で視覚的にグルーピング",[28,833,836],{"className":834,"code":835,"language":33},[31],"┌─────────────┐\n│  流動負債    │\n│  買掛金      │  グレー\n│  前受収益    │  グレー\n│  短期借入金  │  オレンジ ◄── 同色\n│  短期リース  │  オレンジ ◄── 同色\n├─────────────┤\n│  固定負債    │\n│  長期借入金  │  オレンジ ◄── 同色\n│  長期リース  │  オレンジ ◄── 同色\n│  その他      │  グレー\n└─────────────┘\n\n+ マウスオーバーで「有利子負債合計: XX」を表示\n",[35,837,835],{"__ignoreMap":37},[19,839,840,420],{},[23,841,533],{},[335,843,844,847,850],{},[338,845,846],{},"実装が最も簡単",[338,848,849],{},"会計的に正確",[338,851,852],{},"既存構造の変更なし",[19,854,855,420],{},[23,856,546],{},[335,858,859,862],{},[338,860,861],{},"「括弧で囲む」ほど明示的ではない",[338,863,864],{},"色だけでは関連性が伝わりにくい可能性",[58,866,868],{"id":867},"_45-案e-ツールチップポップアップでの補足","4.5 案E: ツールチップ/ポップアップでの補足",[19,870,871,873],{},[23,872,407],{},": 有利子負債項目にホバーすると、関連項目をハイライト＋合計を表示",[28,875,879],{"className":876,"code":877,"language":878,"meta":37,"style":37},"language-javascript shiki shiki-themes vitesse-light vitesse-light","// 短期借入金にホバー時\nonHover('短期借入金') {\n  highlight(['短期借入金', '短期リース', '長期借入金', '長期リース'])\n  showTooltip('有利子負債合計: 28,137')\n}\n","javascript",[35,880,881,886,908,954,971],{"__ignoreMap":37},[80,882,883],{"class":82,"line":83},[80,884,885],{"class":100},"// 短期借入金にホバー時\n",[80,887,888,892,895,898,901,903,906],{"class":82,"line":97},[80,889,891],{"class":890},"senZ8","onHover",[80,893,894],{"class":86},"(",[80,896,897],{"class":120},"'",[80,899,900],{"class":124},"短期借入金",[80,902,897],{"class":120},[80,904,905],{"class":86},")",[80,907,588],{"class":86},[80,909,910,913,916,918,920,922,925,928,931,933,935,937,940,942,944,946,949,951],{"class":82,"line":104},[80,911,912],{"class":890},"  highlight",[80,914,915],{"class":86},"([",[80,917,897],{"class":120},[80,919,900],{"class":124},[80,921,897],{"class":120},[80,923,924],{"class":86},",",[80,926,927],{"class":120}," '",[80,929,930],{"class":124},"短期リース",[80,932,897],{"class":120},[80,934,924],{"class":86},[80,936,927],{"class":120},[80,938,939],{"class":124},"長期借入金",[80,941,897],{"class":120},[80,943,924],{"class":86},[80,945,927],{"class":120},[80,947,948],{"class":124},"長期リース",[80,950,897],{"class":120},[80,952,953],{"class":86},"])\n",[80,955,956,959,961,963,966,968],{"class":82,"line":132},[80,957,958],{"class":890},"  showTooltip",[80,960,894],{"class":86},[80,962,897],{"class":120},[80,964,965],{"class":124},"有利子負債合計: 28,137",[80,967,897],{"class":120},[80,969,970],{"class":86},")\n",[80,972,973],{"class":82,"line":138},[80,974,639],{"class":86},[19,976,977,420],{},[23,978,533],{},[335,980,981,984],{},[338,982,983],{},"インタラクティブで情報量が多い",[338,985,852],{},[19,987,988,420],{},[23,989,546],{},[335,991,992,995],{},[338,993,994],{},"静的表示では関連性が見えない",[338,996,997],{},"マウス操作が必要",[14,999,1001],{"id":1000},"_5-最終的な実装案d-案e-の発展形","5. 最終的な実装（案D + 案E の発展形）",[58,1003,1005],{"id":1004},"_51-実装内容","5.1 実装内容",[19,1007,1008,1011],{},[23,1009,1010],{},"案D（色による関連付け）+ 案E（ホバーでハイライト）"," を発展させた形で実装。",[1013,1014,1015],"h4",{"id":1015},"レイアウト構造",[28,1017,1020],{"className":1018,"code":1019,"language":33},[31],"┌─────────────┐\n│  流動負債    │\n│  買掛金      │  ピンク\n│  前受収益    │  ピンク\n│  その他      │  ピンク\n│  短期借入債務 │  オレンジ ◄── 集約表示\n├─────────────┤\n│  固定負債    │\n│  長期借入債務 │  オレンジ ◄── 集約表示\n│  その他      │  別色\n└─────────────┘\n",[35,1021,1019],{"__ignoreMap":37},[1013,1023,1024],{"id":1024},"特徴",[1026,1027,1028,1034,1040,1050,1056],"ol",{},[338,1029,1030,1033],{},[23,1031,1032],{},"会計区分を維持",": 短期借入債務は流動負債、長期借入債務は固定負債に配置",[338,1035,1036,1039],{},[23,1037,1038],{},"項目の集約",": 短期借入金＋短期リース → 「短期借入債務」、長期借入金＋長期リース → 「長期借入債務」",[338,1041,1042,1045,1046,1049],{},[23,1043,1044],{},"同色でグルーピング",": 両者ともオレンジ系（",[35,1047,1048],{},"#ffb74d","）で視覚的関連付け",[338,1051,1052,1055],{},[23,1053,1054],{},"隣接配置",": 短期借入債務を流動負債の最下部、長期借入債務を固定負債の最上部に配置し隣接させる",[338,1057,1058,1061],{},[23,1059,1060],{},"ホバー時のハイライト",": いずれかにマウスオーバーすると両方がオレンジ枠でハイライト",[58,1063,1065],{"id":1064},"_52-ツールチップの内訳表示","5.2 ツールチップの内訳表示",[19,1067,1068,1069,1072],{},"どちらにホバーしても",[23,1070,1071],{},"同一の内訳情報","が表示される：",[28,1074,1077],{"className":1075,"code":1076,"language":33},[31],"長期借入債務: 10,742\n短期借入債務: 1,336\n- 短期借入金: 1,195\n- 短期リース: 141\n長期借入債務: 10,742\n- 長期借入金: 10,207\n- 長期リース: 535\n────────────────────\n有利子負債合計: 12,078\n",[35,1078,1076],{"__ignoreMap":37},[335,1080,1081,1084,1087,1094],{},[338,1082,1083],{},"短期借入債務にホバー → 短期・長期両方の内訳 + 合計",[338,1085,1086],{},"長期借入債務にホバー → 短期・長期両方の内訳 + 合計",[338,1088,1089,1090,1093],{},"内訳項目は ",[35,1091,1092],{},"- "," で表示（全breakdown共通形式）",[338,1095,1096],{},"区切り線は合計の前のみ",[58,1098,1100],{"id":1099},"_53-実装ファイル","5.3 実装ファイル",[335,1102,1103],{},[338,1104,1105,1108],{},[35,1106,1107],{},"app/components/financial-quiz/ProportionalFinancialStatementsAnimated.vue",[335,1109,1110,1116,1122,1128,1134,1140],{},[338,1111,1112,1115],{},[35,1113,1114],{},"extractShortTermDebt()",": 短期借入債務の抽出",[338,1117,1118,1121],{},[35,1119,1120],{},"extractLongTermDebt()",": 長期借入債務の抽出",[338,1123,1124,1127],{},[35,1125,1126],{},"buildInterestBearingDebtBreakdown()",": ツールチップ用内訳データ構築",[338,1129,1130,1133],{},[35,1131,1132],{},"transformCurrentLiabilities()",": 流動負債の変換（短期借入債務を集約）",[338,1135,1136,1139],{},[35,1137,1138],{},"transformFixedLiabilities()",": 固定負債の変換（長期借入債務を集約）",[338,1141,1142,1145],{},[35,1143,1144],{},"highlightDebtGroup()",": ホバー時のハイライト制御",[14,1147,1149],{"id":1148},"_6-将来の改善案","6. 将来の改善案",[58,1151,1153],{"id":1152},"中長期的本格対応","中長期的（本格対応）",[19,1155,1156],{},[23,1157,1158],{},"案A: ラベル列の追加",[1026,1160,1161,1164,1167,1170],{},[338,1162,1163],{},"負債列の右側にラベル用の列を追加",[338,1165,1166],{},"JavaScriptで各項目の位置を計算",[338,1168,1169],{},"「有利子負債」ラベルを適切な位置に配置",[338,1171,1172],{},"括弧（ブラケット）でグルーピングを視覚化",[14,1174,1176],{"id":1175},"_7-結論","7. 結論",[19,1178,1179,1180,1183],{},"現在のFlexboxベースのレイアウトでは、",[23,1181,1182],{},"異なるセクション（流動負債・固定負債）を跨ぐ要素を自然に表現することが困難","である。",[19,1185,1186],{},"根本的な解決には、以下のいずれかが必要：",[335,1188,1189,1192,1195],{},[338,1190,1191],{},"CSS Gridへの移行（大規模リファクタリング）",[338,1193,1194],{},"別レイヤー（SVG or absolute positioning）でのラベル追加",[338,1196,1197],{},"位置計算のためのJavaScriptロジック追加",[19,1199,1200,1201,1204],{},"今回は ",[23,1202,1203],{},"案D + 案E の発展形","（項目集約 + 同色グルーピング + ホバーで全内訳表示）で実装し、会計的正確性と視覚的関連付けの両立を実現した。",[1206,1207,1208],"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 .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}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 .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}",{"title":37,"searchDepth":97,"depth":97,"links":1210},[1211,1212,1217,1220,1227,1232,1235],{"id":16,"depth":97,"text":17},{"id":55,"depth":97,"text":56,"children":1213},[1214,1215,1216],{"id":60,"depth":104,"text":61},{"id":70,"depth":104,"text":71},{"id":326,"depth":104,"text":327},{"id":360,"depth":97,"text":361,"children":1218},[1219],{"id":373,"depth":104,"text":374},{"id":397,"depth":97,"text":398,"children":1221},[1222,1223,1224,1225,1226],{"id":401,"depth":104,"text":402},{"id":560,"depth":104,"text":561},{"id":720,"depth":104,"text":721},{"id":825,"depth":104,"text":826},{"id":867,"depth":104,"text":868},{"id":1000,"depth":97,"text":1001,"children":1228},[1229,1230,1231],{"id":1004,"depth":104,"text":1005},{"id":1064,"depth":104,"text":1065},{"id":1099,"depth":104,"text":1100},{"id":1148,"depth":97,"text":1149,"children":1233},[1234],{"id":1152,"depth":104,"text":1153},{"id":1175,"depth":97,"text":1176},null,"流動負債と固定負債を跨ぐ有利子負債表示の実装課題と解決策の検討","md",{},"/interest-bearing-debt-cross-section-challenge",false,"2025-12-19T00:00:00.000Z",{"title":5,"description":1237},"2025-12/2025-12-19/interest-bearing-debt-cross-section-challenge",[1246,1247,1248,1249,1250],"Vue","CSS","Flexbox","財務諸表","技術検討","NRhZaKLO6plhu-xBpwlabLLh7432mp_znea5HkvZBFY",[],[1254,1258,1262,1265,1269],{"title":1255,"path":1256,"publishedAt":1257},"比例縮尺財務諸表コンポーネントのデバッグ記録","/proportional-financial-statements-debug","2025-12-09T00:00:00.000Z",{"title":1259,"path":1260,"publishedAt":1261},"2026年5月5日の開発日記 - Cockpit財務諸表移植・SVGアニメ・SFC並列量産","/2026-05-05-diary","2026-05-05T00:00:00.000Z",{"title":1263,"path":1264,"publishedAt":1261},"Cockpit財務諸表インタラクティブコンテンツの移植とアニメーション全実装","/cockpit-financial-statements",{"title":1266,"path":1267,"publishedAt":1268},"Excel関数の統合インデックスページをNuxt4側に移植してfxアイコン巨大化バグを潰し、SEOタイトルを動的化した記録","/excel-functions-integrated-index","2026-05-04T00:00:00.000Z",{"title":1270,"path":1271,"publishedAt":1272},"CFWS v2のクリックでセル単位ハイライト — scrollIntoViewと全navigate型への横展開記録","/cfws-v2-cell-highlight","2026-04-27T00:00:00.000Z","https://log.eurekapu.com/og/blog/interest-bearing-debt-cross-section-challenge.png?v=2025-12-19T00%3A00%3A00.000Z&title=%E6%9C%89%E5%88%A9%E5%AD%90%E8%B2%A0%E5%82%B5%E3%81%AE%E9%A0%98%E5%9F%9F%E6%A8%AA%E6%96%AD%E8%A1%A8%E7%A4%BA%EF%BC%9A%E6%8A%80%E8%A1%93%E7%9A%84%E8%AA%B2%E9%A1%8C%E3%81%A8%E4%BB%A3%E6%9B%BF%E6%A1%88&author=Kei%20Komatsu&sig=2e7ac1e91097b0aa",1785654974296]