function MainComponent() { const [age, setAge] = React.useState(''); const [gender, setGender] = React.useState('male'); const [timeLeft, setTimeLeft] = React.useState({ years: '-', months: '-', weeks: '-', days: '-', fullCountdown: '-' }); const averageLifeExpectancy = { male: 81, female: 87 }; React.useEffect(()=>{ if (timeLeft.fullCountdown !== '-') { const intervalId = setInterval(()=>{ const now = new Date(); const birthDate = new Date(now.getFullYear() - parseFloat(age), now.getMonth(), now.getDate()); const lifeExpectancyInDays = (averageLifeExpectancy[gender] - age) * 365.25; const endDate = new Date(birthDate); endDate.setDate(birthDate.getDate() + lifeExpectancyInDays); const totalSecondsLeft = (endDate - now) / 1000; const yearsLeft = Math.floor(totalSecondsLeft / (365.25 * 24 * 60 * 60)); const monthsLeft = Math.floor(totalSecondsLeft / (30 * 24 * 60 * 60)); const weeksLeft = Math.floor(totalSecondsLeft / (7 * 24 * 60 * 60)); const daysLeft = Math.floor(totalSecondsLeft / (24 * 60 * 60)); const hoursLeft = Math.floor(totalSecondsLeft % (24 * 60 * 60) / 3600); const minutesLeft = Math.floor(totalSecondsLeft % (24 * 60 * 60) % 3600 / 60); const secondsLeft = Math.floor(totalSecondsLeft % 60); const fullCountdown = `${yearsLeft}年: ${monthsLeft % 12}ヶ月: ${weeksLeft % 52}週: ${daysLeft % 7}日: ${hoursLeft}時間: ${minutesLeft}分: ${secondsLeft}秒`; setTimeLeft({ years: yearsLeft, months: monthsLeft, weeks: weeksLeft, days: daysLeft, fullCountdown: fullCountdown }); }, 1000); return ()=>clearInterval(intervalId); } }, [ age, gender, timeLeft.fullCountdown ]); const calculateTimeLeft = ()=>{ const currentAge = parseFloat(age); if (isNaN(currentAge) || currentAge < 0) return; const lifeExpectancy = averageLifeExpectancy[gender]; const yearsLeft = lifeExpectancy - currentAge; const monthsLeft = yearsLeft * 12; const weeksLeft = yearsLeft * 52.1429; const daysLeft = yearsLeft * 365; const now = new Date(); const birthDate = new Date(now.getFullYear() - currentAge, now.getMonth(), now.getDate()); const lifeExpectancyInDays = (lifeExpectancy - currentAge) * 365.25; const endDate = new Date(birthDate); endDate.setDate(birthDate.getDate() + lifeExpectancyInDays); const totalSecondsLeft = (endDate - now) / 1000; const hoursLeft = Math.floor(totalSecondsLeft % (24 * 60 * 60) / 3600); const minutesLeft = Math.floor(totalSecondsLeft % (24 * 60 * 60) % 3600 / 60); const secondsLeft = Math.floor(totalSecondsLeft % 60); const fullCountdown = `${yearsLeft}年: ${monthsLeft % 12}ヶ月: ${weeksLeft % 52}週: ${daysLeft % 7}日: ${hoursLeft}時間: ${minutesLeft}分: ${secondsLeft}秒`; setTimeLeft({ years: yearsLeft.toFixed(0), months: monthsLeft.toFixed(0), weeks: weeksLeft.toFixed(0), days: daysLeft.toFixed(0), fullCountdown: fullCountdown }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-5", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "人生の残り時間カウントダウン"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded shadow-md w-[300px]", onSubmit: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "age", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "今の年齢"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "age", type: "number", name: "age", min: "0", value: age, onChange: (e)=>setAge(e.target.value), __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "gender", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("select", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "gender", name: "gender", value: gender, onChange: (e)=>setGender(e.target.value), __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "男性"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "女性"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: calculateTimeLeft, __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "計算する"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 mt-6 rounded shadow-md text-center w-[300px]", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto text-blue-500 mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "残り年数: ", /*#__PURE__*/ React.createElement("span", { id: "yearsLeft", __source: { fileName: "", lineNumber: 117, columnNumber: 73 }, __self: this }, timeLeft.years), " 年"), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto text-blue-500 mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "残り月数: ", /*#__PURE__*/ React.createElement("span", { id: "monthsLeft", __source: { fileName: "", lineNumber: 118, columnNumber: 73 }, __self: this }, timeLeft.months), " ヶ月"), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto text-blue-500 mb-2", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "残り週数: ", /*#__PURE__*/ React.createElement("span", { id: "weeksLeft", __source: { fileName: "", lineNumber: 119, columnNumber: 73 }, __self: this }, timeLeft.weeks), " 週"), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto text-blue-500 mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "残り日数: ", /*#__PURE__*/ React.createElement("span", { id: "daysLeft", __source: { fileName: "", lineNumber: 120, columnNumber: 73 }, __self: this }, timeLeft.days), " 日")), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto text-red-500 mt-4", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, "残り: ", timeLeft.fullCountdown))); }