[{"data":1,"prerenderedAt":905},["ShallowReactive",2],{"content-/cockpit-financial-statements":3,"all-pages-for-dir":903,"og-image-/cockpit-financial-statements":904},{"id":4,"title":5,"body":6,"category":884,"description":885,"extension":886,"meta":887,"navigation":888,"ogImage":889,"path":890,"project_name":891,"published":892,"publishedAt":893,"seo":894,"stem":895,"tags":896,"todo":901,"unpublished":892,"updatedAt":889,"__hash__":902},"pages/2026-05/2026-05-05/cockpit-financial-statements.md","Cockpit財務諸表インタラクティブコンテンツの移植とアニメーション全実装",{"type":7,"value":8,"toc":860},"minimark",[9,13,17,20,25,30,33,97,100,104,112,122,125,129,132,136,139,149,152,155,166,352,355,359,362,402,409,413,416,418,422,426,433,513,516,519,529,708,712,715,719,730,734,741,745,748,770,773,777,780,787,790,796,807,811,821,825,835,837,840,846,849,851,854,857],[10,11,5],"h1",{"id":12},"cockpit財務諸表インタラクティブコンテンツの移植とアニメーション全実装",[14,15,16],"p",{},"旧プロジェクト（cockpit-nuxt-vuetify）の財務諸表インタラクティブコンテンツが、eurekapu-nuxt4へ完全移植できた。BS・PL・CSが連動して動き、仕訳をプッシュするたびに勘定科目の数値が緑/赤に色分けしながらカウントアップする。今日はその全工程を記録する。",[18,19],"hr",{},[21,22,24],"h2",{"id":23},"_0852-セッション-移植メイン実装","08:52 セッション — 移植メイン実装",[26,27,29],"h3",{"id":28},"codex-4ラウンドレビューで計画を固める","Codex 4ラウンドレビューで計画を固める",[14,31,32],{},"移植計画書をClaude Codeに書かせた後、Codex（GPT-5.5）に投げてレビューを回した。",[34,35,36,52],"table",{},[37,38,39],"thead",{},[40,41,42,46,49],"tr",{},[43,44,45],"th",{},"ラウンド",[43,47,48],{},"指摘数",[43,50,51],{},"対応",[53,54,55,67,77,86],"tbody",{},[40,56,57,61,64],{},[58,59,60],"td",{},"1回目",[58,62,63],{},"7件",[58,65,66],{},"全件修正",[40,68,69,72,75],{},[58,70,71],{},"2回目",[58,73,74],{},"2件",[58,76,66],{},[40,78,79,82,84],{},[58,80,81],{},"3回目",[58,83,74],{},[58,85,66],{},[40,87,88,91,94],{},[58,89,90],{},"4回目",[58,92,93],{},"0件（致命的指摘なし）",[58,95,96],{},"実装開始",[14,98,99],{},"3ラウンドで7→2→2→0と収束するのを見届けてから着手した。「とりあえず書いて後で直す」より、計画を固めてから手を動かした方が手戻りが少ない、というのが最近の実感だ。",[26,101,103],{"id":102},"phase-0-extractmjs-で旧プロジェクトデータを自動収集","Phase 0: extract.mjs で旧プロジェクトデータを自動収集",[14,105,106,107,111],{},"旧プロジェクトから取引データを手で写すのは間違いの温床になる。自動収集スクリプト（",[108,109,110],"code",{},"extract.mjs","）を書いて、25取引データを変換した。",[113,114,115,119],"ul",{},[116,117,118],"li",{},"27スナップショット出力",[116,120,121],{},"最終時点: 現金期末 = CF純増減 = 300.9（整合差ゼロ）",[14,123,124],{},"整合差がゼロになった数字を画面で確認してから、次のフェーズに進んだ。",[26,126,128],{"id":127},"phase-1-accounts-masterts-transactionsts-を自動生成","Phase 1: accounts-master.ts + transactions.ts を自動生成",[14,130,131],{},"スクリプトで生成した後、No23の所得税振替額が動的セットされていないバグを発見した。勘定科目が静的な初期値を返したまま、振替計算が走っていなかった。修正後に再度ベンチマークを確認して整合差ゼロを維持した。",[26,133,135],{"id":134},"phase-2-5-コンポーネント群を新規作成","Phase 2-5: コンポーネント群を新規作成",[14,137,138],{},"JournalExampleを流用せず、Cockpit専用で独立させた。コンポーネント構成は以下のとおり。",[140,141,146],"pre",{"className":142,"code":144,"language":145},[143],"language-text","CockpitBs.vue         — 貸借対照表\nCockpitPl.vue         — 損益計算書\nCockpitCs.vue         — キャッシュフロー計算書（直接法 | 間接法）\nCockpitJournalCard.vue     — 仕訳カード\nCockpitJournalExample.vue  — 全体ラッパー\ncockpitStore.ts       — Pinia store\n","text",[108,147,144],{"__ignoreMap":148},"",[14,150,151],{},"書籍レイアウトに合わせてBS+PLを横並び、BSの下にCSを2列（直接法|間接法）で配置した。",[26,153,154],{"id":154},"飛びピルアニメーション",[14,156,157,158,161,162,165],{},"quiz/practiceと同等の実装にした。",[108,159,160],{},"position: fixed"," で ",[108,163,164],{},"document.body"," に挿入する方式だ。",[140,167,171],{"className":168,"code":169,"language":170,"meta":148,"style":148},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// 起点座標を取得してbodyに差し込む\nconst rect = sourceEl.getBoundingClientRect()\nconst pill = document.createElement('div')\npill.style.cssText = `\n  position: fixed;\n  left: ${rect.left}px;\n  top: ${rect.top}px;\n  ...\n`\ndocument.body.appendChild(pill)\n// CSSアニメーションで終点まで飛ばして remove\n","typescript",[108,172,173,182,210,244,264,270,293,312,318,324,346],{"__ignoreMap":148},[174,175,178],"span",{"class":176,"line":177},"line",1,[174,179,181],{"class":180},"sxvE3","// 起点座標を取得してbodyに差し込む\n",[174,183,185,189,193,197,200,203,207],{"class":176,"line":184},2,[174,186,188],{"class":187},"stQ0i","const ",[174,190,192],{"class":191},"s4oTP","rect",[174,194,196],{"class":195},"shFtX"," =",[174,198,199],{"class":191}," sourceEl",[174,201,202],{"class":195},".",[174,204,206],{"class":205},"senZ8","getBoundingClientRect",[174,208,209],{"class":195},"()\n",[174,211,213,215,218,220,223,225,228,231,235,239,241],{"class":176,"line":212},3,[174,214,188],{"class":187},[174,216,217],{"class":191},"pill",[174,219,196],{"class":195},[174,221,222],{"class":191}," document",[174,224,202],{"class":195},[174,226,227],{"class":205},"createElement",[174,229,230],{"class":195},"(",[174,232,234],{"class":233},"sMJiu","'",[174,236,238],{"class":237},"sdGka","div",[174,240,234],{"class":233},[174,242,243],{"class":195},")\n",[174,245,247,249,251,254,256,259,261],{"class":176,"line":246},4,[174,248,217],{"class":191},[174,250,202],{"class":195},[174,252,253],{"class":191},"style",[174,255,202],{"class":195},[174,257,258],{"class":191},"cssText",[174,260,196],{"class":195},[174,262,263],{"class":233}," `\n",[174,265,267],{"class":176,"line":266},5,[174,268,269],{"class":237},"  position: fixed;\n",[174,271,273,276,280,282,284,287,290],{"class":176,"line":272},6,[174,274,275],{"class":237},"  left: ",[174,277,279],{"class":278},"sHkkW","${",[174,281,192],{"class":237},[174,283,202],{"class":195},[174,285,286],{"class":237},"left",[174,288,289],{"class":278},"}",[174,291,292],{"class":237},"px;\n",[174,294,296,299,301,303,305,308,310],{"class":176,"line":295},7,[174,297,298],{"class":237},"  top: ",[174,300,279],{"class":278},[174,302,192],{"class":237},[174,304,202],{"class":195},[174,306,307],{"class":237},"top",[174,309,289],{"class":278},[174,311,292],{"class":237},[174,313,315],{"class":176,"line":314},8,[174,316,317],{"class":237},"  ...\n",[174,319,321],{"class":176,"line":320},9,[174,322,323],{"class":233},"`\n",[174,325,327,330,332,335,337,340,342,344],{"class":176,"line":326},10,[174,328,329],{"class":191},"document",[174,331,202],{"class":195},[174,333,334],{"class":191},"body",[174,336,202],{"class":195},[174,338,339],{"class":205},"appendChild",[174,341,230],{"class":195},[174,343,217],{"class":191},[174,345,243],{"class":195},[174,347,349],{"class":176,"line":348},11,[174,350,351],{"class":180},"// CSSアニメーションで終点まで飛ばして remove\n",[14,353,354],{},"Teleportを使わない理由は、z-indexの管理がシンプルになるから。bodyに直接挿入すると、スタックコンテキストの問題が起きない。",[26,356,358],{"id":357},"animatednumber-コンポーネント","AnimatedNumber コンポーネント",[14,360,361],{},"仕訳プッシュのたびに数値がカウントアップする。増加なら緑、減少なら赤に色が変わる。",[140,363,367],{"className":364,"code":365,"language":366,"meta":148,"style":148},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003CAnimatedNumber :value=\"account.balance\" />\n","vue",[108,368,369],{"__ignoreMap":148},[174,370,371,374,377,380,383,386,389,392,394,397,399],{"class":176,"line":177},[174,372,373],{"class":195},"\u003C",[174,375,376],{"class":278},"AnimatedNumber",[174,378,379],{"class":195}," :",[174,381,382],{"class":205},"value",[174,384,385],{"class":195},"=",[174,387,388],{"class":195},"\"",[174,390,391],{"class":191},"account",[174,393,202],{"class":195},[174,395,396],{"class":191},"balance",[174,398,388],{"class":195},[174,400,401],{"class":195}," />\n",[14,403,404,405,408],{},"内部では ",[108,406,407],{},"requestAnimationFrame"," でフレームごとに値を更新している。60fpsで滑らかに動くが、変化量が大きい場合はdurationを伸ばして追従しやすくした。",[26,410,412],{"id":411},"事前行挿入-論点移動時に勘定科目行を先に表示","事前行挿入: 論点移動時に勘定科目行を先に表示",[14,414,415],{},"取引を切り替えた瞬間、まだ残高がゼロの勘定科目でも行として表示しておく。仕訳をプッシュした時に「行が突然現れる」のを防ぐためだ。ユーザーが「この仕訳でこの勘定科目が動く」と予測できるようになる。",[18,417],{},[21,419,421],{"id":420},"_1148-セッション-後続改善","11:48 セッション — 後続改善",[26,423,425],{"id":424},"拡大モーダル廃止-インライン拡大","拡大モーダル廃止 → インライン拡大",[14,427,428,429,432],{},"Teleportを使ったモーダルを廃止して、",[108,430,431],{},".is-expanded"," クラスで全画面化するインライン方式に切り替えた。",[140,434,438],{"className":435,"code":436,"language":437,"meta":148,"style":148},"language-css shiki shiki-themes vitesse-light vitesse-light",".cockpit-wrapper.is-expanded {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  overflow-y: auto;\n}\n","css",[108,439,440,455,471,484,496,508],{"__ignoreMap":148},[174,441,442,444,447,449,452],{"class":176,"line":177},[174,443,202],{"class":195},[174,445,446],{"class":191},"cockpit-wrapper",[174,448,202],{"class":195},[174,450,451],{"class":191},"is-expanded",[174,453,454],{"class":195}," {\n",[174,456,457,461,464,468],{"class":176,"line":184},[174,458,460],{"class":459},"sz8Xr","  position",[174,462,463],{"class":195},":",[174,465,467],{"class":466},"snbK4"," fixed",[174,469,470],{"class":195},";\n",[174,472,473,476,478,482],{"class":176,"line":212},[174,474,475],{"class":459},"  inset",[174,477,463],{"class":195},[174,479,481],{"class":480},"sM54T"," 0",[174,483,470],{"class":195},[174,485,486,489,491,494],{"class":176,"line":246},[174,487,488],{"class":459},"  z-index",[174,490,463],{"class":195},[174,492,493],{"class":480}," 1000",[174,495,470],{"class":195},[174,497,498,501,503,506],{"class":176,"line":266},[174,499,500],{"class":459},"  overflow-y",[174,502,463],{"class":195},[174,504,505],{"class":466}," auto",[174,507,470],{"class":195},[174,509,510],{"class":176,"line":272},[174,511,512],{"class":195},"}\n",[14,514,515],{},"Teleportを外したことでDOMツリーがシンプルになり、アニメーション座標の計算がずれる問題も一緒に消えた。",[26,517,518],{"id":518},"矢印キーショートカット",[14,520,521,524,525,528],{},[108,522,523],{},"←"," ",[108,526,527],{},"→"," で取引を移動できるようにした。ただしフォーム要素（input, select, textarea）にフォーカスが当たっている間は除外した。",[140,530,532],{"className":168,"code":531,"language":170,"meta":148,"style":148},"const onKeydown = (e: KeyboardEvent) => {\n  const tag = (e.target as HTMLElement).tagName\n  if (['INPUT', 'SELECT', 'TEXTAREA'].includes(tag)) return\n  if (e.key === 'ArrowRight') goNext()\n  if (e.key === 'ArrowLeft') goPrev()\n}\n",[108,533,534,564,595,646,676,704],{"__ignoreMap":148},[174,535,536,538,541,543,546,549,552,556,559,562],{"class":176,"line":177},[174,537,188],{"class":187},[174,539,540],{"class":205},"onKeydown",[174,542,196],{"class":195},[174,544,545],{"class":195}," (",[174,547,548],{"class":191},"e",[174,550,551],{"class":195},": ",[174,553,555],{"class":554},"sSkh3","KeyboardEvent",[174,557,558],{"class":195},")",[174,560,561],{"class":195}," =>",[174,563,454],{"class":195},[174,565,566,569,572,574,576,578,580,583,586,589,592],{"class":176,"line":184},[174,567,568],{"class":187},"  const ",[174,570,571],{"class":191},"tag",[174,573,196],{"class":195},[174,575,545],{"class":195},[174,577,548],{"class":191},[174,579,202],{"class":195},[174,581,582],{"class":191},"target",[174,584,585],{"class":278}," as",[174,587,588],{"class":554}," HTMLElement",[174,590,591],{"class":195},").",[174,593,594],{"class":191},"tagName\n",[174,596,597,600,603,605,608,610,613,616,619,621,623,625,628,630,633,636,638,640,643],{"class":176,"line":212},[174,598,599],{"class":278},"  if",[174,601,602],{"class":195}," ([",[174,604,234],{"class":233},[174,606,607],{"class":237},"INPUT",[174,609,234],{"class":233},[174,611,612],{"class":195},",",[174,614,615],{"class":233}," '",[174,617,618],{"class":237},"SELECT",[174,620,234],{"class":233},[174,622,612],{"class":195},[174,624,615],{"class":233},[174,626,627],{"class":237},"TEXTAREA",[174,629,234],{"class":233},[174,631,632],{"class":195},"].",[174,634,635],{"class":205},"includes",[174,637,230],{"class":195},[174,639,571],{"class":191},[174,641,642],{"class":195},"))",[174,644,645],{"class":278}," return\n",[174,647,648,650,652,654,656,659,662,664,667,669,671,674],{"class":176,"line":246},[174,649,599],{"class":278},[174,651,545],{"class":195},[174,653,548],{"class":191},[174,655,202],{"class":195},[174,657,658],{"class":191},"key",[174,660,661],{"class":187}," === ",[174,663,234],{"class":233},[174,665,666],{"class":237},"ArrowRight",[174,668,234],{"class":233},[174,670,558],{"class":195},[174,672,673],{"class":205}," goNext",[174,675,209],{"class":195},[174,677,678,680,682,684,686,688,690,692,695,697,699,702],{"class":176,"line":266},[174,679,599],{"class":278},[174,681,545],{"class":195},[174,683,548],{"class":191},[174,685,202],{"class":195},[174,687,658],{"class":191},[174,689,661],{"class":187},[174,691,234],{"class":233},[174,693,694],{"class":237},"ArrowLeft",[174,696,234],{"class":233},[174,698,558],{"class":195},[174,700,701],{"class":205}," goPrev",[174,703,209],{"class":195},[174,705,706],{"class":176,"line":272},[174,707,512],{"class":195},[26,709,711],{"id":710},"仕訳カードにcsカテゴリ名を表示","仕訳カードにCSカテゴリ名を表示",[14,713,714],{},"仕訳カードの2行目に「現金及び預金の増減（営業CF）」のようなラベルを追加した。どの取引がどのCFカテゴリに影響するかをカード単体で読めるようになった。",[26,716,718],{"id":717},"csピルの起点と色を変更","CSピルの起点と色を変更",[14,720,721,722,725,726,729],{},"CS（キャッシュフロー計算書）へのアニメーションピルを、これまでのBS/PL共用起点から ",[108,723,724],{},"cs-sub"," 行に移動した。色も紫（",[108,727,728],{},"#7c3aed","）に変えて、BS用・PL用ピルと視覚的に区別できるようにした。",[26,731,733],{"id":732},"svg-22個を並列エージェントで移植","SVG 22個を並列エージェントで移植",[14,735,736,737,740],{},"旧プロジェクトの ",[108,738,739],{},"cockpit-svgs"," コンポーネント22個をVue 3 + Pinia対応に変換した。並列エージェント7個で分担して一気に処理した。SVGは静的描画が多いが、一部のコンポーネントはストアの残高値を参照して棒グラフの高さを動的に変える実装になっている。",[26,742,744],{"id":743},"entry分割-元本と利息を分離する","entry分割: 元本と利息を分離する",[14,746,747],{},"3取引（no-06 短期借入、no-14 長期借入、no-16 貸付）で、元本と利息を別エントリに分離した。",[34,749,750,760],{},[37,751,752],{},[40,753,754,757],{},[43,755,756],{},"分割前",[43,758,759],{},"分割後",[53,761,762],{},[40,763,764,767],{},[58,765,766],{},"借入金返済（元本+利息 一体）",[58,768,769],{},"元本返済（財務CF）+ 利息支払（営業CF）",[14,771,772],{},"元本は財務CF、利息は営業CF——この違いをアニメーションで可視化するのが目的だ。ピルが2方向に飛ぶ動きで「同じ支払いでも行き先が違う」ことが視覚的にわかる。",[26,774,776],{"id":775},"connectoroverlay-方針転換","ConnectorOverlay → 方針転換",[14,778,779],{},"BS・PL・CSをつなぐ矢印（ConnectorOverlay）を実装しようとした。DOM上の2点間に線を引く方式だ。",[14,781,782,783,786],{},"試してみると、スクロール・リサイズ・コンポーネント再描画のたびに座標がずれた。",[108,784,785],{},"ResizeObserver"," で追いかけても、アニメーション中の座標は信頼できない。",[14,788,789],{},"方針を転換した。",[791,792,793],"blockquote",{},[14,794,795],{},"「矢印より、アニメーション完了後にセルをZ軸浮上させる」",[14,797,798,799,802,803,806],{},"仕訳がプッシュされて数値が確定した後、対応するセルに ",[108,800,801],{},"box-shadow"," + ",[108,804,805],{},"transform: translateZ"," でフロート効果を出す。矢印で「どこがつながっているか」を示すより、セルが浮くことで「ここが今動いた」を伝える方が直感的だ。実装は次セッションへ持ち越した。",[26,808,810],{"id":809},"applyentry-の-export-競合修正","applyEntry の export 競合修正",[14,812,813,816,817,820],{},[108,814,815],{},"cockpit-calc.ts"," の ",[108,818,819],{},"applyEntry"," が二重 export になっていて、TypeScriptのコンパイルエラーが出た。一方の export を除去して解消した。",[26,822,824],{"id":823},"excelfunctions-ページのhtml警告を並列修正","excel/functions ページのHTML警告を並列修正",[14,826,827,830,831,834],{},[108,828,829],{},"\u003Ctable>"," 直下に ",[108,832,833],{},"\u003Ctr>"," を直接置いていたHTML構造警告が複数ページで出ていた。Agent並列で一括修正した。",[18,836],{},[21,838,839],{"id":839},"今日のコミット",[140,841,844],{"className":842,"code":843,"language":145},[143],"f209ff5 feat: Cockpit財務諸表コンポーネント移植・アニメーション全実装\n",[108,845,843],{"__ignoreMap":148},[14,847,848],{},"引き継ぎドキュメントも作成して、次セッションでセルZ軸浮上を拾えるようにした。",[18,850],{},[21,852,853],{"id":853},"振り返り",[14,855,856],{},"ConnectorOverlayは座標計算が3回書き直しても収束しなかった。「座標を追いかけるより、アニメーション完了後にセル自体を浮かせる」という方針転換は、実装量を減らしながら教育効果を上げる方向に動いた。行き詰まったら別の表現手段を探す、という切り替えがうまく機能した日だった。",[253,858,859],{},"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 .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}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 .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}",{"title":148,"searchDepth":184,"depth":184,"links":861},[862,871,882,883],{"id":23,"depth":184,"text":24,"children":863},[864,865,866,867,868,869,870],{"id":28,"depth":212,"text":29},{"id":102,"depth":212,"text":103},{"id":127,"depth":212,"text":128},{"id":134,"depth":212,"text":135},{"id":154,"depth":212,"text":154},{"id":357,"depth":212,"text":358},{"id":411,"depth":212,"text":412},{"id":420,"depth":184,"text":421,"children":872},[873,874,875,876,877,878,879,880,881],{"id":424,"depth":212,"text":425},{"id":518,"depth":212,"text":518},{"id":710,"depth":212,"text":711},{"id":717,"depth":212,"text":718},{"id":732,"depth":212,"text":733},{"id":743,"depth":212,"text":744},{"id":775,"depth":212,"text":776},{"id":809,"depth":212,"text":810},{"id":823,"depth":212,"text":824},{"id":839,"depth":184,"text":839},{"id":853,"depth":184,"text":853},"dev","旧プロジェクト(cockpit-nuxt-vuetify)の財務諸表インタラクティブコンテンツをeurekapu-nuxt4へ移植。Codex 4ラウンドレビュー、自動収集スクリプトによるベンチマーク取得、BS/PL/CS連動アニメーション、SVG22個の並列変換、entry分割による教育的意義の可視化まで一気通貫で実装した記録。","md",{},true,null,"/cockpit-financial-statements","eurekapu-nuxt4",false,"2026-05-05T00:00:00.000Z",{"title":5,"description":885},"2026-05/2026-05-05/cockpit-financial-statements",[897,898,899,900],"Vue","アニメーション","財務諸表","Pinia","memo","B8MixismXCD7eyvWRxBy8r3PjV0Oqg2McGlUuMfRMpU",[],"https://log.eurekapu.com/og/blog/cockpit-financial-statements.png?v=2026-05-05T00%3A00%3A00.000Z&title=Cockpit%E8%B2%A1%E5%8B%99%E8%AB%B8%E8%A1%A8%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E7%A7%BB%E6%A4%8D%E3%81%A8%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%85%A8%E5%AE%9F%E8%A3%85&author=Kei%20Komatsu&sig=97227c512c431abc",1782528833228]