タイトル: Bladeテンプレート(ビュー/レイアウト)
SEOタイトル: LaravelのBladeテンプレート(ビュー/レイアウト)とは
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<thead>
<tr><th style="background-color:#f39c12;color:#ffffff;text-align:left">この記事の要点</th></tr>
</thead>
<tbody>
<tr>
<td style="background-color:#fef9e7">
<ul>
<li>Laravel の <strong>Blade テンプレートエンジン</strong></li>
<li>拡張子: <code>.blade.php</code></li>
<li>主要機能: <strong>テンプレート継承 (<code>@extends</code> / <code>@section</code> / <code>@yield</code>)</strong> + ディレクティブ (<code>@if</code> / <code>@foreach</code> / <code>@csrf</code>)</li>
<li>コンパイル結果は <code>storage/framework/views/</code> にキャッシュされる</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p><span style="font-size:14px"><strong>Laravel</strong>には<span style="color:#e74c3c"><strong>Blade</strong></span>というテンプレートエンジンがある。</span></p>
<p> </p>
<h2>Bladeテンプレートとは？</h2>
<p><strong>Blade</strong>テンプレートを使うとと、共通部分（ヘッダー、サイドバー、フッター等）は親ビューに記述し、各ページのコンテンツは親ビューを継承した小ビューに記述するというようなことができる。</p>
<p>また、<span style="color:#e74c3c"><strong>ディレクティブ（@～）</strong></span>を使用することで「if」や「for」を簡潔に記述することが出来る。</p>
<p>テンプレートの拡張子は「<strong>.blade.php</strong>」とする。</p>
<p> </p>
<h2>ビューとは</h2>
<p><span style="font-size:14px"><span style="color:#e74c3c"><strong>ビュー</strong></span>はアプリケーションのフロントエンドを担当する。</span></p>
<p><span style="font-size:14px"><strong>Laravel</strong>では、表示用のテンプレートをあらかじめ用意し、それを利用して画面表示を行うことが可能。(Bladeテンプレート)</span></p>
<p><span style="font-size:14px">テンプレートは、<strong>「resources」</strong>フォルダ内にある<strong>「views」</strong>フォルダの中に配置する。また、PHPファイルとして作成する。</span></p>
<p><strong>レイアウト</strong>という大枠を作ってそこにビューを組み込むのが一般的なやり方。</p>
<p> </p>
<h2>レイアウトの定義</h2>
<p>以下の様に、レイアウトは大枠を定義する。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><!-- resources/views/layouts/app.blade.php --><br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<title>Laravel Quickstart - Basic</title></span></p>
<p><span style="color:#ffffff"> <!-- CSSとJavaScript --><br />
</head></span></p>
<p><span style="color:#ffffff"> <body><br />
<div class="container"><br />
<nav class="navbar navbar-default"><br />
<!-- ナビバーの内容 --><br />
</nav><br />
</div></span></p>
<p><span style="color:#ffffff"> </span><span style="color:#e74c3c"><strong>@yield('content')</strong></span><br />
<span style="color:#ffffff"> </body><br />
</html></span></p>
</td>
</tr>
</tbody>
</table>
<p>「<span style="color:#e74c3c"><strong>@yield('content')</strong></span>」にビューを組み込んで内容を表示させる。</p>
<p><span style="color:#ffffff">@yield('content')</span></p>
<h2>ビューの定義</h2>
<p>以下の様に画面に入力項目やボタンを追加する。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><!-- resources/views/tasks.blade.php --></span><br />
<span style="color:#e74c3c"><strong>@extends('layouts.app')</strong></span></p>
<p><span style="color:#e74c3c"><strong>@section('content')</strong></span></p>
<p><span style="color:#ffffff"> <!-- Bootstrapの定形コード… --></span></p>
<p><span style="color:#ffffff"> <div class="panel-body"><br />
<!-- 新タスクフォーム --><br />
<form action="{{ url('task') }}" method="POST" class="form-horizontal"><br />
{{ csrf_field() }}</span></p>
<p><span style="color:#ffffff"> <!-- タスク名 --><br />
<div class="form-group"><br />
<label for="task" class="col-sm-3 control-label">タスク</label></span></p>
<p><span style="color:#ffffff"> <div class="col-sm-6"><br />
<input type="text" name="name" id="task-name" class="form-control"><br />
</div><br />
</div></span></p>
<p><span style="color:#ffffff"> <!-- タスク追加ボタン --><br />
<div class="form-group"><br />
<div class="col-sm-offset-3 col-sm-6"><br />
<button type="submit" class="btn btn-default"><br />
<i class="fa fa-plus"></i> タスク追加<br />
</button><br />
</div><br />
</div><br />
</form><br />
</div></span><br />
<span style="color:#e74c3c"><strong>@endsection</strong></span></p>
</td>
</tr>
</tbody>
</table>
<p>「<span style="color:#e74c3c"><strong>@extends('layouts.app')</strong></span>」は先ほどの「<strong>resources/views/layouts/app.blade.php</strong>」レイアウトを使用するという意味。</p>
<p>「<span style="color:#e74c3c"><strong>@section('content')</strong></span>」から「<span style="color:#e74c3c"><strong>@endsection</strong></span>」の内容を、先ほどのレイアウトで定義した「<strong>@yield('content')</strong>」の部分に挿入する。</p>
<p> </p>
<h2>ビューの表示</h2>
<p><span style="font-size:14px"><strong><a href="https://jpn.itlibra.com/article?id=10804">ルーティング機能</a></strong></span>を利用し、テンプレートの表示が可能。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><span style="font-size:14px">Route::メソッド ( ※値</span><span style="font-size:14px"> , </span>function ()<span style="font-size:14px"> ) </span>{</span></p>
<p><span style="font-size:14px"><span style="color:#ffffff"> return <strong>view</strong>(</span><strong><span style="color:#e74c3c">テンプレート</span> ,<span style="color:#27ae60"> </span><span style="color:#3498db">[連想配列]</span></strong><span style="color:#ffffff">);</span></span></p>
<p><span style="color:#ffffff"><span style="font-size:14px">});</span></span></p>
</td>
</tr>
</tbody>
</table>
<p><br />
<span style="font-size:14px"><span style="color:#e74c3c"><strong>第1引数</strong></span><span style="color:#000000">：</span>使用するテンプレートの名前を指定。<br />
<br />
<span style="color:#2980b9"><strong>第2引数</strong></span><span style="color:#000000">：</span>テンプレートに渡す値を連想配列で指定。指定された連想配列の値は、そのままテンプレート内で使うことが可能。</span></p>
<p><span style="font-size:14px">※</span>ルーティングで割り当てるアドレス</p>
<p> </p>
<p>具体例は以下の通り。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">Route::get('/', function () {<br />
return view('</span><span style="color:#e74c3c"><strong>tasks</strong></span><span style="color:#ffffff">');<br />
});</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>