LoginSignup
0
2
@Tomato_otamoTin株式会社ONE WEDGE

Laravel Bladeテンプレートの基本とディレクティブの活用法

Posted at

はじめに

Bladeテンプレートエンジンは、Laravelでのフロントエンド開発において非常に重要な役割を果たします。Bladeは、PHPコードとHTMLを簡潔かつ効率的に混在させるための強力なツールであり、テンプレートの再利用性やコードの可読性を大幅に向上させます。

Bladeテンプレートの重要性

  1. テンプレートの継承によるコードの再利用性
    Bladeの最大の強みの一つは、テンプレートの継承機能です。例えば、ウェブサイトの全ページに共通するヘッダーやフッター、ナビゲーションバーなどを一つのレイアウトファイルにまとめ、各ページの個別の内容だけを別ファイルで管理することができます。これにより、一貫性の確保と開発効率の向上に繋がります。

  2. Bladeディレクティブによる簡潔なコード記述
    Bladeは、@if、@foreach、@extends、@include などの独自ディレクティブを提供しています。これにより、複雑なPHPロジックをテンプレートに埋め込む必要がなく、コードが簡潔で理解しやすくなります。

  3. セキュリティの向上
    Bladeテンプレートエンジンは、デフォルトでXSS（クロスサイトスクリプティング）攻撃からの保護を提供します。すべてのデータ出力は、自動的にエスケープされ、ユーザーが提供した入力がそのままHTMLに挿入されることを防ぎます。

  4. 豊富な機能と拡張性
    Bladeは、テンプレート継承やコンポーネントの作成だけでなく、カスタムディレクティブの作成、コンディショナルなコンテンツ表示、ループの簡単な操作など、多くの機能を提供しています。また、必要に応じてカスタムディレクティブを作成することもでき、柔軟に機能を拡張できます。

Bladeディレクティブ

BladeにはHTMLとPHPのコードをよりシンプルで読みやすくするためのディレクティブがあります。これにより、条件分岐やループ、テンプレートの継承、コンポーネントの使用などが簡単に実装できます。

テンプレートの継承

@extends：テンプレートを継承する際に使用します。@extends('layouts.app')のように、親テンプレートを指定します。

@section：親テンプレートで定義されたセクションに対して、子テンプレートで内容を挿入するために使用します。

@yield：親テンプレートで、子テンプレートが内容を挿入できる場所を定義します。

親テンプレート
<!-- (layouts/app.blade.php) -->
<!DOCTYPE html>
<html>
<head>
    <title>My App - @yield('title')</title>
</head>
<body>
    <header>@include('partials.header')</header>
    <div class="container">
        @yield('content')
    </div>
    <footer>@include('partials.footer')</footer>
</body>
</html>
子テンプレート
<!-- (views/home.blade.php) -->
@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
    <h1>Welcome to the Home Page</h1>
    <p>This is the content of the home page.</p>
@endsection

このように、@extendsで親テンプレートを継承し、@sectionで各セクションの内容を定義し、@yieldで親テンプレートに挿入します。

テンプレートの部分的な挿入

@includeディレクティブは、別のBladeテンプレートを現在のテンプレート内に挿入するために使用します。ヘッダーやフッター、ナビゲーションメニューなどの共通部分を別のファイルとして分離し、複数のテンプレートで再利用する際に便利です。

<!-- メインテンプレート -->
@include('partials.header')

<div class="content">
    <h1>Main Content</h1>
</div>

@include('partials.footer')

条件分岐

@if：指定された条件が真の場合に、特定のブロックを表示します。
@elseif：ifの条件が偽で、別の条件が真の場合に使用します。
@else：ifやelseifの条件がすべて偽の場合に実行されます。

@if($user->isAdmin())
    <p>Welcome, Admin!</p>
@elseif($user->isEditor())
    <p>Welcome, Editor!</p>
@else
    <p>Welcome, User!</p>
@endif

ループ処理

@foreach：配列やコレクションをループ処理するために使用します。
@forelse：ループが空の場合の処理を簡単に追加できるループディレクティブです。
@for：従来のPHPのforループをBladeで記述する場合に使用します。

<ul>
    @foreach($items as $item)
        <li>{{ $item }}</li>
    @endforeach
</ul>

@forelse($products as $product)
    <p>{{ $product->name }}</p>
@empty
    <p>No products found.</p>
@endforelse

@for($i = 0; $i < 10; $i++)
    <p>Iteration {{ $i }}</p>
@endfor

スイッチ構文

@switch：スイッチ構文の開始を示します。
@case：特定の値と一致する場合の処理を定義します。
@default：すべてのケースに一致しない場合のデフォルト処理を定義します。

@switch($role)
    @case('admin')
        <p>Admin Dashboard</p>
        @break

    @case('editor')
        <p>Editor Dashboard</p>
        @break

    @default
        <p>User Dashboard</p>
@endswitch

CSRF（クロスサイトリクエストフォージェリ）保護

@csrfディレクティブを使用すると、フォーム内にCSRFトークンが自動的に挿入されます。

<form method="POST" action="/submit">
    @csrf
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>

認証状態のチェック

@auth：ユーザーが認証されている場合に、特定のコンテンツを表示します。
@guest：ユーザーが未認証（ゲスト）の場合に、特定のコンテンツを表示します。

@auth
    <p>Welcome back, {{ Auth::user()->name }}!</p>
@endauth

@guest
    <p>Please log in to access your account.</p>
@endguest

条件付きでテンプレートを挿入

@includeWhen：条件が真の場合にテンプレートを挿入します。
@includeUnless：条件が偽の場合にテンプレートを挿入します。

@includeWhen($isAdmin, 'admin.dashboard')

@includeUnless($isGuest, 'user.dashboard')

カスタムBladeディレクティブの作成

応用してカスタムディレクティブを作成することもできます。カスタムディレクティブを使用すると、頻繁に使用するテンプレートロジックを簡潔にまとめ、コードの再利用性と可読性を高めることができます。

カスタムディレクティブの作成手順

カスタムディレクティブは、LaravelのBladeファサードを使用して作成します。具体的には、AppServiceProviderまたはカスタムのサービスプロバイダー内でディレクティブを定義します。

まず、App\Providers\AppServiceProviderにカスタムディレクティブを定義します。bootメソッド内でディレクティブを登録します。

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        // カスタムディレクティブの登録
        Blade::directive('datetime', function ($expression) {
            return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
        });
    }
    
    public function register()
    {
        // 他のサービス登録
    }
}

上記の例では、@datetimeというカスタムディレクティブを作成しています。このディレクティブは、渡された日時オブジェクトをY-m-d H:i:sの形式で表示します。

カスタムディレクティブを定義した後は、Bladeテンプレート内でそれを使用できます。

<p>現在の日時は：@datetime(now())</p>

これにより、now()などの日時オブジェクトが、指定したフォーマットで表示されます。

より複雑なロジックを含むカスタムディレクティブも作成できます。例えば、認証されたユーザーのみが特定のコンテンツを表示できるカスタムディレクティブを作成してみましょう。

複雑なカスタムディレクティブの作成

より複雑なロジックを含むカスタムディレクティブも作成できます。例えば、認証されたユーザーのみが特定のコンテンツを表示できるカスタムディレクティブを作成できます。

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Facades\Auth;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        // 認証ユーザー専用のカスタムディレクティブ
        Blade::directive('authcontent', function ($expression) {
            return "<?php if (Auth::check() && Auth::user()->$expression): ?>";
        });

        Blade::directive('endauthcontent', function () {
            return "<?php endif; ?>";
        });
    }
}

上記の例では、@authcontentと@endauthcontentというディレクティブを作成しました。これにより、特定の条件を満たす認証済みユーザーのみがコンテンツを閲覧できるようにします。

@authcontent('isAdmin()')
    <p>このコンテンツは管理者のみが表示できます。</p>
@endauthcontent

このコードは、現在のユーザーがisAdmin()メソッドを通じて管理者であるかを確認し、条件を満たす場合にのみ指定されたコンテンツを表示します。

まとめ

Bladeディレクティブは、Laravelテンプレートエンジンの柔軟性とパワーを象徴する機能です。これらのディレクティブを理解し、適切に使用することで、コードの簡潔性、可読性、保守性を向上させることができます。Bladeを活用することで、HTMLテンプレートの管理が容易になり、より効率的で安全な開発が可能になります。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2