[{"data":1,"prerenderedAt":1117},["ShallowReactive",2],{"content-/cfws-v2-cell-highlight":3,"all-pages-for-dir":1115,"og-image-/cfws-v2-cell-highlight":1116},{"id":4,"title":5,"body":6,"category":1097,"description":1098,"extension":1099,"meta":1100,"navigation":411,"path":1101,"project_name":1102,"published":1103,"publishedAt":1104,"seo":1105,"stem":1106,"tags":1107,"todo":1113,"updatedAt":1113,"__hash__":1114},"pages/2026-04/2026-04-27/cfws-v2-cell-highlight.md","CFWS v2のクリックでセル単位ハイライト — scrollIntoViewと全navigate型への横展開記録",{"type":7,"value":8,"toc":1081},"minimark",[9,14,23,28,31,41,149,155,294,301,305,308,311,316,330,341,460,464,494,684,694,780,787,791,794,798,801,812,864,871,878,882,896,903,906,925,945,948,951,958,988,995,998,1001,1026,1029,1033,1048,1051,1077],[10,11,13],"h1",{"id":12},"cfws-v2のセル単位ハイライト-全navigate型への横展開","CFWS v2のセル単位ハイライト + 全navigate型への横展開",[15,16,17,18,22],"p",{},"CFWS（キャッシュフロー精算表）の「税引前当期純利益」をクリックすると、年次推移表のFY202603の該当セルにジャンプする。FY202603の税引前セルがオレンジ枠で囲まれ、",[19,20,21],"code",{},"scrollIntoView"," で画面中央に滑り込む。同じ仕組みを年次推移表・財務シート・投資シート・株式発行シートの全navigate型に展開した。途中で「建物と備品が別々にハイライトされない」問題を踏み、複合キーの優先順位を逆転させて解消した。CSS specificityの罠も2回踏み、最後に simplify をかけて共通composablesに整理した。",[24,25,27],"h2",{"id":26},"モデルケース-税引前当期純利益のセル単位ハイライト","モデルケース: 「税引前当期純利益」のセル単位ハイライト",[15,29,30],{},"最初のモデルケースとして、CFWSの「税引前当期純利益」リンクから年次推移表へ飛ぶ動線を組んだ。",[15,32,33,36,37,40],{},[19,34,35],{},"CfItemAction"," 型に ",[19,38,39],{},"highlightYearIndex"," を追加し、CFWSの年度クリックと連動できるようにした。",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-ts shiki shiki-themes vitesse-light vitesse-light","// app/types/cashflow-statement.ts\nexport interface CfItemAction {\n  navigate: { type: NavigateType; key?: string }\n  highlightAccountKey?: string\n  highlightYearIndex?: number  // 追加\n}\n","ts","",[19,49,50,59,78,114,127,143],{"__ignoreMap":47},[51,52,55],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sxvE3","// app/types/cashflow-statement.ts\n",[51,60,62,66,70,74],{"class":53,"line":61},2,[51,63,65],{"class":64},"sHkkW","export",[51,67,69],{"class":68},"stQ0i"," interface",[51,71,73],{"class":72},"sSkh3"," CfItemAction",[51,75,77],{"class":76},"shFtX"," {\n",[51,79,81,85,88,91,94,97,100,103,106,108,111],{"class":53,"line":80},3,[51,82,84],{"class":83},"s4oTP","  navigate",[51,86,87],{"class":76},": { ",[51,89,90],{"class":83},"type",[51,92,93],{"class":76},": ",[51,95,96],{"class":72},"NavigateType",[51,98,99],{"class":76},"; ",[51,101,102],{"class":83},"key",[51,104,105],{"class":68},"?",[51,107,93],{"class":76},[51,109,110],{"class":72},"string",[51,112,113],{"class":76}," }\n",[51,115,117,120,122,124],{"class":53,"line":116},4,[51,118,119],{"class":83},"  highlightAccountKey",[51,121,105],{"class":68},[51,123,93],{"class":76},[51,125,126],{"class":72},"string\n",[51,128,130,133,135,137,140],{"class":53,"line":129},5,[51,131,132],{"class":83},"  highlightYearIndex",[51,134,105],{"class":68},[51,136,93],{"class":76},[51,138,139],{"class":72},"number",[51,141,142],{"class":57},"  // 追加\n",[51,144,146],{"class":53,"line":145},6,[51,147,148],{"class":76},"}\n",[15,150,151,152,154],{},"V2AccountingSheet側で ",[19,153,39],{}," を受け取り、対応セルにクラスと ref を付与する。",[42,156,160],{"className":157,"code":158,"language":159,"meta":47,"style":47},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Ctd\n  :ref=\"(el) => setCellRef(el, year, '税引前当期純利益')\"\n  :class=\"{ 'cell-highlight': isHighlighted(year, '税引前当期純利益') }\"\n>\n  {{ fmt(income) }}\n\u003C/td>\n","vue",[19,161,162,170,228,273,278,284],{"__ignoreMap":47},[51,163,164,167],{"class":53,"line":54},[51,165,166],{"class":76},"\u003C",[51,168,169],{"class":64},"td\n",[51,171,172,175,179,182,185,188,191,194,197,200,202,204,207,210,212,216,220,223,225],{"class":53,"line":61},[51,173,174],{"class":76},"  :",[51,176,178],{"class":177},"senZ8","ref",[51,180,181],{"class":76},"=",[51,183,184],{"class":76},"\"",[51,186,187],{"class":76},"(",[51,189,190],{"class":83},"el",[51,192,193],{"class":76},")",[51,195,196],{"class":76}," =>",[51,198,199],{"class":177}," setCellRef",[51,201,187],{"class":76},[51,203,190],{"class":83},[51,205,206],{"class":76},",",[51,208,209],{"class":83}," year",[51,211,206],{"class":76},[51,213,215],{"class":214},"sMJiu"," '",[51,217,219],{"class":218},"sdGka","税引前当期純利益",[51,221,222],{"class":214},"'",[51,224,193],{"class":76},[51,226,227],{"class":76},"\"\n",[51,229,230,232,235,237,239,242,244,247,249,251,254,256,259,262,264,266,268,271],{"class":53,"line":80},[51,231,174],{"class":76},[51,233,234],{"class":177},"class",[51,236,181],{"class":76},[51,238,184],{"class":76},[51,240,241],{"class":76},"{ ",[51,243,222],{"class":214},[51,245,246],{"class":218},"cell-highlight",[51,248,222],{"class":214},[51,250,93],{"class":76},[51,252,253],{"class":177},"isHighlighted",[51,255,187],{"class":76},[51,257,258],{"class":83},"year",[51,260,261],{"class":76},", ",[51,263,222],{"class":214},[51,265,219],{"class":218},[51,267,222],{"class":214},[51,269,270],{"class":76},") }",[51,272,227],{"class":76},[51,274,275],{"class":53,"line":116},[51,276,277],{"class":76},">\n",[51,279,280],{"class":53,"line":129},[51,281,283],{"class":282},"sG7-3","  {{ fmt(income) }}\n",[51,285,286,289,292],{"class":53,"line":145},[51,287,288],{"class":76},"\u003C/",[51,290,291],{"class":64},"td",[51,293,277],{"class":76},[15,295,296,297,300],{},"ブラウザで叩くと、FY202603の▲2,113,770セルがオレンジ枠で囲まれ、",[19,298,299],{},"scrollIntoView({ block: 'center' })"," で画面中央に揃った。テストも17件追加して79/79 pass。",[24,302,304],{"id":303},"試行錯誤1-建物と備品が同じセルにハイライトする","試行錯誤1: 建物と備品が同じセルにハイライトする",[15,306,307],{},"ここでユーザーから指摘が入った。「建物の減価償却費（150万円）と備品の減価償却費（12万円）を別々にクリックしても、合計行の162万円にハイライトが飛んでしまう」。",[15,309,310],{},"スクリーンショットを2枚並べて見ると、確かに両方とも「合計」セルにオレンジ枠がついていた。",[312,313,315],"h3",{"id":314},"原因1-単独キーが先に拾われる","原因1: 単独キーが先に拾われる",[15,317,318,321,322,325,326,329],{},[19,319,320],{},"cfItemActions"," は ",[19,323,324],{},"'減価償却費'"," という単独キーで登録されていた。建物クリックでも備品クリックでも、このキーが最初にヒットしてしまい、複合キー（",[19,327,328],{},"'資産名:列名'"," 形式）にたどり着かない。",[15,331,332,333,336,337,340],{},"複合キーを後から追加して ",[19,334,335],{},"cfItemActions['減価償却費:建物']"," を登録しても、",[19,338,339],{},"CfWorksheetTable.handleCfItemClick"," 側の参照順が「単独キー → 複合キー」のままだったため、依然として単独キーが先に拾われていた。順序を逆転させて解決。",[42,342,344],{"className":44,"code":343,"language":46,"meta":47,"style":47},"// Before: 単独キーが先\nconst action = cfItemActions[cfItemName] ?? cfItemActions[`${cfItemName}:${bsAccount}`]\n\n// After: 複合キーが先\nconst action = cfItemActions[`${cfItemName}:${bsAccount}`] ?? cfItemActions[cfItemName]\n",[19,345,346,351,407,413,418],{"__ignoreMap":47},[51,347,348],{"class":53,"line":54},[51,349,350],{"class":57},"// Before: 単独キーが先\n",[51,352,353,356,359,362,365,368,371,374,377,379,381,384,387,389,392,395,397,400,402,404],{"class":53,"line":61},[51,354,355],{"class":68},"const ",[51,357,358],{"class":83},"action",[51,360,361],{"class":76}," =",[51,363,364],{"class":83}," cfItemActions",[51,366,367],{"class":76},"[",[51,369,370],{"class":83},"cfItemName",[51,372,373],{"class":76},"]",[51,375,376],{"class":68}," ?? ",[51,378,320],{"class":83},[51,380,367],{"class":76},[51,382,383],{"class":214},"`",[51,385,386],{"class":64},"${",[51,388,370],{"class":218},[51,390,391],{"class":64},"}",[51,393,394],{"class":218},":",[51,396,386],{"class":64},[51,398,399],{"class":218},"bsAccount",[51,401,391],{"class":64},[51,403,383],{"class":214},[51,405,406],{"class":76},"]\n",[51,408,409],{"class":53,"line":80},[51,410,412],{"emptyLinePlaceholder":411},true,"\n",[51,414,415],{"class":53,"line":116},[51,416,417],{"class":57},"// After: 複合キーが先\n",[51,419,420,422,424,426,428,430,432,434,436,438,440,442,444,446,448,450,452,454,456,458],{"class":53,"line":129},[51,421,355],{"class":68},[51,423,358],{"class":83},[51,425,361],{"class":76},[51,427,364],{"class":83},[51,429,367],{"class":76},[51,431,383],{"class":214},[51,433,386],{"class":64},[51,435,370],{"class":218},[51,437,391],{"class":64},[51,439,394],{"class":218},[51,441,386],{"class":64},[51,443,399],{"class":218},[51,445,391],{"class":64},[51,447,383],{"class":214},[51,449,373],{"class":76},[51,451,376],{"class":68},[51,453,320],{"class":83},[51,455,367],{"class":76},[51,457,370],{"class":83},[51,459,406],{"class":76},[312,461,463],{"id":462},"原因2-cfsourcetableから親科目を拾えていない","原因2: cfSourceTableから親科目を拾えていない",[15,465,466,469,470,473,474,477,478,481,482,485,486,489,490,493],{},[19,467,468],{},"buildV2CfItemActions"," の中で、",[19,471,472],{},"cfSourceTable"," の row だけを見て複合キーを生成していた。ところが row には ",[19,475,476],{},"減価償却累計額"," しか入っておらず、",[19,479,480],{},"建物"," ",[19,483,484],{},"備品"," のような親科目（",[19,487,488],{},"tangible"," 系）が抽出できない。",[19,491,492],{},"tangibleAccounts"," を別途引き、親科目名で複合キーを組み立てる方式に変更した。",[42,495,497],{"className":44,"code":496,"language":46,"meta":47,"style":47},"const tangibleAccounts = bsAccounts.filter(a => a.kind === 'tangible')\nfor (const asset of tangibleAccounts) {\n  cfItemActions[`減価償却費:${asset.name}`] = {\n    navigate: { type: 'investment', key: asset.name },\n    highlightAccountKey: `${asset.name}:減価償却`,  // 行+列の複合キー\n    highlightYearIndex: i,\n  }\n}\n",[19,498,499,543,566,596,630,660,673,679],{"__ignoreMap":47},[51,500,501,503,505,507,510,513,516,518,521,523,526,528,531,534,536,538,540],{"class":53,"line":54},[51,502,355],{"class":68},[51,504,492],{"class":83},[51,506,361],{"class":76},[51,508,509],{"class":83}," bsAccounts",[51,511,512],{"class":76},".",[51,514,515],{"class":177},"filter",[51,517,187],{"class":76},[51,519,520],{"class":83},"a",[51,522,196],{"class":76},[51,524,525],{"class":83}," a",[51,527,512],{"class":76},[51,529,530],{"class":83},"kind",[51,532,533],{"class":68}," === ",[51,535,222],{"class":214},[51,537,488],{"class":218},[51,539,222],{"class":214},[51,541,542],{"class":76},")\n",[51,544,545,548,551,553,556,559,562,564],{"class":53,"line":61},[51,546,547],{"class":64},"for",[51,549,550],{"class":76}," (",[51,552,355],{"class":68},[51,554,555],{"class":83},"asset",[51,557,558],{"class":68}," of",[51,560,561],{"class":83}," tangibleAccounts",[51,563,193],{"class":76},[51,565,77],{"class":76},[51,567,568,571,573,575,578,580,582,584,587,589,591,593],{"class":53,"line":80},[51,569,570],{"class":83},"  cfItemActions",[51,572,367],{"class":76},[51,574,383],{"class":214},[51,576,577],{"class":218},"減価償却費:",[51,579,386],{"class":64},[51,581,555],{"class":218},[51,583,512],{"class":76},[51,585,586],{"class":218},"name",[51,588,391],{"class":64},[51,590,383],{"class":214},[51,592,373],{"class":76},[51,594,595],{"class":76}," = {\n",[51,597,598,602,604,606,608,610,613,615,617,619,621,623,625,627],{"class":53,"line":116},[51,599,601],{"class":600},"sz8Xr","    navigate",[51,603,87],{"class":76},[51,605,90],{"class":600},[51,607,93],{"class":76},[51,609,222],{"class":214},[51,611,612],{"class":218},"investment",[51,614,222],{"class":214},[51,616,261],{"class":76},[51,618,102],{"class":600},[51,620,93],{"class":76},[51,622,555],{"class":83},[51,624,512],{"class":76},[51,626,586],{"class":83},[51,628,629],{"class":76}," },\n",[51,631,632,635,637,639,641,643,645,647,649,652,654,657],{"class":53,"line":129},[51,633,634],{"class":600},"    highlightAccountKey",[51,636,93],{"class":76},[51,638,383],{"class":214},[51,640,386],{"class":64},[51,642,555],{"class":218},[51,644,512],{"class":76},[51,646,586],{"class":218},[51,648,391],{"class":64},[51,650,651],{"class":218},":減価償却",[51,653,383],{"class":214},[51,655,656],{"class":76},",  ",[51,658,659],{"class":57},"// 行+列の複合キー\n",[51,661,662,665,667,670],{"class":53,"line":145},[51,663,664],{"class":600},"    highlightYearIndex",[51,666,93],{"class":76},[51,668,669],{"class":83},"i",[51,671,672],{"class":76},",\n",[51,674,676],{"class":53,"line":675},7,[51,677,678],{"class":76},"  }\n",[51,680,682],{"class":53,"line":681},8,[51,683,148],{"class":76},[15,685,686,687,689,690,693],{},"V2InvestmentSheet側では、",[19,688,328],{}," 形式の ",[19,691,692],{},"highlightKey"," をパースして「行のセル単位」でハイライト判定する。",[42,695,697],{"className":157,"code":696,"language":159,"meta":47,"style":47},"\u003Ctd :class=\"{\n  'cell-highlight': year.index === highlightYearIndex\n    && `${assetName}:${columnName}` === highlightAccountKey\n}\">\n",[19,698,699,717,741,772],{"__ignoreMap":47},[51,700,701,703,705,708,710,712,714],{"class":53,"line":54},[51,702,166],{"class":76},[51,704,291],{"class":64},[51,706,707],{"class":76}," :",[51,709,234],{"class":177},[51,711,181],{"class":76},[51,713,184],{"class":76},[51,715,716],{"class":76},"{\n",[51,718,719,722,724,726,728,730,732,735,738],{"class":53,"line":61},[51,720,721],{"class":214},"  '",[51,723,246],{"class":218},[51,725,222],{"class":214},[51,727,93],{"class":76},[51,729,258],{"class":83},[51,731,512],{"class":76},[51,733,734],{"class":83},"index",[51,736,737],{"class":68}," ===",[51,739,740],{"class":83}," highlightYearIndex\n",[51,742,743,746,749,751,754,756,758,760,763,765,767,769],{"class":53,"line":80},[51,744,745],{"class":68},"    &&",[51,747,748],{"class":214}," `",[51,750,386],{"class":64},[51,752,753],{"class":218},"assetName",[51,755,391],{"class":64},[51,757,394],{"class":218},[51,759,386],{"class":64},[51,761,762],{"class":218},"columnName",[51,764,391],{"class":64},[51,766,383],{"class":214},[51,768,737],{"class":68},[51,770,771],{"class":83}," highlightAccountKey\n",[51,773,774,776,778],{"class":53,"line":116},[51,775,391],{"class":76},[51,777,184],{"class":76},[51,779,277],{"class":76},[15,781,782,783,786],{},"ハードリロード後にURLが ",[19,784,785],{},"?ihl=建物:減価償却&ihy=1"," に変わり、建物行の▲1,500,000セルだけがオレンジ枠に。備品クリックも▲120,000のセル単独でハイライトされた。合計行（▲1,620,000）には何もつかない。テストは86/86 pass。",[24,788,790],{"id":789},"css-specificityの罠2回踏んだ","CSS specificityの罠（2回踏んだ）",[15,792,793],{},"CFWSとは別の話だが、同日に2回踏んだので記録する。",[312,795,797],{"id":796},"_1回目-文字色が緑にならない","1回目: 文字色が緑にならない",[15,799,800],{},"CF計算書の年次推移ビューで、navigate可能な項目（他シート参照リンク）の文字色が緑にならない。マウスオーバーした瞬間だけ緑に変わる。",[15,802,803,804,807,808,811],{},"DevToolsで確認すると、",[19,805,806],{},".cf-table td { color: #000000 }"," が ",[19,809,810],{},".navigable { color: #008000 }"," を上書きしていた。",[813,814,815,831],"table",{},[816,817,818],"thead",{},[819,820,821,825,828],"tr",{},[822,823,824],"th",{},"セレクタ",[822,826,827],{},"specificity",[822,829,830],{},"値",[832,833,834,849],"tbody",{},[819,835,836,841,844],{},[291,837,838],{},[19,839,840],{},".cf-table td",[291,842,843],{},"(0,1,1)",[291,845,846],{},[19,847,848],{},"color: #000000",[819,850,851,856,859],{},[291,852,853],{},[19,854,855],{},".navigable",[291,857,858],{},"(0,1,0)",[291,860,861],{},[19,862,863],{},"color: #008000",[15,865,866,867,870],{},"specificityが (0,1,1) > (0,1,0) なので黒が勝つ。",[19,868,869],{},":hover"," 擬似クラスがつくと specificity が上がるので、マウスオーバー時だけ緑に変わるという奇妙な挙動になっていた。",[15,872,873,874,877],{},"セレクタを ",[19,875,876],{},".cf-table td.navigable"," (0,1,2) に上げて修正した。",[312,879,881],{"id":880},"_2回目-数値が右寄せにならない","2回目: 数値が右寄せにならない",[15,883,884,885,807,888,891,892,895],{},"同じ犯人で、",[19,886,887],{},".cf-table td { text-align: left }",[19,889,890],{},".num { text-align: right }"," を上書き。",[19,893,894],{},".cf-table td.num"," に書き直して解決。",[15,897,898,899,902],{},"CSSの specificity は頭で覚えていても、実装中は油断する。",[19,900,901],{},".table td"," のような共通スタイルを書いた瞬間に、後付けの修飾クラスが効かなくなる。",[24,904,905],{"id":905},"全navigate型への横展開",[15,907,908,909,481,912,481,914,481,917,920,921,924],{},"モデルケースが固まったので、",[19,910,911],{},"finance",[19,913,612],{},[19,915,916],{},"equity",[19,918,919],{},"accounting"," の全navigate typeに同期 ref を ",[19,922,923],{},"[...slug].vue"," で実装した。",[926,927,928,935,942],"ul",{},[929,930,931,932,934],"li",{},"finance: 借入シートは1行集約のため、",[19,933,39],{}," だけ追加して列ハイライトと年度連動",[929,936,937,938,941],{},"equity: 専用 ref を作らず ",[19,939,940],{},"store.setYearIndex"," を直接呼んで簡略化",[929,943,944],{},"investment / accounting: モデルケースと同じ複合キー方式",[15,946,947],{},"借入金返済をクリックすれば finance/FY202703 にジャンプし、株式発行をクリックすれば equity の対応年度セルにジャンプする。",[24,949,950],{"id":950},"simplifyリファクタ",[15,952,953,954,957],{},"横展開後、",[19,955,956],{},"/simplify"," で共通化した。3つのレビューエージェントを並列で走らせ、重複度の高い問題から潰す。",[926,959,960,963,970,980],{},[929,961,962],{},"共通フォーマッタ（金額・パーセント表示）を抽出",[929,964,965,966,969],{},"複合キーの encode/decode を ",[19,967,968],{},"composables/useCellHighlight"," に集約",[929,971,972,973,261,976,979],{},"composables（",[19,974,975],{},"useCellScroll",[19,977,978],{},"useYearSync","）を新設し、5つのシート（V2AccountingSheet / V2InvestmentSheet / V2FinanceSheet / V2EquitySheet / V2CfStatementSheet）を共通化",[929,981,982,984,985,987],{},[19,983,468],{}," の signature を変更し、",[19,986,492],{}," を1回だけ計算",[15,989,990,991,994],{},"テスト 86 件 pass を維持。コミット ",[19,992,993],{},"2294e3d"," に15ファイル（+622 / -275行）を記録した。",[24,996,997],{"id":997},"ミラーカラムレイアウトへの統合",[15,999,1000],{},"夕方になって追加要望が出た。CFWSの年度切替が「FY202603 / FY202703 / FY202803 / FY202903 / FY203003」のボタン形式になっていた。これをミラーカラムレイアウトの第3カラム（年度選択列）に統合し、矢印キーで年度を移動できるようにしてほしい、とのこと。",[15,1002,1003,1006,1007,1010,1011,1014,1015,1017,1018,1021,1022,1025],{},[19,1004,1005],{},"globalIndex"," を更新して worksheet 専用の年度サブアイテムを追加し、",[19,1008,1009],{},"worksheetYearIndex"," で同期させた。",[19,1012,1013],{},"NavEntry"," 型にも ",[19,1016,1009],{}," を追加して ",[19,1019,1020],{},"currentNavIndex"," / ",[19,1023,1024],{},"goTo"," を更新。V2WorksheetSheet.vue から年度ボタンを削除して完了。",[15,1027,1028],{},"これで矢印キーだけで年度を切り替えられるようになり、CFWSの見た目もすっきりした。",[24,1030,1032],{"id":1031},"scheduled_taskslock-のコミット事故","scheduled_tasks.lock のコミット事故",[15,1034,1035,1036,1039,1040,1043,1044,1047],{},"途中で ",[19,1037,1038],{},".claude/scheduled_tasks.lock"," をコミットに含めかけた。",[19,1041,1042],{},"ScheduleWakeup"," で作られた古いロックファイルで、Claude Code 内部のもの。削除して ",[19,1045,1046],{},".gitignore"," に追加した。",[24,1049,1050],{"id":1050},"学びメモ",[926,1052,1053,1061,1067,1074],{},[929,1054,1055,1056,1060],{},"複合キーで参照する設計に切り替えるときは、",[1057,1058,1059],"strong",{},"呼び出し側の参照順も同時に逆転","させる。片方だけ直しても、結局単独キーが先に拾われて意味がない",[929,1062,1063,1064,1066],{},"CSS specificityは頭で計算する前にDevToolsの「Computed」タブを開く方が早い。",[19,1065,869],{}," で値が変わる現象が出たら specificity 戦争のサイン",[929,1068,1069,1070,1073],{},"同じ作業を5シートに展開するときは、最初の1つを終わらせてから簡素化するのではなく、",[1057,1071,1072],{},"横展開した直後に simplify をかける","と composables の境界が見つけやすい",[929,1075,1076],{},"HMRが効かない場面（ローン編集UIなど state を持つコンポーネント周辺）では、ハードリロードを早めに試す。「修正した気になっていた」事故が減る",[1078,1079,1080],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}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 .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 .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}",{"title":47,"searchDepth":61,"depth":61,"links":1082},[1083,1084,1088,1092,1093,1094,1095,1096],{"id":26,"depth":61,"text":27},{"id":303,"depth":61,"text":304,"children":1085},[1086,1087],{"id":314,"depth":80,"text":315},{"id":462,"depth":80,"text":463},{"id":789,"depth":61,"text":790,"children":1089},[1090,1091],{"id":796,"depth":80,"text":797},{"id":880,"depth":80,"text":881},{"id":905,"depth":61,"text":905},{"id":950,"depth":61,"text":950},{"id":997,"depth":61,"text":997},{"id":1031,"depth":61,"text":1032},{"id":1050,"depth":61,"text":1050},"dev","キャッシュフロー精算表の各セルをクリックすると、関連シートの対応セルがオレンジ枠でハイライトされて画面中央にスクロールする機能を実装した記録。建物と備品を別々にハイライトする複合キー設計、CSS specificityで色が出ない罠、全navigate型への横展開、simplifyリファクタまでの試行錯誤をまとめる","md",{},"/cfws-v2-cell-highlight","eurekapu-nuxt4",false,"2026-04-27T00:00:00.000Z",{"title":5,"description":1098},"2026-04/2026-04-27/cfws-v2-cell-highlight",[1108,1109,1110,1111,1112],"Vue","TypeScript","UI","ハイライト","CSS",null,"STlggXq3CoTzB-rZj6fd4ACKcI0sffQuu0CYg7jhJn0",[],"https://log.eurekapu.com/favicon.svg",1777329226902]