ステップ5: タスク削除時のlocalStorageからの削除 (CRUD操作完成)（穴埋め版）

導入・問題提起

前回のステップ4で「タスクの完了状態保存」機能を実装しました。 現在、タスクの追加・完了状態変更はlocalStorageに保存されますが、既にdeleteTask()関数にも保存機能が含まれています。

今回は、deleteTask()関数の動作を詳しく確認し、削除操作も含めた 完全なCRUD操作の永続化 について学習します。

現在の状況確認:

このステップの目標

考えてみよう

手順1: deleteTask関数の動作確認

現在のdeleteTask関数を確認し、localStorage保存機能が含まれていることを学習します。

function deleteTask(id) {
    // 削除前にタスク情報を取得（ログ出力用）
    const taskToDelete = tasks.find(task => task.id === id);
    
    // 指定されたIDのタスクを配列から削除
    tasks = tasks.filter(function (task) {
        return task.id !== id;
    });

    console.log(`🗑️ タスク「${taskToDelete.text}」を削除しました`);

    // 【確認①】削除をlocalStorageにも反映する関数呼び出し（20文字）
    // 答え: ____________________
    ____________________;

    // 画面表示を更新
    renderTasks();
    updateProgress();

    console.log("💾 削除操作をlocalStorageに保存しました");
}

手順2: CRUD操作の完全性確認

Webアプリケーションの基本操作（CRUD）全てでlocalStorage同期が実現されていることを確認します。

// 【確認②】以下のCRUD操作とlocalStorage保存の対応を確認してください

// Create（作成）: addTask() → ?
// Read（読み取り）: ? → JSON.parse()
// Update（更新）: toggleTask() → ?
// Delete（削除）: deleteTask() → ?

// 答え:
// Create（作成）: addTask() → ____________________（20文字）
// Read（読み取り）: ____________________（25文字） → JSON.parse()
// Update（更新）: toggleTask() → ____________________（20文字）
// Delete（削除）: deleteTask() → ____________________（20文字）

手順3: 動作確認テスト

実装を理解した後、以下の手順で完全な永続化を確認します。

  1. 複数タスクを追加（例：「買い物」「掃除」「勉強」）
  2. 一部を完了状態にする（例：「掃除」をチェック）
  3. 一つを削除する（例：「買い物」を削除）
  4. DevToolsのConsoleで削除メッセージを確認
  5. ページを再読み込み
  6. 結果確認：削除したタスクが復活せず、完了状態も維持される

✨ 最小限ヒント

解答例（確認ポイント）

手順1: deleteTask関数の確認

function deleteTask(id) {
    // ... (既存のコード) ...

    // 【確認①】削除をlocalStorageにも反映する関数呼び出し
    saveTasksToStorage(); // この呼び出しがあることを確認

    // ... (既存のコード) ...
}

手順2: CRUD操作の完全性確認

// Create（作成）: addTask() → saveTasksToStorage()
// Read（読み取り）: loadTasksFromStorage() → JSON.parse() (関数内部で実行)
// Update（更新）: toggleTask() → saveTasksToStorage()
// Delete（削除）: deleteTask() → saveTasksToStorage()

ポイント解説

① CRUD操作とlocalStorageの完全同期

この演習シリーズを通じて、タスク管理アプリケーションにおける基本的なデータ操作であるCRUD（Create, Read, Update, Delete）のそれぞれが、localStorageと同期されるようになりました。

② データ整合性の重要性

アプリケーションが表示している情報（画面上のタスクリスト）と、永続化されているデータ（localStorage内のタスクデータ）が常に一致している状態を「データ整合性が保たれている」と言います。saveTasksToStorageを各操作の適切なタイミングで呼び出すことにより、この整合性を維持しています。

③ Webアプリケーションにおける状態管理の基礎

この一連のステップは、Webアプリケーションにおけるクライアントサイドの状態管理の基本的なアプローチを示しています。ユーザー操作によって変化するデータを適切にメモリ上で管理し、それをブラウザのストレージ機能と同期させることで、よりリッチで実用的なユーザー体験を提供できます。

補足資料への誘導

動作確認チェックリスト

全てのステップが完了した状態で、以下の総合的な動作確認を行いましょう。

  1. タスクを3つ追加します (例: Task A, Task B, Task C)。
  2. Task B のチェックボックスをクリックして完了状態にします。
  3. Task A の削除ボタンをクリックして削除します。
  4. **ページを再読み込み（F5キー）**します。
  5. 残っているタスク（Task B, Task C）を全て削除します。
  6. 再度ページを再読み込みします。

これらの確認を通じて、CRUD操作全てにおいてデータが正しく永続化され、アプリケーションが期待通りに動作することを検証します。

全体振り返りと次のステップ

この演習シリーズで学んだこと

  1. ステップ1: localStorageの基本的なAPI操作（setItem, getItem, removeItem, clear）と、オブジェクトを保存するためのJSON.stringify/JSON.parseの必要性を学びました。
  2. ステップ2: タスクが追加された際に、tasks配列をJSON文字列に変換してlocalStorageに自動保存するsaveTasksToStorage関数を実装し、addTask関数と連携させました。また、try...catchによるエラーハンドリングの基本を導入しました。
  3. ステップ3: ページ読み込み時にlocalStorageからタスクデータを読み込み、JSONをパースしてtasks配列を復元し、画面に再表示するloadTasksFromStorage関数を実装しました。DOMContentLoadedイベントリスナー内でこれを呼び出すことで、初期表示を実現しました。
  4. ステップ4: タスクの完了状態（completedプロパティ）が変更された際に、toggleTask関数内でsaveTasksToStorageを呼び出し、変更を永続化しました。
  5. ステップ5: deleteTask関数でも同様にsaveTasksToStorageが呼び出されることを確認し、タスクの削除操作もlocalStorageに反映されることを学びました。これにより、CRUD操作全てにおけるデータ永続化が完成しました。

おめでとうございます！これで、localStorageを利用してToDoリストのデータを永続化する基本的な機能を全て実装できました。

今後の学習のために