複雑なUIの実装
ドラッグ&ドロップ、無限スクロール、仮想リストなど、複雑なUIをAIに段階的に依頼しながら実装します。
ドラッグ&ドロップ（カンバンボード）
AIへの指示
@dnd-kit/core を使ってカンバンボードを実装してください。 【要件】 - 3つのカラム: Todo, In Progress, Done - タスクをカラム間でドラッグ&ドロップ - ドロップ時にAPIを呼んでステータス更新 - ドラッグ中のビジュアルフィードバック 段階的に実装してください： 1. まず基本的なドラッグ&ドロップ 2. 次にカラム間の移動 3. 最後にAPI連携
実装の構成
KanbanBoard.tsx - DndContext を提供Column.tsx - useDroppable でドロップ領域TaskCard.tsx - useDraggable でドラッグ可能無限スクロール
AIへの指示
Intersection Observer を使った無限スクロールを実装してください。 【要件】 - スクロール末尾に到達したら次のページを読み込み - ローディング表示 - エラー時のリトライボタン - TanStack Query (React Query) と組み合わせ
実装例
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
useInfiniteQuery({
queryKey: ['posts'],
queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
getNextPageParam: (lastPage) => lastPage.nextPage,
});
// Intersection Observer でトリガー
const ref = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting && hasNextPage) {
fetchNextPage();
}
});
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, [hasNextPage]);
仮想リスト
大量データの効率的な表示
10,000件以上のリストを表示する場合、@tanstack/react-virtual で仮想化
import { useVirtualizer } from '@tanstack/react-virtual';
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 50,
});
まとめ
- ✓段階的に実装 - 複雑なUIは小さく分けて依頼
- ✓ライブラリを活用 - dnd-kit、react-virtual など
- ✓パフォーマンスを意識 - 仮想化、遅延読み込み