基礎知識

Blade 使い方(早見表)

2018/10/10

Laravel ではデフォルトで Blade というテンプレートエンジンが組み込まれています。

初めて触るなら少しとっつきにくく感じるかもしれません。

しかし、慣れてくると便利に感じます。

Blade の特徴は大きく分けて三つあります。

1.レイアウト定義
2.制御構文
3.データ表示・その他

今回は Blade の使い方についてまとめます。

 

1.レイアウト定義

レイアウト定義で使用する 主な @要素は三つです。

1.@yield()
2.@section()
3.@include()

1.@yield()

@yield を使ったレイアウト定義の例をあげます。

親のページ(テンプレート)


<!-- resources/views/layouts/master.blade.phpとして保存 -->
<html>
  <head>
    <title>@yield('title')</title>
  </head>
<body>

<div id='container'>
  @yield('content')
</div>

</body>
</html>

 
レイアウト定義したテンプレートを使います。

親のページで指定した @yield は子のページでは @section で内容をいれていきます。

 
子のページ(テンプレートの拡張)


<!-- resources/views/child.blade.phpとして保存 -->

<!-- 継承元を記載 --> 
@extends('layouts.master')

<!-- master側のyieldに入る値(ワンライナー) --> 
@section('title', 'ダッシュボード')

<!-- master側のyieldに入る値(ブロック) --> 
@section('content')
<p>ここが本文のコンテンツ</p>
@endsection

 

2.@section()

先ほどの例では親で @yield を指定し、子で @sectionで中身をいれました。

@section は親にも使うことができます。

この場合、子のページでは @@parent を使って呼び出します。

親のページ(テンプレート)


<!-- resources/views/layouts/master.blade.phpとして保存 -->
:
@section('sidebar')
  ここがメインのサイドバー
@show
:

POINT!

@section の閉じタグですが、親テンプレートの場合は @show で終わり、子のページでは @endsection もしくは @stop で終わります。

子のページ(テンプレートの拡張)


<!-- resources/views/layouts/master.blade.phpとして保存 -->
:
@section('sidebar')
  @@parent
  <p>ここはメインのサイドバーに「追加」される</p>
@endsection
:

POINT!

@@parent と書くと親テンプレートの@section() の内容が展開されます。scriptの追加記述の他、サイドバーをページによって出し分け or 追加等をしたい場合に使います。

 

3.@include()

@include() はphpのinclude関数のように外部のテンプレートを読み込みます。

php の include 関数のように外部のテンプレートを読み込みます。

変数を渡すことができるのが特徴です。

 
親のページ(テンプレート)


<!-- resources/views/layouts/master.blade.phpとして保存 -->
<html>
<head>
<title>@yield('title')</title>
</head>
<body>

<div id='container'>
@yield('content')
</div>

<!-- コンテンツの一部を外部化してinclude -->
@include('layouts.footer')
</body>
</html>

 
include先


<!-- resources/views/layouts/footer.blade.phpとして保存 -->
<footer>
Copyright © 2007-2018 demo inc. All Rights Reserved.
</footer>

 

2.制御構文

Blade では条件文やループなどの一般的なPHPの制御構文を提供しています。

条件文

If文

if文の構文では

@if
@elseif
@else
@endif

要素を使用します。これらの使い方はPHPの構文と同じです。


@if ($age >= 70)
  <p>高齢者</p>
@elseif ($age >= 20)
  <p>成人</p>
@else
  <p>未成年</p>
@endif

POINT!

php の構文に慣れていると @endif を忘れがちになりますが、Blade の if構文には @endif は必須です。

 
三項演算子

基本の書き方です。


{{ $age > 60 ? '条件が成り立つ場合' : '条件が成り立たない場合' }

 
条件式+変数代入


{{ $is_kanreki = $age > 60 ? 'true' : 'false' }

 
Controller で view に disabled という変数を渡します。
こうすると、css のプロパティやスタイルとしても指定可能です。
hoge の表示、非表示が切り替わります。


<a style="{{ disabled ? 'color:red;' : 'display:none;' }}" >hoge</a>

 
isset、empty 文


@isset($my_name)
<span>私の名前は{{$my_name}}です。</span>
@endisset

@empty($friend_list)
<span>私はひとりぼっちです。</span>
@endempty

これらの構文は @if でも書き換えることができます。

 
unless文(if の逆の文。~じゃなかったら。)

実は unless文は php の構文にはありません。(Perl や Ruby にはある)


@unless (Auth::check())
  あなたはログインしていません。
@endunless

 

繰り返し

for構文

php の for 構文とほぼ同じです。


@for ($i = 0; $i < 10; $i++)
  現在の値は: {{ $i }}
@endfor

@for から始めて、@endfor で終わらせます。

 
foreach構文

個人的にもっともよく使う @要素 です。

コントローラで該当するレコードを抽出し、ビューで表示するときに使います。

例えば Eloquent で以下のように学生レコードを抽出するとします。


# コントローラ
$students = App\Student::all();

ビューでは以下のように記述します。


@foreach ( $students as $student )
  <p>学年: {{ $student->grade }} </p>
  <p>名前: {{ $student->name }} </p>
  <p>email: {{ $student->email }} </p>
  <p>グループ: {{ $student->group }} </p>
@endforeach

レコードの各カラム(ここでは学生の各情報)にアクセスするにはアロー演算子(->)を使います。

レコードがない処理も付け加えるなら


@forelse ($students as $student)
  <li>{{ $student->name }}</li>
@empty
  <p>該当なし</p>
@endforelse

 

3.データ表示・その他

データ表示


echo(エスケープあり)


{{ $var }}

echo $varと一緒です。HTML エンティティが自動でかぶさります。

HTML エンティティとは

HTMLエンティティとはブラウザが HTML を表示する際に特別な意味を持つ記号などの文字を、特別な処理をせずにそのまま出力させるために定義されている文字の代替コードのこと 例)< や "

つまりHTMLのタグを書いてもエスケープされます。

 
echo(エスケープなし)


{!! $var !! }}

 
コメント


{{-- Comment --}}

 
改行+エスケープ 表示


{!! nl2br(e( $comment )) !!}

e はエスケープ処理です。

 

その他

CSRFトークン


フォームがある場合はこれをフォーム要素内に記述しないと TokenMismatchException が発生します。


{{ csrf_field() }}

 
素のPHPのコードを記述


素のPHPもブレードファイルに記述することができます。


@php
  echo 'hello';
@endphp

チェック使用回数が多いのであれば、リファクタリングの余地があります。
テンプレートにロジックをたくさん埋め込んでいるサインだからです。

 
現在のURLを判定


URLがhttp(s)://www.example.com/contents だったら「true」、それ以外なら「false」を返します。


@if(Request::is('contents'))
  true
@elseif
  false
@endif

また、ワイルドカードによるパターン指定もできます。


<li @if(Request::is('contents/*')) class="active" @endif>
<a href="/contents"> コンテンツ</a>
</li>

 
Blade に関するまとめは以上です。

本庄マサノリ

仕事でLaravelを使っています。気づいたことや新しい発見など情報を発信していきます。

 

-基礎知識