function MainComponent() { const [stocks, setStocks] = React.useState([]); const [newStock, setNewStock] = React.useState({ name: '', price: '', yield: '', shares: '' }); const [editingIndex, setEditingIndex] = React.useState(null); const addStock = ()=>{ if (newStock.name && newStock.price && newStock.yield && newStock.shares) { const annualDividend = calculateDividend(newStock.price, newStock.yield, newStock.shares); setStocks([ ...stocks, { ...newStock, annualDividend } ]); setNewStock({ name: '', price: '', yield: '', shares: '' }); } }; const startEditing = (index)=>{ setEditingIndex(index); }; const handleEdit = (index, field, value)=>{ const updatedStocks = [ ...stocks ]; updatedStocks[index] = { ...updatedStocks[index], [field]: value }; if (field === 'price' || field === 'yield' || field === 'shares') { updatedStocks[index].annualDividend = calculateDividend(updatedStocks[index].price, updatedStocks[index].yield, updatedStocks[index].shares); } setStocks(updatedStocks); }; const finishEditing = ()=>{ setEditingIndex(null); }; const removeStock = (index)=>{ setStocks(stocks.filter((_, i)=>i !== index)); if (editingIndex === index) { setEditingIndex(null); } }; const calculateDividend = (price, yield_, shares)=>{ return (parseFloat(price) * parseFloat(yield_) / 100 * parseInt(shares)).toFixed(2); }; const totalAnnualDividend = stocks.reduce((sum, stock)=>sum + parseFloat(stock.annualDividend), 0).toFixed(2); return /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "テーブル内編集機能付き配当金計算機"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap space-x-2", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 border p-2 rounded", placeholder: "銘柄名", name: "name", value: newStock.name, onChange: (e)=>setNewStock({ ...newStock, name: e.target.value }), __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "flex-1 border p-2 rounded", type: "number", placeholder: "株価", name: "price", value: newStock.price, onChange: (e)=>setNewStock({ ...newStock, price: e.target.value }), __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "flex-1 border p-2 rounded", type: "number", placeholder: "配当利回り (%)", name: "yield", value: newStock.yield, onChange: (e)=>setNewStock({ ...newStock, yield: e.target.value }), __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "flex-1 border p-2 rounded", type: "number", placeholder: "保有株数", name: "shares", value: newStock.shares, onChange: (e)=>setNewStock({ ...newStock, shares: e.target.value }), __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded hover:bg-blue-600", onClick: addStock, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "追加")), stocks.length > 0 && /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse border", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "銘柄名"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, "株価"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, "配当利回り (%)"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, "保有株数"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "年間配当金 (¥)"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, "操作"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, stocks.map((stock, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: editingIndex === index ? 'bg-yellow-100' : '', __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }, editingIndex === index ? /*#__PURE__*/ React.createElement("input", { className: "w-full p-1", name: "stockName", value: stock.name, onChange: (e)=>handleEdit(index, 'name', e.target.value), __source: { fileName: "", lineNumber: 108, columnNumber: 23 }, __self: this }) : stock.name), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, editingIndex === index ? /*#__PURE__*/ React.createElement("input", { className: "w-full p-1", type: "number", name: "stockPrice", value: stock.price, onChange: (e)=>handleEdit(index, 'price', e.target.value), __source: { fileName: "", lineNumber: 120, columnNumber: 23 }, __self: this }) : stock.price), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, editingIndex === index ? /*#__PURE__*/ React.createElement("input", { className: "w-full p-1", type: "number", name: "stockYield", value: stock.yield, onChange: (e)=>handleEdit(index, 'yield', e.target.value), __source: { fileName: "", lineNumber: 133, columnNumber: 23 }, __self: this }) : stock.yield), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 144, columnNumber: 19 }, __self: this }, editingIndex === index ? /*#__PURE__*/ React.createElement("input", { className: "w-full p-1", type: "number", name: "stockShares", value: stock.shares, onChange: (e)=>handleEdit(index, 'shares', e.target.value), __source: { fileName: "", lineNumber: 146, columnNumber: 23 }, __self: this }) : stock.shares), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 157, columnNumber: 19 }, __self: this }, stock.annualDividend), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 158, columnNumber: 19 }, __self: this }, editingIndex === index ? /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-1 rounded hover:bg-green-600 mr-2", onClick: finishEditing, __source: { fileName: "", lineNumber: 160, columnNumber: 23 }, __self: this }, "完了") : /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600 mr-2", onClick: ()=>startEditing(index), __source: { fileName: "", lineNumber: 167, columnNumber: 23 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white p-1 rounded hover:bg-red-600", onClick: ()=>removeStock(index), __source: { fileName: "", lineNumber: 174, columnNumber: 21 }, __self: this }, "削除")))))), stocks.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "text-right mt-4", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, "総年間配当金: ¥", totalAnnualDividend)))); }