この Build で見せるもの
プロジェクト内のタスクを確認するための小さな管理画面です。固定データで動作し、5 フィルタ次元と 4 ソート、詳細復帰まで実装した完成例です。
| 機能 | 概要 |
|---|---|
| キーワード検索 | タイトル・説明・担当者・ラベルを横断してフリーテキスト検索 |
| ステータスフィルタ | 未着手 / 進行中 / ブロック中 / 完了 |
| 優先度フィルタ | 高 / 中 / 低 |
| 担当者フィルタ | 担当者名で絞り込む |
| ラベルフィルタ | ラベルで絞り込む |
| ソート | 更新が新しい順 / 作成が新しい順 / 期限が近い順 / 優先度が高い順 |
| アクティブチップ | 絞り込み中の条件をチップ表示、個別に解除できる |
| EmptyState | 0 件時に条件の種類に応じた解除ボタンを表示 |
| 詳細復帰 | 詳細から元の絞り込み一覧へ from パラメータで戻れる |
| open redirect 対策 | /tasks プレフィックス以外の from は弾く |
ファイル構成
| ファイル | 役割 |
|---|---|
src/app/tasks/page.tsx | 一覧ページ（サーバーコンポーネント） |
src/app/tasks/[id]/page.tsx | 詳細ページ（from パラメータ対応） |
src/components/tasks/TaskCard.tsx | タスクカード（returnHref prop 対応） |
src/components/tasks/TaskFilterPanel.tsx | サイドバーフィルタ（クライアント） |
src/lib/tasks/data.ts | データ定義・型・取得関数 |
src/lib/tasks/filters.ts | フィルタ・ソート純粋関数 |
src/lib/tasks/query.ts | URL クエリのパース・ビルド・open redirect 検証 |
tests/tasks-flow.spec.ts | Playwright E2E テスト |
設計のポイント
フィルタ状態は URL クエリで管理しています。ブラウザの戻る・シェア・リロードで同じ絞り込み状態を再現できます。
filterTasks と sortTasks は UI から完全に分離した純粋関数です。5 つのフィルタ次元（q / status / priority / assignee / label）と 4 つのソートを一関数で処理しつつ、入力・出力が明確で E2E テストが書きやすい構造になっています。
parseTaskReturnHref はサーバー側で from パラメータを検証します。/tasks または /tasks?... 以外は /tasks にフォールバックするため、open redirect になりません。
転用のしかた
他のドメイン（商品一覧・ユーザー一覧・申請管理）へ転用するときは data.ts の型とデータを差し替えるだけです。filters.ts と query.ts の構造・page.tsx のレイアウトはほぼそのまま使えます。フィルタ次元が増えた場合は parseTaskListQuery と filterTasks に条件を追記するだけで対応できます。
実装の詳細な手順は関連 Playbook 「タスク管理画面を作る」 で段階的に説明しています。