D130 Bladeテンプレートの記法 – エアケント教育コンテンツ

今回はテンプレートエンジンについて、中でもLaravelのビューで用いるbladeテンプレートを紹介します。

Bladeテンプレートの記法について

テンプレートエンジンとは

テンプレートエンジンとは、HTMLとデータ(PHPやJSなど)を組み合わせて出力ようのHTMLファイルを作成するライブラリのことをいいます。Ruby on railsであれば、ERBというテンプレートエンジンがデフォルトでは用いられており、フレームワークや言語によって多くのテンプレートエンジンの種類があります。

blade以外に有名なPHPのテンプレートエンジンを3つ紹介します。

Twig→構文がきれいで見やすいが自前メソッドはエンジン登録が必要で、拡張がしにくいテンプレートエンジン。

DIV→1ファイルで完結するため局所使用に便利だが、大規模開発には向かないテンプレートエンジン。

Smarty→機能が多く、日本人での利用者も多いが、重くなりやすいテンプレートエンジン。

bladeとは

bladeとは、Laravelにて用いられているテンプレートエンジンで、”.blade.php”という拡張子を用いてビューの作成時に用いられます。

インストール時に自動で作成される”welcome.blade.php”を例に詳細を解説します。※簡潔に記載するためclass名は削除しております。

@if (Route::has('login'))
  <p>{{ $name }}さん、こんにちは！</p>
  <div>
    @auth
      <a href="{{ url('/home') }}">Home</a>
    @else
      <a href="{{ route('login') }}" >Log in</a>
      @if (Route::has('register'))
        <a href="{{ route('register') }}">Register</a>
      @endif
    @endauth
  </div>
@endif

・”@if”などの”@”はphpの処理であるということを示しております。

・基本的にはphpの文法と同様な為、”$”は変数を意味し、foreach文なども”@”を用いて使うことができます。

また、下記の様に変数に値を持たせてルーティングを設定することで、bladeビューに変数を渡すこともできます。

Route::get('/', function () {
    return view('welcome', ['name' => '山田']);
});

分割方法

bladeに限らず、どの言語やプロダクトであっても、共通するパーツやコンテンツは分割しメンテナンスを行いやすいようにすることが一般的です。bladeにおいては親テンプレート、子テンプレートという概念にて分割を行います。実際の作成手順は下記のような流れになります。

①雛形となる親テンプレートを作成する。(resources/views直下にlayoutsフォルダを作成し、その中へ親ファイルを入れる)

※parent.blade.phpというファイル名で今回は作成します。

parent.blade.php (親テンプレート)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div class="container">
      <h1>@yield('title')</h1>
      @yield('content')
    </div>
  </body>
</html>

“@yield”とは、子テンプレートで定義された変数を読み込んでいるような使用イメージで理解してください。

②resources/views直下に子テンプレートを作成する。

child.blade.php (子テンプレート)

@extends('layouts.parents') //親テンプレートを読み込み指定
@section('title', 'Laravel リンク集') //titleを設定
@section('content') // @endsectionまでの間をコンテンツとして設定
<ul class="listdesign design1">
  <li><a href="https://laravel.com/" target="_blank">Laravel公式サイト(英語)</a></li>
  <li><a href="http://laravel.jp/" target="_blank">Laravel公式サイト(日本語)</a></li>
  <li><a href="https://github.com/laravel/laravel" target="_blank">Laravel GitHub</a></li>
</ul>
@endsection

③表示をさせたい箇所で子テンプレートの表示をさせる。

return view('child');

エンジニアからのアドバイス

テンプレートエンジンについては、HTMLで見ない様な書き方があった際に書き方を調べる様なインプットで良いかと思います。分割については基本的に重複したコードは記載しないという認識を持ちながら、ファイル設計についてはプロジェクト毎に確認をしましょう。

←前の記事へ --- 次の記事へ→