最終投稿日：2026年2月22日
例）
hoge.blade.php
Bladeではコントローラから受け取った変数を画面に出力するために以下の様な書式を用います。
| {{ 変数名 }} | タグ等の特殊文字列をエスケープしてデコード |
|---|---|
| {!! 変数名 !!} | タグ等の特殊文字列をエスケープせずにデコード |
| {{-- コメント --}} | コメント扱いとなり、何も出力しません |
@elseif( $foo != '' )
@else
@endif
@foreach( $array as $elem )
@continue // スキップも使用できる
{{ $loop->iteration }} 回目 // カウントも集計できる
@endforeach
@isset( $hoge )
// if文っぽく使える
@endisset
@empty( $hoge )
// if文っぽく使える
@endempty
{WEBROOT}/css/style.css を参照します。 <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
{WEBROOT}/js/jquery-3.4.1.min.js を参照します
<!DOCTYPE HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
サンプル画面
</BODY>
</HTML>
少しピンとこないかもですが、通常よくある画面だと「共通ヘッダ」「共通フッタ」などが良く存在します。
イメージとしては以下となります。
<!DOCTYPE HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
{{-- 共通ヘッダ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通ヘッダ<BR />
ここに共通の内容を記述します
</div>
サンプル画面
{{-- 共通フッタ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通フッタ
ここに共通の内容を記述します
</div>
</BODY>
</HTML>
面倒くさくないですか？ という訳で「ヘッダ」「フッタ」を共通部品として作成してみましょう。
ディレクトリ名やファイル名は任意ですが、以下３ファイルを作成します。
○ ～\resources\views\layout\header.blade.php
○ ～\resources\views\layout\footer.blade.php
<!DOCTYPE HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
@section('header')
@include('layouts.header')
@show
@yield('content')
@section('footer')
@include('layouts.footer')
@show
</BODY>
</HTML>
「@section('header') ～ @show」がセットとなり「@show」の場合は、挟まれた内容を即座に表示する構文となります。
挟まれた内容は「@include('layouts.header')」となり、これは引数で設定したファイルを読込みます。
つまり『～\resources\views\layout\header.blade.php』『～\resources\views\layout\footer.blade.php』となります。
{{-- 共通ヘッダ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通ヘッダ
ここに共通の内容を記述します
</div>
{{-- 共通フッタ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通フッタ
ここに共通の内容を記述します
</div>
よって子画面（ここでは[index.blade.php]とします）の内容を以下の様にします。
@extends('layouts.base')
@section('content')
子画面本文
@endsection
どうですか？
こんな４行だけのファイルにアクセスしただけで『ヘッダ』『フッタ』が表示されています!!
○ ～\resources\views\layout\header.blade.php 親画面から呼ばれるヘッダ画面
○ ～\resources\views\layout\footer.blade.php 親画面から呼ばれるヘッダ画面
○ ～\resources\views\hoge\index.blade.php 親画面から呼ばれるヘッダ画面
ただし、よく考えると共通過ぎて完全に「静的画面」となっています。
要望としては以下の様に「動的画面」にしたいです。
① タブ名を変更したい
② ヘッダにはユーザー名を表示したい
③ フッタには次ページのリンクを表示したい そのためにはコントローラから変数をアサインする必要があり、以下の様に記述してみましょう。
public function index(Request $request) {
$link = 'https://www.yahoo.co.jp/';
return view('hoge/index', ['title' => 'ほげ', 'user' => 'hoge_user', 'link' => $link]);
}
変数を受け取ったビューは以下の様に設定します。
<!DOCTYPE HTML>
<HEAD>
<TITLE>{{ $title }}</TITLE>
</HEAD>
<BODY>
@section('header')
@include('layouts.header')
@show
@yield('content')
@section('footer')
@include('layouts.footer', ['yahoo' => $link])
@show
</BODY>
</HTML>
{{-- 共通ヘッダ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通ヘッダ<BR />
ようこそ {{ $user }} さん
</div>
{{-- 共通フッタ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通フッタ<BR />
<a href="{{ $yahoo }}">Yahoo</a>
</div>
| $title | そのまま親画面に指定できます |
| $user | 親画面が呼出しているヘッダ画面にも直接指定できます |
| $yahoo | 本来は直接「$link」で指定できますが、 別の指定方法として「@include」から変数を渡す事も可能です |
