【前編】Cursor × Serena MCPで始める仕様駆動開発 ― 仕組み作り編

---

title: "仕様駆動開発を開始"

description: "Serenaツールを活用して要件定義から始める仕様駆動開発を開始します"

icon: "📋"

---

@spec.md に従って、Serena仕様駆動開発を開始します。

**機能名：** {{feature_name}}

**プロジェクト名：** {{project_name}}

## 実行内容

1. 既存メモリーを`mcp_serena_list_memories`で確認

2. 関連するコードベースを`mcp_serena_list_dir`と`mcp_serena_get_symbols_overview`で調査

3. 要件定義フェーズを実施

4. `mcp_serena_write_memory`で成果物を保存

   - memory_name: `spec_{{project_name}}_requirements`

調査・分析ツールを使用して要件定義を開始してください。

---

title: "実装を開始"

description: "実装計画に基づいて実装を開始します"

icon: "🚀"

---

@spec.md に従って、実装フェーズを開始します。

実装計画の優先順位に従って、最初のタスクから実装を進めてください。

## 実行内容

1. 実装計画を確認

2. 最優先タスクから順次実装

3. Serena編集ツールを活用してコードを編集

4. 各タスク完了後に報告

---

title: "設計フェーズに進む"

description: "要件定義が完了後、設計フェーズに進みます"

icon: "🎨"

---

@spec.md に従って、設計フェーズに進めてください。

要件定義ファイルを読み込んでから、設計フェーズの成果物を作成してください。

# タスクデータ永続化機能 - 実装計画

## 概要

本実装計画は、設計書に基づいてタスクデータ永続化機能を段階的に実装するためのロードマップです。各タスクは独立して実装可能で、1〜3日程度で完了できる粒度に分解されています。

## タスク一覧

| ID | タスク名 | 優先度 | 見積工数 | 依存タスク | ステータス |
|----|---------|--------|---------|-----------|----------|
| TASK-001 | StorageService実装 | High | 2-3時間 | なし | 未着手 |
| TASK-002 | StorageServiceテスト実装 | High | 1-2時間 | TASK-001 | 未着手 |
| TASK-003 | TaskContext修正 | High | 1時間 | TASK-001 | 未着手 |
| TASK-004 | TagContext修正 | High | 1時間 | TASK-001 | 未着手 |
| TASK-005 | ListContext修正 | High | 1時間 | TASK-001 | 未着手 |
| TASK-006 | 既存テスト実行と修正 | High | 1-2時間 | TASK-003, TASK-004, TASK-005 | 未着手 |
| TASK-007 | E2Eテストと動作確認 | Medium | 1-2時間 | TASK-006 | 未着手 |

**総見積工数**: 8-12時間（1-2日）

## 依存関係グラフ

```
TASK-001 (StorageService実装)
    ├─→ TASK-002 (テスト実装)
    ├─→ TASK-003 (TaskContext修正)
    ├─→ TASK-004 (TagContext修正)
    └─→ TASK-005 (ListContext修正)
            ↓
        TASK-006 (既存テスト実行)
            ↓
        TASK-007 (E2Eテスト)
```

## 実装順序

### フェーズ1: コア機能実装（MUST）
1. **TASK-001**: StorageService実装
2. **TASK-002**: StorageServiceテスト実装

### フェーズ2: Context統合（MUST）
3. **TASK-003**: TaskContext修正
4. **TASK-004**: TagContext修正
5. **TASK-005**: ListContext修正

### フェーズ3: 検証（MUST）
6. **TASK-006**: 既存テスト実行と修正
7. **TASK-007**: E2Eテストと動作確認

---

## TASK-001: StorageService実装

### タスク概要
localStorageを抽象化したStorageServiceを実装します。DataHydrationServiceと同様のパターンで、タスク、タグ、タスクリストの永続化機能を提供します。

### 優先度
**High** - 全ての機能の基盤となるため最優先

### 実装内容
1. `src/common/utils/StorageService.js`を新規作成
2. 以下の機能を実装：
   - `saveTasks()`, `loadTasks()` - タスクの保存・読み込み
   - `saveTags()`, `loadTags()` - タグの保存・読み込み
   - `saveTaskLists()`, `loadTaskLists()` - タスクリストの保存・読み込み
   - `saveVersion()`, `loadVersion()` - バージョン管理
   - `clearAll()` - 全データ削除
   - `isAvailable()` - localStorage利用可否チェック
   - `getStorageSize()` - 使用容量計算
3. エラーハンドリング実装：
   - QuotaExceededError（容量超過）
   - JSONパースエラー
   - localStorage利用不可

### 完了条件（Definition of Done）
- [ ] StorageService.jsファイルが作成されている
- [ ] 全ての公開APIが実装されている
- [ ] JSDocコメントが全関数に記載されている
- [ ] エラーハンドリングが適切に実装されている
- [ ] DataHydrationServiceと同じコーディングスタイルに従っている
- [ ] ESLintエラーがない

### ファイル作成・修正リスト
- **新規作成**: `src/common/utils/StorageService.js`

### 使用するツール
- `write` - 新規ファイル作成

### 実装コード（設計書より）
```javascript
/**
 * Browser localStorage wrapper service for Task Dashboard
 * Provides persistent storage for tasks, tags, and task lists
 */

const STORAGE_KEYS = {
  TASKS: 'taskDashboard_tasks',
  TAGS: 'taskDashboard_tags',
  TASK_LISTS: 'taskDashboard_taskLists',
  VERSION: 'taskDashboard_version'
};

const CURRENT_VERSION = '1.0.0';

/**
 * Generic function to save data to localStorage
 * @private
 */
const saveData = (key, data) => {
  try {
    if (!isAvailable()) {
      console.warn('localStorage is not available');
      return false;
    }
    const jsonString = JSON.stringify(data);
    localStorage.setItem(key, jsonString);
    return true;
  } catch (error) {
    if (error.name === 'QuotaExceededError') {
      console.error('localStorage quota exceeded:', error);
    } else {
      console.error(`Failed to save data to ${key}:`, error);
    }
    return false;
  }
};

/**
 * Generic function to load data from localStorage
 * @private
 */
const loadData = (key) => {
  try {
    if (!isAvailable()) {
      return null;
    }
    const jsonString = localStorage.getItem(key);
    if (jsonString === null) {
      return null;
    }
    return JSON.parse(jsonString);
  } catch (error) {
    console.error(`Failed to load data from ${key}:`, error);
    return null;
  }
};

/**
 * Check if localStorage is available
 * @private
 */
const isAvailable = () => {
  try {
    const testKey = '__storage_test__';
    localStorage.setItem(testKey, 'test');
    localStorage.removeItem(testKey);
    return true;
  } catch (e) {
    return false;
  }
};

export const StorageService = {
  // Tasks
  saveTasks: (tasks) => saveData(STORAGE_KEYS.TASKS, tasks),
  loadTasks: () => loadData(STORAGE_KEYS.TASKS),

  // Tags
  saveTags: (tags) => saveData(STORAGE_KEYS.TAGS, tags),
  loadTags: () => loadData(STORAGE_KEYS.TAGS),

  // Task Lists
  saveTaskLists: (taskLists) => saveData(STORAGE_KEYS.TASK_LISTS, taskLists),
  loadTaskLists: () => loadData(STORAGE_KEYS.TASK_LISTS),

  // Version
  saveVersion: (version) => saveData(STORAGE_KEYS.VERSION, { 
    version, 
    lastUpdated: Date.now() 
  }),
  loadVersion: () => {
    const versionData = loadData(STORAGE_KEYS.VERSION);
    return versionData ? versionData.version : null;
  },

  // Utilities
  clearAll: () => {
    try {
      Object.values(STORAGE_KEYS).forEach(key => {
        localStorage.removeItem(key);
      });
      return true;
    } catch (error) {
      console.error('Failed to clear storage:', error);
      return false;
    }
  },

  isAvailable: isAvailable,

  getStorageSize: () => {
    let total = 0;
    Object.values(STORAGE_KEYS).forEach(key => {
      const value = localStorage.getItem(key);
      if (value) {
        total += value.length + key.length;
      }
    });
    return total;
  }
};
```

### 注意点・リスク
- **localStorage利用可否**: プライベートブラウジングモードではlocalStorageが無効な場合があるため、`isAvailable()`で必ず確認
- **容量制限**: localStorageは通常5-10MBだが、ブラウザにより異なる。QuotaExceededErrorの適切なハンドリングが必須
- **JSONシリアライズ**: 循環参照や特殊なオブジェクトは保存できないが、現在のデータモデルでは問題なし
- **コーディングスタイル**: DataHydrationService.jsと同じスタイルで実装すること

### 見積工数
**2-3時間**

### 依存タスク
なし

---

## TASK-002: StorageServiceテスト実装

### タスク概要
StorageServiceの単体テストを実装します。既存のテストパターン（Vitest + Testing Library）に従い、全ての公開APIをテストします。

### 優先度
**High** - コア機能の品質保証

### 実装内容
1. `src/common/utils/StorageService.test.js`を新規作成
2. 以下のテストケースを実装：
   - **Tasks**: 保存・読み込み、データなし時の挙動
   - **Tags**: 保存・読み込み、データなし時の挙動
   - **TaskLists**: 保存・読み込み、データなし時の挙動
   - **Version**: 保存・読み込み
   - **Utilities**: clearAll, isAvailable, getStorageSize
   - **エラーケース**: localStorage無効時、容量超過時（モック）
3. beforeEachでlocalStorageをクリア

### 完了条件（Definition of Done）
- [ ] StorageService.test.jsファイルが作成されている
- [ ] 全ての公開APIがテストされている
- [ ] 正常系・異常系の両方がカバーされている
- [ ] テストカバレッジが90%以上
- [ ] 全てのテストがパスする
- [ ] テストコードが既存のテストパターンに従っている

### ファイル作成・修正リスト
- **新規作成**: `src/common/utils/StorageService.test.js`

### 使用するツール
- `write` - 新規ファイル作成

### 実装コード（設計書より）
```javascript
import { describe, test, expect, beforeEach, vi } from 'vitest';
import { StorageService } from './StorageService';

describe('StorageService', () => {
  beforeEach(() => {
    localStorage.clear();
  });

  describe('Tasks', () => {
    test('should save and load tasks', () => {
      const tasks = [
        { id: 1, title: 'Test Task', isCompleted: false, tags: [] }
      ];
      
      const saved = StorageService.saveTasks(tasks);
      expect(saved).toBe(true);
      
      const loaded = StorageService.loadTasks();
      expect(loaded).toEqual(tasks);
    });

    test('should return null when no tasks stored', () => {
      const loaded = StorageService.loadTasks();
      expect(loaded).toBeNull();
    });
  });

  describe('Tags', () => {
    test('should save and load tags', () => {
      const tags = ['work', 'personal'];
      
      const saved = StorageService.saveTags(tags);
      expect(saved).toBe(true);
      
      const loaded = StorageService.loadTags();
      expect(loaded).toEqual(tags);
    });
  });

  describe('TaskLists', () => {
    test('should save and load task lists', () => {
      const lists = [
        { id: 'default', title: 'All Tasks', filters: [] }
      ];
      
      const saved = StorageService.saveTaskLists(lists);
      expect(saved).toBe(true);
      
      const loaded = StorageService.loadTaskLists();
      expect(loaded).toEqual(lists);
    });
  });

  describe('Version', () => {
    test('should save and load version', () => {
      const saved = StorageService.saveVersion('1.0.0');
      expect(saved).toBe(true);
      
      const loaded = StorageService.loadVersion();
      expect(loaded).toBe('1.0.0');
    });
  });

  describe('Utilities', () => {
    test('should clear all storage', () => {
      StorageService.saveTasks([{ id: 1 }]);
      StorageService.saveTags(['tag']);
      
      const cleared = StorageService.clearAll();
      expect(cleared).toBe(true);
      
      expect(StorageService.loadTasks()).toBeNull();
      expect(StorageService.loadTags()).toBeNull();
    });

    test('should check storage availability', () => {
      expect(StorageService.isAvailable()).toBe(true);
    });

    test('should calculate storage size', () => {
      StorageService.saveTasks([{ id: 1, title: 'Task' }]);
      const size = StorageService.getStorageSize();
      expect(size).toBeGreaterThan(0);
    });
  });
});
```

### 注意点・リスク
- **localStorage.clear()**: 各テスト前に必ずクリアすること
- **モック不要**: localStorageはJSDOMで自動的にモック化される
- **エラーケーステスト**: 容量超過のテストは実装が複雑なため、初期実装では省略可能

### 見積工数
**1-2時間**

### 依存タスク
- TASK-001（StorageService実装）

---

## TASK-003: TaskContext修正

### タスク概要
TaskContextにStorageServiceを統合し、タスクの自動保存・自動復元機能を実装します。

### 優先度
**High** - メイン機能（タスク管理）の永続化

### 実装内容
1. インポート追加：`import { StorageService } from '../common/utils/StorageService';`
2. useState初期化ロジック修正：
   - まずStorageService.loadTasks()を試行
   - データがあればそれを使用
   - なければ既存のハイドレーションロジックを使用
3. useEffect追加：
   - tasksの変更を監視
   - StorageService.saveTasks(tasks)を呼び出し

### 完了条件（Definition of Done）
- [ ] StorageServiceがインポートされている
- [ ] useState初期化でlocalStorageから読み込み
- [ ] useEffectで自動保存が実装されている
- [ ] 既存のCRUD操作が正常に動作する
- [ ] ESLintエラーがない
- [ ] ブラウザリロード後にタスクが復元される

### ファイル修正リスト
- **修正**: `src/context/TaskContext.jsx`

### 使用するSerenaツール
1. `mcp_serena_insert_before_symbol` - インポート文追加（TaskContextシンボルの前）
2. `mcp_serena_find_symbol` - TaskProvider内のuseState部分を特定
3. `search_replace` または 手動編集 - useState初期化ロジック変更
4. `mcp_serena_insert_after_symbol` - useEffect追加（既存のuseEffectの後）

### 修正箇所

#### 修正1: インポート追加
```javascript
// 既存のインポート
import React, { createContext, useState, useContext, useEffect } from 'react';
import { DataHydrationService } from '../common/utils/DataHydrationService';

// ↓ 追加
import { StorageService } from '../common/utils/StorageService';
```

#### 修正2: useState初期化の変更
```javascript
// 修正前
const [tasks, setTasks] = useState(() => {
  return DataHydrationService.shouldHydrate() 
    ? DataHydrationService.getInitialTasks() 
    : [];
});

// 修正後
const [tasks, setTasks] = useState(() => {
  // まずlocalStorageから読み込み
  const storedTasks = StorageService.loadTasks();
  if (storedTasks !== null) {
    return storedTasks;
  }
  // localStorageにデータがない場合、ハイドレーションを確認
  return DataHydrationService.shouldHydrate() 
    ? DataHydrationService.getInitialTasks() 
    : [];
});
```

#### 修正3: useEffect追加
```javascript
// 既存のuseEffect（stats更新）の後に追加

// タスクをlocalStorageに自動保存
useEffect(() => {
  StorageService.saveTasks(tasks);
}, [tasks]);
```

### 注意点・リスク
- **初回レンダリング**: useState初期化時に即座に保存が走るが、これは意図した動作
- **パフォーマンス**: タスク数が多い場合でも、JSON.stringifyは十分高速
- **既存機能**: 全てのCRUD操作が変更なく動作することを確認

### 見積工数
**1時間**

### 依存タスク
- TASK-001（StorageService実装）

---

## TASK-004: TagContext修正

### タスク概要
TagContextにStorageServiceを統合し、タグの自動保存・自動復元機能を実装します。

### 優先度
**High** - タグ機能の永続化

### 実装内容
1. インポート追加：`import { StorageService } from '../common/utils/StorageService';`
2. useState初期化ロジック修正：
   - まずStorageService.loadTags()を試行
   - データがあればそれを使用
   - なければ既存のハイドレーションロジックを使用
3. useEffect追加：
   - tagsの変更を監視
   - StorageService.saveTags(tags)を呼び出し

### 完了条件（Definition of Done）
- [ ] StorageServiceがインポートされている
- [ ] useState初期化でlocalStorageから読み込み
- [ ] useEffectで自動保存が実装されている
- [ ] 既存のタグ操作が正常に動作する
- [ ] ESLintエラーがない
- [ ] ブラウザリロード後にタグが復元される

### ファイル修正リスト
- **修正**: `src/context/TagContext.jsx`

### 使用するSerenaツール
1. `mcp_serena_insert_before_symbol` - インポート文追加
2. `search_replace` - useState初期化ロジック変更
3. `mcp_serena_insert_after_symbol` - useEffect追加

### 修正箇所

#### 修正1: インポート追加
```javascript
import { StorageService } from '../common/utils/StorageService';
```

#### 修正2: useState初期化の変更
```javascript
// 修正前
const [tags, setTags] = useState(() => {
  return DataHydrationService.shouldHydrate() 
    ? DataHydrationService.getInitialTags() 
    : [];
});

// 修正後
const [tags, setTags] = useState(() => {
  const storedTags = StorageService.loadTags();
  if (storedTags !== null) {
    return storedTags;
  }
  return DataHydrationService.shouldHydrate() 
    ? DataHydrationService.getInitialTags() 
    : [];
});
```

#### 修正3: useEffect追加
```javascript
// タグをlocalStorageに自動保存
useEffect(() => {
  StorageService.saveTags(tags);
}, [tags]);
```

### 注意点・リスク
- **タスクとの連携**: TagContextはTaskContextに依存しているが、永続化は独立して動作
- **タグの自動収集**: tasksからのタグ収集ロジックは既存のまま維持

### 見積工数
**1時間**

### 依存タスク
- TASK-001（StorageService実装）

---

## TASK-005: ListContext修正

### タスク概要
ListContextにStorageServiceを統合し、タスクリストの自動保存・自動復元機能を実装します。

### 優先度
**High** - リスト機能の永続化

### 実装内容
1. インポート追加：`import { StorageService } from '../common/utils/StorageService';`
2. useState初期化ロジック修正：
   - まずStorageService.loadTaskLists()を試行
   - データがあればそれを使用
   - なければ既存のハイドレーションロジックを使用
3. useEffect追加：
   - taskListsの変更を監視
   - StorageService.saveTaskLists(taskLists)を呼び出し

### 完了条件（Definition of Done）
- [ ] StorageServiceがインポートされている
- [ ] useState初期化でlocalStorageから読み込み
- [ ] useEffectで自動保存が実装されている
- [ ] 既存のリスト操作が正常に動作する
- [ ] ESLintエラーがない
- [ ] ブラウザリロード後にタスクリストが復元される

### ファイル修正リスト
- **修正**: `src/context/ListContext.jsx`

### 使用するSerenaツール
1. `mcp_serena_insert_before_symbol` - インポート文追加
2. `search_replace` - useState初期化ロジック変更
3. `mcp_serena_insert_after_symbol` - useEffect追加

### 修正箇所

#### 修正1: インポート追加
```javascript
import { StorageService } from '../common/utils/StorageService';
```

#### 修正2: useState初期化の変更
```javascript
// 修正前
const [taskLists, setTaskLists] = useState(() => {
  return DataHydrationService.shouldHydrate() 
    ? DataHydrationService.getInitialTaskLists() 
    : [{ id: 'default', title: 'All Tasks', filters: [] }];
});

// 修正後
const [taskLists, setTaskLists] = useState(() => {
  const storedLists = StorageService.loadTaskLists();
  if (storedLists !== null) {
    return storedLists;
  }
  return DataHydrationService.shouldHydrate() 
    ? DataHydrationService.getInitialTaskLists() 
    : [{ id: 'default', title: 'All Tasks', filters: [] }];
});
```

#### 修正3: useEffect追加
```javascript
// タスクリストをlocalStorageに自動保存
useEffect(() => {
  StorageService.saveTaskLists(taskLists);
}, [taskLists]);
```

### 注意点・リスク
- **デフォルトリスト**: localStorageが空の場合でも、デフォルトの'All Tasks'リストは必ず作成される
- **フィルター設定**: フィルター設定も含めて永続化されることを確認

### 見積工数
**1時間**

### 依存タスク
- TASK-001（StorageService実装）

---

## TASK-006: 既存テスト実行と修正

### タスク概要
既存の全テストを実行し、永続化機能の追加により影響を受けるテストを修正します。

### 優先度
**High** - 既存機能の破壊防止

### 実装内容
1. `npm test`または`npm run test`で全テストを実行
2. 失敗したテストを特定
3. 失敗原因を分析：
   - localStorage関連のモックが必要か
   - テストの前提条件が変わったか
4. 必要に応じてテストを修正：
   - beforeEachでlocalStorage.clear()を追加
   - StorageServiceをモック化
5. 全テストがパスすることを確認

### 完了条件（Definition of Done）
- [ ] 全ての既存テストが実行されている
- [ ] 失敗したテストが特定されている
- [ ] 失敗原因が分析されている
- [ ] 必要な修正が実施されている
- [ ] 全テストがパスする
- [ ] テストカバレッジが低下していない

### ファイル修正リスト
- **修正候補**:
  - `src/context/TaskContext.test.jsx`（存在する場合）
  - `src/context/TagContext.test.jsx`（存在する場合）
  - `src/context/ListContext.test.jsx`（存在する場合）
  - `src/features/tasks/components/*.test.jsx`
  - `src/features/tags/components/*.test.jsx`
  - `src/features/lists/components/*.test.jsx`

### 使用するツール
- `run_terminal_cmd` - テスト実行
- `grep` - 失敗したテストの検索
- `read_file` - テストファイルの確認
- `search_replace` - テストコードの修正

### テスト修正パターン

#### パターン1: localStorageのクリア追加
```javascript
import { describe, test, expect, beforeEach } from 'vitest';

describe('TaskContext', () => {
  beforeEach(() => {
    // 各テスト前にlocalStorageをクリア
    localStorage.clear();
  });

  // ... テストケース
});
```

#### パターン2: StorageServiceのモック
```javascript
import { vi } from 'vitest';

// StorageServiceをモック化
vi.mock('../common/utils/StorageService', () => ({
  StorageService: {
    loadTasks: vi.fn(() => null),
    saveTasks: vi.fn(() => true),
    // ... 他のメソッド
  }
}));
```

### 注意点・リスク
- **Context層のテスト**: 既存でContext層の単体テストがない可能性が高い
- **コンポーネントテスト**: コンポーネント層のテストは影響を受けにくいが、念のため確認
- **localStorage依存**: テスト環境（JSDOM）でlocalStorageが正しく動作することを確認

### 見積工数
**1-2時間**

### 依存タスク
- TASK-003（TaskContext修正）
- TASK-004（TagContext修正）
- TASK-005（ListContext修正）

---

## TASK-007: E2Eテストと動作確認

### タスク概要
ブラウザで実際にアプリケーションを動かし、永続化機能が正しく動作することを確認します。

### 優先度
**Medium** - 最終確認

### 実装内容
1. 開発サーバーを起動：`npm run dev`
2. 以下のシナリオを手動テスト：
   
   **シナリオ1: 初回起動**
   - localStorageをクリア（DevTools）
   - アプリを開く
   - ハイドレーション設定により適切な初期状態が表示されることを確認
   
   **シナリオ2: タスク追加と復元**
   - 新しいタスクを3つ追加
   - ブラウザをリロード（F5）
   - 追加した3つのタスクが表示されることを確認
   
   **シナリオ3: タスク編集と復元**
   - タスクを完了状態に変更
   - タグを追加
   - ブラウザをリロード
   - 変更が保持されていることを確認
   
   **シナリオ4: タスクリスト作成と復元**
   - 新しいタスクリストを作成
   - フィルター設定を追加
   - ブラウザをリロード
   - リストとフィルター設定が保持されていることを確認
   
   **シナリオ5: タグ管理**
   - タグを追加・編集・削除
   - ブラウザをリロード
   - タグの変更が保持されていることを確認
   
   **シナリオ6: データ削除**
   - 全タスクを削除
   - ブラウザをリロード
   - 空の状態が保持されていることを確認

3. DevToolsでlocalStorageの内容を確認：
   - `taskDashboard_tasks`
   - `taskDashboard_tags`
   - `taskDashboard_taskLists`
   - データ形式が正しいことを確認

4. エラーログの確認：
   - コンソールにエラーが出ていないことを確認
   - ネットワークエラーがないことを確認

### 完了条件（Definition of Done）
- [ ] 全シナリオがテストされている
- [ ] 全シナリオが期待通りに動作する
- [ ] localStorageに正しいデータが保存されている
- [ ] コンソールエラーがない
- [ ] パフォーマンス劣化がない
- [ ] 動作確認結果がドキュメント化されている

### 使用するツール
- `run_terminal_cmd` - 開発サーバー起動
- ブラウザDevTools - localStorage確認、コンソール確認

### チェックリスト

| シナリオ | 期待結果 | 実際の結果 | 合否 |
|---------|---------|-----------|------|
| 初回起動 | ハイドレーションまたは空状態 | | |
| タスク追加と復元 | リロード後も表示される | | |
| タスク編集と復元 | 変更が保持される | | |
| リスト作成と復元 | リストとフィルターが保持される | | |
| タグ管理 | タグの変更が保持される | | |
| データ削除 | 空の状態が保持される | | |

### 注意点・リスク
- **ハイドレーション設定**: VITE_ENABLE_DATA_HYDRATION環境変数の値により挙動が変わる
- **ブラウザ依存**: 異なるブラウザで動作確認することが望ましい
- **プライベートモード**: プライベートブラウジングモードでの動作も確認

### 見積工数
**1-2時間**

### 依存タスク
- TASK-006（既存テスト実行と修正）

---

## 実装時の全体的な注意事項

### コーディング規約
- 既存のコードスタイル（DataHydrationServiceのパターン）に従う
- JSDocコメントを必ず記載
- ESLintルールに従う
- PascalCase、camelCaseの命名規約を守る

### テスト方針
- 全ての公開APIをテスト
- 正常系・異常系の両方をカバー
- localStorageは各テスト前にクリア

### エラーハンドリング
- try-catchで適切にエラーを捕捉
- console.errorでログ出力
- アプリケーションはクラッシュさせない

### パフォーマンス
- JSON.stringifyは十分高速
- debounceは初期実装では不要
- 将来的に必要になれば検討

### ドキュメント
- 重要な設計判断はコメントで記録
- README.mdの更新は不要（機能追加のみ）

---

## マイルストーン

### マイルストーン1: コア機能完成
- **タスク**: TASK-001, TASK-002
- **ゴール**: StorageServiceが完成し、単体テストがパス
- **期間**: 3-5時間

### マイルストーン2: Context統合完成
- **タスク**: TASK-003, TASK-004, TASK-005
- **ゴール**: 全Contextで永続化が動作
- **期間**: 3時間

### マイルストーン3: リリース準備完了
- **タスク**: TASK-006, TASK-007
- **ゴール**: 全テストがパスし、動作確認完了
- **期間**: 2-4時間

**総期間**: 8-12時間（1-2日）

---

## リスクと対策

| リスク | 影響 | 対策 |
|--------|------|------|
| 既存テストの失敗 | 高 | localStorage.clear()を追加、モック化 |
| localStorage利用不可 | 中 | isAvailable()でチェック、フォールバック |
| パフォーマンス劣化 | 低 | 大量データでテスト、必要に応じてdebounce |
| データ破損 | 中 | try-catchで適切に処理、初期状態に戻す |

---

## 次のステップ

実装計画が承認されたら、以下の手順で実装を進めます：

1. **TASK-001**から順番に実装
2. 各タスク完了時に動作確認
3. 問題があれば即座に修正
4. 全タスク完了後、最終レビュー

**実装計画フェーズが完了しました。実装を進めてよろしいですか？**

---

**作成日**: 2025-10-23  
**プロジェクト名**: task-persistence  
**フェーズ**: 実装計画  
**次フェーズ**: 実装