${monthLabel}

予測使用量: ${usage} kWh

基本料金: ${basicFee.toLocaleString()} 円

従量料金: ${Math.floor(usageFee).toLocaleString()} 円

燃料費調整額: ${Math.floor(fuelAdjustment).toLocaleString()} 円
（${fuelAdjustmentRates[Number(month)]} 円/kWh）

再エネ賦課金: ${Math.floor(renewableCharge).toLocaleString()} 円
（3.49 円/kWh）

月額合計: ${monthlyTotal.toLocaleString()} 円

`; detailsContainer.innerHTML += monthlyDetailHtml; }); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 239, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 240, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl p-4", __source: { fileName: "", lineNumber: 241, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-gray-800 mb-6 font-noto-sans", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, "子育て応援でんき"), /*#__PURE__*/ React.createElement("div", { className: "text-xl mt-1", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "電気代シミュレーション")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 246, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex rounded-lg overflow-hidden border border-gray-200", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 px-3 text-xs transition-colors duration-200 ease-in-out ${inputMode === "simple" ? "bg-blue-50 text-blue-800 font-medium border-b-2 border-blue-500" : "bg-gray-100 text-gray-500 hover:bg-gray-50"}`, onClick: ()=>handleInputModeChange("simple"), __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block text-center sm:text-sm text-xs", __source: { fileName: "", lineNumber: 258, columnNumber: 21 }, __self: this }, "使用量1ヶ月分でかんたん試算")), /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 px-3 text-xs transition-colors duration-200 ease-in-out ${inputMode === "detailed" ? "bg-blue-50 text-blue-800 font-medium border-b-2 border-blue-500" : "bg-gray-100 text-gray-500 hover:bg-gray-50"}`, onClick: ()=>handleInputModeChange("detailed"), __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block text-center sm:text-sm text-xs", __source: { fileName: "", lineNumber: 270, columnNumber: 21 }, __self: this }, "使用量12ヶ月分でしっかり試算")))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, "契約電力の単位"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded-md", value: planType, onChange: (e)=>setPlanType(e.target.value), __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "B", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, "アンペア（A）"), /*#__PURE__*/ React.createElement("option", { value: "C", __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this }, "キロボルトアンペア（kVA）"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 294, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, "契約容量"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 298, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 border rounded-md", placeholder: "契約容量を入力", value: contractCapacity, onChange: (e)=>setContractCapacity(e.target.value), __source: { fileName: "", lineNumber: 299, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, planType === "B" ? "A" : "kVA")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, inputMode === "simple" ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this }, "使用量入力"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-1/2 p-2 border rounded-md", value: selectedMonth, onChange: (e)=>setSelectedMonth(Number(e.target.value)), __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }, months.map((month)=>/*#__PURE__*/ React.createElement("option", { key: month.value, value: month.value, __source: { fileName: "", lineNumber: 326, columnNumber: 25 }, __self: this }, month.label))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 w-1/2", __source: { fileName: "", lineNumber: 331, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 border rounded-md", placeholder: "使用量を入力", value: monthlyUsage, onChange: (e)=>setMonthlyUsage(e.target.value), __source: { fileName: "", lineNumber: 332, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 339, columnNumber: 23 }, __self: this }, "kWh")))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 344, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 345, columnNumber: 19 }, __self: this }, "月別使用量入力"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this }, months.map((month)=>/*#__PURE__*/ React.createElement("div", { key: month.value, className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 350, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm w-24", __source: { fileName: "", lineNumber: 354, columnNumber: 25 }, __self: this }, month.label), /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 border rounded-md", placeholder: "使用量", value: monthlyUsages[month.value], onChange: (e)=>setMonthlyUsages((prev)=>({ ...prev, [month.value]: e.target.value })), __source: { fileName: "", lineNumber: 355, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 367, columnNumber: 25 }, __self: this }, "kWh"))))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-6", __source: { fileName: "", lineNumber: 375, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCalculate, className: "bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 376, columnNumber: 13 }, __self: this }, "試算する")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 384, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-center text-gray-800 mb-4", __source: { fileName: "", lineNumber: 385, columnNumber: 13 }, __self: this }, "シミュレーション結果"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 388, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 389, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 390, columnNumber: 17 }, __self: this }, "年間電気料金（概算）"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 391, columnNumber: 17 }, __self: this }, Object.keys(yearlyPrediction).length > 0 ? calculateTotalYearly().toLocaleString() + "円" : "計算結果がここに表示されます")), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 397, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDetails(!showDetails), className: "bg-gray-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 398, columnNumber: 17 }, __self: this }, showDetails ? "詳細を隠す" : "詳細を見る")), showDetails && Object.keys(yearlyPrediction).length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 406, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 407, columnNumber: 19 }, __self: this }, "月別予測使用量と料金"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 410, columnNumber: 19 }, __self: this }, Object.entries(yearlyPrediction).sort(([a], [b])=>{ const aNum = Number(a); const bNum = Number(b); const getOrderNumber = (month)=>{ return month >= 5 ? month - 5 : month + 7; }; return getOrderNumber(aNum) - getOrderNumber(bNum); }).map(([month, usage])=>{ const monthLabel = months.find((m)=>m.value === Number(month))?.label; const basicFee = Math.floor(planType === "B" ? Math.ceil(Number(contractCapacity) / 10) * 310 : Number(contractCapacity) * 310); const usageFee = calculateUsageFee(usage, planType); const fuelAdjustment = usage * fuelAdjustmentRates[Number(month)]; const renewableCharge = usage * 3.49; const monthlyTotal = calculateMonthlyFee(usage, planType, Number(month), contractCapacity); return /*#__PURE__*/ React.createElement("div", { key: month, className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 441, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-semibold text-gray-700", __source: { fileName: "", lineNumber: 445, columnNumber: 29 }, __self: this }, monthLabel), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 448, columnNumber: 29 }, __self: this }, "予測使用量: ", usage, " kWh"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 451, columnNumber: 29 }, __self: this }, "基本料金: ", basicFee.toLocaleString(), " 円"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 454, columnNumber: 29 }, __self: this }, "従量料金: ", Math.floor(usageFee).toLocaleString(), " ", "円"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 458, columnNumber: 29 }, __self: this }, "燃料費調整額:", " ", Math.floor(fuelAdjustment).toLocaleString(), " 円", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 461, columnNumber: 31 }, __self: this }), "（", fuelAdjustmentRates[Number(month)], " ", "円/kWh）"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 464, columnNumber: 29 }, __self: this }, "再エネ賦課金:", " ", Math.floor(renewableCharge).toLocaleString(), " 円", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 467, columnNumber: 31 }, __self: this }), "（3.49 円/kWh）"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-semibold text-gray-800 mt-2", __source: { fileName: "", lineNumber: 470, columnNumber: 29 }, __self: this }, "月額合計: ", monthlyTotal.toLocaleString(), " 円")); })))))))); }

子育て応援でんき電気代シミュレーション

シミュレーション結果

子育て応援でんき
電気代シミュレーション