function MainComponent() { const [threads, setThreads] = React.useState([]); const [newThreadTitle, setNewThreadTitle] = React.useState(""); const [currentThread, setCurrentThread] = React.useState(null); const [currentMessage, setCurrentMessage] = React.useState(""); const [messages, setMessages] = React.useState({}); const [username, setUsername] = React.useState(""); const [password, setPassword] = React.useState(""); const [loggedIn, setLoggedIn] = React.useState(false); const [error, setError] = React.useState(""); const [displayName, setDisplayName] = React.useState(""); const handleLogin = (e)=>{ e.preventDefault(); if (username === "test" && password === "0000") { setLoggedIn(true); setError(""); } else { setError("ユーザー名またはパスワードが間違っています"); } }; const createThread = (e)=>{ e.preventDefault(); if (newThreadTitle.trim() === "") return; const newThread = { title: newThreadTitle, id: Math.random().toString(36).substr(2, 9) }; setThreads([ ...threads, newThread ]); setNewThreadTitle(""); }; const addMessage = (e)=>{ e.preventDefault(); if (currentMessage.trim() === "") return; const inappropriateWords = [ "殺す" ]; let sanitizedMessage = currentMessage; inappropriateWords.forEach((word)=>{ const regex = new RegExp(word, "gi"); sanitizedMessage = sanitizedMessage.replace(regex, "***"); }); const threadMessages = messages[currentThread.id] || []; if (threadMessages.length >= 100) { alert("定員に達しました"); return; } const name = displayName.trim() === "" ? "名無しさん" : displayName; setMessages({ ...messages, [currentThread.id]: [ ...threadMessages, `${name}: ${sanitizedMessage}` ] }); setCurrentMessage(""); }; React.useEffect(()=>{ if (threads.length === 0) { const sampleThread = { title: "サンプルスレッド", id: "sample" }; setThreads([ sampleThread ]); setMessages({ sample: [ "サンプルメッセージ1", "サンプルメッセージ2" ] }); } }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto my-6", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "トップページ"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, !loggedIn ? /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: handleLogin, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-red-500", __source: { fileName: "", lineNumber: 65, columnNumber: 23 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium font-roboto mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500", type: "text", id: "username", name: "username", value: username, onChange: (e)=>setUsername(e.target.value), __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium font-roboto mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500", type: "password", id: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-lg font-roboto hover:bg-blue-600 focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "入室")) : !currentThread ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "掲示板"), /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: createThread, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium font-roboto mb-2", htmlFor: "threadTitle", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, "スレッドタイトル"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500", type: "text", id: "threadTitle", name: "threadTitle", value: newThreadTitle, onChange: (e)=>setNewThreadTitle(e.target.value), __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-lg font-roboto hover:bg-blue-600 focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "作成")), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "スレッドリスト"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, threads.map((thread)=>/*#__PURE__*/ React.createElement("div", { key: thread.id, onClick: ()=>setCurrentThread(thread), className: "block p-4 bg-gray-200 rounded-lg hover:bg-gray-300 cursor-pointer", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, thread.title))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-red-500 text-white rounded-lg font-roboto hover:bg-red-600 focus:ring-2 focus:ring-red-500", onClick: ()=>setLoggedIn(false), __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "ログアウト")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, currentThread.title), /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: addMessage, __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium font-roboto mb-2", htmlFor: "displayName", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500", type: "text", id: "displayName", name: "displayName", value: displayName, onChange: (e)=>setDisplayName(e.target.value), placeholder: "名無しさん", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium font-roboto mb-2", htmlFor: "message", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500", type: "text", id: "message", name: "message", value: currentMessage, onChange: (e)=>setCurrentMessage(e.target.value), __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-lg font-roboto hover:bg-blue-600 focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "送信")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentThread(null), className: "mb-4 text-blue-500", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "スレッド一覧に戻る"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, (messages[currentThread.id] || []).map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "block p-4 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, index + 1, ". ", msg))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-red-500 text-white rounded-lg font-roboto hover:bg-red-600 focus:ring-2 focus:ring-red-500", onClick: ()=>setLoggedIn(false), __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "ログアウト")))); }