[{"data":1,"prerenderedAt":484},["ShallowReactive",2],{"content-/cockpit-ss-table-multifs":3,"all-pages-for-dir":482,"og-image-/cockpit-ss-table-multifs":483},{"id":4,"title":5,"body":6,"category":463,"description":464,"extension":465,"meta":466,"navigation":467,"ogImage":468,"path":469,"project_name":470,"published":471,"publishedAt":472,"seo":473,"stem":474,"tags":475,"todo":480,"unpublished":471,"updatedAt":468,"__hash__":481},"pages/2026-05/2026-05-08/cockpit-ss-table-multifs.md","財務諸表コクピットを4表化 — 株主資本等変動計算書（S/S）追加とSVG接続修正",{"type":7,"value":8,"toc":445},"minimark",[9,14,22,30,37,40,44,47,52,55,58,62,65,68,72,75,78,176,180,187,189,193,196,202,218,221,228,230,234,237,240,247,258,265,267,270,277,280,282,286,293,299,317,324,326,329,332,335,338,340,344,351,361,395,397,401,408,411,413,417,420,426,428,431,438,441],[10,11,13],"h2",{"id":12},"_3表から4表へ-ssを足したくなった","3表から4表へ — S/Sを足したくなった",[15,16,17,21],"p",{},[18,19,20],"code",{},"/lessons/financial-statements/cockpit-00-summary"," のコクピットページは、BS・PL・CSの3表を画面に並べて取引ごとに数字が動く構造で運用していた。配当や当期純利益振替の取引を進めると、BS の繰越利益剰余金が動く様子を見せたいが、3表の中だけでは「動いた」事実だけが見えて、その内訳を表現する場所がなかった。",[15,23,24,25,29],{},"利益剰余金の3行（繰越利益剰余金・当期純利益・利益準備金）をBSの中に並べていたが、横並びで縦に詰めても見づらかった。",[26,27,28],"strong",{},"株主資本等変動計算書（S/S）を独立させて、純資産の動きはS/Sで表現する","方針に切り替えた。",[15,31,32,33,36],{},"BS から利益剰余金の3行を削除して、",[18,34,35],{},"CockpitSs.vue"," を新しいコンポーネントとして追加。BS の純資産は1行（純資産合計）に集約した。",[38,39],"hr",{},[10,41,43],{"id":42},"svgコネクターの矢印が邪魔だった","SVGコネクターの矢印が邪魔だった",[15,45,46],{},"3表時代から、BSの現金とCSの期末現金残高をSVGコネクターで結んでいた。S/Sを追加した結果、BSの純資産合計とS/Sの純資産合計を結ぶ線も足したくなった。ここで2つ問題が出た。",[48,49,51],"h3",{"id":50},"矢印-塗りつぶし丸への変更","矢印 → 塗りつぶし丸への変更",[15,53,54],{},"矢印のヘッドが太くて、線の終端で表全体の数字に被って読みづらかった。「BS の現金が CS の期末残高につながっている」という意味を表現したいだけで、方向性は不要だ。",[15,56,57],{},"矢印の代わりに**塗りつぶし丸（●）**を線の両端に置く形に変更した。「ここで接続している」という事実だけ示せれば足りる。",[48,59,61],{"id":60},"z-index-45-60","z-index 45 → 60",[15,63,64],{},"SVGコネクターをBS/CSの上に被せていたが、ホバー時のガイドハイライト（z-index 50台）に隠れる事象が発生した。コネクターが消えると接続が分からなくなる。",[15,66,67],{},"コネクター側のz-indexを45から60に上げて、ガイドハイライトより前面に出した。",[48,69,71],{"id":70},"leftleftバグ-elbow-midx計算","left/leftバグ — elbow midX計算",[15,73,74],{},"これが一番ハマった。BS現金 → CS期末残高のelbowコネクター（L字に曲げる線）で、両端のアンカーが同じ「left」サイドに付いている時、midX（曲がり位置のX座標）が画面外に飛んでいた。",[15,76,77],{},"調べると、midX計算が「右 → 左」の前提で書いてあって、「左 → 左」の場合に符号が逆転していた。条件分岐を追加して、両端が同じサイドの場合は外側に膨らませるロジックに修正。",[79,80,85],"pre",{"className":81,"code":82,"language":83,"meta":84,"style":84},"language-ts shiki shiki-themes vitesse-light vitesse-light","// 両端が左サイドの場合、midXは両アンカーの左外側に置く\nconst midX = isLeftLeft\n  ? Math.min(startX, endX) - 24\n  : (startX + endX) / 2\n","ts","",[18,86,87,96,114,152],{"__ignoreMap":84},[88,89,92],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"sxvE3","// 両端が左サイドの場合、midXは両アンカーの左外側に置く\n",[88,97,99,103,107,111],{"class":90,"line":98},2,[88,100,102],{"class":101},"stQ0i","const ",[88,104,106],{"class":105},"s4oTP","midX",[88,108,110],{"class":109},"shFtX"," =",[88,112,113],{"class":105}," isLeftLeft\n",[88,115,117,120,123,126,130,133,136,139,142,145,148],{"class":90,"line":116},3,[88,118,119],{"class":101},"  ?",[88,121,122],{"class":105}," Math",[88,124,125],{"class":109},".",[88,127,129],{"class":128},"senZ8","min",[88,131,132],{"class":109},"(",[88,134,135],{"class":105},"startX",[88,137,138],{"class":109},",",[88,140,141],{"class":105}," endX",[88,143,144],{"class":109},")",[88,146,147],{"class":101}," -",[88,149,151],{"class":150},"sM54T"," 24\n",[88,153,155,158,161,163,166,168,170,173],{"class":90,"line":154},4,[88,156,157],{"class":101},"  :",[88,159,160],{"class":109}," (",[88,162,135],{"class":105},[88,164,165],{"class":101}," +",[88,167,141],{"class":105},[88,169,144],{"class":109},[88,171,172],{"class":101}," /",[88,174,175],{"class":150}," 2\n",[48,177,179],{"id":178},"bsss-は純資産合計同士で結ぶ","BS↔S/S は純資産合計同士で結ぶ",[15,181,182,183,186],{},"最初は「当期純利益」のリンク先を S/S の繰越利益剰余金行にしていたが、SVGコネクターは別途「BS純資産合計 ↔ S/S純資産合計」を結ぶ形に整理した。",[26,184,185],{},"ガイド（ハイライト）は当期純利益、コネクターは合計同士","で役割を分けた。",[38,188],{},[10,190,192],{"id":191},"voicevox辞書-音声134ファイル再生成","VOICEVOX辞書 → 音声134ファイル再生成",[15,194,195],{},"SS関連の解説音声を生成したら、ずんだもんが「かぶぬししほんとうへんどうけいさんしょ」を読み間違えた。「株主資本等」を「かぶぬし・しほん・とう」と切らずに、別の読み方になっていた。",[15,197,198,201],{},[18,199,200],{},"voicevox-dict-register"," スキルでユーザー辞書に登録。",[203,204,205,212],"ul",{},[206,207,208,209],"li",{},"単語: ",[18,210,211],{},"株主資本等変動計算書",[206,213,214,215],{},"読み: ",[18,216,217],{},"カブヌシシホントウヘンドウケイサンショ",[15,219,220],{},"辞書登録後、SS関連の音声16ファイルだけ再生成すれば足りると思っていた。しかし、Excel風貼り付けの解説文ガイドで「行」を含むステップ（解説文に「○行目」と出てくるもの）を確認したら、「行」の読みが「ぎょう/こう」で揺れていた箇所が他のステップにも残っていた。",[15,222,223,224,227],{},"結局、",[26,225,226],{},"全134音声ファイルを再生成","してR2に再アップロードした。再生成は1ファイルずつ走らせると時間がかかるので、バッチで流した。R2への再アップロードもまとめて実行。",[38,229],{},[10,231,233],{"id":232},"bs左右の合計行が揃わなかった-grid再構成","BS左右の合計行が揃わなかった — grid再構成",[15,235,236],{},"BSの左右（資産 / 負債・純資産）で、合計行のY位置が微妙にズレていた。",[15,238,239],{},"最初に試したのは padding/margin の手調整。資産側に項目が多いか少ないかで合計行が上下するので、空行を挟んで揃える方式を試したが、取引によって項目数が変わると破綻する。",[15,241,242,243,246],{},"最終的に ",[26,244,245],{},"grid-template-areas を分割","する方式に切り替えた。",[203,248,249,252,255],{},[206,250,251],{},"BS全体を「資産明細エリア / 負債純資産明細エリア / 合計行エリア」に分割",[206,253,254],{},"合計行エリアは左右ともに同じ grid 行に配置",[206,256,257],{},"明細エリアの高さが違っても、合計行は別エリアなのでY位置が完全に一致",[15,259,260,261,264],{},"検証で ",[18,262,263],{},"getBoundingClientRect()"," を使って top の差を測ったら、差が0pxになった。",[38,266],{},[10,268,269],{"id":269},"レイアウト入れ替えとタイトル統一",[15,271,272,273,276],{},"S/Sを追加した結果、画面上の配置を見直した。BSとCSのレイアウトを入れ替え（grid-template-areas を再定義）、4表（BS / PL / CS / S/S）のタイトルを ",[18,274,275],{},"CS-method-label"," スタイルに統一した。",[15,278,279],{},"BSとPLとCSとS/Sで似たような色違いのラベルを使い回していたが、画面に4つ並ぶと色のバリエーションがうるさい。同じスタイルで統一して、表の中身（数字）に視線が集まるようにした。",[38,281],{},[10,283,285],{"id":284},"バグ-配当金行に幽霊の値が出た","バグ — 配当金行に幽霊の値が出た",[15,287,288,289,292],{},"S/Sの数値カウントアップアニメーションを ",[18,290,291],{},"AnimatedNumber"," で実装した後、画面チェックでバグが出た。",[15,294,295,298],{},[26,296,297],{},"no-04時点（配当決議より前）で、SS表の配当金行に「35」が表示","されている。配当はno-25付近で発生する取引なので、no-04では0でないとおかしい。",[15,300,301,302,305,306,309,310,312,313,316],{},"調べると、",[18,303,304],{},"-0"," が表示されるケースがあって、そこで JS が変な丸めをした結果が35になっていた。",[18,307,308],{},"Math.abs()"," を通して ",[18,311,304],{}," を ",[18,314,315],{},"0"," に正規化する処理を追加。",[15,318,319,320,323],{},"もう1件、",[26,321,322],{},"no-17のstep 3でハイライトが PL を指していた","。意図は「BSの短期借入金（shortLoanPayable）」だったのに、ガイドの参照先テーブルが PL になっていた。topicsデータの参照先を BS に修正。",[38,325],{},[10,327,328],{"id":328},"取引アニメーションのトグル化",[15,330,331],{},"取引を進めるとBSやPLの数字がカウントアップする演出が走る。デバッグで「取引23（決算）」を何度も流し直すとアニメーション待ちが鬱陶しい。",[15,333,334],{},"任意トグルで切り替える形に変更。デフォルトは off。デバッグ時だけ on にする運用にした。",[15,336,337],{},"加えて、取引23（決算）のロジックを簡略化して、ボタン名を「決算を確定する」に変更。closing 処理時はアニメーションをスキップして即時実行に倒した。",[38,339],{},[10,341,343],{"id":342},"localstorage永続化-モーダル対策","localStorage永続化 — モーダル対策",[15,345,346,347,350],{},"取引を進めている途中で「決算」モーダルを開くと、画面遷移で ",[18,348,349],{},"currentEntryId"," が初期化されてしまうケースがあった。",[15,352,353,354,356,357,360],{},"localStorage に ",[18,355,349],{}," を保存する形に変更。ただし、",[18,358,359],{},"entryRange"," （取引の範囲セット）ごとに別キーで保存する。同じURLでも entryRange が違えば別の進行状態として扱う。",[79,362,364],{"className":81,"code":363,"language":83,"meta":84,"style":84},"const storageKey = `cockpit:currentEntryId:${entryRange}`\n",[18,365,366],{"__ignoreMap":84},[88,367,368,370,373,375,379,383,387,389,392],{"class":90,"line":91},[88,369,102],{"class":101},[88,371,372],{"class":105},"storageKey",[88,374,110],{"class":109},[88,376,378],{"class":377},"sMJiu"," `",[88,380,382],{"class":381},"sdGka","cockpit:currentEntryId:",[88,384,386],{"class":385},"sHkkW","${",[88,388,359],{"class":381},[88,390,391],{"class":385},"}",[88,393,394],{"class":377},"`\n",[38,396],{},[10,398,400],{"id":399},"法人税等の説明文-厳密化","法人税等の説明文 — 厳密化",[15,402,403,404,407],{},"ガイドの説明文を見直していて、「税引前当期純利益 × 税率 = 法人税等」と書いていた箇所が目に止まった。これは厳密には間違いで、",[26,405,406],{},"所得を確定（加算減算調整）した上で税率を乗算する","のが正しい。",[15,409,410],{},"「税引前当期純利益にそのまま税率を乗じる」と読まれない表現に書き直した。簿記3級レベルでは加減算調整の話まで踏み込まないが、誤った認識を植えつけないように曖昧さを残す表現にした。",[38,412],{},[10,414,416],{"id":415},"ハイライトを行セルに","ハイライトを行→セルに",[15,418,419],{},"ガイドハイライトは元々「該当行全体」を黄色で囲んでいた。S/Sを追加して列が増えた結果、行全体ハイライトだと「どの数字を見るべきか」が分かりにくくなった。",[15,421,422,425],{},[26,423,424],{},"特定セル（行×列の交点）だけ","をハイライトする形に変更。例えば「当期純利益が振り替わる」ステップでは、PLの当期純利益セルと S/S の当期純利益セルだけ光る。視線が迷わない。",[38,427],{},[10,429,430],{"id":430},"公開化",[15,432,433,434,437],{},"最後に ",[18,435,436],{},"topics.ts"," から該当エントリの draft タグを外して公開化。SEO description に「株主資本等変動計算書（S/S）を追加した4表構成」の言及を足した。",[15,439,440],{},"3表で完結していたものを4表に増やすと、画面のスペース配分・コネクター・音声・ガイドの全部に手が及んで、想定の3倍くらい時間がかかった。終わってみると、利益剰余金の動きが S/S の中で完結して見える構造の方が、簿記の説明としても素直だ。先に4表で設計しておけばよかったとは思うが、3表で運用してから不足を感じて足す流れの方が、何が必要かは見えやすかった気もする。",[442,443,444],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}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 .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 .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}",{"title":84,"searchDepth":98,"depth":98,"links":446},[447,448,454,455,456,457,458,459,460,461,462],{"id":12,"depth":98,"text":13},{"id":42,"depth":98,"text":43,"children":449},[450,451,452,453],{"id":50,"depth":116,"text":51},{"id":60,"depth":116,"text":61},{"id":70,"depth":116,"text":71},{"id":178,"depth":116,"text":179},{"id":191,"depth":98,"text":192},{"id":232,"depth":98,"text":233},{"id":269,"depth":98,"text":269},{"id":284,"depth":98,"text":285},{"id":328,"depth":98,"text":328},{"id":342,"depth":98,"text":343},{"id":399,"depth":98,"text":400},{"id":415,"depth":98,"text":416},{"id":430,"depth":98,"text":430},"dev","BS/PL/CSの3表構成に株主資本等変動計算書（S/S）を追加して4表に拡張。SVGコネクターを矢印から塗りつぶし丸に変更し、純資産合計同士をBS↔S/Sで結び直した。VOICEVOX辞書登録から音声134ファイル再生成、BS左右の合計行揃え、localStorage永続化までの試行錯誤の記録。","md",{},true,null,"/cockpit-ss-table-multifs","eurekapu-nuxt4",false,"2026-05-08T00:00:00.000Z",{"title":5,"description":464},"2026-05/2026-05-08/cockpit-ss-table-multifs",[470,476,477,478,479,211],"Vue 3","SVG","VOICEVOX","簿記","memo","0zlhvtsT0O1N-ae6u2vtEiwXlCWaSHXsfCiwgruPhzc",[],"https://log.eurekapu.com/og/blog/cockpit-ss-table-multifs.png?v=2026-05-08T00%3A00%3A00.000Z&title=%E8%B2%A1%E5%8B%99%E8%AB%B8%E8%A1%A8%E3%82%B3%E3%82%AF%E3%83%94%E3%83%83%E3%83%88%E3%82%924%E8%A1%A8%E5%8C%96%20%E2%80%94%20%E6%A0%AA%E4%B8%BB%E8%B3%87%E6%9C%AC%E7%AD%89%E5%A4%89%E5%8B%95%E8%A8%88%E7%AE%97%E6%9B%B8%EF%BC%88S%2FS%EF%BC%89%E8%BF%BD%E5%8A%A0%E3%81%A8SVG%E6%8E%A5%E7%B6%9A%E4%BF%AE%E6%AD%A3&author=Kei%20Komatsu&sig=4ffe78ecc4932627",1782528833915]