TODO アプリ

import { useRef, useState } from 'react'; import { Button, Checkbox, Container, Flex, Input, Stack, Title, } from '@mantine/core'; // ミリ秒後に resolve する sleep 関数 const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms)); type Todo = { name: string }; // タスクリスト初期データ const initialTodoList: Todo[] = [ { name: '観光スポットのリサーチをする' }, { name: 'スーパーに大根と卵を買いに行く' }, { name: '家計簿アプリにデータを入力する' }, ]; export const TodoApp = () => { const [name, setName] = useState(''); const [todoList, setTodoList] = useState(initialTodoList); const isCreatingRef = useRef(false); // タスク作成処理 const createTodo = async () => { if (isCreatingRef.current) return; // 処理中はスキップ isCreatingRef.current = true; try { await sleep(3000); // 時間のかかるタスク作成 API 呼び出しを想定 setTodoList((todoList) => [{ name }, ...todoList]); setName(''); } catch { alert('エラーが発生しました'); } isCreatingRef.current = false; }; return ( {/* タイトル */} TODO アプリ {/* 入力欄 */} setName(event.currentTarget.value)} /> {/* タスクリスト */} {todoList.map(({ name }) => ( ))} ); };