[Laravel入門]TODOアプリを作成しよう(削除機能を作る)

前回はTODOのチェック機能を作成していきました。
前回の記事はこちらです。

前回はTODOモデルを使用して、画面に一覧表示をしました。今回は表示された一覧のチェックを押されたら、TODOのタスクが終わったということにします。こちらの箇所を押すと... こうなるようにします... そして、チェック状態を保持するよ...

今回は削除ボタン(ゴミ箱アイコン)を押されたときに、TODOが削除されるようにします。
Laravelの機能を使用して、論理削除されるようにします。

Laravelでの論理削除の詳細については、下記の記事を参考にしてください。

LaravelのEloquentで論理削除を使う方法！

LaravelのEloquentを使用して、論理削除をする方法を記載しています。マイグレーションを作成して、論理削除の設定を追加して、実際に削除を試してみました。 Laravelのバージョン8で動作確認しています。論理削除を含めたテーブ...

TODOコントローラーに削除(delete)メソッドを追加する
1. 解説
TODOビューにdeleteTodo関数を追加する
1. 解説
ルーティングを修正して、deleteルートを追加する
動作確認
終わりに
1. 次回の記事

TODOコントローラーに削除(delete)メソッドを追加する

まず、コントローラーに削除ボタンを押されたら、削除する処理を作成します。
データが削除されると、todosテーブルのdeleted_atカラムに削除した日付が入ります。

app/Http/Controllers/TodoController.phpを開いてください。
下記のように処理を追加します。

class TodoController extends Controller
{
    // ----- 他のメソッドは省略 -----
    // ---- ここから追加する -----
    public function delete(Request $request) {
        Todo::find($request->select_todo_id)->delete();
        return redirect()->route('todo.init');
    }
    // ---- ここまで追加する -----
}

解説

処理の内容を解説します。
画面から送信されたTodoモデルのidを使用して、findメソッドでTodoモデルを取得しています。
その後に続けて、deleteメソッドを呼んでいます。

これで削除されます。
論理削除されるのは、TodoモデルでSoftDeletesトレイトをuse文で使うように設定したためです。
下記のファイルに、テーブルとモデルを作成する記事で設定しました。
app/Models/Todo.php

class Todo extends Model
{
    use SoftDeletes;

    protected $guarded = ['id', 'created_at', 'updated_at', 'deleted_at'];
}

SoftDeletesをuse文で読み込んでいない場合は、テーブルから物理削除されます。

TODOビューにdeleteTodo関数を追加する

チェック機能と同じように、Todoモデルのidを送信して、先ほど修正したコントローラー側に渡すようにします。
削除ボタン(ゴミ箱のアイコン）には既に下記のようにonclickでクリックした時の処理を書いています。

<button type="button" onclick="deleteTodo({{ $todo->id }})" class="cursor-pointer mr-3 py-1 px-1 shadow-md rounded-md font-semibold text-white text-base bg-red-500 hover:bg-red-700 ring-2 ring-red-200">
  <!--- 省略 --->
</button>

TodoモデルのidをdeleteTodo関数に渡すようにしています。
このdeleteTodo関数の中で、フォームにTodoモデルのidを設定して、送信するようにします。

それでは、修正していきます。
bladeファイルのresources/views/todolist.blade.phpを開いてください。
前回と同様にheadタグの中に、下記のようにdeleteTodo関数を追加します。

<script>
        function checkTodo(todoId) {
            document.querySelector("#select_todo_id").value = todoId;

            document.querySelector("#todo_form").action = "{{ route('todo.check') }}";
            document.querySelector("#todo_form").submit();
        }

    //---- ここから追加する ----
        function deleteTodo(todoId) {
            document.querySelector("#select_todo_id").value = todoId;

            document.querySelector("#todo_form").action = "{{ route('todo.delete') }}";
            document.querySelector("#todo_form").submit();
        }
    //---- ここまで追加する ----
</script>

解説

やっていることは、チェック機能と同じです。
渡されたTodoのIdを下記の一文でフォーム設定しています。

document.querySelector("#select_todo_id").value = todoId;

その後に、削除処理へのURLをフォームのアクションに設定した後に送信しています。

ルーティングを修正して、deleteルートを追加する

最後に削除のルートを作成していないので作ります。
追加処理やチェック処理と同じように、postメソッドで下記のように追加してください。

Route::get('/', [TodoController::class, 'index'])->name('todo.init');
Route::post('/add', [TodoController::class, 'add'])->name('todo.add');
Route::post('/check', [TodoController::class, 'check'])->name('todo.check');
//---- ここから追加する ----
Route::post('/delete', [TodoController::class, 'delete'])->name('todo.delete');
//---- ここまで追加する ----