環境
PHP 7.3.24
Laravel 6.20.30
MAMP
view(ビュー)とは
ここでいうviewとはLaravelのMVCモデルのVに当たるものです。
HTTPリクエストに対してのレスポンスを画面に表示するもののことを言います。
要は画面の表示部分を作るものになります。Laravelではviewをbladeファイルと呼ばれるHTMLのような形式で記述していきます。
Bladeファイルの特徴
・resources/viewsディレクトリ内にBladeファイルを作成する
・拡張子は.blade.php
・Bladeファイルの記述のベースはHTML
・Bladeファイルの中にPHPが直接記述できる
・ディレクティブという機能がある
【補足】ディレクティブとは？
ディレクティブとは、プログラム中にコンパイラーに指示を伝えるなどのための文のことを言います。
directiveの日本語訳は「指令、命令」といった意味があります。
ディレクティブ・・・コンパイル時にコンパイラーに与える補足情報。
大抵は、プログラムの最初の行に記述する。
このファイルは
・UTF-8だよ とか
・HTMLファイルだよ とか
・＊＊クラスをインポートしてね とか
引用元：ディレクティブとは
viewの継承
viewでは親ビューと子ビューを作成して共通しているコードは１つのファイルにまとめて記述します。
共通しているコードは親ビューに記述して、それ以外の固有のコードを子ビューに記述していきます。
＠extends
子ビューのファイルの中でどの親ビューファイルを継承するかを宣言するディレクティブです。
＠section,＠endsection
子ビュー独自の（非共通の）コードを＠sectionから＠endsectionで囲み、子ビューの固有コードを定義するディレクティブです。
＠yield
親ビューファイルのどの部分に子ビューの固有コードを読み込むかを指定するディレクティブです。
viewを使ってみる
1. ルーティングビューの作成
まずはルートURL(トップページ)にアクセスした場合、どのBladeファイルを見るようにするかを指定します。
routes/web.php内に記述していきます。
Route::get('/', function () {
return view('top');
});
今回はトップページでtop.blade.phpにアクセスするように設定しました。
2. 親ビュー（共通コード）の作成
親ビューのファイル名はcommon.blade.phpとし、ファイルの中身はヘッダーとフッターの記述があるファイルとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>サンプル</title>
</head>
<!-- ヘッダー -->
<header>
<p>THIS IS HRADER!</p>
</header>
<!-- メイン -->
<body>
<!-- 子ビュー固有のコードを読み込む -->
@yield('child')
</body>
<!-- フッター -->
<footer>
<p>THIS IS FOOTER!</p>
</footer>
</html>
<!-- CSS -->
<style>
* {
margin: 0;
padding: 0;
text-align: center;
line-height: 50px;
font-size: 20px;
}
header,
footer {
color: #000;
width: 100%;
font-weight: bold;
}
header {
background-color: rgb(255, 250, 156);
}
footer {
background-color: rgb(161, 178, 253);
position: absolute;
bottom: 0;
}
</style>
子ビューの作成
top.blade.phpを子ビューのファイルかつトップページとして作成していきます。
<!-- 親ビューを継承 -->
@extends('common')
<!-- 子ビュー固有のコード -->
@section('child')
<p>bodyは子ビューで作りました！</p>
@endsection
画面表示
親ビューで作成したヘッダーとフッター、子ビューで作成したbody部分がきちんと表示されていることが確認できました！
参考
ディレクティブとは
【Laravel入門】ビューとBladeと継承
Laravelのコンポーネントクラス/Bladeコンポーネントタグを使ってビューを構築する