React の Container/Presentational × Hooks を関数型アーキテクチャで再設計するconst PAGE_SIZE = 20; export const UserListContainer = () => { const [users, setUsers] = useState<User[]>([]); const [sortKey, setSortKey] = useState<SortKey>("name"); const [page, setPage] = useState(1); useEffect(() => { fetchUsers().then(setUsers); }, []); // 関数型コア: 純粋関数の呼び出し（宣言的） const displayUsers = sortUsers(users, sortKey); const pagedUsers = displayUsers.slice((page - 1) * PAGE_SIZE, page
