Bladeテンプレート

解説
1. Bladeとは
2. Bladeの基本構文

問題に挑戦！

進捗を変更する

このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！

解説

1. Bladeとは

Bladeとは、LaravelでView（画面）を作成するために用意されている、PHPをベースとしたテンプレートエンジンです。

BladeはPHPをベースとしたテンプレートファイルなので、これまでに学習してきたPHPのコードをそのまま記述することができますが、Blade独自の構文を利用することで、より少ないコードでプログラムを記述できたりと、効率的に開発をすすめることができます。

Bladeファイルは、「ファイル名.blade.php」という形式で「resources > views」フォルダー配下に保存します。

これまでに見てきた、「welcome.blade.php」「login.blade.php」「home.blade.php」はどれもBladeファイルです。

2. Bladeの基本構文

ここではいくつかの基本的なBladeの構文を確認しておきましょう。

構文：コメントアウト

構文

{{-- コメントアウト --}}

使用例

{{-- <p>Bladeのコメントアウトはソースとして出力されません。</p> --}}

_{※Bladeのコメントアウトは、HTMLのコメント「」と似た使い方ができますが、HTMLのコメントと異なり、ソースとして出力されません。}

構文：エコー（出力）

構文

{{ /*出力したいPHPのコード*/ }}

使用例

<p>私の名前は、{{ $userName }}です。</p>

_{※「<?PHP echo(htmlspecialchars($userName)); ?>」と同じ結果が出力されます。}

ディレクティブ「@」

if文やループ処理は、ディレクティブと呼ばれる、「@」から始まる短縮構文を利用することができます。

構文：@if

構文

@if (条件式)
    // 処理
@elseif (elseの条件式)
    // 処理
@else
    // 処理
@endif

使用例

@if ($age < 20)
    <p>{{ $age }}歳は未成年です。</p>
@else
    <p>{{ $age }}歳は成人です。</p>
@endif

構文：@switch

構文

@switch(式)
    @case(値1)
        // 式と値1が一致する時の処理
        @break
    @case(値2)
        // 式と値2が一致する時の処理
        @break
    @default
        // 式がどのケースとも一致しない時の処理
@endswitch

使用例

@switch(get_debug_type($value))
    @case('int')
        <p>$valueはint型です。</p>                        
        @break
    @case('float')
        <p>$valueはfloat型です。</p>
        @break
    @default
        <p>$valueは数値ではありません。</p>
@endswitch

_{※get_debug_type() は、引数の型名を文字列で取得します。}

構文：@foreach

構文

@foreach (配列 as ループ毎の要素)
    // ループ毎の処理
@endforeach

使用例) $users配列に格納された、各$userオブジェクトの名前を出力する

<ul>
    @foreach ($users as $user)
        <li>$user->name</li>
    @endforeach
</ul>

問題

実践問題

「views」フォルダー内の「home.blade.php」ファイルと、「views > auth」フォルダー内の「login.blade.php」の該当箇所を問の形式に修正してください。
（解答が終わったらコミット・プッシュをしておきましょう。）

<!-- 
（問1）smallタグ内の「2021」を、PHPのdate()関数を利用して、
現在の年を出力するように修正してください。 -->
<footer class="flex_parent">
    <p><small>&copy;2021 Dig Skill</small></p>
</footer>

ヒント：現在年の取得は、「PHP 現在年取得」などのキーワードで検索して実装してみましょう。

解答

（問1）解答を表示

<footer class="flex_parent">
    <p><small>&copy;{{ date('Y') }} Dig Skill</small></p>
</footer>

ソース全文を表示

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>home</title>
        <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    </head>
    <body>
        <header>
            <div class="container">
                <div class="flex_parent">
                    <div class="logo">
                        <a href="/">DigTweet
                        </a>
                    </div>
                    <nav>
                        {{-- Laravelの認証機能でログアウトするには、
                            URLパス「/logout」に対してpost通信でアクセスします。 --}}
                        <form name="logout" method="POST" action="/logout">
                            @csrf
                            <button type="submit">ログアウト</button>
                        </form>
                    </nav>
                </div>
            </div>
        </header>
        <main>
            <div class="section_inner">
                <div class="container">
                    <h1>ログイン成功！</h1>
                </div>
            </div>
        </main>
        <footer class="flex_parent">
            <p><small>&copy;{{ date('Y') }} Dig Skill</small></p>
        </footer>
    </body>
</html>

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>login</title>
        {{-- asset() はpublicフォルダー内のファイルパスを取得します。 --}}
        <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    </head>
    <body>
        <header>
            <div class="container">
                <div class="flex_parent">
                    <div class="logo">
                        <a href="/">DigTweet
                        </a>
                    </div>
                </div>
            </div>
        </header>
        <main>
            <div class="section_inner">
                <div class="container">
                    <h1>ログイン</h1>
                    {{-- Laravelの認証機能でログインするには、「/login」に対してPOST通信で、
                        「name="email"」、「name="password"」のデータを送信します。 --}}
                    <form class="login_form" action="/login" method="POST">
                        {{-- Laravelでは、formでデータを送る場合、「@csrf」を記述して
                            CSRF（クロスサイト・リクエスト・フォージェリ）対策をする必要があります。 --}}
                        @csrf
                        <label for="email">email：</label>
                        <input id="email" type="email" name="email">
                        <p></p>
                        <label for="password">password：</label>
                        <input id="password" type="password" name="password">
                        <p></p>
                        <button type="submit">ログイン</button>
                    </form>
                </div>
            </div>
        </main>
        <footer class="flex_parent">
            <p><small>&copy;{{ date('Y') }} Dig Skill</small></p>
        </footer>
    </body>
</html>