[{"data":1,"prerenderedAt":1330},["ShallowReactive",2],{"content-/financial-quiz-chart-alignment-lessons":3,"all-pages-for-dir":1308,"related-/financial-quiz-chart-alignment-lessons":1309,"og-image-/financial-quiz-chart-alignment-lessons":1329},{"id":4,"title":5,"body":6,"category":1293,"concepts":1293,"description":1294,"extension":1295,"meta":1296,"navigation":127,"ogImage":1293,"path":1297,"project_name":1293,"published":1298,"publishedAt":1299,"seo":1300,"source":1293,"stem":1301,"tags":1302,"todo":1293,"unpublished":1298,"updatedAt":1299,"__hash__":1307},"pages/2025-12/2025-12-22/financial-quiz-chart-alignment-lessons.md","チャートX軸整列の学び - 個別修正 vs 共通化リファクタリング",{"type":7,"value":8,"toc":1272},"minimark",[9,14,18,22,26,30,303,306,334,337,341,344,417,420,580,583,940,942,945,1023,1025,1028,1032,1035,1039,1042,1046,1049,1053,1065,1068,1070,1073,1230,1232,1235,1238,1268],[10,11,13],"h1",{"id":12},"チャートx軸整列の学び","チャートX軸整列の学び",[15,16,17],"h2",{"id":17},"問題",[19,20,21],"p",{},"右カラムの4つのチャート（利益率、EPS、SG&A比率、キャッシュフロー）で、X軸の年（2016〜LTM）が縦に揃っていなかった。",[15,23,25],{"id":24},"私claudeのアプローチ失敗","私（Claude）のアプローチ（失敗）",[27,28,29],"h3",{"id":29},"やったこと",[31,32,33,286,296],"ol",{},[34,35,36,37,41,42],"li",{},"各チャートファイルで",[38,39,40],"code",{},"padding","を手動で統一しようとした",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// ProfitMarginChart.vue\nconst padding = { top: 30, right: 20, bottom: 40, left: 90 }\n\n// EPSChart.vue\nconst padding = { top: 30, right: 20, bottom: 40, left: 90 }\n\n// ExpenseRatioChart.vue\nconst padding = { top: 30, right: 20, bottom: 40, left: 90 }\n\n// FCFChart.vue\nconst padding = { top: 30, right: 20, bottom: 40, left: 90 }\n","typescript","",[38,50,51,60,122,129,135,178,183,189,232,237,243],{"__ignoreMap":48},[52,53,56],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sxvE3","// ProfitMarginChart.vue\n",[52,61,63,67,70,74,77,81,84,88,91,94,96,99,101,104,106,109,111,114,116,119],{"class":54,"line":62},2,[52,64,66],{"class":65},"stQ0i","const ",[52,68,40],{"class":69},"s4oTP",[52,71,73],{"class":72},"shFtX"," =",[52,75,76],{"class":72}," { ",[52,78,80],{"class":79},"sz8Xr","top",[52,82,83],{"class":72},": ",[52,85,87],{"class":86},"sM54T","30",[52,89,90],{"class":72},", ",[52,92,93],{"class":79},"right",[52,95,83],{"class":72},[52,97,98],{"class":86},"20",[52,100,90],{"class":72},[52,102,103],{"class":79},"bottom",[52,105,83],{"class":72},[52,107,108],{"class":86},"40",[52,110,90],{"class":72},[52,112,113],{"class":79},"left",[52,115,83],{"class":72},[52,117,118],{"class":86},"90",[52,120,121],{"class":72}," }\n",[52,123,125],{"class":54,"line":124},3,[52,126,128],{"emptyLinePlaceholder":127},true,"\n",[52,130,132],{"class":54,"line":131},4,[52,133,134],{"class":58},"// EPSChart.vue\n",[52,136,138,140,142,144,146,148,150,152,154,156,158,160,162,164,166,168,170,172,174,176],{"class":54,"line":137},5,[52,139,66],{"class":65},[52,141,40],{"class":69},[52,143,73],{"class":72},[52,145,76],{"class":72},[52,147,80],{"class":79},[52,149,83],{"class":72},[52,151,87],{"class":86},[52,153,90],{"class":72},[52,155,93],{"class":79},[52,157,83],{"class":72},[52,159,98],{"class":86},[52,161,90],{"class":72},[52,163,103],{"class":79},[52,165,83],{"class":72},[52,167,108],{"class":86},[52,169,90],{"class":72},[52,171,113],{"class":79},[52,173,83],{"class":72},[52,175,118],{"class":86},[52,177,121],{"class":72},[52,179,181],{"class":54,"line":180},6,[52,182,128],{"emptyLinePlaceholder":127},[52,184,186],{"class":54,"line":185},7,[52,187,188],{"class":58},"// ExpenseRatioChart.vue\n",[52,190,192,194,196,198,200,202,204,206,208,210,212,214,216,218,220,222,224,226,228,230],{"class":54,"line":191},8,[52,193,66],{"class":65},[52,195,40],{"class":69},[52,197,73],{"class":72},[52,199,76],{"class":72},[52,201,80],{"class":79},[52,203,83],{"class":72},[52,205,87],{"class":86},[52,207,90],{"class":72},[52,209,93],{"class":79},[52,211,83],{"class":72},[52,213,98],{"class":86},[52,215,90],{"class":72},[52,217,103],{"class":79},[52,219,83],{"class":72},[52,221,108],{"class":86},[52,223,90],{"class":72},[52,225,113],{"class":79},[52,227,83],{"class":72},[52,229,118],{"class":86},[52,231,121],{"class":72},[52,233,235],{"class":54,"line":234},9,[52,236,128],{"emptyLinePlaceholder":127},[52,238,240],{"class":54,"line":239},10,[52,241,242],{"class":58},"// FCFChart.vue\n",[52,244,246,248,250,252,254,256,258,260,262,264,266,268,270,272,274,276,278,280,282,284],{"class":54,"line":245},11,[52,247,66],{"class":65},[52,249,40],{"class":69},[52,251,73],{"class":72},[52,253,76],{"class":72},[52,255,80],{"class":79},[52,257,83],{"class":72},[52,259,87],{"class":86},[52,261,90],{"class":72},[52,263,93],{"class":79},[52,265,83],{"class":72},[52,267,98],{"class":86},[52,269,90],{"class":72},[52,271,103],{"class":79},[52,273,83],{"class":72},[52,275,108],{"class":86},[52,277,90],{"class":72},[52,279,113],{"class":79},[52,281,83],{"class":72},[52,283,118],{"class":86},[52,285,121],{"class":72},[34,287,288,291,292,295],{},[38,289,290],{},"chartWidth","と",[38,293,294],{},"chartHeight","を手動で統一",[34,297,298,299,302],{},"FCFChartの",[38,300,301],{},"barMargin","を削除",[27,304,305],{"id":305},"問題点",[307,308,309,316,322,328],"ul",{},[34,310,311,315],{},[312,313,314],"strong",{},"4ファイルを個別に編集"," → 漏れや不整合が発生しやすい",[34,317,318,321],{},[312,319,320],{},"コピペ作業"," → 将来の変更時に全ファイル修正が必要",[34,323,324,327],{},[312,325,326],{},"根本原因を見落とし"," → なぜ揃わないのか構造的に理解していなかった",[34,329,330,333],{},[312,331,332],{},"何度も微調整"," → left: 50 → 70 → 90 と試行錯誤",[335,336],"hr",{},[15,338,340],{"id":339},"ユーザーのアプローチ成功","ユーザーのアプローチ（成功）",[27,342,343],{"id":343},"共通定数ファイルの作成",[43,345,347],{"className":45,"code":346,"language":47,"meta":48,"style":48},"// chartLayout.ts\nexport const CHART_WIDTH = 600\nexport const CHART_PADDING_X = { left: 90, right: 20 }\nexport const CHART_EDGE_INSET = 10  // X軸の左右余白\n",[38,348,349,354,371,400],{"__ignoreMap":48},[52,350,351],{"class":54,"line":55},[52,352,353],{"class":58},"// chartLayout.ts\n",[52,355,356,360,363,366,368],{"class":54,"line":62},[52,357,359],{"class":358},"sHkkW","export",[52,361,362],{"class":65}," const ",[52,364,365],{"class":69},"CHART_WIDTH",[52,367,73],{"class":72},[52,369,370],{"class":86}," 600\n",[52,372,373,375,377,380,382,384,386,388,390,392,394,396,398],{"class":54,"line":124},[52,374,359],{"class":358},[52,376,362],{"class":65},[52,378,379],{"class":69},"CHART_PADDING_X",[52,381,73],{"class":72},[52,383,76],{"class":72},[52,385,113],{"class":79},[52,387,83],{"class":72},[52,389,118],{"class":86},[52,391,90],{"class":72},[52,393,93],{"class":79},[52,395,83],{"class":72},[52,397,98],{"class":86},[52,399,121],{"class":72},[52,401,402,404,406,409,411,414],{"class":54,"line":131},[52,403,359],{"class":358},[52,405,362],{"class":65},[52,407,408],{"class":69},"CHART_EDGE_INSET",[52,410,73],{"class":72},[52,412,413],{"class":86}," 10",[52,415,416],{"class":58},"  // X軸の左右余白\n",[27,418,419],{"id":419},"共通composableの作成",[43,421,423],{"className":45,"code":422,"language":47,"meta":48,"style":48},"// composables/useChartDimensions.ts\nexport function useChartDimensions(baseWidth: number, baseHeight: number) {\n  const containerRef = ref\u003CHTMLElement | null>(null)\n  const width = ref(baseWidth)\n  const height = ref(baseHeight)\n\n  // コンテナサイズに応じてレスポンシブに調整\n  // ...\n\n  return { containerRef, width, height }\n}\n",[38,424,425,430,469,503,520,538,542,547,552,556,575],{"__ignoreMap":48},[52,426,427],{"class":54,"line":55},[52,428,429],{"class":58},"// composables/useChartDimensions.ts\n",[52,431,432,434,437,441,444,447,449,453,456,459,461,463,466],{"class":54,"line":62},[52,433,359],{"class":358},[52,435,436],{"class":65}," function",[52,438,440],{"class":439},"senZ8"," useChartDimensions",[52,442,443],{"class":72},"(",[52,445,446],{"class":69},"baseWidth",[52,448,83],{"class":72},[52,450,452],{"class":451},"sSkh3","number",[52,454,455],{"class":72},",",[52,457,458],{"class":69}," baseHeight",[52,460,83],{"class":72},[52,462,452],{"class":451},[52,464,465],{"class":72},")",[52,467,468],{"class":72}," {\n",[52,470,471,474,477,479,482,485,488,491,494,497,500],{"class":54,"line":124},[52,472,473],{"class":65},"  const ",[52,475,476],{"class":69},"containerRef",[52,478,73],{"class":72},[52,480,481],{"class":439}," ref",[52,483,484],{"class":72},"\u003C",[52,486,487],{"class":451},"HTMLElement",[52,489,490],{"class":72}," |",[52,492,493],{"class":65}," null",[52,495,496],{"class":72},">(",[52,498,499],{"class":65},"null",[52,501,502],{"class":72},")\n",[52,504,505,507,510,512,514,516,518],{"class":54,"line":131},[52,506,473],{"class":65},[52,508,509],{"class":69},"width",[52,511,73],{"class":72},[52,513,481],{"class":439},[52,515,443],{"class":72},[52,517,446],{"class":69},[52,519,502],{"class":72},[52,521,522,524,527,529,531,533,536],{"class":54,"line":137},[52,523,473],{"class":65},[52,525,526],{"class":69},"height",[52,528,73],{"class":72},[52,530,481],{"class":439},[52,532,443],{"class":72},[52,534,535],{"class":69},"baseHeight",[52,537,502],{"class":72},[52,539,540],{"class":54,"line":180},[52,541,128],{"emptyLinePlaceholder":127},[52,543,544],{"class":54,"line":185},[52,545,546],{"class":58},"  // コンテナサイズに応じてレスポンシブに調整\n",[52,548,549],{"class":54,"line":191},[52,550,551],{"class":58},"  // ...\n",[52,553,554],{"class":54,"line":234},[52,555,128],{"emptyLinePlaceholder":127},[52,557,558,561,563,565,567,569,571,573],{"class":54,"line":239},[52,559,560],{"class":358},"  return",[52,562,76],{"class":72},[52,564,476],{"class":69},[52,566,90],{"class":72},[52,568,509],{"class":69},[52,570,90],{"class":72},[52,572,526],{"class":69},[52,574,121],{"class":72},[52,576,577],{"class":54,"line":245},[52,578,579],{"class":72},"}\n",[27,581,582],{"id":582},"各チャートでimportして使用",[43,584,586],{"className":45,"code":585,"language":47,"meta":48,"style":48},"// ProfitMarginChart.vue\nimport { CHART_EDGE_INSET, CHART_PADDING_X, CHART_WIDTH } from './chartLayout'\nimport { useChartDimensions } from './composables/useChartDimensions'\n\nconst { containerRef, width: chartWidth, height: chartHeight } = useChartDimensions(CHART_WIDTH, 200)\nconst padding = { top: 30, right: CHART_PADDING_X.right, bottom: 40, left: CHART_PADDING_X.left }\n\nconst getX = (index: number): number => {\n  const count = props.marginData.length\n  const innerWidth = Math.max(0, plotWidth.value - CHART_EDGE_INSET * 2)\n  if (count \u003C= 1) return padding.left + CHART_EDGE_INSET + innerWidth / 2\n  return padding.left + CHART_EDGE_INSET + (index / (count - 1)) * innerWidth\n}\n",[38,587,588,592,630,649,653,701,752,756,786,808,853,895,935],{"__ignoreMap":48},[52,589,590],{"class":54,"line":55},[52,591,59],{"class":58},[52,593,594,597,600,603,605,608,610,613,616,619,623,627],{"class":54,"line":62},[52,595,596],{"class":358},"import",[52,598,599],{"class":72}," {",[52,601,602],{"class":69}," CHART_EDGE_INSET",[52,604,455],{"class":72},[52,606,607],{"class":69}," CHART_PADDING_X",[52,609,455],{"class":72},[52,611,612],{"class":69}," CHART_WIDTH",[52,614,615],{"class":72}," }",[52,617,618],{"class":358}," from",[52,620,622],{"class":621},"sMJiu"," '",[52,624,626],{"class":625},"sdGka","./chartLayout",[52,628,629],{"class":621},"'\n",[52,631,632,634,636,638,640,642,644,647],{"class":54,"line":124},[52,633,596],{"class":358},[52,635,599],{"class":72},[52,637,440],{"class":69},[52,639,615],{"class":72},[52,641,618],{"class":358},[52,643,622],{"class":621},[52,645,646],{"class":625},"./composables/useChartDimensions",[52,648,629],{"class":621},[52,650,651],{"class":54,"line":131},[52,652,128],{"emptyLinePlaceholder":127},[52,654,655,657,660,663,665,668,671,674,676,679,681,684,686,688,690,692,694,696,699],{"class":54,"line":137},[52,656,66],{"class":65},[52,658,659],{"class":72},"{",[52,661,662],{"class":69}," containerRef",[52,664,455],{"class":72},[52,666,667],{"class":69}," width",[52,669,670],{"class":72},":",[52,672,673],{"class":69}," chartWidth",[52,675,455],{"class":72},[52,677,678],{"class":69}," height",[52,680,670],{"class":72},[52,682,683],{"class":69}," chartHeight",[52,685,615],{"class":72},[52,687,73],{"class":72},[52,689,440],{"class":439},[52,691,443],{"class":72},[52,693,365],{"class":69},[52,695,455],{"class":72},[52,697,698],{"class":86}," 200",[52,700,502],{"class":72},[52,702,703,705,707,709,711,713,715,717,719,721,723,725,728,730,732,734,736,738,740,742,744,746,748,750],{"class":54,"line":180},[52,704,66],{"class":65},[52,706,40],{"class":69},[52,708,73],{"class":72},[52,710,76],{"class":72},[52,712,80],{"class":79},[52,714,83],{"class":72},[52,716,87],{"class":86},[52,718,90],{"class":72},[52,720,93],{"class":79},[52,722,83],{"class":72},[52,724,379],{"class":69},[52,726,727],{"class":72},".",[52,729,93],{"class":69},[52,731,90],{"class":72},[52,733,103],{"class":79},[52,735,83],{"class":72},[52,737,108],{"class":86},[52,739,90],{"class":72},[52,741,113],{"class":79},[52,743,83],{"class":72},[52,745,379],{"class":69},[52,747,727],{"class":72},[52,749,113],{"class":69},[52,751,121],{"class":72},[52,753,754],{"class":54,"line":185},[52,755,128],{"emptyLinePlaceholder":127},[52,757,758,760,763,765,768,771,773,775,778,781,784],{"class":54,"line":191},[52,759,66],{"class":65},[52,761,762],{"class":439},"getX",[52,764,73],{"class":72},[52,766,767],{"class":72}," (",[52,769,770],{"class":69},"index",[52,772,83],{"class":72},[52,774,452],{"class":451},[52,776,777],{"class":72},"):",[52,779,780],{"class":451}," number",[52,782,783],{"class":72}," =>",[52,785,468],{"class":72},[52,787,788,790,793,795,798,800,803,805],{"class":54,"line":234},[52,789,473],{"class":65},[52,791,792],{"class":69},"count",[52,794,73],{"class":72},[52,796,797],{"class":69}," props",[52,799,727],{"class":72},[52,801,802],{"class":69},"marginData",[52,804,727],{"class":72},[52,806,807],{"class":79},"length\n",[52,809,810,812,815,817,820,822,825,827,830,832,835,837,840,843,845,848,851],{"class":54,"line":239},[52,811,473],{"class":65},[52,813,814],{"class":69},"innerWidth",[52,816,73],{"class":72},[52,818,819],{"class":69}," Math",[52,821,727],{"class":72},[52,823,824],{"class":439},"max",[52,826,443],{"class":72},[52,828,829],{"class":86},"0",[52,831,455],{"class":72},[52,833,834],{"class":69}," plotWidth",[52,836,727],{"class":72},[52,838,839],{"class":69},"value",[52,841,842],{"class":65}," - ",[52,844,408],{"class":69},[52,846,847],{"class":65}," * ",[52,849,850],{"class":86},"2",[52,852,502],{"class":72},[52,854,855,858,860,862,865,868,870,873,876,878,880,883,885,887,889,892],{"class":54,"line":245},[52,856,857],{"class":358},"  if",[52,859,767],{"class":72},[52,861,792],{"class":69},[52,863,864],{"class":72}," \u003C=",[52,866,867],{"class":86}," 1",[52,869,465],{"class":72},[52,871,872],{"class":358}," return",[52,874,875],{"class":69}," padding",[52,877,727],{"class":72},[52,879,113],{"class":69},[52,881,882],{"class":65}," + ",[52,884,408],{"class":69},[52,886,882],{"class":65},[52,888,814],{"class":69},[52,890,891],{"class":65}," / ",[52,893,894],{"class":86},"2\n",[52,896,898,900,902,904,906,908,910,912,914,916,918,920,922,924,927,930,932],{"class":54,"line":897},12,[52,899,560],{"class":358},[52,901,875],{"class":69},[52,903,727],{"class":72},[52,905,113],{"class":69},[52,907,882],{"class":65},[52,909,408],{"class":69},[52,911,882],{"class":65},[52,913,443],{"class":72},[52,915,770],{"class":69},[52,917,891],{"class":65},[52,919,443],{"class":72},[52,921,792],{"class":69},[52,923,842],{"class":65},[52,925,926],{"class":86},"1",[52,928,929],{"class":72},"))",[52,931,847],{"class":65},[52,933,934],{"class":69},"innerWidth\n",[52,936,938],{"class":54,"line":937},13,[52,939,579],{"class":72},[335,941],{},[15,943,944],{"id":944},"比較",[946,947,948,964],"table",{},[949,950,951],"thead",{},[952,953,954,958,961],"tr",{},[955,956,957],"th",{},"観点",[955,959,960],{},"私のアプローチ",[955,962,963],{},"ユーザーのアプローチ",[965,966,967,979,990,1001,1012],"tbody",{},[952,968,969,973,976],{},[970,971,972],"td",{},"変更箇所",[970,974,975],{},"4ファイル × 複数行",[970,977,978],{},"1共通ファイル + 各ファイルのimport",[952,980,981,984,987],{},[970,982,983],{},"将来の変更",[970,985,986],{},"4ファイル全て修正",[970,988,989],{},"共通ファイル1箇所のみ",[952,991,992,995,998],{},[970,993,994],{},"整合性保証",[970,996,997],{},"手動確認が必要",[970,999,1000],{},"コードで保証",[952,1002,1003,1006,1009],{},[970,1004,1005],{},"getX関数",[970,1007,1008],{},"各ファイルで別実装",[970,1010,1011],{},"共通ロジック（CHART_EDGE_INSETで統一）",[952,1013,1014,1017,1020],{},[970,1015,1016],{},"レスポンシブ対応",[970,1018,1019],{},"固定値のみ",[970,1021,1022],{},"composableで動的対応可能",[335,1024],{},[15,1026,1027],{"id":1027},"教訓",[27,1029,1031],{"id":1030},"_1-同じ値を複数箇所に書くは設計の失敗","1. 「同じ値を複数箇所に書く」は設計の失敗",[19,1033,1034],{},"同じ定数（padding、width等）を複数ファイルで使う場合は、共通ファイルにまとめるべき。",[27,1036,1038],{"id":1037},"_2-試行錯誤の前に構造を理解する","2. 試行錯誤の前に構造を理解する",[19,1040,1041],{},"「left: 50で揃わない → 70に → まだ揃わない → 90に」という試行錯誤は、根本原因（FCFChartのbarMargin等）を見落としている証拠。",[27,1043,1045],{"id":1044},"_3-composableパターンの活用","3. composableパターンの活用",[19,1047,1048],{},"Vue 3のcomposableは、チャートのサイズ計算などの共通ロジックをカプセル化するのに最適。",[27,1050,1052],{"id":1051},"_4-定数の命名で意図を明確に","4. 定数の命名で意図を明確に",[307,1054,1055,1060],{},[34,1056,1057,1059],{},[38,1058,379],{}," → X方向のパディング",[34,1061,1062,1064],{},[38,1063,408],{}," → データポイントの左右余白",[19,1066,1067],{},"命名で意図が明確になり、誤用を防げる。",[335,1069],{},[15,1071,1072],{"id":1072},"適用後の結果",[43,1074,1078],{"className":1075,"code":1076,"language":1077,"meta":48,"style":48},"language-javascript shiki shiki-themes vitesse-light vitesse-light","// 全チャートで\"2016\"のx座標が一致\n[\n  {\"chart\":0,\"year2016_x\":\"814.09\"},\n  {\"chart\":1,\"year2016_x\":\"814.09\"},\n  {\"chart\":2,\"year2016_x\":\"814.09\"},\n  {\"chart\":3,\"year2016_x\":\"814.09\"}\n]\n","javascript",[38,1079,1080,1085,1090,1128,1160,1192,1225],{"__ignoreMap":48},[52,1081,1082],{"class":54,"line":55},[52,1083,1084],{"class":58},"// 全チャートで\"2016\"のx座標が一致\n",[52,1086,1087],{"class":54,"line":62},[52,1088,1089],{"class":72},"[\n",[52,1091,1092,1095,1098,1101,1103,1105,1107,1109,1111,1114,1116,1118,1120,1123,1125],{"class":54,"line":124},[52,1093,1094],{"class":72},"  {",[52,1096,1097],{"class":621},"\"",[52,1099,1100],{"class":625},"chart",[52,1102,1097],{"class":621},[52,1104,670],{"class":72},[52,1106,829],{"class":86},[52,1108,455],{"class":72},[52,1110,1097],{"class":621},[52,1112,1113],{"class":625},"year2016_x",[52,1115,1097],{"class":621},[52,1117,670],{"class":72},[52,1119,1097],{"class":621},[52,1121,1122],{"class":625},"814.09",[52,1124,1097],{"class":621},[52,1126,1127],{"class":72},"},\n",[52,1129,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158],{"class":54,"line":131},[52,1131,1094],{"class":72},[52,1133,1097],{"class":621},[52,1135,1100],{"class":625},[52,1137,1097],{"class":621},[52,1139,670],{"class":72},[52,1141,926],{"class":86},[52,1143,455],{"class":72},[52,1145,1097],{"class":621},[52,1147,1113],{"class":625},[52,1149,1097],{"class":621},[52,1151,670],{"class":72},[52,1153,1097],{"class":621},[52,1155,1122],{"class":625},[52,1157,1097],{"class":621},[52,1159,1127],{"class":72},[52,1161,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190],{"class":54,"line":137},[52,1163,1094],{"class":72},[52,1165,1097],{"class":621},[52,1167,1100],{"class":625},[52,1169,1097],{"class":621},[52,1171,670],{"class":72},[52,1173,850],{"class":86},[52,1175,455],{"class":72},[52,1177,1097],{"class":621},[52,1179,1113],{"class":625},[52,1181,1097],{"class":621},[52,1183,670],{"class":72},[52,1185,1097],{"class":621},[52,1187,1122],{"class":625},[52,1189,1097],{"class":621},[52,1191,1127],{"class":72},[52,1193,1194,1196,1198,1200,1202,1204,1207,1209,1211,1213,1215,1217,1219,1221,1223],{"class":54,"line":180},[52,1195,1094],{"class":72},[52,1197,1097],{"class":621},[52,1199,1100],{"class":625},[52,1201,1097],{"class":621},[52,1203,670],{"class":72},[52,1205,1206],{"class":86},"3",[52,1208,455],{"class":72},[52,1210,1097],{"class":621},[52,1212,1113],{"class":625},[52,1214,1097],{"class":621},[52,1216,670],{"class":72},[52,1218,1097],{"class":621},[52,1220,1122],{"class":625},[52,1222,1097],{"class":621},[52,1224,579],{"class":72},[52,1226,1227],{"class":54,"line":185},[52,1228,1229],{"class":72},"]\n",[335,1231],{},[15,1233,1234],{"id":1234},"次回への適用",[19,1236,1237],{},"チャートやUIコンポーネントで「複数ファイルで同じ値を使う」場面では：",[31,1239,1240,1250,1258,1263],{},[34,1241,1242,1245,1246,1249],{},[312,1243,1244],{},"まず共通定数ファイルを作る","（",[38,1247,1248],{},"chartLayout.ts","等）",[34,1251,1252,1245,1255,1249],{},[312,1253,1254],{},"ロジックが共通なら composable化",[38,1256,1257],{},"useChartDimensions",[34,1259,1260],{},[312,1261,1262],{},"各コンポーネントはimportして使う",[34,1264,1265],{},[312,1266,1267],{},"手動での値コピペは避ける",[1269,1270,1271],"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 .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}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 .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 .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}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}",{"title":48,"searchDepth":62,"depth":62,"links":1273},[1274,1275,1279,1284,1285,1291,1292],{"id":17,"depth":62,"text":17},{"id":24,"depth":62,"text":25,"children":1276},[1277,1278],{"id":29,"depth":124,"text":29},{"id":305,"depth":124,"text":305},{"id":339,"depth":62,"text":340,"children":1280},[1281,1282,1283],{"id":343,"depth":124,"text":343},{"id":419,"depth":124,"text":419},{"id":582,"depth":124,"text":582},{"id":944,"depth":62,"text":944},{"id":1027,"depth":62,"text":1027,"children":1286},[1287,1288,1289,1290],{"id":1030,"depth":124,"text":1031},{"id":1037,"depth":124,"text":1038},{"id":1044,"depth":124,"text":1045},{"id":1051,"depth":124,"text":1052},{"id":1072,"depth":62,"text":1072},{"id":1234,"depth":62,"text":1234},null,"4つのチャートのX軸を揃える作業で得た教訓。個別ファイルの手動修正ではなく、共通定数とcomposableによるリファクタリングが正解だった。","md",{},"/financial-quiz-chart-alignment-lessons",false,"2025-12-22T00:00:00.000Z",{"title":5,"description":1294},"2025-12/2025-12-22/financial-quiz-chart-alignment-lessons",[1303,1304,1305,1100,1306],"refactoring","debugging","lessons-learned","financial-quiz","ZIaJwY-f7pja52Y7tLZI5d5kC5HW3O066b3HLBY4lJw",[],[1310,1313,1317,1321,1325],{"title":1311,"path":1312,"publishedAt":1299},"financial-quizディレクトリ構造の整理計画","/financial-quiz-directory-structure",{"title":1314,"path":1315,"publishedAt":1316},"NVIDIA EPS予測ページ リファクタリング計画","/nvidia-eps-forecast-refactoring-plan","2025-12-18T00:00:00.000Z",{"title":1318,"path":1319,"publishedAt":1320},"決算ビートモニタリングをMD→Vueに移行、右軸折れ線と16銘柄のEPSガイダンス取得まで1日で巻いた","/beat-monitoring-vue-migration","2026-05-18T00:00:00.000Z",{"title":1322,"path":1323,"publishedAt":1324},"eurekapu-nuxt4 全77ページ2カラム化 + Part 2 投資判断クイズ + 教科書 CH8-12 実装","/eurekapu-2col-and-part2-textbook","2026-05-15T00:00:00.000Z",{"title":1326,"path":1327,"publishedAt":1328},"CF精算表Excel自動生成のデバッグ記録 -- SUMIFS不一致・符号規則・3600行リファクタリング計画","/cfws-excel-automation-debug","2026-04-14T00:00:00.000Z","https://log.eurekapu.com/og/blog/financial-quiz-chart-alignment-lessons.png?v=2025-12-22T00%3A00%3A00.000Z&title=%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88X%E8%BB%B8%E6%95%B4%E5%88%97%E3%81%AE%E5%AD%A6%E3%81%B3%20-%20%E5%80%8B%E5%88%A5%E4%BF%AE%E6%AD%A3%20vs%20%E5%85%B1%E9%80%9A%E5%8C%96%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&author=Kei%20Komatsu&sig=1ed9b310bca70ef5",1785654979280]