[{"data":1,"prerenderedAt":1943},["ShallowReactive",2],{"content-/inline-data-chart-design":3,"all-pages-for-dir":1920,"related-/inline-data-chart-design":1921,"og-image-/inline-data-chart-design":1942},{"id":4,"title":5,"body":6,"category":1906,"concepts":1906,"description":1907,"extension":1908,"meta":1909,"navigation":117,"ogImage":1906,"path":1910,"project_name":1906,"published":1911,"publishedAt":1912,"seo":1913,"source":1906,"stem":1914,"tags":1915,"todo":1906,"unpublished":1911,"updatedAt":1912,"__hash__":1919},"pages/2025-12/2025-12-10/inline-data-chart-design.md","インラインデータ形式のチャートコンポーネント設計",{"type":7,"value":8,"toc":1886},"minimark",[9,12,17,21,34,194,200,213,216,223,393,396,400,405,416,565,569,572,626,630,633,850,853,867,870,874,879,949,954,1199,1203,1775,1779,1790,1794,1797,1801,1804,1812,1815,1859,1862,1882],[10,11,5],"h1",{"id":5},[13,14,16],"h2",{"id":15},"背景目的","背景・目的",[18,19,20],"h3",{"id":20},"課題",[22,23,24,25,29,30,33],"p",{},"従来の実装では、データがスクリプト内の変数（",[26,27,28],"code",{},"epsDataMap",", ",[26,31,32],{},"sgaDataMap","など）に定義されており、テンプレートのコンポーネントは変数名を参照していた。",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Cscript setup>\n// データはここに定義（テンプレートから物理的に離れている）\nconst microsoftExpenseRatioData = computed(() => { ... })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- 変数名を参照 -->\n  \u003CExpenseRatioChart\n    :ratio-data=\"microsoftExpenseRatioData\"\n    :current-period-index=\"microsoftPeriodIndex\"\n  />\n\u003C/template>\n","vue","",[26,42,43,63,70,102,112,119,129,135,144,164,179,185],{"__ignoreMap":40},[44,45,48,52,56,60],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"shFtX","\u003C",[44,53,55],{"class":54},"sHkkW","script",[44,57,59],{"class":58},"s4oTP"," setup",[44,61,62],{"class":50},">\n",[44,64,66],{"class":46,"line":65},2,[44,67,69],{"class":68},"sxvE3","// データはここに定義（テンプレートから物理的に離れている）\n",[44,71,73,77,80,83,87,90,93,96,99],{"class":46,"line":72},3,[44,74,76],{"class":75},"stQ0i","const",[44,78,79],{"class":58}," microsoftExpenseRatioData",[44,81,82],{"class":50}," =",[44,84,86],{"class":85},"senZ8"," computed",[44,88,89],{"class":50},"(()",[44,91,92],{"class":50}," =>",[44,94,95],{"class":50}," {",[44,97,98],{"class":50}," ...",[44,100,101],{"class":50}," })\n",[44,103,105,108,110],{"class":46,"line":104},4,[44,106,107],{"class":50},"\u003C/",[44,109,55],{"class":54},[44,111,62],{"class":50},[44,113,115],{"class":46,"line":114},5,[44,116,118],{"emptyLinePlaceholder":117},true,"\n",[44,120,122,124,127],{"class":46,"line":121},6,[44,123,51],{"class":50},[44,125,126],{"class":54},"template",[44,128,62],{"class":50},[44,130,132],{"class":46,"line":131},7,[44,133,134],{"class":68},"  \u003C!-- 変数名を参照 -->\n",[44,136,138,141],{"class":46,"line":137},8,[44,139,140],{"class":50},"  \u003C",[44,142,143],{"class":54},"ExpenseRatioChart\n",[44,145,147,150,153,157,161],{"class":46,"line":146},9,[44,148,149],{"class":58},"    :ratio-data",[44,151,152],{"class":50},"=",[44,154,156],{"class":155},"sMJiu","\"",[44,158,160],{"class":159},"sdGka","microsoftExpenseRatioData",[44,162,163],{"class":155},"\"\n",[44,165,167,170,172,174,177],{"class":46,"line":166},10,[44,168,169],{"class":58},"    :current-period-index",[44,171,152],{"class":50},[44,173,156],{"class":155},[44,175,176],{"class":159},"microsoftPeriodIndex",[44,178,163],{"class":155},[44,180,182],{"class":46,"line":181},11,[44,183,184],{"class":50},"  />\n",[44,186,188,190,192],{"class":46,"line":187},12,[44,189,107],{"class":50},[44,191,126],{"class":54},[44,193,62],{"class":50},[22,195,196],{},[197,198,199],"strong",{},"問題点:",[201,202,203,207,210],"ul",{},[204,205,206],"li",{},"データと表示が物理的に離れている",[204,208,209],{},"何を渡したら何が表示されるか分かりにくい",[204,211,212],{},"別の会社のデータを追加するとき、コピペしづらい",[18,214,215],{"id":215},"目標",[22,217,218,219,222],{},"AIにデータを渡して「このフォーマットに変換して」と言えば、",[197,220,221],{},"そのままコピペで動くコード","が生成される形式にしたい。",[35,224,226],{"className":37,"code":225,"language":39,"meta":40,"style":40},"\u003C!-- AIが生成したコードをそのままペーストできる -->\n\u003CExpenseRatioChart\n  :config=\"{\n    financials: [\n      { label: '2015', revenue: 93580, sga: 20324, rd: 12046 },\n      { label: '2016', revenue: 91154, sga: 19198, rd: 11988 },\n      ...\n    ],\n    currentPeriodIndex: microsoftPeriodIndex\n  }\"\n/>\n",[26,227,228,233,239,254,263,316,360,365,370,380,387],{"__ignoreMap":40},[44,229,230],{"class":46,"line":47},[44,231,232],{"class":68},"\u003C!-- AIが生成したコードをそのままペーストできる -->\n",[44,234,235,237],{"class":46,"line":65},[44,236,51],{"class":50},[44,238,143],{"class":54},[44,240,241,244,247,249,251],{"class":46,"line":72},[44,242,243],{"class":50},"  :",[44,245,246],{"class":85},"config",[44,248,152],{"class":50},[44,250,156],{"class":50},[44,252,253],{"class":50},"{\n",[44,255,256,260],{"class":46,"line":104},[44,257,259],{"class":258},"sz8Xr","    financials",[44,261,262],{"class":50},": [\n",[44,264,265,268,271,274,277,280,282,284,287,289,293,295,298,300,303,305,308,310,313],{"class":46,"line":114},[44,266,267],{"class":50},"      { ",[44,269,270],{"class":258},"label",[44,272,273],{"class":50},": ",[44,275,276],{"class":155},"'",[44,278,279],{"class":159},"2015",[44,281,276],{"class":155},[44,283,29],{"class":50},[44,285,286],{"class":258},"revenue",[44,288,273],{"class":50},[44,290,292],{"class":291},"sM54T","93580",[44,294,29],{"class":50},[44,296,297],{"class":258},"sga",[44,299,273],{"class":50},[44,301,302],{"class":291},"20324",[44,304,29],{"class":50},[44,306,307],{"class":258},"rd",[44,309,273],{"class":50},[44,311,312],{"class":291},"12046",[44,314,315],{"class":50}," },\n",[44,317,318,320,322,324,326,329,331,333,335,337,340,342,344,346,349,351,353,355,358],{"class":46,"line":121},[44,319,267],{"class":50},[44,321,270],{"class":258},[44,323,273],{"class":50},[44,325,276],{"class":155},[44,327,328],{"class":159},"2016",[44,330,276],{"class":155},[44,332,29],{"class":50},[44,334,286],{"class":258},[44,336,273],{"class":50},[44,338,339],{"class":291},"91154",[44,341,29],{"class":50},[44,343,297],{"class":258},[44,345,273],{"class":50},[44,347,348],{"class":291},"19198",[44,350,29],{"class":50},[44,352,307],{"class":258},[44,354,273],{"class":50},[44,356,357],{"class":291},"11988",[44,359,315],{"class":50},[44,361,362],{"class":46,"line":131},[44,363,364],{"class":50},"      ...\n",[44,366,367],{"class":46,"line":137},[44,368,369],{"class":50},"    ],\n",[44,371,372,375,377],{"class":46,"line":146},[44,373,374],{"class":258},"    currentPeriodIndex",[44,376,273],{"class":50},[44,378,379],{"class":58},"microsoftPeriodIndex\n",[44,381,382,385],{"class":46,"line":166},[44,383,384],{"class":50},"  }",[44,386,163],{"class":50},[44,388,389],{"class":46,"line":181},[44,390,392],{"class":391},"sG7-3","/>\n",[13,394,395],{"id":395},"設計方針",[18,397,399],{"id":398},"_1-元データを渡し比率はコンポーネント内で計算","1. 元データを渡し、比率はコンポーネント内で計算",[22,401,402],{},[197,403,404],{},"理由:",[201,406,407,410,413],{},[204,408,409],{},"Koyfinなどから取得した元データをそのまま渡せる",[204,411,412],{},"AIに「比率を計算して」という追加の指示が不要",[204,414,415],{},"計算ロジックがコンポーネントに集約される",[35,417,421],{"className":418,"code":419,"language":420,"meta":40,"style":40},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// コンポーネント内で比率を計算\nconst ratioData = computed(() =>\n  props.config.financials.map(d => ({\n    label: d.label,\n    sgaRatio: (d.sga / d.revenue) * 100,\n    rdRatio: (d.rd / d.revenue) * 100\n  }))\n)\n","typescript",[26,422,423,428,445,476,492,527,555,560],{"__ignoreMap":40},[44,424,425],{"class":46,"line":47},[44,426,427],{"class":68},"// コンポーネント内で比率を計算\n",[44,429,430,433,436,438,440,442],{"class":46,"line":65},[44,431,432],{"class":75},"const ",[44,434,435],{"class":58},"ratioData",[44,437,82],{"class":50},[44,439,86],{"class":85},[44,441,89],{"class":50},[44,443,444],{"class":50}," =>\n",[44,446,447,450,453,455,457,460,462,465,468,471,473],{"class":46,"line":72},[44,448,449],{"class":58},"  props",[44,451,452],{"class":50},".",[44,454,246],{"class":58},[44,456,452],{"class":50},[44,458,459],{"class":58},"financials",[44,461,452],{"class":50},[44,463,464],{"class":85},"map",[44,466,467],{"class":50},"(",[44,469,470],{"class":58},"d",[44,472,92],{"class":50},[44,474,475],{"class":50}," ({\n",[44,477,478,481,483,485,487,489],{"class":46,"line":104},[44,479,480],{"class":258},"    label",[44,482,273],{"class":50},[44,484,470],{"class":58},[44,486,452],{"class":50},[44,488,270],{"class":58},[44,490,491],{"class":50},",\n",[44,493,494,497,500,502,504,506,509,512,514,516,519,522,525],{"class":46,"line":114},[44,495,496],{"class":258},"    sgaRatio",[44,498,499],{"class":50},": (",[44,501,470],{"class":58},[44,503,452],{"class":50},[44,505,297],{"class":58},[44,507,508],{"class":75}," /",[44,510,511],{"class":58}," d",[44,513,452],{"class":50},[44,515,286],{"class":58},[44,517,518],{"class":50},") ",[44,520,521],{"class":75},"*",[44,523,524],{"class":291}," 100",[44,526,491],{"class":50},[44,528,529,532,534,536,538,540,542,544,546,548,550,552],{"class":46,"line":121},[44,530,531],{"class":258},"    rdRatio",[44,533,499],{"class":50},[44,535,470],{"class":58},[44,537,452],{"class":50},[44,539,307],{"class":58},[44,541,508],{"class":75},[44,543,511],{"class":58},[44,545,452],{"class":50},[44,547,286],{"class":58},[44,549,518],{"class":50},[44,551,521],{"class":75},[44,553,554],{"class":291}," 100\n",[44,556,557],{"class":46,"line":131},[44,558,559],{"class":50},"  }))\n",[44,561,562],{"class":46,"line":137},[44,563,564],{"class":50},")\n",[18,566,568],{"id":567},"_2-currentperiodindex-は変数参照を許容","2. currentPeriodIndex は変数参照を許容",[22,570,571],{},"アニメーションで動的に変わる値なので、これだけは変数参照が必要。",[35,573,575],{"className":37,"code":574,"language":39,"meta":40,"style":40},"\u003CExpenseRatioChart\n  :config=\"{\n    financials: [...],  // リテラルデータ\n    currentPeriodIndex: microsoftPeriodIndex  // 変数参照（動的）\n  }\"\n/>\n",[26,576,577,583,595,605,616,622],{"__ignoreMap":40},[44,578,579,581],{"class":46,"line":47},[44,580,51],{"class":50},[44,582,143],{"class":54},[44,584,585,587,589,591,593],{"class":46,"line":65},[44,586,243],{"class":50},[44,588,246],{"class":85},[44,590,152],{"class":50},[44,592,156],{"class":50},[44,594,253],{"class":50},[44,596,597,599,602],{"class":46,"line":72},[44,598,259],{"class":258},[44,600,601],{"class":50},": [...],  ",[44,603,604],{"class":68},"// リテラルデータ\n",[44,606,607,609,611,613],{"class":46,"line":104},[44,608,374],{"class":258},[44,610,273],{"class":50},[44,612,176],{"class":58},[44,614,615],{"class":68},"  // 変数参照（動的）\n",[44,617,618,620],{"class":46,"line":114},[44,619,384],{"class":50},[44,621,163],{"class":50},[44,623,624],{"class":46,"line":121},[44,625,392],{"class":391},[18,627,629],{"id":628},"_3-将来的にはラッパーコンポーネントで統合","3. 将来的にはラッパーコンポーネントで統合",[22,631,632],{},"最終形は、全チャートをラップするコンポーネント:",[35,634,636],{"className":37,"code":635,"language":39,"meta":40,"style":40},"\u003CCompanyFinancialDashboard\n  :config=\"{\n    companyName: 'Microsoft',\n    financials: [\n      {\n        label: '2015',\n        revenue: 93580,\n        grossProfit: 60542,\n        operatingIncome: 28172,\n        netIncome: 12193,\n        eps: 1.48,\n        sga: 20324,\n        rd: 12046,\n        operatingCF: 29668,\n        capex: -5944,\n        fcf: 23724\n      },\n      ...\n    ]\n  }\"\n/>\n",[26,637,638,645,657,673,679,684,699,710,722,734,746,758,769,781,794,810,821,827,832,838,845],{"__ignoreMap":40},[44,639,640,642],{"class":46,"line":47},[44,641,51],{"class":50},[44,643,644],{"class":54},"CompanyFinancialDashboard\n",[44,646,647,649,651,653,655],{"class":46,"line":65},[44,648,243],{"class":50},[44,650,246],{"class":85},[44,652,152],{"class":50},[44,654,156],{"class":50},[44,656,253],{"class":50},[44,658,659,662,664,666,669,671],{"class":46,"line":72},[44,660,661],{"class":258},"    companyName",[44,663,273],{"class":50},[44,665,276],{"class":155},[44,667,668],{"class":159},"Microsoft",[44,670,276],{"class":155},[44,672,491],{"class":50},[44,674,675,677],{"class":46,"line":104},[44,676,259],{"class":258},[44,678,262],{"class":50},[44,680,681],{"class":46,"line":114},[44,682,683],{"class":50},"      {\n",[44,685,686,689,691,693,695,697],{"class":46,"line":121},[44,687,688],{"class":258},"        label",[44,690,273],{"class":50},[44,692,276],{"class":155},[44,694,279],{"class":159},[44,696,276],{"class":155},[44,698,491],{"class":50},[44,700,701,704,706,708],{"class":46,"line":131},[44,702,703],{"class":258},"        revenue",[44,705,273],{"class":50},[44,707,292],{"class":291},[44,709,491],{"class":50},[44,711,712,715,717,720],{"class":46,"line":137},[44,713,714],{"class":258},"        grossProfit",[44,716,273],{"class":50},[44,718,719],{"class":291},"60542",[44,721,491],{"class":50},[44,723,724,727,729,732],{"class":46,"line":146},[44,725,726],{"class":258},"        operatingIncome",[44,728,273],{"class":50},[44,730,731],{"class":291},"28172",[44,733,491],{"class":50},[44,735,736,739,741,744],{"class":46,"line":166},[44,737,738],{"class":258},"        netIncome",[44,740,273],{"class":50},[44,742,743],{"class":291},"12193",[44,745,491],{"class":50},[44,747,748,751,753,756],{"class":46,"line":181},[44,749,750],{"class":258},"        eps",[44,752,273],{"class":50},[44,754,755],{"class":291},"1.48",[44,757,491],{"class":50},[44,759,760,763,765,767],{"class":46,"line":187},[44,761,762],{"class":258},"        sga",[44,764,273],{"class":50},[44,766,302],{"class":291},[44,768,491],{"class":50},[44,770,772,775,777,779],{"class":46,"line":771},13,[44,773,774],{"class":258},"        rd",[44,776,273],{"class":50},[44,778,312],{"class":291},[44,780,491],{"class":50},[44,782,784,787,789,792],{"class":46,"line":783},14,[44,785,786],{"class":258},"        operatingCF",[44,788,273],{"class":50},[44,790,791],{"class":291},"29668",[44,793,491],{"class":50},[44,795,797,800,802,805,808],{"class":46,"line":796},15,[44,798,799],{"class":258},"        capex",[44,801,273],{"class":50},[44,803,804],{"class":75},"-",[44,806,807],{"class":291},"5944",[44,809,491],{"class":50},[44,811,813,816,818],{"class":46,"line":812},16,[44,814,815],{"class":258},"        fcf",[44,817,273],{"class":50},[44,819,820],{"class":291},"23724\n",[44,822,824],{"class":46,"line":823},17,[44,825,826],{"class":50},"      },\n",[44,828,830],{"class":46,"line":829},18,[44,831,364],{"class":50},[44,833,835],{"class":46,"line":834},19,[44,836,837],{"class":50},"    ]\n",[44,839,841,843],{"class":46,"line":840},20,[44,842,384],{"class":50},[44,844,163],{"class":50},[44,846,848],{"class":46,"line":847},21,[44,849,392],{"class":391},[22,851,852],{},"ラッパー内部で:",[201,854,855,861,864],{},[204,856,857,860],{},[26,858,859],{},"currentPeriodIndex","を管理",[204,862,863],{},"各チャートに適切なデータを渡す",[204,865,866],{},"比率を計算して渡す",[13,868,869],{"id":869},"実装手順",[18,871,873],{"id":872},"step-1-expenseratiochart-を変更完了","Step 1: ExpenseRatioChart を変更（完了）",[22,875,876],{},[197,877,878],{},"Before:",[35,880,882],{"className":418,"code":881,"language":420,"meta":40,"style":40},"interface Props {\n  ratioData: { label: string; sgaRatio: number; rdRatio: number }[]\n  currentPeriodIndex: number\n}\n",[26,883,884,896,934,944],{"__ignoreMap":40},[44,885,886,889,893],{"class":46,"line":47},[44,887,888],{"class":75},"interface",[44,890,892],{"class":891},"sSkh3"," Props",[44,894,895],{"class":50}," {\n",[44,897,898,901,904,906,908,911,914,917,919,922,924,927,929,931],{"class":46,"line":65},[44,899,900],{"class":58},"  ratioData",[44,902,903],{"class":50},": { ",[44,905,270],{"class":58},[44,907,273],{"class":50},[44,909,910],{"class":891},"string",[44,912,913],{"class":50},"; ",[44,915,916],{"class":58},"sgaRatio",[44,918,273],{"class":50},[44,920,921],{"class":891},"number",[44,923,913],{"class":50},[44,925,926],{"class":58},"rdRatio",[44,928,273],{"class":50},[44,930,921],{"class":891},[44,932,933],{"class":50}," }[]\n",[44,935,936,939,941],{"class":46,"line":72},[44,937,938],{"class":58},"  currentPeriodIndex",[44,940,273],{"class":50},[44,942,943],{"class":891},"number\n",[44,945,946],{"class":46,"line":104},[44,947,948],{"class":50},"}\n",[22,950,951],{},[197,952,953],{},"After:",[35,955,957],{"className":418,"code":956,"language":420,"meta":40,"style":40},"interface FinancialDataItem {\n  label: string\n  revenue: number\n  sga: number\n  rd: number\n}\n\ninterface ChartConfig {\n  financials: FinancialDataItem[]\n  currentPeriodIndex: number\n}\n\ninterface Props {\n  config: ChartConfig\n}\n\n// 比率はコンポーネント内で計算\nconst ratioData = computed(() =>\n  props.config.financials.map(d => ({\n    label: d.label,\n    sgaRatio: (d.sga / d.revenue) * 100,\n    rdRatio: (d.rd / d.revenue) * 100\n  }))\n)\n",[26,958,959,968,978,987,996,1005,1009,1013,1022,1035,1043,1047,1051,1059,1069,1073,1077,1082,1096,1120,1134,1162,1189,1194],{"__ignoreMap":40},[44,960,961,963,966],{"class":46,"line":47},[44,962,888],{"class":75},[44,964,965],{"class":891}," FinancialDataItem",[44,967,895],{"class":50},[44,969,970,973,975],{"class":46,"line":65},[44,971,972],{"class":58},"  label",[44,974,273],{"class":50},[44,976,977],{"class":891},"string\n",[44,979,980,983,985],{"class":46,"line":72},[44,981,982],{"class":58},"  revenue",[44,984,273],{"class":50},[44,986,943],{"class":891},[44,988,989,992,994],{"class":46,"line":104},[44,990,991],{"class":58},"  sga",[44,993,273],{"class":50},[44,995,943],{"class":891},[44,997,998,1001,1003],{"class":46,"line":114},[44,999,1000],{"class":58},"  rd",[44,1002,273],{"class":50},[44,1004,943],{"class":891},[44,1006,1007],{"class":46,"line":121},[44,1008,948],{"class":50},[44,1010,1011],{"class":46,"line":131},[44,1012,118],{"emptyLinePlaceholder":117},[44,1014,1015,1017,1020],{"class":46,"line":137},[44,1016,888],{"class":75},[44,1018,1019],{"class":891}," ChartConfig",[44,1021,895],{"class":50},[44,1023,1024,1027,1029,1032],{"class":46,"line":146},[44,1025,1026],{"class":58},"  financials",[44,1028,273],{"class":50},[44,1030,1031],{"class":891},"FinancialDataItem",[44,1033,1034],{"class":50},"[]\n",[44,1036,1037,1039,1041],{"class":46,"line":166},[44,1038,938],{"class":58},[44,1040,273],{"class":50},[44,1042,943],{"class":891},[44,1044,1045],{"class":46,"line":181},[44,1046,948],{"class":50},[44,1048,1049],{"class":46,"line":187},[44,1050,118],{"emptyLinePlaceholder":117},[44,1052,1053,1055,1057],{"class":46,"line":771},[44,1054,888],{"class":75},[44,1056,892],{"class":891},[44,1058,895],{"class":50},[44,1060,1061,1064,1066],{"class":46,"line":783},[44,1062,1063],{"class":58},"  config",[44,1065,273],{"class":50},[44,1067,1068],{"class":891},"ChartConfig\n",[44,1070,1071],{"class":46,"line":796},[44,1072,948],{"class":50},[44,1074,1075],{"class":46,"line":812},[44,1076,118],{"emptyLinePlaceholder":117},[44,1078,1079],{"class":46,"line":823},[44,1080,1081],{"class":68},"// 比率はコンポーネント内で計算\n",[44,1083,1084,1086,1088,1090,1092,1094],{"class":46,"line":829},[44,1085,432],{"class":75},[44,1087,435],{"class":58},[44,1089,82],{"class":50},[44,1091,86],{"class":85},[44,1093,89],{"class":50},[44,1095,444],{"class":50},[44,1097,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118],{"class":46,"line":834},[44,1099,449],{"class":58},[44,1101,452],{"class":50},[44,1103,246],{"class":58},[44,1105,452],{"class":50},[44,1107,459],{"class":58},[44,1109,452],{"class":50},[44,1111,464],{"class":85},[44,1113,467],{"class":50},[44,1115,470],{"class":58},[44,1117,92],{"class":50},[44,1119,475],{"class":50},[44,1121,1122,1124,1126,1128,1130,1132],{"class":46,"line":840},[44,1123,480],{"class":258},[44,1125,273],{"class":50},[44,1127,470],{"class":58},[44,1129,452],{"class":50},[44,1131,270],{"class":58},[44,1133,491],{"class":50},[44,1135,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160],{"class":46,"line":847},[44,1137,496],{"class":258},[44,1139,499],{"class":50},[44,1141,470],{"class":58},[44,1143,452],{"class":50},[44,1145,297],{"class":58},[44,1147,508],{"class":75},[44,1149,511],{"class":58},[44,1151,452],{"class":50},[44,1153,286],{"class":58},[44,1155,518],{"class":50},[44,1157,521],{"class":75},[44,1159,524],{"class":291},[44,1161,491],{"class":50},[44,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187],{"class":46,"line":1164},22,[44,1166,531],{"class":258},[44,1168,499],{"class":50},[44,1170,470],{"class":58},[44,1172,452],{"class":50},[44,1174,307],{"class":58},[44,1176,508],{"class":75},[44,1178,511],{"class":58},[44,1180,452],{"class":50},[44,1182,286],{"class":58},[44,1184,518],{"class":50},[44,1186,521],{"class":75},[44,1188,554],{"class":291},[44,1190,1192],{"class":46,"line":1191},23,[44,1193,559],{"class":50},[44,1195,1197],{"class":46,"line":1196},24,[44,1198,564],{"class":50},[18,1200,1202],{"id":1201},"step-2-呼び出し側をインラインデータに変更","Step 2: 呼び出し側をインラインデータに変更",[35,1204,1206],{"className":37,"code":1205,"language":39,"meta":40,"style":40},"\u003CExpenseRatioChart\n  :config=\"{\n    financials: [\n      { label: '2015', revenue: 93580, sga: 20324, rd: 12046 },\n      { label: '2016', revenue: 91154, sga: 19198, rd: 11988 },\n      { label: '2017', revenue: 96571, sga: 19942, rd: 13037 },\n      { label: '2018', revenue: 110360, sga: 22223, rd: 14726 },\n      { label: '2019', revenue: 125843, sga: 23098, rd: 16876 },\n      { label: '2020', revenue: 143015, sga: 24709, rd: 19269 },\n      { label: '2021', revenue: 168088, sga: 25224, rd: 20716 },\n      { label: '2022', revenue: 198270, sga: 27725, rd: 24512 },\n      { label: '2023', revenue: 211915, sga: 30334, rd: 27195 },\n      { label: '2024', revenue: 245122, sga: 32065, rd: 29510 },\n      { label: '2025', revenue: 277985, sga: 32877, rd: 32488 },\n      { label: 'LTM', revenue: 289054, sga: 33010, rd: 33090 }\n    ],\n    currentPeriodIndex: microsoftPeriodIndex\n  }\"\n/>\n",[26,1207,1208,1214,1226,1232,1272,1312,1356,1400,1444,1488,1532,1576,1620,1664,1708,1753,1757,1765,1771],{"__ignoreMap":40},[44,1209,1210,1212],{"class":46,"line":47},[44,1211,51],{"class":50},[44,1213,143],{"class":54},[44,1215,1216,1218,1220,1222,1224],{"class":46,"line":65},[44,1217,243],{"class":50},[44,1219,246],{"class":85},[44,1221,152],{"class":50},[44,1223,156],{"class":50},[44,1225,253],{"class":50},[44,1227,1228,1230],{"class":46,"line":72},[44,1229,259],{"class":258},[44,1231,262],{"class":50},[44,1233,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270],{"class":46,"line":104},[44,1235,267],{"class":50},[44,1237,270],{"class":258},[44,1239,273],{"class":50},[44,1241,276],{"class":155},[44,1243,279],{"class":159},[44,1245,276],{"class":155},[44,1247,29],{"class":50},[44,1249,286],{"class":258},[44,1251,273],{"class":50},[44,1253,292],{"class":291},[44,1255,29],{"class":50},[44,1257,297],{"class":258},[44,1259,273],{"class":50},[44,1261,302],{"class":291},[44,1263,29],{"class":50},[44,1265,307],{"class":258},[44,1267,273],{"class":50},[44,1269,312],{"class":291},[44,1271,315],{"class":50},[44,1273,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310],{"class":46,"line":114},[44,1275,267],{"class":50},[44,1277,270],{"class":258},[44,1279,273],{"class":50},[44,1281,276],{"class":155},[44,1283,328],{"class":159},[44,1285,276],{"class":155},[44,1287,29],{"class":50},[44,1289,286],{"class":258},[44,1291,273],{"class":50},[44,1293,339],{"class":291},[44,1295,29],{"class":50},[44,1297,297],{"class":258},[44,1299,273],{"class":50},[44,1301,348],{"class":291},[44,1303,29],{"class":50},[44,1305,307],{"class":258},[44,1307,273],{"class":50},[44,1309,357],{"class":291},[44,1311,315],{"class":50},[44,1313,1314,1316,1318,1320,1322,1325,1327,1329,1331,1333,1336,1338,1340,1342,1345,1347,1349,1351,1354],{"class":46,"line":121},[44,1315,267],{"class":50},[44,1317,270],{"class":258},[44,1319,273],{"class":50},[44,1321,276],{"class":155},[44,1323,1324],{"class":159},"2017",[44,1326,276],{"class":155},[44,1328,29],{"class":50},[44,1330,286],{"class":258},[44,1332,273],{"class":50},[44,1334,1335],{"class":291},"96571",[44,1337,29],{"class":50},[44,1339,297],{"class":258},[44,1341,273],{"class":50},[44,1343,1344],{"class":291},"19942",[44,1346,29],{"class":50},[44,1348,307],{"class":258},[44,1350,273],{"class":50},[44,1352,1353],{"class":291},"13037",[44,1355,315],{"class":50},[44,1357,1358,1360,1362,1364,1366,1369,1371,1373,1375,1377,1380,1382,1384,1386,1389,1391,1393,1395,1398],{"class":46,"line":131},[44,1359,267],{"class":50},[44,1361,270],{"class":258},[44,1363,273],{"class":50},[44,1365,276],{"class":155},[44,1367,1368],{"class":159},"2018",[44,1370,276],{"class":155},[44,1372,29],{"class":50},[44,1374,286],{"class":258},[44,1376,273],{"class":50},[44,1378,1379],{"class":291},"110360",[44,1381,29],{"class":50},[44,1383,297],{"class":258},[44,1385,273],{"class":50},[44,1387,1388],{"class":291},"22223",[44,1390,29],{"class":50},[44,1392,307],{"class":258},[44,1394,273],{"class":50},[44,1396,1397],{"class":291},"14726",[44,1399,315],{"class":50},[44,1401,1402,1404,1406,1408,1410,1413,1415,1417,1419,1421,1424,1426,1428,1430,1433,1435,1437,1439,1442],{"class":46,"line":137},[44,1403,267],{"class":50},[44,1405,270],{"class":258},[44,1407,273],{"class":50},[44,1409,276],{"class":155},[44,1411,1412],{"class":159},"2019",[44,1414,276],{"class":155},[44,1416,29],{"class":50},[44,1418,286],{"class":258},[44,1420,273],{"class":50},[44,1422,1423],{"class":291},"125843",[44,1425,29],{"class":50},[44,1427,297],{"class":258},[44,1429,273],{"class":50},[44,1431,1432],{"class":291},"23098",[44,1434,29],{"class":50},[44,1436,307],{"class":258},[44,1438,273],{"class":50},[44,1440,1441],{"class":291},"16876",[44,1443,315],{"class":50},[44,1445,1446,1448,1450,1452,1454,1457,1459,1461,1463,1465,1468,1470,1472,1474,1477,1479,1481,1483,1486],{"class":46,"line":146},[44,1447,267],{"class":50},[44,1449,270],{"class":258},[44,1451,273],{"class":50},[44,1453,276],{"class":155},[44,1455,1456],{"class":159},"2020",[44,1458,276],{"class":155},[44,1460,29],{"class":50},[44,1462,286],{"class":258},[44,1464,273],{"class":50},[44,1466,1467],{"class":291},"143015",[44,1469,29],{"class":50},[44,1471,297],{"class":258},[44,1473,273],{"class":50},[44,1475,1476],{"class":291},"24709",[44,1478,29],{"class":50},[44,1480,307],{"class":258},[44,1482,273],{"class":50},[44,1484,1485],{"class":291},"19269",[44,1487,315],{"class":50},[44,1489,1490,1492,1494,1496,1498,1501,1503,1505,1507,1509,1512,1514,1516,1518,1521,1523,1525,1527,1530],{"class":46,"line":166},[44,1491,267],{"class":50},[44,1493,270],{"class":258},[44,1495,273],{"class":50},[44,1497,276],{"class":155},[44,1499,1500],{"class":159},"2021",[44,1502,276],{"class":155},[44,1504,29],{"class":50},[44,1506,286],{"class":258},[44,1508,273],{"class":50},[44,1510,1511],{"class":291},"168088",[44,1513,29],{"class":50},[44,1515,297],{"class":258},[44,1517,273],{"class":50},[44,1519,1520],{"class":291},"25224",[44,1522,29],{"class":50},[44,1524,307],{"class":258},[44,1526,273],{"class":50},[44,1528,1529],{"class":291},"20716",[44,1531,315],{"class":50},[44,1533,1534,1536,1538,1540,1542,1545,1547,1549,1551,1553,1556,1558,1560,1562,1565,1567,1569,1571,1574],{"class":46,"line":181},[44,1535,267],{"class":50},[44,1537,270],{"class":258},[44,1539,273],{"class":50},[44,1541,276],{"class":155},[44,1543,1544],{"class":159},"2022",[44,1546,276],{"class":155},[44,1548,29],{"class":50},[44,1550,286],{"class":258},[44,1552,273],{"class":50},[44,1554,1555],{"class":291},"198270",[44,1557,29],{"class":50},[44,1559,297],{"class":258},[44,1561,273],{"class":50},[44,1563,1564],{"class":291},"27725",[44,1566,29],{"class":50},[44,1568,307],{"class":258},[44,1570,273],{"class":50},[44,1572,1573],{"class":291},"24512",[44,1575,315],{"class":50},[44,1577,1578,1580,1582,1584,1586,1589,1591,1593,1595,1597,1600,1602,1604,1606,1609,1611,1613,1615,1618],{"class":46,"line":187},[44,1579,267],{"class":50},[44,1581,270],{"class":258},[44,1583,273],{"class":50},[44,1585,276],{"class":155},[44,1587,1588],{"class":159},"2023",[44,1590,276],{"class":155},[44,1592,29],{"class":50},[44,1594,286],{"class":258},[44,1596,273],{"class":50},[44,1598,1599],{"class":291},"211915",[44,1601,29],{"class":50},[44,1603,297],{"class":258},[44,1605,273],{"class":50},[44,1607,1608],{"class":291},"30334",[44,1610,29],{"class":50},[44,1612,307],{"class":258},[44,1614,273],{"class":50},[44,1616,1617],{"class":291},"27195",[44,1619,315],{"class":50},[44,1621,1622,1624,1626,1628,1630,1633,1635,1637,1639,1641,1644,1646,1648,1650,1653,1655,1657,1659,1662],{"class":46,"line":771},[44,1623,267],{"class":50},[44,1625,270],{"class":258},[44,1627,273],{"class":50},[44,1629,276],{"class":155},[44,1631,1632],{"class":159},"2024",[44,1634,276],{"class":155},[44,1636,29],{"class":50},[44,1638,286],{"class":258},[44,1640,273],{"class":50},[44,1642,1643],{"class":291},"245122",[44,1645,29],{"class":50},[44,1647,297],{"class":258},[44,1649,273],{"class":50},[44,1651,1652],{"class":291},"32065",[44,1654,29],{"class":50},[44,1656,307],{"class":258},[44,1658,273],{"class":50},[44,1660,1661],{"class":291},"29510",[44,1663,315],{"class":50},[44,1665,1666,1668,1670,1672,1674,1677,1679,1681,1683,1685,1688,1690,1692,1694,1697,1699,1701,1703,1706],{"class":46,"line":783},[44,1667,267],{"class":50},[44,1669,270],{"class":258},[44,1671,273],{"class":50},[44,1673,276],{"class":155},[44,1675,1676],{"class":159},"2025",[44,1678,276],{"class":155},[44,1680,29],{"class":50},[44,1682,286],{"class":258},[44,1684,273],{"class":50},[44,1686,1687],{"class":291},"277985",[44,1689,29],{"class":50},[44,1691,297],{"class":258},[44,1693,273],{"class":50},[44,1695,1696],{"class":291},"32877",[44,1698,29],{"class":50},[44,1700,307],{"class":258},[44,1702,273],{"class":50},[44,1704,1705],{"class":291},"32488",[44,1707,315],{"class":50},[44,1709,1710,1712,1714,1716,1718,1721,1723,1725,1727,1729,1732,1734,1736,1738,1741,1743,1745,1747,1750],{"class":46,"line":796},[44,1711,267],{"class":50},[44,1713,270],{"class":258},[44,1715,273],{"class":50},[44,1717,276],{"class":155},[44,1719,1720],{"class":159},"LTM",[44,1722,276],{"class":155},[44,1724,29],{"class":50},[44,1726,286],{"class":258},[44,1728,273],{"class":50},[44,1730,1731],{"class":291},"289054",[44,1733,29],{"class":50},[44,1735,297],{"class":258},[44,1737,273],{"class":50},[44,1739,1740],{"class":291},"33010",[44,1742,29],{"class":50},[44,1744,307],{"class":258},[44,1746,273],{"class":50},[44,1748,1749],{"class":291},"33090",[44,1751,1752],{"class":50}," }\n",[44,1754,1755],{"class":46,"line":812},[44,1756,369],{"class":50},[44,1758,1759,1761,1763],{"class":46,"line":823},[44,1760,374],{"class":258},[44,1762,273],{"class":50},[44,1764,379],{"class":58},[44,1766,1767,1769],{"class":46,"line":829},[44,1768,384],{"class":50},[44,1770,163],{"class":50},[44,1772,1773],{"class":46,"line":834},[44,1774,392],{"class":391},[18,1776,1778],{"id":1777},"step-3-他のチャートも同様に変更","Step 3: 他のチャートも同様に変更",[201,1780,1781,1784,1787],{},[204,1782,1783],{},"ProfitMarginChart",[204,1785,1786],{},"EPSChart",[204,1788,1789],{},"FCFChart",[18,1791,1793],{"id":1792},"step-4-ラッパーコンポーネント作成オプション","Step 4: ラッパーコンポーネント作成（オプション）",[22,1795,1796],{},"全チャートを1つのconfigでまとめて渡せるようにする。",[13,1798,1800],{"id":1799},"aiへの指示例","AIへの指示例",[22,1802,1803],{},"Koyfinなどからデータをコピーして、以下のように依頼:",[35,1805,1810],{"className":1806,"code":1808,"language":1809},[1807],"language-text","以下のMicrosoftの財務データを、このフォーマットに変換してください:\n\n{ label: '年度', revenue: 売上, sga: SG&A, rd: R&D }\n\nデータ:\n[ここにKoyfinのデータをペースト]\n","text",[26,1811,1808],{"__ignoreMap":40},[13,1813,1814],{"id":1814},"懸念点と対策",[1816,1817,1818,1831],"table",{},[1819,1820,1821],"thead",{},[1822,1823,1824,1828],"tr",{},[1825,1826,1827],"th",{},"懸念",[1825,1829,1830],{},"対策",[1832,1833,1834,1843,1851],"tbody",{},[1822,1835,1836,1840],{},[1837,1838,1839],"td",{},"Vueファイルが長くなる",[1837,1841,1842],{},"データと表示が近いのでむしろ見やすい",[1822,1844,1845,1848],{},[1837,1846,1847],{},"同じデータを別ページで使いたい",[1837,1849,1850],{},"コピペ、または必要時にcomposableに切り出す",[1822,1852,1853,1856],{},[1837,1854,1855],{},"型安全性",[1837,1857,1858],{},"TypeScriptのprops定義で検出",[13,1860,1861],{"id":1861},"まとめ",[201,1863,1864,1870,1876],{},[204,1865,1866,1869],{},[197,1867,1868],{},"目的",": AIでコード生成 → コピペで動く",[204,1871,1872,1875],{},[197,1873,1874],{},"方針",": 元データを渡し、比率はコンポーネント内で計算",[204,1877,1878,1881],{},[197,1879,1880],{},"手順",": まずExpenseRatioChartで試し、うまくいったら他に展開",[1883,1884,1885],"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 .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}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 .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 .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 .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}",{"title":40,"searchDepth":65,"depth":65,"links":1887},[1888,1892,1897,1903,1904,1905],{"id":15,"depth":65,"text":16,"children":1889},[1890,1891],{"id":20,"depth":72,"text":20},{"id":215,"depth":72,"text":215},{"id":395,"depth":65,"text":395,"children":1893},[1894,1895,1896],{"id":398,"depth":72,"text":399},{"id":567,"depth":72,"text":568},{"id":628,"depth":72,"text":629},{"id":869,"depth":65,"text":869,"children":1898},[1899,1900,1901,1902],{"id":872,"depth":72,"text":873},{"id":1201,"depth":72,"text":1202},{"id":1777,"depth":72,"text":1778},{"id":1792,"depth":72,"text":1793},{"id":1799,"depth":65,"text":1800},{"id":1814,"depth":65,"text":1814},{"id":1861,"depth":65,"text":1861},null,"AIでコード生成 → コピペで動くチャートコンポーネントの設計方針と実装手順","md",{},"/inline-data-chart-design",false,"2025-12-10T00:00:00.000Z",{"title":5,"description":1907},"2025-12/2025-12-10/inline-data-chart-design",[1916,1917,1918],"Vue3","コンポーネント設計","財務チャート","6-dnIPDOtqhKOGWY6ZAamHzX8wSYY9niK2y_foXs6Lg",[],[1922,1926,1930,1934,1938],{"title":1923,"path":1924,"publishedAt":1925},"Nuxt Content の記事タイトルが本文に出ない問題を DocPage 側の自動分岐で解消した","/docpage-auto-title-display","2026-06-29T00:00:00.000Z",{"title":1927,"path":1928,"publishedAt":1929},"/memory-makers を半導体サプライチェーン観測ページに作り変える（Foxconn月次・Nanya追加・DRAM分類マトリックス）","/memory-makers-network-expansion","2026-06-04T00:00:00.000Z",{"title":1931,"path":1932,"publishedAt":1933},"eurekapu-nuxt4 全77ページ2カラム化 + Part 2 投資判断クイズ + 教科書 CH8-12 実装","/eurekapu-2col-and-part2-textbook","2026-05-15T00:00:00.000Z",{"title":1935,"path":1936,"publishedAt":1937},"投資判断クイズを2カラムレイアウトへ移行：1ページ完成→コンポーネント化→横展開","/investment-quiz-2col-refactor","2026-05-14T00:00:00.000Z",{"title":1939,"path":1940,"publishedAt":1941},"Electron×Vue3で作るリアルタイム文字起こしアプリ「即録くん」の開発記録","/sokuroku-electron-development","2026-03-19T00:00:00.000Z","https://log.eurekapu.com/og/blog/inline-data-chart-design.png?v=2025-12-10T00%3A00%3A00.000Z&title=%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%87%E3%83%BC%E3%82%BF%E5%BD%A2%E5%BC%8F%E3%81%AE%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E8%A8%AD%E8%A8%88&author=Kei%20Komatsu&sig=bd1a85ae0e61bc50",1785654674862]