CodexのIDE拡張を試してみた(Vscode/Cursor)

個人開発の本番運用を想定して、基本的なタスク管理機能を提供するToDoアプリを実装してほしい。ストレージはlocalStorageでOK。Next.js + Tailwindを使ってほしい。まずディレクトリとコンポーネント設計をお願い。

以下は、Next.js(App Router) + Tailwind + localStorage 前提のToDoアプリの最小〜拡張可能な設計案です。まずはMVPを素直に作り、後からタグ/期限/並び替えなどを足せる構成にしています。

**方針**

- クライアント側状態: Context + Reducerで管理し、localStorageへ同期。
- SSR考慮: localStorageはクライアント専用。読み込みはuseEffectで行い、初期描画は安全なデフォルト。
- App Router: 親はServer Component、アプリ本体はClient Componentに分離。
- Tailwind: グローバルCSSで読み込み、ユーティリティでシンプルに構築。

**ディレクトリ構成**

- app/layout.tsx: HTMLスケルトン、app/globals.cssを読み込み。
- app/page.tsx: ルート。最小なら直接"use client"でOK。推奨は下記TodoAppを呼ぶ。
- app/globals.css: Tailwindの@tailwind base; @tailwind components; @tailwind utilities;
- components/app/TodoApp.tsx: "use client"。Providerやレイアウトをまとめるコンテナ。
- components/tasks/TaskForm.tsx: 追加/編集フォーム（タイトル、任意のメモ/期限/優先度/タグ）。
- components/tasks/TaskList.tsx: タスク一覧（空表示時はEmptyState）。
- components/tasks/TaskItem.tsx: 1件（完了トグル、編集/削除、ドラッグ並び替えは拡張で）。
- components/tasks/TaskToolbar.tsx: フィルタ(全件/未完/完了)、検索、並び替え、完了一括削除。
- components/tasks/EmptyState.tsx: タスク0件時のプレースホルダ。
- components/ui/Button.tsx: ボタンの共通化。
- components/ui/Input.tsx: テキスト/検索フィールド。
- components/ui/Checkbox.tsx: チェックボックス。
- components/ui/Select.tsx: セレクト（並び替え/優先度）。
- components/ui/Modal.tsx: 編集ダイアログ（後で導入可）。
- context/TasksProvider.tsx: Context + Reducer。永続化の副作用もここで。
- hooks/useTasks.ts: Providerと連携する便利フック（CRUD、フィルタ/検索/並び替え適用）。
- hooks/useLocalStorage.ts: 型安全なlocalStorageラッパ（SSR安全にno-op初期化）。
- hooks/useIsMounted.ts: ハイドレーション差分回避のためのmounted判定。
- lib/types.ts: Task, TaskFilter, SortKey, Priorityなどの型。
- lib/tasks.ts: タスクID発行、正規化、並び替え/フィルタ/検索の純関数群。
- lib/validators.ts: 入力バリデーション（必須タイトル、文字数など）。
- lib/storage.ts: localStorageキー、シリアライズ/マイグレーション（todo.tasks.v1など）。
- public/: アイコンなど任意。
- tailwind.config.ts, postcss.config.js, next.config.ts, tsconfig.json: ルート設定。

**ドメインモデル（MVP想定）**

- Task: id, title, completed, createdAt, updatedAt
- 拡張フィールド（後で有効化容易）: description?, dueDate?, priority?, tags?[]
- TaskFilter: all | active | completed
- SortKey: createdAt | dueDate | priority | title
- State: tasks: Task[], filter, sort, query
- Actions: add, update, toggle, remove, clearCompleted, reorder, bulkToggle, setFilter, setSort, setQuery

**永続化の設計**

- context/TasksProvider.tsx: Reducerのdispatch後にuseEffectでtasksをlocalStorageへ保存。
- 初期読み込み: マウント時にlocalStorageから復元。データ不整合時は安全にリセット。
- キー: todo.tasks.v1（将来のスキーマ変更時にバージョンで移行）。

**ページ/ルーティング**

- app/page.tsx: MVPは単一ページ。将来、app/stats/page.tsxやapp/settings/page.tsxを追加可能。
- メタデータ: layout.tsxでmetadata設定。

**UI/スタイリング指針**

- Tailwindユーティリティ中心。共通部品はcomponents/ui/*に集約。
- フォーカスリング/ラベル関連を丁寧にし、キーボード操作/アクセシビリティを担保。
- ダークモードはTailwindのclass戦略を採用（必要ならThemeProvider拡張）。

**テスト観点（任意）**

- lib/tasks.tsの純関数に対して軽量なユニットテスト（並び替え/フィルタ/検索）。

**次のステップ**

- ご希望なら、この構成でNext.js + Tailwindの初期プロジェクトを作成し、上記の空ファイル/雛形を一気に生成します。続けますか？
- 先に機能スコープを確定したい場合: 期限/優先度/タグ/並び替えのどれまでMVPに入れますか（MVPはタイトル+完了トグル+削除+フィルタがおすすめ）？