function MainComponent() { const [finalAmount, setFinalAmount] = React.useState(0); const [annualDetails, setAnnualDetails] = React.useState([]); const [imageUrl, setImageUrl] = React.useState(''); const handleSimulation = (e)=>{ e.preventDefault(); const initialInvestment = parseFloat(e.target.initialInvestment.value) || 0; const monthlyIncome = parseFloat(e.target.monthlyIncome.value) || 0; const monthlyExpense = parseFloat(e.target.monthlyExpense.value) || 0; const annualRate = parseFloat(e.target.annualRate.value) || 0; const simulationYears = 30; let totalAmount = initialInvestment; let annualDetailsTemp = []; for(let year = 1; year <= simulationYears; year++){ for(let month = 1; month <= 12; month++){ const monthlyInterest = totalAmount * (annualRate / 100) / 12; totalAmount += monthlyIncome + monthlyInterest - monthlyExpense; } annualDetailsTemp.push({ year: year, totalAmount: Math.round(totalAmount) }); } setFinalAmount(Math.round(totalAmount)); setAnnualDetails(annualDetailsTemp); fetch(`/integrations/stable-diffusion/?prompt=資産運用のグラフ&width=1024&height=1024`, { method: 'GET' }).then((response)=>response.json()).then((data)=>setImageUrl(data.data[0])).catch((error)=>console.error('Error:', error)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-8 bg-gray-100 min-h-screen font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "投資シミュレーション"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white p-6 rounded shadow-md", onSubmit: handleSimulation, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "initialInvestment", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "初期投資額"), /*#__PURE__*/ React.createElement("input", { className: "border rounded w-full py-2 px-3 text-gray-700", id: "initialInvestment", name: "initialInvestment", type: "number", placeholder: "1000000", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "monthlyIncome", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "月々の収入"), /*#__PURE__*/ React.createElement("input", { className: "border rounded w-full py-2 px-3 text-gray-700", id: "monthlyIncome", name: "monthlyIncome", type: "number", placeholder: "50000", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "monthlyExpense", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "月々の出費"), /*#__PURE__*/ React.createElement("input", { className: "border rounded w-full py-2 px-3 text-gray-700", id: "monthlyExpense", name: "monthlyExpense", type: "number", placeholder: "30000", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "annualRate", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "年間利回り"), /*#__PURE__*/ React.createElement("input", { className: "border rounded w-full py-2 px-3 text-gray-700", id: "annualRate", name: "annualRate", type: "number", placeholder: "5", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", type: "submit", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "シミュレーション開始")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white mt-8 p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "シミュレーション結果"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "最終資産額: ", /*#__PURE__*/ React.createElement("span", { id: "finalAmount", className: "font-bold", __source: { fileName: "", lineNumber: 73, columnNumber: 50 }, __self: this }, finalAmount, "円")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "年間毎の資産額リスト:"), /*#__PURE__*/ React.createElement("ul", { id: "annualDetailList", className: "text-gray-700", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, annualDetails.map((detail)=>/*#__PURE__*/ React.createElement("li", { key: detail.year, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, detail.year, "年目: 合計額 ", detail.totalAmount, "円"))), imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "資産運用のグラフ", className: "w-[400px] h-[400px] mt-4", __source: { fileName: "", lineNumber: 80, columnNumber: 22 }, __self: this }))); }