
icon by Icons8
PHPのフレームワークLaravelのチュートリアルとして、タスク管理アプリを開発する手順をまとめていきます。Gitを使ったバージョン管理も行なっていきます。
今回はデータベースにあるデータを利用して、タスク1つ1つの詳細画面を作成します。CRUDの「Read:読み込み」です。
タスク管理アプリ開発:タスク一覧画面 で実装したweb.php
, TasksController
と resources/views/tasks/index.blade.php
を利用します。
まずは id = 1のタスク詳細画面の実装
詳細画面では1つのデータを表示します。つまりControllerでModelを使って1つのデータを取得します。
まずは id = 1
のデータだけを取得してViewに表示していきます。
Routingの実装
web.php
を修正し、 /show
というURLにアクセスしたときに、 TasksController
の show
アクションが実行されるようにします。
<?php
Route::get('/show', 'TasksController@show');
Controllerの実装
TasksController
の show
アクションの中で id = 1
のデータを取得(find
メソッド)します。Viewファイルは resources/views/tasks/show.blade.php
を指定し、Viewにデータを渡すときは、view()
の第二引数に配列を追加します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Task;
class TasksController extends Controller
{
public function index()
{
......
}
public function show()
{
// Taskモデルを使って id = 1 のデータを取得します。
// 1つのデータのため、変数名は単数形にしています。
$task = Task::find(1);
return view('tasks.show', ['task' => $task]);
}
}
Viewの実装
resources/views/tasks
ディレクトリに show.blade.php
を新規作成してください。そして TasksController
からもらった $task
を使ってデータ表示をします。
<!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>
<p>{{ $task->title }}</p>
<p>{{ $task->contents }}</p>
</body>
</html>
Modelに含まれている属性、今回の場合は title
, contents
を取得する場合は $task->title
, $task->contents
と書きます。
サーバを起動して確認する
ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/show
にアクセスしてみましょう。
$ php artisan serve
以下のように title
と contents
が表示されていればOKです 👍

しかしこれでは常に id = 1
のデータしか表示できません。次にさまざまな id
のデータ取得する実装をします
タスク詳細画面の実装
URLに id
を含むようにします。そうすることでControllerでURLに含まれている id
をもとにデータ取得ができます。
Routingの実装
先ほど実装した web.php
を以下のように変更してください。URLに id
を追加し、さらに id
は 0 ~ 9
の数字で構成される複数桁にしています。
<?php
// 変更前
Route::get('/show', 'TasksController@show');
↓
// 変更後
Route::get('/{id}', 'TasksController@show')->where('id', '[0-9]+');
Controllerの実装
TasksController
の show
アクションの引数に int $id
を追加します。そうすると show
アクションの中でURLに含まれている id
を使用できます。
※ int というは integerの略で数値を表します。 $id
は数値ですと明示しています。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Task;
class TasksController extends Controller
{
public function index()
{
......
}
public function show(int $id)
{
// URLに含まれている id は $id という変数に格納されています
$task = Task::find($id);
return view('tasks.show', ['task' => $task]);
}
}
サーバを起動して確認する
ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/1
にアクセスしてみましょう。
$ php artisan serve
id = 1
のデータが表示されていればOKです👍

続いて http://127.0.0.1:8000/2
にアクセスしてみましょう。 id = 2
のデータが表示されていればOKです 👍

一覧画面から詳細画面にリンクさせる
URLに id
を含むことで各データの詳細画面を作ることができました。続いて一覧画面に表示されているデータから、詳細画面にリンクさせます。
resources/views/tasks/index.blade.php
にリンクをつけていきます。リンク先のURLは $task
をつかって /{{ $task->id }}
とします。
<!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>
</div>
<div class="main">
<ul>
@foreach($tasks as $task)
{{-- aタグで囲みます --}}
<a href="/{{ $task->id }}"><li>{{ $task->title }}</li></a>
@endforeach
</ul>
</div>
</body>
</html>
ターミナルからサーバを起動してブラウザから http://127.0.0.1:8000
にアクセスしてみましょう。タスク1つ1つがリンクになっており、クリックすると詳細画面に移動できるとOKです 👍

注意点
URLの中に id
を含む形で実装が完成しました。しかし存在しない id
、例えば 100
などを指定するとどうなるのでしょうか?
試していただくとわかるのですが、黒い画面でエラーになります。データが存在しないためです。黒いエラー画面を表示しないためには find()
ではなく、findOrFail()
というメソッドを使いましょう。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Task;
class TasksController extends Controller
{
public function index()
{
......
}
public function show(int $id)
{
// URLに含まれている id は $id という変数に格納されています
$task = Task::findOrFail($id);
return view('tasks.show', ['task' => $task]);
}
}
データベースにない id
を指定してみましょう(例えば http://127.0.0.1:8000/100
など)
以下のような404エラーページが表示されます。

※ 404エラーとはデータが無い、探しているページが見つからない時に発生するステータスです。
見た目を整える
ViewファイルとSassファイルを修正して見た目を整えます。LaravelでSassを使ってスタイルを反映させる方法は以下の記事にまとまっていますのでご参考ください。
お好きなように実装していただいて問題ありませんが、私が実装した結果を掲載しておきます。実装した画面は以下になります。
※ 一覧画面に戻るためのボタンを追加しました

<!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">
<div class="title">{{ $task->title }}</div>
<div class="contents">{{ $task->contents }}</div>
</div>
</body>
</html>
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
body {
width: 700px;
margin: auto;
padding-top: 80px;
}
.header {
padding: 20px 0;
display: flex;
h1 {
font-weight: 600;
margin-right: 40px;
}
}
.main {
ul {
list-style: none;
padding-left: 0;
}
li {
list-style: none;
font-size: 25px;
line-height: 70px;
border-bottom: solid 3px #1b1e21;
}
}
.button {
display: inline-block;
text-align: center;
line-height: 40px;
width: 100px;
height: 40px;
margin-right: 10px;
border: solid 1px gray;
border-radius: 3px;
}
a, a:hover {
text-decoration: none;
color: #000000;
}
.title {
font-size: 32px;
margin-bottom: 10px;
}
.contents {
font-size: 20px;
}
終了 👍
git status
コマンドで修正されたファイルが表示されているかを確認してください。
git add
とgit commit
を実行してローカルリポジトリに登録しgit push
でリモートリポジトリへ更新履歴を登録してください。