前章まででお問い合わせフォームの根幹部分は作成できました。
この章からは、お問い合わせフォームに投稿された内容を確認できる一覧ページを作成していきたいと思います。
今回はあくまで練習用のアプリとなりますので、indexページ、つまりtopページにお問い合わせ一覧を表示させるようにしています。
それでは実装していきましょう。
1. pullとブランチの作成
まずは、もうお分かりですね。作業に入る前に前回mergeしたメインブランチを更新しておきましょう。
# ブランチをpullする
git pull origin main以上で完了です。mainブランチが前章で作成されたブランチと同じになれば、次に進みます。
git switch -C make-index今回はindexページを作成するので、安直ですがmake-indexと言う名前のブランチを作成しました。ブランチ名は任意となりますので、お好きなブランチ名を付けて構いません。
2.ContactController.phpの実装
use App\Models\Contact;
public function index()
{
$contacts = Contact::latest()->get(); // 新しい順に取得
return view('index', ['contacts' => $contacts]);
}
コードの解説
$contacts = Contact::latest()->get();Contact::latest()->get()によって created_at カラムを基準に、最新の順でデータを取得します。
取得したデータは配列で、 $contacts に代入されます。入力されたデータは以下のようなものです。
// contactsにはこんな配列が入っています。
[
App\Models\Contact {
id: 1,
name: "山田太郎",
email: "taro@example.com",
age: 32,
gender: "男性",
interests: "Laravel構築,SEO相談",
message: "お問い合わせ内容の例です。",
created_at: "2025-07-01 18:45:00",
updated_at: "2025-07-01 18:45:00"
},
App\Models\Contact {
id: 2,
name: "佐藤花子",
email: "hanako@example.com",
age: 28,
gender: "女性",
interests: "",
message: "別の問い合わせ内容です。",
created_at: "2025-07-01 18:50:00",
updated_at: "2025-07-01 18:50:00"
},
// ...さらに続く
]データベースのテーブルに入っているデータをすべて引っ張って、配列にしています。
return view('index', ['contacts' => $contacts]);ここで新しい書き方が登場しています。['contacts' => $contacts]ですが、 $contacts（問い合わせデータの一覧）を 'contacts' というキー名でビューに渡しています。
早い話が、コントローラーで取得したデータをビューに渡すために記述されています。
まずは先にビュー側を作ってみましょう。データがどのように渡されているのかわかると思います。
3.index.blade.phpの実装
@extends('layouts.app')
@section('title', 'お問い合わせ一覧')
@section('content')
<h2>お問い合わせ一覧</h2>
@if ($contacts->isEmpty())
<p>まだお問い合わせはありません。</p>
@else
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>名前</th>
<th>メール</th>
<th>年齢</th>
<th>性別</th>
<th>送信日時</th>
<th>詳細</th>
</tr>
</thead>
<tbody>
@foreach ($contacts as $contact)
<tr>
<td>{{ $contact->id }}</td>
<td>{{ $contact->name }}</td>
<td>{{ $contact->email }}</td>
<td>{{ $contact->age }}</td>
<td>{{ $contact->gender }}</td>
<td>{{ $contact->created_at }}</td>
<td>詳細</td>
</tr>
@endforeach
</tbody>
</table>
@endif
@endsectionコードの解説
@if ($contacts->isEmpty())
<p>まだお問い合わせはありません。</p>
@else$contactsが空の時、「まだお問い合わせはありません」と表示されます。
isEmpty()メソッドは Laravelで取得したデータのまとまりが空かどうかを判定するためのものです。
@foreach ($contacts as $contact)
<tr>
<td>{{ $contact->id }}</td>
<td>{{ $contact->name }}</td>
<td>{{ $contact->email }}</td>
<td>{{ $contact->age }}</td>
<td>{{ $contact->gender }}</td>
<td>{{ $contact->created_at }}</td>
<td>詳細</td>
</tr>
@endforeachこのコードは問い合わせデータを一覧表示するためのテーブルを生成するものです。
このテンプレートでは、取得した問い合わせデータを1件ずつ表示するために、@foreach を使ってループ処理をしています。
@foreach ($contacts as $contact) でデータを1件ずつループ処理するBlade構文となり、Controllerで指定した['contacts' => $contacts]につながってくるわけです。
また、ループ処理を使用しているので、表示する件数が多くなっても対応が可能となっています。
各データはテーブルの1行として表示され、その中に問い合わせの「ID・名前・メールアドレス・年齢・性別・作成日時」などが入ります。
例えば、1件目の問い合わせが name: "山田太郎" email: "taro@example.com" のような内容だった場合、その情報が <td>タグの中に埋め込まれ、HTMLテーブルに反映されます。
今のところ「詳細」欄はプレーンな文字列だけですが、次の章にてリンクを作成していきます。
4.compact()について
少し戻ってコントローラーのお話になります。
今は ['contacts' => $contacts] という形でビューに値を渡していますが、Laravelにはこの部分を短く書ける compact() という便利な関数があります。
たとえば return view('index', compact('contacts')); とすると、自動的に 'contacts' => $contacts のように展開してくれます。
つまり、変数名とキー名が一致していれば省略できるという仕組みです。
use App\Models\Contact;
public function index()
{
$contacts = Contact::latest()->get(); // 新しい順に取得
return view('index', compact('contacts'));
}compactを使わないとき
1. 明示的に渡したいとき
return view('dashboard', [ 'user' => $user, 'notifications' => $notifications, ]);配列で書くと「キー名と値の関係」が明確に見えるので、第三者にも伝わりやすいです。特にチーム開発やレビューで好まれます。
2. リファクタリングで安全性重視のとき
compact() は文字列で変数名を渡すので、もしスペルミスをしてもPHPがエラーを出さずに null を渡してしまうことがあります。
$usre = 'taro'; // ミススペル
return view('profile', compact('user')); // 'user' 変数がない → null が渡る明示的な配列の方が、こうしたミスを見つけやすいです。
3. 変数とビューのキー名をずらしたいとき
$name = 'taro';
return view('hello', ['displayName' => $name]); // compact ではできないcompact() は「変数名＝キー名」で使う関数なので、ビューで別の名前を使いたいときは不向きです。
4. 可読性・統一ルールを優先するプロジェクトの場合
プロジェクトによっては「ビューへのデータはすべて明示的に書く」ルールを決めている場合があります。
Laravel初心者にも伝わりやすいように、あえて compact() を避けるケースです。
5.Git push
以上が完了したら、ここでGitを共有しておきましょう。
git add -A
git commit -m "コメントを入力する"
git push origin make-indexgit pushが無事完了したら、GitHub上で操作を行います。
pull requestが来ているので、mergeしましょう。