第9部:実践プロジェクト Step 34 / 36

実装フェーズ2:高度な機能

ドラッグ&ドロップ、リアルタイム同期など、高度な機能をAIと実装します。

Phase 2 で実装する機能

1 ドラッグ&ドロップ(dnd-kit)
2 WebSocketによるリアルタイム同期
3 楽観的更新(Optimistic Update)
4 チームメンバー招待機能

AIへの指示例

リアルタイム同期

WebSocketでリアルタイム同期を実装してください。

【要件】
- タスクの作成・更新・削除を他のユーザーに即時反映
- プロジェクトごとにルーム分け
- 接続/切断時の処理

【バックエンド】
- FastAPIのWebSocket機能を使用
- Redisでメッセージをブロードキャスト

【フロントエンド】
- useWebSocketフックを作成
- TanStack Queryのキャッシュを更新

ドラッグ&ドロップ

@dnd-kit/core を使ってカンバンのドラッグ&ドロップを実装してください。

【要件】
- タスクをカラム間で移動
- 同一カラム内で順序変更
- ドロップ時にAPIでステータス更新
- 楽観的更新(即座にUIを更新、失敗時はロールバック)

実装時の注意点

  • 競合状態に注意 - 同時編集時の整合性
  • エラー時のリカバリ - 楽観的更新失敗時の処理
  • 接続断の対応 - 再接続ロジック
実装フェーズ1 次へ:テスト・CI/CD