function MainComponent() { const [records, setRecords] = React.useState([]); const [editingIndex, setEditingIndex] = React.useState(null); const [currentRecord, setCurrentRecord] = React.useState({ date: "", amount: "", description: "" }); const handleChange = (e)=>{ setCurrentRecord({ ...currentRecord, [e.target.name]: e.target.value }); }; const addRecord = ()=>{ if (editingIndex !== null) { const updatedRecords = records.map((record, index)=>index === editingIndex ? currentRecord : record); setRecords(updatedRecords); setEditingIndex(null); } else { setRecords([ ...records, currentRecord ]); } setCurrentRecord({ date: "", amount: "", description: "" }); }; const deleteRecord = (index)=>{ setRecords(records.filter((_, i)=>i !== index)); }; const editRecord = (index)=>{ setEditingIndex(index); setCurrentRecord(records[index]); }; const monthlyData = records.reduce((acc, record)=>{ const month = new Date(record.date).getMonth(); acc[month] = (acc[month] || 0) + parseFloat(record.amount); return acc; }, []); return /*#__PURE__*/ React.createElement("div", { className: "p-6 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "家計簿アプリケーション"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "date", type: "date", className: "border p-2 mr-2", value: currentRecord.date, onChange: handleChange, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "amount", type: "number", placeholder: "金額", className: "border p-2 mr-2", value: currentRecord.amount, onChange: handleChange, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "description", type: "text", placeholder: "説明", className: "border p-2 mr-2", value: currentRecord.description, onChange: handleChange, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2", onClick: addRecord, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, editingIndex !== null ? "更新" : "追加")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, records.map((record, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2 flex items-center", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mr-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, record.date), /*#__PURE__*/ React.createElement("div", { className: "mr-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, record.amount, " 円"), /*#__PURE__*/ React.createElement("div", { className: "mr-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, record.description), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white p-2 mr-2", onClick: ()=>editRecord(index), __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white p-2", onClick: ()=>deleteRecord(index), __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "削除")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "月毎の合計金額"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-[#f3f3f3] p-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, monthlyData.map((amount, month)=>/*#__PURE__*/ React.createElement("div", { key: month, className: "mb-2 flex", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[50px] mr-2", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, month + 1, " 月:"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-4 bg-[#ddd]", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-4 bg-blue-500", style: { width: `${amount}%` }, __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, amount, " 円"))))))); }