4️⃣

【Laravel】CRUD機能を作成する④削除機能(Delete)

2024/05/29に公開

はじめに

下記の続きになります。
https://zenn.dev/nenenemo/articles/4baf03c0a2854f

削除を押すとダイアログが表示され、「OK」をクリックした場合に削除されるようにしてみたいと思います。

削除ボタンの追加

ユーザー一覧から削除ボタンを追加してください。

resources/views/users/index.blade.php
@extends('layouts.app')

@section('title', 'ユーザー一覧')

@section('content')
    <h1 class="text-2xl font-bold mb-4">ユーザー一覧</h1>

    <!-- ユーザー登録ページへのリンク -->
    <a href="{{ route('users.create') }}"
        class="mb-4 inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        ユーザー登録
    </a>

    <!-- セッションメッセージ -->
    @if (session('message'))
        <div><strong>{{ session('message') }}</strong></div>
    @endif

    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead>
                <tr>
                    <th class="px-6 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                    <th class="px-6 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">名前</th>
                    <th class="px-6 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @if (isset($users))
                    @foreach ($users as $user)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">{{ $user->id }}</td>
                            <td class="px-6 py-4 whitespace-nowrap"><a href="{{ route('users.show', $user->id) }}"
                                    class="text-blue-500 hover:underline">{{ $user->name }}</a></td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <a href="{{ route('users.edit', $user->id) }}"
                                    class="text-indigo-600 hover:text-indigo-900">編集</a>
                                <form action="{{ route('users.destroy', $user->id) }}" method="POST" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-900 ml-20"
                                        onclick="return confirm('本当に削除しますか?')">削除</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
    </div>
@endsection

@method('DELETE')

ウェブのフォームは、データをサーバーに送信するための基本的な手段として、GETPOSTメソッドを使用することができます。

しかし、データを更新したり削除したりする場合、より適切な方法はPUT(更新)やDELETE(削除)を使うことです。Laravelでは@method('DELETE')を使用して、フォームが送信するPOSTリクエストに隠しフィールドを加え、サーバー側でこのリクエストをDELETE操作として解釈できるようにします。
https://laravel.com/docs/11.x/routing#form-method-spoofing

confirm()

ダイアログボックスを表示し、ユーザーが「OK」をクリックした場合はtrueを、それ以外の場合はfalseを返します。
https://developer.mozilla.org/ja/docs/Web/API/Window/confirm

onclick属性にreturn文が含まれているため、confirm()関数の戻り値によって、ボタンがクリックされたときに実行されるアクションが変わります。ユーザーが「OK」をクリックした場合にはtrueが返され、削除操作が実行されます。

コントローラー設定

destroyメソッドを作成してください。

app/Http/Controllers/UsersController.php
 public function destroy(User $user)
    {
        try {
            $user->delete();
            return redirect()->route('users.index')->with('message', 'ユーザーが削除されました');
        } catch (\Exception $e) {
            return redirect()->route('users.index')->with('message', 'ユーザーの削除中にエラーが発生しました: ' . $e->getMessage());
        }
    }

ルート設定

web.php
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UsersController;

Route::prefix('users')->group(function () {
    Route::get('/', [UsersController::class, 'index'])->name('users.index');
    Route::get('/create', [UsersController::class, 'create'])->name('users.create');
    Route::post('/store', [UsersController::class, 'store'])->name('users.store');
    Route::get('/{user}', [UsersController::class, 'show'])->name('users.show');
    Route::get('/{user}/edit', [UsersController::class, 'edit'])->name('users.edit');
    Route::put('/{user}', [UsersController::class, 'update'])->name('users.update');
    Route::delete('/{user}', [UsersController::class, 'destroy'])->name('users.destroy');
});

画像アップロード、管理者権限、パスワード確認欄、ページングを追加する記事も書きましたので、よければ参考にしてください。
https://zenn.dev/nenenemo/articles/c7485cc41153dc

終わりに

何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉

Discussion