function MainComponent({ tasks, onAddTask, onDeleteTask, onToggleComplete, onStartEditing, onSaveEdit }) { const [newTask, setNewTask] = React.useState(''); const [editingIndex, setEditingIndex] = React.useState(null); const [editingText, setEditingText] = React.useState(''); const handleAddTask = ()=>{ if (newTask.trim() !== '') { onAddTask(newTask); setNewTask(''); } }; const handleStartEditing = (index, text)=>{ setEditingIndex(index); setEditingText(text); onStartEditing(index, text); }; const handleSaveEdit = ()=>{ if (editingText.trim() !== '') { onSaveEdit(editingIndex, editingText); setEditingIndex(null); } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "タスク管理アプリ"), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newTask, onChange: (e)=>setNewTask(e.target.value), className: "flex-grow mr-2 p-2 border rounded", placeholder: "作成", name: "newTask", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddTask, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, tasks.map((task, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, editingIndex === index ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "text", value: editingText, onChange: (e)=>setEditingText(e.target.value), className: "flex-grow mr-2 p-2 border rounded", name: `editTask-${index}`, __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveEdit, className: "px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600 mr-1", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, "保存")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: task.completed, onChange: ()=>onToggleComplete(index), className: "mr-2", name: `completeTask-${index}`, __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: task.completed ? 'line-through' : '', __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, task.text), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleStartEditing(index, task.text), className: "ml-auto px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 mr-1", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "編集")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDeleteTask(index), className: "px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "削除"))))); } function StoryComponent() { const [tasks, setTasks] = React.useState([]); const isLocalStorageAvailable = ()=>{ try { localStorage.setItem('test', 'test'); localStorage.removeItem('test'); return true; } catch (e) { return false; } }; React.useEffect(()=>{ if (isLocalStorageAvailable()) { const storedTasks = localStorage.getItem('tasks'); if (storedTasks) { try { setTasks(JSON.parse(storedTasks)); } catch (error) { console.error('タスクの読み込み中にエラーが発生しました:', error); } } } }, []); React.useEffect(()=>{ if (isLocalStorageAvailable()) { try { localStorage.setItem('tasks', JSON.stringify(tasks)); } catch (error) { console.error('タスクの保存中にエラーが発生しました:', error); } } }, [ tasks ]); const handleAddTask = (newTask)=>{ setTasks([ ...tasks, { text: newTask, completed: false } ]); }; const handleDeleteTask = (index)=>{ const updatedTasks = tasks.filter((_, i)=>i !== index); setTasks(updatedTasks); }; const handleToggleComplete = (index)=>{ const updatedTasks = tasks.map((task, i)=>i === index ? { ...task, completed: !task.completed } : task); setTasks(updatedTasks); }; const handleStartEditing = ()=>{}; const handleSaveEdit = (index, newText)=>{ const updatedTasks = tasks.map((task, i)=>i === index ? { ...task, text: newText } : task); setTasks(updatedTasks); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 157, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { tasks: tasks, onAddTask: handleAddTask, onDeleteTask: handleDeleteTask, onToggleComplete: handleToggleComplete, onStartEditing: handleStartEditing, onSaveEdit: handleSaveEdit, __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this })); }