
icon by Icons8
PHPのフレームワークLaravelのチュートリアルとして、タスク管理アプリを開発する手順をまとめていきます。Gitを使ったバージョン管理も行なっていきます。
今回はデータベースにあるデータを利用して、タスクの削除機能を作成します。CRUDの「Delete:削除」です。
【Laravel 入門】タスク管理アプリ開発:タスク詳細画面 で実装したweb.php
, TasksController
と resources/views/tasks/show.blade.php
も修正します。
削除ボタンの実装
今回、削除「画面」は作らずに、ボタンを押すと削除できるような機能を実装します。
そのため、タスク詳細画面に「削除」ボタンを実装します。ボタンを押すとformからデータ送信して、Controllerでデータを削除します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TaskApp</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div class="header">
<h1>タスク詳細</h1>
<a href="/" class="button">一覧に戻る</a>
<a href="/edit/{{ $task->id }}" class="button">編集</a>
{{--削除ボタンを実装--}}
<form action="/{{ $task->id }}" method="POST">
@method('DELETE')
@csrf
<button type="submit">削除</button>
</form>
</div>
<div class="main">
<div class="title">{{ $task->title }}</div>
<div class="contents">{!! nl2br(e($task->contents)) !!}</div>
</div>
</body>
</html>
POST先のURLは削除する id
を含んだURLにします(/1
や /2
など)。
今回のHTTPリクエストメソッドは DELETE
です。そのためformタグには method="POST"
を指定するのですが、formの中で @method('DELETE')
を指定する必要があります。
データ送信をするために <input type="submit">
は必須なので忘れないでください。
サーバを起動して確認する
ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/1
などのデータベースに存在するデータの id
を指定して、アクセスしてみましょう。
$ php artisan serve
以下のように削除ボタンが表示されていればOKです 👍

削除機能の実装
Routingの実装
web.php
を修正し、 /1
や /2
のように削除したいタスクのid
を含むURL( /{id}
)にアクセスしたときに、 TasksController
の delete
アクションが実行されるようにします。
※ 【Laravel 入門】タスク管理アプリ開発:タスク詳細画面 の web.php
と同じように id
は 0 ~ 9
の複数桁にしています。
<?php
Route::delete('/{id}', 'TasksController@delete')->where('id', '[0-9]+');
Controllerの実装
TasksController
の delete
アクションの引数に int $id
を追加します。そうすると delete
アクションの中でURLに含まれている id
を使用できます。
※ int というは integerの略で数値を表します。 $id
は数値ですと明示しています。
delete
アクションの中では以下の2つの処理を行います。
destroy
メソッドを利用してデータを削除- 削除したら一覧画面に
redirect
させる
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Task;
class TasksController extends Controller
{
・・・・・
・・・・・
public function delete(int $id)
{
Task::destroy($id);
return redirect('/');
}
}
destroy
メソッドは引数に削除したいデータの id
を指定することでデータの削除が可能です。
ボタンを押して削除できるか確認
ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/1
などのデータベースに存在するデータの id
を指定して、アクセスしてみましょう。
$ php artisan serve
以下のように削除ボタンをクリックして、一覧にリダイレクトすることを確認してください。
一覧画面からデータが削除されていればOKです 👍
削除していいか確認をする
削除ボタンを押した瞬間にいきなり削除されると、大事なデータを間違って消してしまうかもしれません。
そのため、削除ボタンをクリックした後に、以下のようなポップアップを表示して確認処理を入れたいと思います。

Javascriptの confirm
メソッドを利用します。show.blade.php
を以下のように変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TaskApp</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div class="header">
<h1>タスク詳細</h1>
<a href="/" class="button">一覧に戻る</a>
<a href="/edit/{{ $task->id }}" class="button">編集</a>
<form action="/{{ $task->id }}" method="POST">
@method('DELETE')
@csrf
{{-- 確認のポップアップを表示 --}}
<button type="submit" onclick="return confirm('削除します。よろしいですか?')">削除</button>
</form>
</div>
<div class="main">
<div class="title">{{ $task->title }}</div>
<div class="contents">{!! nl2br(e($task->contents)) !!}</div>
</div>
</body>
</html>
削除ボタンを押したときに、ポップアップが表示されていればOKです 👍
見た目を整える
ViewファイルとSassファイルを修正して見た目を整えます。LaravelでSassを使ってスタイルを反映させる方法は以下の記事にまとまっていますのでご参考ください。
お好きなように実装していただいて問題ありませんが、私が実装した結果を掲載しておきます。実装した画面は以下になります。
※ CSSは【Laravel 入門】タスク管理アプリ開発:タスク編集画面 で作ったものをそのまま利用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TaskApp</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div class="header">
<h1>タスク詳細</h1>
<a href="/" class="button">一覧に戻る</a>
<a href="/edit/{{ $task->id }}" class="button">編集</a>
<form action="/{{ $task->id }}" method="POST">
@method('DELETE')
@csrf
<button class="button delete" type="submit" onclick="return confirm('削除します。よろしいですか?')">削除</button>
</form>
</div>
<div class="main">
<div class="title">{{ $task->title }}</div>
<div class="contents">{!! nl2br(e($task->contents)) !!}</div>
</div>
</body>
</html>
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
・・・・・
・・・・・
.delete {
color: red;
border: solid 1px red;
background-color: rgba(0, 0, 0, 0);
}
終了 👍
git status
コマンドで修正されたファイルが表示されているかを確認してください。
git add
とgit commit
を実行してローカルリポジトリに登録しgit push
でリモートリポジトリへ更新履歴を登録してください。