TODOビュー機能 実装計画

概要

ブログの右上にあるビュー切り替え（カレンダー/リスト）の横に「TODOビュー」を追加し、プロジェクトごとにTODOをグループ化して表示する。

現状分析

既存のTODOシステム

• frontmatter: todo: 'active' | 'done' | 'canceled' | 'memo'
• カテゴリ: category: 'dev' | 'personal'
• フィルタリング: BlogCalendar.vueで色分け・フィルタ済み

既存TODO件数（2026-01-07時点）

課題

現状では「どのプロジェクトのTODOか」が分からない。例：

• Memento Moriアプリ開発
• 財務データ表示機能
• Nuxt 2→3移行
• ブログ機能改善

これらが混在しており、プロジェクト単位での進捗把握が困難。

実装内容

1. スキーマ拡張（content.config.ts）

schema: z.object({
  // 既存フィールド
  title: z.string().optional(),
  description: z.string().optional(),
  // ...

  // 新規追加
  project_name: z.string().optional(),
})

2. TODOビューコンポーネント作成

ファイル: app/components/TodoView.vue

機能:

• プロジェクト名でグループ化
• 各プロジェクト内でステータス別に表示（active → memo → done）
• プロジェクトの折りたたみ/展開
• アクティブなプロジェクトのハイライト

表示イメージ:

📁 memento-mori（2件 active）
  ├ 🔴 名言機能実装
  └ 🔴 シェア画像生成

📁 financial-data（1件 active）
  └ 🔴 四半期メトリクス追加

📁 blog-platform（3件 memo）
  ├ 📝 Nuxt Content画像処理
  ├ 📝 検索機能改善
  └ ✅ カレンダービュー実装（done）

📁 未分類（project_name未設定）
  └ ...

3. ビュー切り替えUI更新（blog/index.vue）

現在：[リスト] [カレンダー]

変更後：[TODO] [リスト] [カレンダー]

const viewMode = ref<'list' | 'calendar' | 'todo'>('calendar')

4. 既存コンテンツへのproject_name追加

推測される分類：

ファイル変更一覧

実装順序

1. content.config.ts スキーマ更新
2. TodoView.vue コンポーネント作成
3. blog/index.vue ビュー切り替え追加
4. 型定義の整合性確認
5. 既存コンテンツへのproject_name追加
6. 動作確認

将来の拡張案

• プロジェクトごとの進捗率表示
• プロジェクトのアーカイブ機能
• プロジェクト別のフィルタリング（特定プロジェクトのみ表示）
• LocalStorageでの表示状態永続化