【JSコード解説】ToDoリストアプリ作成（5/5）

// タスク管理を行うクラス
export class TaskManager {
    // コンストラクタ
    constructor() {
        // タスクを読み込んで初期化
        this.tasks = this.loadTasks();
    }
}

    // 新しいタスクを追加するメソッド
    addTask(taskText, date) {
        // 新しいタスクオブジェクトを作成
        const task = {
            id: Date.now(),  // 現在のタイムスタンプをIDとして使用
            text: taskText,  // タスクの内容
            completed: false,  // 完了状態（初期値は未完了）
            date: date  // タスクの日付
        };
        // タスクリストに新しいタスクを追加
        this.tasks.push(task);
        // タスクを保存
        this.saveTasks();
        // 作成したタスクを返す
        return task;
    }

    // タスクを削除するメソッド
    deleteTask(taskId) {
        // 指定されたIDのタスクを除外した新しい配列を作成
        this.tasks = this.tasks.filter(task => task.id !== taskId);
        // 変更を保存
        this.saveTasks();
    }

    // タスクの完了状態を切り替えるメソッド
    toggleTaskStatus(taskId) {
        // 指定されたIDのタスクを見つける
        const task = this.tasks.find(task => task.id === taskId);
        if (task) {
            // タスクが見つかった場合、完了状態を反転
            task.completed = !task.completed;
            // 変更を保存
            this.saveTasks();
        }
    }

    // タスクの内容を編集するメソッド
    editTask(taskId, newText) {
        // 指定されたIDのタスクを見つける
        const task = this.tasks.find(task => task.id === taskId);
        if (task) {
            // タスクが見つかった場合、内容を更新
            task.text = newText;
            // 変更を保存
            this.saveTasks();
        }
    }

    // タスクをローカルストレージに保存するメソッド
    saveTasks() {
        // タスクリストをJSON文字列に変換してローカルストレージに保存
        localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }

    // ローカルストレージからタスクを読み込むメソッド
    loadTasks() {
        // ローカルストレージからタスクのJSON文字列を取得
        const tasksJSON = localStorage.getItem('tasks');
        // JSON文字列が存在する場合はパースして返す、存在しない場合は空配列を返す
        return tasksJSON ? JSON.parse(tasksJSON) : [];
    }

    // 全タスクを取得するメソッド
    getTasks() {
        // タスクを日付順にソートして返す
        return this.tasks.sort((a, b) => new Date(a.date) - new Date(b.date));
    }

// UIを管理するクラス
export class UIManager {
    // コンストラクタ
    constructor(taskManager) {
        this.taskManager = taskManager; // TaskManagerのインスタンスを保持
        this.taskList = document.getElementById('task-list'); // タスクリストのDOM要素を取得
    }
}

    // 新しいタスクを追加するメソッド
    addTask(taskText, date) {
        this.taskManager.addTask(taskText, date); // TaskManagerを使ってタスクを追加
        this.renderTasks(); // タスクリストを再描画
    }

    // タスク要素を作成するメソッド
    createTaskElement(task) {
        const li = document.createElement('li'); // リスト項目要素を作成
        li.className = `task-item ${task.completed ? 'completed' : ''}`; // クラスを設定
        
        // タスク要素の内部HTMLを設定
        li.innerHTML = `
            <input type="checkbox" ${task.completed ? 'checked' : ''}>
            <span class="task-text" title="${task.text}">${task.text}</span>
            <div class="task-actions">
                <button class="edit-btn">編集</button>
                <button class="delete-btn">削除</button>
            </div>
        `;

        this.addTaskEventListeners(li, task); // イベントリスナーを追加

        return li; // 作成したタスク要素を返す
    }

    // タスク要素にイベントリスナーを追加するメソッド
    addTaskEventListeners(li, task) {
        const checkbox = li.querySelector('input[type="checkbox"]');
        const editBtn = li.querySelector('.edit-btn');
        const deleteBtn = li.querySelector('.delete-btn');

        // チェックボックスの状態変更イベント
        checkbox.addEventListener('change', () => this.toggleTaskStatus(task, li));
        // 編集ボタンのクリックイベント
        editBtn.addEventListener('click', () => this.editTask(task));
        // 削除ボタンのクリックイベント
        deleteBtn.addEventListener('click', () => this.deleteTask(task.id));
    }

    // タスクの完了状態を切り替えるメソッド
    toggleTaskStatus(task, li) {
        this.taskManager.toggleTaskStatus(task.id); // TaskManagerを使ってタスクの状態を切り替え
        li.classList.toggle('completed'); // タスク要素のクラスを切り替え
    }

    // タスクを編集するメソッド
    editTask(task) {
        const newText = prompt('タスクを編集:', task.text); // 新しいタスクテキストを入力
        if (newText && newText.trim() !== '') {
            this.taskManager.editTask(task.id, newText.trim()); // TaskManagerを使ってタスクを編集
            this.renderTasks(); // タスクリストを再描画
        }
    }

    // タスクを削除するメソッド
    deleteTask(taskId) {
        this.taskManager.deleteTask(taskId); // TaskManagerを使ってタスクを削除
        this.renderTasks(); // タスクリストを再描画
    }

    // タスクリストを描画するメソッド
    renderTasks() {
        this.taskList.innerHTML = ''; // タスクリストをクリア
        const tasks = this.taskManager.getTasks(); // すべてのタスクを取得
        const groupedTasks = this.groupTasksByDate(tasks); // タスクを日付ごとにグループ化

        // 日付でソート
        const sortedDates = Object.keys(groupedTasks).sort((a, b) => new Date(a) - new Date(b));

        // 各日付のタスクを描画
        sortedDates.forEach(date => {
            const dateHeader = document.createElement('h2');
            dateHeader.textContent = this.formatDate(date); // 日付ヘッダーを作成
            this.taskList.appendChild(dateHeader);

            // その日のタスクを描画
            groupedTasks[date].forEach(task => {
                this.taskList.appendChild(this.createTaskElement(task));
            });
        });
    }

    // タスクを日付ごとにグループ化するメソッド
    groupTasksByDate(tasks) {
        return tasks.reduce((acc, task) => {
            const dateKey = this.formatDateKey(task.date);
            if (!acc[dateKey]) {
                acc[dateKey] = [];
            }
            acc[dateKey].push(task);
            return acc;
        }, {});
    }

    // 日付キーをフォーマットするメソッド
    formatDateKey(dateString) {
        const date = new Date(dateString);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }

    // 日付を表示用にフォーマットするメソッド
    formatDate(dateString) {
        const date = new Date(dateString);
        const days = ['日', '月', '火', '水', '木', '金', '土'];
        return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日(${days[date.getDay()]})`;
    }