
icon by Icons8
PHPのフレームワークLaravelのチュートリアルとしてタスク管理アプリを開発する手順をまとめていきます。Gitを使ったバージョン管理も行なっていきます。
今回はデータベースにあるデータを利用して、タスクの編集画面を作成します。CRUDの「Update:更新」です。
【Laravel 入門】タスク管理アプリ開発:タスク詳細画面 で実装したweb.php
, TasksController
と resources/views/tasks/show.blade.php
も修正します。
Form画面を実装
編集画面はすでにデータベースに保存されているデータを編集します。そのため画面表示の際には「どのデータを編集するのか?」ということを明らかにしないといけません。そしてさらに、データを編集するためのformが必要です。
タスク詳細画面と同じように、RoutingでURLに id
を含む形にすることで「どのデータを編集するのか?」を明らかにすることができます。
まずはformを表示するための画面を実装します。
Routingの実装
web.php
を修正し、 /edit/1
や /edit/2
のようにid
を含むURL( /edit/{id}
)にアクセスしたときに、 TasksController
の edit
アクションが実行されるようにします。
※ 【Laravel 入門】タスク管理アプリ開発:タスク詳細画面 の web.php
と同じように id
は 0 ~ 9
の複数桁にしています。
<?php
Route::get('/edit/{id}', 'TasksController@edit')->where('id', '[0-9]+');
Controllerの実装
TasksController
の edit
アクションの引数に int $id
を追加します。そうすると edit
アクションの中でURLに含まれている id
を使用できます。
※ int というは integerの略で数値を表します。 $id
は数値ですと明示しています。
そして view()
を使って resources/views/tasks/edit.blade.php
を表示します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Task;
class TasksController extends Controller
{
・・・・・
・・・・・
public function edit(int $id)
{
$task = Task::findOrFail($id);
return view('tasks.edit', ['task' => $task]);
}
}
Viewの実装
resources/views/tasks
ディレクトリ配下に edit.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>
<form action="/edit/{{ $task->id }}" method="post">
@csrf
@method('PUT')
<label>タイトル(必須)</label>
<input type="text" name="title" value="{{ $task->title }}">
<label>内容</label>
<textarea name="contents" cols="50" rows="10">{{ $task->contents }}</textarea>
<button type="submit" class="submit-button">更新</button>
</form>
</body>
</html>
formの action
にはPUT先のURLを指定します。データ送信をするために <input type="submit">
は必須なので忘れないでください。
formのinputタグ
の name
はデータベースのカラム名を指定しておくと登録が楽に実装できます。
今回のHTTPリクエストメソッドは PUT
です。そのためformタグには method="POST"
を指定するのですが、formの中で @method('PUT')
を指定する必要があります。
サーバを起動して確認する
ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/edit/1
などのデータベースに存在するデータの id
を指定して、アクセスしてみましょう。
$ php artisan serve
以下のようにフォームと既存データが表示されていればOKです 👍

Formからデータを送信するURLを実装
画面の表示が完了したら、続いてデータを送信するURLと、データ更新の実装をしていきます。
Routingの実装
web.php
を修正し、 /edit/{id}
というURLにPUTしたときに、 TasksController
の update
アクションが実行されるようにします。
※ PUT先のURLを作成するので Route::put
となっていることに注意してください。HTTPリクエストがリクエストなので同じURLでも問題ありません。
<?php
Route::put('/edit/{id}', 'TasksController@update')->where('id', '[0-9]+');
Controllerの実装
TasksController
の update
アクションの引数には編集画面から送信された Request $request
とURLに含まれている int $id
を書きます。
update
アクションの中では大きく分けて以下4つの実装をします。
- 送信されたデータが正しいかを判断するvalidation
- データベースから指定の
id
のデータを取得 - 取得したデータを更新
- 画面表示するURLにリダイレクト
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Task;
class TasksController extends Controller
{
・・・・・
・・・・・
public function update(Request $request, int $id)
{
// validation
$validate = $request->validate([
'title' => 'required',
'contents' => 'nullable'
]);
// データベースから指定idのデータを取得
$task = Task::findOrFail($id);
// 取得したデータを更新
$task->update($validate);
// 画面表示するURLにリダイレクト
return redirect('/' . $task->id);
}
}
送信されたデータが正しいかを判断するvalidation
validate()
の引数に連想配列を持たせて送信されたデータをvalidationかけることができます。上記の例は以下のvalidationルールを表しています。
- title → 必須
- contents → データが無くてもOK
連想配列のキーはformの inputタグ
の name
を指定してください。
データベースから指定idのデータを取得
findOrFail()
を使って引数に指定した $id
のデータを取得します。
データの更新
update()
を使うとデータの更新が可能です。validationをした結果を update()
の引数に追加してください。
画面表示するURLにリダイレクト
redirect()
を使って特定のURLにリダイレクトさせます。redirect()
の引数には web.php
に登録されているURLを指定します。
上記の例では /1
などの id
を含んだURLにアクセスします。
編集してみる
http://127.0.0.1:8000/edit/1
にアクセスして、データを編集しましょう。編集後、タスク詳細画面が表示されて、データが更新されていれば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>
</div>
<div class="main">
<form action="/edit/{{ $task->id }}" method="post" class="create-form">
@csrf
@method('PUT')
<label>タイトル(必須)</label>
<input type="text" name="title" value="{{ $task->title }}">
<label>内容</label>
<textarea name="contents" cols="50" rows="10">{{ $task->contents }}</textarea>
<button type="submit" class="submit-button">更新</button>
</form>
</div>
</body>
</html>
また show.blade.php
も修正します。
<!DOCTYPE html>
<html lang="ja">
・・・・・
・・・・・
<body>
<div class="header">
<h1>タスク詳細</h1>
<a href="/" class="button">一覧に戻る</a>
{{--編集画面へのリンクを追加--}}
<a href="/edit/{{ $task->id }}" class="button">編集</a>
</div>
・・・・・
・・・・・
</body>
</html>
終了 👍
git status
コマンドで修正されたファイルが表示されているかを確認してください。
git add
とgit commit
を実行してローカルリポジトリに登録しgit push
でリモートリポジトリへ更新履歴を登録してください。