function MainComponent() { const [strings, setStrings] = React.useState({ first: "", second: "", matches: [] }); function handleChange(event) { setStrings((prev)=>({ ...prev, [event.target.name]: event.target.value })); } React.useEffect(()=>{ const matches = []; const { first, second } = strings; const minLen = Math.min(first.length, second.length); for(let i = 0; i < minLen; i++){ if (first[i] === second[i]) { matches.push(i); } } setStrings((prev)=>({ ...prev, matches })); }, [ strings.first, strings.second ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen p-5 bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center font-roboto mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, "文章比較ツール"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "first", placeholder: "文章を入力してください...", className: "p-2 border border-gray-300 rounded-lg h-[200px]", value: strings.first, onChange: handleChange, __source: { fileName: "", lineNumber: 31, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "second", placeholder: "もう一つの文章を入力してください...", className: "p-2 border border-gray-300 rounded-lg h-[200px]", value: strings.second, onChange: handleChange, __source: { fileName: "", lineNumber: 38, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-5 p-5 bg-white rounded-lg border border-gray-300 flex flex-col gap-2", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#333]", __source: { fileName: "", lineNumber: 47, columnNumber: 21 }, __self: this }, "文章の比較:"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, strings.first.split('').map((char, index)=>/*#__PURE__*/ React.createElement("span", { key: index, style: { textDecoration: strings.matches.includes(index) ? 'underline' : 'none' }, __source: { fileName: "", lineNumber: 50, columnNumber: 29 }, __self: this }, char))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 21 }, __self: this }, strings.second.split('').map((char, index)=>/*#__PURE__*/ React.createElement("span", { key: index, style: { textDecoration: strings.matches.includes(index) ? 'underline' : 'none' }, __source: { fileName: "", lineNumber: 57, columnNumber: 29 }, __self: this }, char)))))); }