Laravelのbladeでよく使うディレクティブ一覧と使い方

この記事では、Laravelのbladeで使用できるよく使われるディレクティブの一覧と使い方について詳しく説明します。

ディレクティブとは「@」から始まる「@if~@endif」など構文のようなものです。

ディレクティブの使い方を知っているとより効率的にbladeを扱うことができるようになります。

今回はよく使うディレクティブをいくつかピックアップして使い方を紹介していきます。

Laravelのbladeでよく使うディレクティブの一覧
1. レイアウト作成
2. 条件分岐、繰り返しなど
Laravelのbladeでよく使うディレクディブの使い方
エンジニアにおすすめ書籍
ディレクティブの違いを理解しつつ最適なものを選択する

Laravelのbladeでよく使うディレクティブの一覧

今回紹介するディレクティブの一覧はこちらになります。

他にもディレクティブはありますが、よく使うものに限定しています。

特にレイアウト作成に必要なディレクティブに関しては初めて見るものも多いかと思います。

実例を交えながら紹介していくので使い方をイメージしやすいかと思います。

レイアウト作成

@section
@extends
@parent
@show
@yield
@include

条件分岐、繰り返しなど

@if
@foreach
@isset
@empty
@switch

Laravelのbladeでよく使うディレクディブの使い方

ここからは先ほど紹介したディレクティブの使い方を紹介していきます。

@sectionディレクティブ

まず初めは、「@sectionディレクティブ」を紹介します。

ビューファイル内にセクションを定義するためのディレクティブです。

以下は、@sectionディレクティブの基本的な使い方です。

@section('section_name')
    // セクションの中身
@endsection

基本的な使い方は「@section ~ @endsection」でセクションを定義します。

@sectionディレクティブを使うことで、のちに紹介する@extendsの継承などで効率的にコードを書くことができるようになります。

5. @extendsディレクティブ

続いては@extendsディレクティブです。

他のBladeビューを拡張するためのディレクティブです。以下のように使用することができます。

@extends('layouts.app')

@extendの括弧内には継承したいファイル名を書くことで継承ができるようになります。

viewsフォルダ内でフォルダ階層になっている場合は、「layouts.app」などのように「.」で階層を表現します。

「layouts.app」は「views/layouts/app.blade.php」を意味します。

継承をすることで、継承したファイル内容をそのまま引き継ぎ、追加の内容も加えることができるようになります。

具体的な追加内容は次に紹介する「@parent, @showディレクティブ」で詳しく紹介します。

@parent, @showディレクティブ

続いては@parent, @showディレクティブです。

この2つのディレクティブは、継承の際に使うものになります。

具体例をお見せします。

<html>
 <head>
 </head>
 <body>
  @section('content')
    <h1>親テンプレート</h1>
  @show 
 </body>
</html>

こちらは親テンプレートである「parent.blade.php」の内容になります。

この親テンプレートを以下のコードでは子テンプレートが継承しているものになります。

@extends('parent')
@section('content')
 @parent
   <h2>子テンプレート</h2>
@endsection

2つのファイルでやっていることを整理してみます。

parent.blade.phpで継承元のテンプレートを作成
継承させるセクション「@section(‘content’)」を作成
継承元の場合、@endsectionではなく@showを用いる
子テンプレートであるchild.blade.phpの作成
@extends(‘parent’)でparent.blade.phpの内容を継承する。
セクション「@section(‘content’)」の内容を継承しつつ、内容を追加するために
@parentを用いる

@showディレクティブで継承元のセクションを宣言し、継承する側の@parentディレクティブで継承しつつ、追加内容を記載していくイメージです。

継承する側では@endsectionを使います。

実際に生成されるHTMLは以下のようになります。

<html>
 <head>
 </head>
 <body>
    <h1>親テンプレート</h1>
    <h2>子テンプレート</h2>
 </body>
</html>

少しややこしいですが、何度か利用して生成されるHTMLを確認しながらやると慣れてくると思います。

@yieldディレクティブ

続いては@yieldディレクティブです。

指定されたセクションの内容を表示するためのディレクティブです。

以下は、@yieldディレクティブの基本的な使い方です。

@yield('content')

まずは親テンプレートで@yieldを使ってセクションを定義します。

@extends('parent')

@section('content')
  <p>子テンプレートごとの内容</p>
@endsection

子テンプレートごとに異なるセクションの中身を作成することができるようになります。

親テンプレートで@yieldを使ってセクションを定義し、子テンプレートで定義したセクションの中身をつけていくイメージです。

headタグのテキスト変更に便利

@yieldの一番メジャーな使い方は以下のようなものかと思います。

<html>
 <head>
    <title>@yield('title')</title>
 </head>
 <body>
    @section('content')
     @show
 </body>
</html>

@extentds('parent')
@section('title', '子テンプレート')

@section('content')
  <p>子テンプレート</p>
@endsection

<head>タグ内の情報はページごとにテキストを変更する必要があります。

その場合に@yieldを使って継承先のテンプレートでそれぞれ個別のテキストを定義することができるようになります

@includeディレクティブ

他のbladeの内容をそのまま表示するためのディレクティブです。

以下のように使用することができます。

@include('parts.article')

繰り返し使うことがある部分などは@includeを使ってパーツ化しましょう。

@include内で変数を定義して、その変数を使用することもできます。

@foreach ($articles as $article)
 @include('parts.article',
  [
     'articleId' => $article->id
  ]
 )
@endforeach

第二引数に、連想配列としてキーとバリューを設定することで@include内のファイルでその変数を使うことができるようになります。

エンジニアにおすすめ書籍

エンジニアになりたて、これから勉強を深めていきたいという方におすすめの書籍はこちら！

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

オライリージャパン

Amazon

楽天

Yahoo!ショッピング

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESSプラスシリーズ)

技術評論社

Amazon

楽天

Yahoo!ショッピング

@if

ここからは条件分岐や繰り返し処理などのディレクティブです。

やっていることはPHPのコードをさほど変わらないので、書き方だけ覚えておけば問題ないかと思います。

まず最初に@ifディレクティブです。

条件に基づいてコードを実行するためのディレクティブです。

指定された条件が真であれば、特定のコードブロックが実行されます。

条件が偽の場合には、別のコードブロックが実行されます。

以下にサンプルコードです。

@if($condition)
    // 条件が真の場合に実行するコード
@else
    // 条件が偽の場合に実行するコード
@endif

@foreach

続いて@foreachディレクティブ。

配列やコレクションなどの反復可能な要素に対して繰り返し処理を行うためのディレクティブです。

以下は、@foreachディレクティブの基本的な使い方です。

@foreach($items as $item)
    // 繰り返し処理を行うコード
@endforeach

@empty

続いて@emptyディレクティブ。

変数や値が空かどうかを特定してコードを実行するためのディレクティブです。

以下、@emptyディレクティブの基本的な使い方です。

@empty($variable)
    // 変数が空の場合に実行するコード
@endempty

@isset

続いては@issetディレクティブです。

変数がセットされているかどうかをチェックするためのディレクティブです。

以下は、@issetディレクティブの基本的な使い方です。

@isset($variable)
    // 変数がセットされている場合に実行するコード
@endisset

@switchディレクティブ

最後に紹介するのが@switchディレクティブです。

指定された値に基づいて複数のケースを判定し、該当するケースのコードを実行するためのディレクティブです。

以下は、@switchディレクティブの基本的な使い方です。

@switch($value)
    @case('option1')
        // option1の場合に実行するコード
        @break
    @case('option2')
        // option2の場合に実行するコード
        @break
    @default
        // 上記のいずれのケースにも該当しない場合に実行するコード
@endswitch

@switchディレクティブを使った方がコードがスッキリ読みやすくなる場合が多いので使える場合は積極的に使った方が良いかと思います。