答え合わせ

CRUD操作テストのバグ一覧と解説

バグ1: 削除ボタンが確認なしで即削除される

再現手順

タスク一覧で任意のタスクの削除ボタン（ゴミ箱アイコン）をクリック
→ 確認ダイアログなしで即座に削除されてしまう

なぜバグなのか？

データの削除は取り消しができない破壊的な操作です。誤クリックでデータが消えてしまうと、ユーザーに大きな損害を与える可能性があります。削除前には必ず確認ダイアログを表示するべきです。

バグのあるコード

const deleteTask = (id) => {
    // confirm()を呼んでいない！
    tasks.value = tasks.value
        .filter(t => t.id !== id);
};

正しいコード

const deleteTask = (id) => {
    // 確認ダイアログを表示
    if (!confirm('本当に削除しますか？')) {
        return;
    }
    tasks.value = tasks.value
        .filter(t => t.id !== id);
};

バグ2: 編集で「説明」を変更しても保存されない

再現手順

任意のタスクの編集ボタン（鉛筆アイコン）をクリック
「説明」欄の内容を変更
「保存」ボタンをクリック
→ タイトルや優先度は更新されるが、説明は元のまま

なぜバグなのか？

このバグには2つの問題があります：

v-modelの参照先が間違っている: 編集フォームの説明欄が editForm.description ではなく newTask.description にバインドされている
保存時にdescriptionを更新していない: saveEdit関数でtask.descriptionへの代入が漏れている

バグのあるコード

<!-- HTML: 間違ったv-model -->
<textarea v-model="newTask.description">
</textarea>

// JS: descriptionの更新漏れ
const saveEdit = (id) => {
    const task = tasks.value.find(t => t.id === id);
    if (task) {
        task.title = editForm.title;
        // task.description = editForm.description;
        // ↑ この行がない！
        task.priority = editForm.priority;
    }
};

正しいコード

<!-- HTML: 正しいv-model -->
<textarea v-model="editForm.description">
</textarea>

// JS: 全プロパティを更新
const saveEdit = (id) => {
    const task = tasks.value.find(t => t.id === id);
    if (task) {
        task.title = editForm.title;
        task.description = editForm.description;
        task.priority = editForm.priority;
    }
};

バグ3: タイトルが空でも新規作成できる

再現手順

新規タスク作成フォームでタイトルを空のまま
「作成」ボタンをクリック
→ タイトルなしのタスクが作成されてしまう

なぜバグなのか？

タイトルはタスクを識別するための必須項目です。空のタイトルが許可されると、ユーザーはどのタスクがどれなのか判別できなくなります。必須項目には入力チェックが必要です。

バグのあるコード

const createTask = () => {
    // タイトルの空チェックなし！
    tasks.value.push({
        id: nextId++,
        title: newTask.title,
        description: newTask.description,
        priority: newTask.priority
    });
};

正しいコード

const createTask = () => {
    // タイトルの空チェック
    if (!newTask.title.trim()) {
        alert('タイトルを入力してください');
        return;
    }

    tasks.value.push({
        id: nextId++,
        title: newTask.title,
        description: newTask.description,
        priority: newTask.priority
    });
};

学びのポイント

破壊的操作の確認: 削除などの取り消せない操作は必ず確認ダイアログを表示する
データバインディングの確認: v-modelなどのバインディング先が正しいか確認する
更新処理の網羅性: 編集保存時は全てのプロパティが正しく更新されるか確認する
必須項目のバリデーション: 必須項目は作成前に空チェックを行う

もう一度挑戦トップに戻る