【Laravel】簡単アプリ作製【６】　商品削除機能

Laravel

Webアプリケーションに必須である「データの削除機能」を実装します。 削除処理はデータを失う操作のため、誤操作を防ぐための確認ダイアログの挟み方や、Laravelでデータを削除するルート（DELETE）の正しい記述方法を分かりやすく解説します。

1. ルーティングの設定（routes/web.php）

　データを削除するためのルート（DELETE）を追加します。routes/web.php の末尾に以下を追記してください。
routes/web.php

PHP
// 追加：商品削除機能のルーティング
Route::delete('/products/{id}', [ProductController::class, 'destroy'])->name('products.destroy');

2. コントローラーの編集

　指定されたIDの商品データをデータベースから検索し、削除したあとに一覧画面へリダイレクトする destroy メソッドを追記します。
app/Http/Controllers/ProductController.php

PHP
    // // 追加：商品の削除処理
    public function destroy($id)
    {
        // 削除したい商品をIDで検索（見つからない場合は404エラー）
        $product = Product::findOrFail($id);

        // データベースから削除を実行
        $product->delete();

        // 一覧画面に戻り、成功メッセージを表示
        return redirect()->route('products.index')->with('success', '商品を削除しました。');
    }

3. 一覧画面（index.blade.php）に「削除」ボタンを追加

　削除処理はURLへ直接アクセスして実行（GET送信）されるとセキュリティ上非常に危険なため、必ずフォーム（POST送信）の形でボタンを作ります。

　前回編集した一覧画面（resources/views/products/index.blade.php）の「編集」リンクの隣に、削除用のフォームを追記します。

HTML
  <td>
      <!-- 既存の編集リンク -->
      <a href="{{ route('products.edit', $product->id) }}">編集</a>

      <!-- ★追加：削除用のフォーム -->
      <form action="{{ route('products.destroy', $product->id) }}" method="POST" style="display: inline;" onsubmit="return confirm('「{{ $product->name }}」を削除してもよろしいですか？');">
          @csrf
          @method('DELETE')
          <button type="submit" style="color: red; border: none; background: none; cursor: pointer; text-decoration: underline;">削除</button>
      </form>
  </td>

💡 ここがポイント！

  • @method('DELETE'): 編集の時（PUT）と同様に、HTMLのフォームでLaravelの DELETE ルートを動かすために記述します。
  • onsubmit="return confirm(...);": ボタンが押されたとき、ブラウザ標準の確認ダイアログ（ポップアップ）を表示します。「キャンセル」を押すと送信が中止されるため、誤操作によるデータ削除を防げます。
  • style="display: inline;": フォームはそのまま書くと自動で改行されてしまうため、横並び（インライン）になるようスタイルを調整しています。

5. 動作確認

１．ブラウザで商品一覧画面（ http://localhost/laravel-app/public/products ）を開きます。

２．追加された赤文字の「削除」ボタンをクリックし、画面に「本当に削除してもよろしいですか？」というポップアップが表示されることを確認。

３．「OK」を押すとデータが削除され、その行が消えていれば成功。

これで、Laravelにおけるデータ操作の基本であるCRUD（クラッド：Create/Read/Update/Delete）が一通り完成。

※この記事はAIで生成後、実際に手順通り実施して加筆、修正しています。

コメント