フォームの入力処理を司るコントローラーを作成し、ルートとの接続も整いました。いよいよここからは、画面の見た目を決定する「ビュー（View）」の作成に入ります。
Laravelではビューを「Bladeテンプレート」と呼ばれる仕組みで構築し、HTMLにPHP構文を組み込んで柔軟な画面設計が可能です。
入力画面・確認画面・完了画面など、ユーザーと直接対話する部分をひとつずつ作り上げていくことで、フォームの流れが視覚的にも体験できるようになります。
この章では、Bladeファイルの役割や設置場所の解説から、実際の画面構成に沿ったテンプレート作成までを段階的に紹介します。
画面を「見える化」することで、LaravelのMVC構造の最終ピースが揃っていきます。
Viewとは何か？（MVCの「V」）
Viewは、ユーザーに表示する画面（HTML）を作る領域です。Controllerから渡されたデータを使って、どんな文章を表示するか、どんな入力フォームを用意するかを定義します。
たとえば、Controllerが「お問い合わせフォームを表示せよ」と指示すると、resources/views/contact.blade.php というファイルを呼び出して、ユーザーにその画面が見えるようになります。
Viewファイルの設置場所
LaravelではすべてのBladeテンプレートファイルは下記の場所に置きます：
resources/views/
ここに .blade.php という拡張子を持つファイルを作ることで、Laravelはそのテンプレートを認識し、返すことができます。
1. pullとブランチの作成
まずは、毎回恒例のあれですね。作業に入る前に前回mergeしたメインブランチを更新しておきましょう。
# ブランチをpullする
git pull origin main以上で完了です。mainブランチが前章で作成されたブランチと同じになれば、次に進みます。
git switch -C make-views今回はビューを作成するので、make-viewsと言う名前のブランチを作成しました。ブランチ名は任意となりますので、お好きなブランチ名を付けて構いません。
2.Viewファイルの作成
それではここからは実際にviewファイルを作成してみましょう。
まずはindex.blade.phpです。
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h1>index.blade.php が表示されました</h1>
</body>
</html>index.blade.phpが表示された際に、「index.blade.php が表示されました」を表示するだけの簡単なものになります。
この調子で残りのviewファイルも作成していきましょう。
contact.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
</head>
<body>
<h1>contact.blade.php が表示されました</h1>
</body>
</html>
confirm.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Confirm</title>
</head>
<body>
<h1>confirm.blade.php が表示されました</h1>
</body>
</html>
thanks.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Thanks</title>
</head>
<body>
<h1>thanks.blade.php が表示されました</h1>
</body>
</html>3.実際に確認してみよう
viewファイルが完成したら、URLにアクセスしたときにviewファイルを表示できるようになりました。
ここで一度確認してみましょう。
Dockerのnginxからlocalhost:80を確認してみましょう。
どうですか？実際に作成したページは表示されましたでしょうか？
もし、この時点で表示されない場合は、どこかでタイピングミスをしている可能性が高いです。
4.共通化する
さて、ここまでviewファイルを作成してみて、何かめんどくさいなぁ、と感じてはいませんか？
そうですね。今回作成したviewファイルのほとんどの部分は同じ内容を入力しています。
<!DOCTYPE html>
<html>
<head>
<title>ファイル名</title>
</head>
<body>
<h1>ファイル名.blade.php が表示されました</h1>
</body>
</html>似たような部分を毎回1つのファイルに書くのは非常におっくうだと思います。
そこで、これらを1回で済ませられるように、viewファイルの共通化というものを行いたいと思います。
いわゆる「共通テンプレート」を作成します。
共通テンプレートはresourceフォルダ内にlayoutsというフォルダを作成し、app.blade.phpというファイル名にすることで、簡単に共通化テンプレートを作成できます。
以下のようにファイルを作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'お問い合わせフォーム')</title>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<header>
<h1>お問い合わせフォーム</h1>
<nav>
<a href="/">トップ</a> |
<a href="/contact">お問い合わせ</a>
</nav>
<hr>
</header>
<main>
@yield('content')
</main>
<footer>
<hr>
<p style="text-align: center;">© {{ date('Y') }} </p>
</footer>
</body>
</html>コードの解説
<title>@yield('title', 'お問い合わせフォーム')</title>Bladeにおける @yield は、レイアウトファイルで子ビューから渡される「セクションの中身」を表示するための命令です。
@yield('セクション名', 'デフォルト値')
// 'title'はセクション名
// 'お問い合わせフォーム' はそのセクションが未定義だった場合に使われるデフォルトの文字列
つまり、子ビュー側で @section(‘title’) が定義されていれば、その内容を <title> タグに表示され、何も定義していなければ、「お問い合わせフォーム」という文字がデフォルトで使われる、と言うことになります。
<p style="text-align: center;">© {{ date('Y') }} </p>Laravelでは Bladeテンプレートエンジンを使って、PHPの値をHTMLの中に埋め込むことができます。
これにより、毎年更新する必要がない「動的なコピーライト表記」を実現しており、{{ date(‘Y’) }} は PHPの date() 関数を呼び出して、「現在の年（YYYY形式）」を表示します。
5.子viewの修正
app.blade.phpの修正が完了したら、今まで作成したviewファイルもすべて共通化に対応できるように変更していきましょう。
index.blade.php
@extends('layouts.app')
@section('title', 'トップページ')
@section('content')
<h1>index.blade.php が表示されました</h1>
@endsectionコードの解説
@extends('layouts.app') @extends('layouts.app') の役割はレイアウトを継承する指示で、ビューの共通レイアウト（ベースとなるHTML構造）を継承するために使用します。
つまり、‘layouts.app’はresources/views/layouts/app.blade.phpを指しています。
ファイル構造の関係は以下の通りです。
resources/
└── views/
└── layouts/
└── app.blade.php ← ベースレイアウト
└── index.blade.php ← 子ビューindex.blade.php など子ビュー側で @extends(‘layouts.app’) を書くことで、HTMLの <head> や <footer> などを共通で使えるようになります。
@section('title', 'トップページ')先ほど出てきた@yieldの対となる命令で、このように定義すると、@yield('title') には 'トップページ' が表示されます。
@section('content')
<h1>index.blade.php が表示されました</h1>
@endsection@section('content') の中身が、layouts/app.blade.phpで作成したレイアウト内の @yield('content') に挿し込まれます。
6.Git push
以上が完了したら、ここでGitを共有しておきましょう。
git add -A
git commit -m "コメントを入力する"
git push origin make-viewsgit pushが無事完了したら、GitHub上で操作を行います。
pull requestが来ているので、mergeしましょう。
次の章からは実際にお問い合わせフォームを作成していきます。