Bladeとは?

Blade(ブレード)とはLaravelに付属しているテンプレートエンジンです。

このBladeと言うのがもうすごいんです。

BladeはViewにあたるものです。

つまりこのBladeファイルにHTMLを記述していきます。

ちょっとBladeを見てみる

前回Laravelの最初のページを見ることに成功しました。

あのページもBladeで作られています。

あのページのBladeファイルを見て見ましょう。

場所はresource/viewsの中にwelcome.blade.phpと言うファイルがあります。

テキストエディタで開いて見てください。

ちょっと長いですが、コードも載せておきます。

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Raleway', sans-serif;
                font-weight: 100;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>
                        <a href="{{ route('register') }}">Register</a>
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Documentation</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>
</html>

まずファイル名に注目してください。

拡張子が、.blade.phpになっています。

phpがついていますが、<?php ?>は使えません。

さらによく見て見ると2行目の<html>{{app()->getLocale()}}と書かれています。

この{{ }}に囲まれている部分はデータ(変数や関数の呼び出しや演算)を記述することでその結果が入ります。

先ほどのapp()->getLocale()は言語を取得する関数のようです。

さらに見て見ると69行目に@if(Route::has('login'))と書かれています。

これはもう御察しの通り、if文です。

この@から始まる構文をディレクティブと言います。

先ほどの@ifはifディレクティブなんて呼んだりします。

このifディレクティブは以下のように記述します。

@if(条件式)
表示するHTMLや{{}}
@endif

条件式はPHPの構文で書けます。

ディレクティブの後の(式)は全部PHPで書けます。

例えば成人なら「あなたは成人です」成人じゃないなら「成人まであとx歳です」を表示するbladeを記述すると、

@if($age >= 20)
あなたは成人です。
@else
成人まであと{{20 - $age}}才です。
@endif

さて今度はelseディレクティブが出てきました。

もう説明はいらないと思いますが、elseディレクティブはifディレクティブの条件に合わない時に実行されるものです。

ただifディレクティブの中でelseディレクティブを使用するのでendifディレクティブを使用する事に気を付けてください。

他にも沢山ディレクティブは用意されていますが、ここではこの辺にしておきます。

また、機会があったら詳しく説明します。

ちょっといじって見る

ではこのwelcome.blade.phpをいじって見ましょう。

<!doctype html>
<html lang="ja">
    <head>
        <title>ようこそLaravelへ!</title>
    </head>
    <body>
        <h1>ようこそLaravelへ!</h1>
        <p>3 + 4 * 32 - 32 / 43 = {{3 + 4 * 32 - 32 / 43}}</p>
        <p>時間:{{(new DateTime())->format('Y/m/d H:i:s')}}</p>
    </doby>
</html>

こんな風にして見ました。

表示すると、

ちゃんと計算も出来てますし、返り値も出力されています。

次にわざとエラーを出して見ましょう。

<!doctype html>
<html lang="ja">
    <head>
        <title>Laravelでエラー</title>
    </head>
    <body>
        <h1>Laravelでエラー</h1>
        <p>{{hoge()}}</p>
    </doby>
</html>

表示すると、

あれ・・・いつものPHPのエラーと違う・・・

そうなんです。LaravelではPHPのエラーがすごく見やすく表示されます。

しかも、StackoverflowやGoogle等でエラーが調べれるボタンも付いています。

Laravelはエラー表示も充実していますね。

次に{{}}でHTMLを出力して見ます。

<!doctype html>
<html lang="ja">
    <head>
        <title>LaravelでHTML</title>
    </head>
    <body>
        <h1>LaravelでHTML</h1>
        <p>{{"<h1>hello laravel</h1>"}}</p>
    </doby>
</html>

表示して見ると、

ありゃりゃ・・・そのまま表示されています。

どうやらサニタイズされているようです。

サニタイズせずにHTMLを出力する場合は{!! "html" !!}のようにします。

では直して見ましょう。

<!doctype html>
<html lang="ja">
    <head>
        <title>LaravelでHTML</title>
    </head>
    <body>
        <h1>LaravelでHTML</h1>
        <p>{!! "<h1>hello laravel</h1>" !!}</p>
    </doby>
</html>

表示すると、

ちゃんとHTMLで出力されています。

この章のまとめ

Bladeは結構便利なテンプレートエンジン。