Blade を最大限に活用する: Laravel のテンプレート エンジン
- Patricia Arquetteオリジナル
- 2024-11-16 11:31:03115ブラウズ
テンプレートエンジンとは何ですか?
テンプレート エンジンは、コンテンツとレイアウトを分離するのに役立つツールのようなものです。これにより、コードがクリーンになり、管理が容易になります。 HTML をデータと混合する代わりに、コンテンツの外観を定義するテンプレートを作成すると、エンジンが詳細の入力を処理します。
ブレードとは何ですか？
Blade は Laravel 独自のテンプレート エンジンであり、作業を容易にするように設計されています。ブレード テンプレートは resource/views ディレクトリに保存され、各テンプレートには .blade.php 拡張子が付いています。構文はシンプルで明確なので、HTML と PHP を簡単に組み合わせることができます。例:
<h1>Hello, {{ $name }}!</h1>
しかし、Blade はデータを表示するためだけのものではありません。ループや条件などのロジックをテンプレートに直接追加することもできます。以下に例を示します:
@if ($user)
<p>Welcome, {{ $user->name }}!</p>
@else
<p>Please log in.</p>
@endif
ユーザーがログインしているかどうかに基づいて異なるコンテンツを表示することがいかに簡単であるかがわかりますか?次回ユーザーのリストをループする必要がある場合は、Blade の @foreach ディレクティブを使用してみてください。これは簡単で、コードを整理した状態に保ちます。
テンプレートの継承
Blade の最も優れた機能の 1 つは、レイアウトの再利用に役立つことです。サイトのマスター テンプレートを作成し、各ページに固有のコンテンツを入力するだけです。簡単な例を次に示します:
<!-- layout.blade.php -->
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<div>
<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>
<pre class="brush:php;toolbar:false">@extends('layout')
@section('title', 'Home Page')
@section('content')
<h1>Welcome to the Home Page!</h1>
@endsection
@extends を使用するとレイアウトにリンクし、@section を使用してプレースホルダーに特定のコンテンツを入力できます。これにより、コードが DRY (繰り返さない) 状態に保たれ、非常に管理しやすくなります。 Blade はワークフローを簡素化し、優れた Web アプリケーションの構築という重要なことに集中できるようにします。
ブレードのコンポーネント
ブレード コンポーネントは、UI の小さな構成要素のようなものです。それらをレゴの部品として想像してください。インターフェイスの小さな再利用可能な部分を作成し、必要な場所にスナップして所定の位置に取り付けることができます。これにより、コードがよりクリーンになり、保守しやすくなります。
コンポーネントを一度定義すると、それをアプリケーション全体で使用できます。異なるページ間でも同じように見えるボタンが必要ですか?それに対応する Blade コンポーネントを作成してください。さらに良いことに、これらのコンポーネントに属性を渡して、コンポーネントを柔軟かつ適応可能にすることができます。
ボタン コンポーネントの簡単な例を次に示します。
<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>
<!-- Usage -->
<x-button>Click Me</x-button>
コンポーネント クラスを使用すると、コンポーネントを動的にすることができます。これにより、タイプやクラスなどの属性を渡して、ボタンの動作やスタイルをカスタマイズできます。
// In a component class
public function render()
{
return view('components.button', [
'type' => $this->type,
'class' => $this->class,
]);
}
// In the Blade component
<button type="{{ $type }}">
<h2>
Including Subviews
</h2>
<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></p>
<h2>
Blade Directives
</h2>
<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>
<pre class="brush:php;toolbar:false"><form action="/submit" method="POST">
@csrf
@method('PUT')
<button type="submit">Submit</button>
</form>
さらにカスタマイズしたものが必要ですか?再利用可能なロジック用に独自の Blade ディレクティブを作成できます。
たとえば、日付の書式設定が頻繁に必要になるとします。次のようにカスタム ディレクティブを定義できます:
<h1>Hello, {{ $name }}!</h1>
その他の機能
Blade には、開発者としての生活をよりスムーズにする非常に便利な機能がいくつか備わっています。そのうちのいくつかを詳しく見てみましょう。
アセット URL の管理
CSS または JavaScript ファイルをリンクする必要がありますか? asset() ヘルパー関数がこれをカバーします。アセットの正しい URL が生成されるため、パスについて心配する必要はありません:
@if ($user)
<p>Welcome, {{ $user->name }}!</p>
@else
<p>Please log in.</p>
@endif
空の配列またはコレクションの処理
Blade の @forelse ディレクティブは、空の配列またはコレクションを扱う際の救世主です。これにより、アイテムをループすることができ、アイテムがない場合もエレガントに処理できます:
<!-- layout.blade.php -->
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<div>
<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>
<pre class="brush:php;toolbar:false">@extends('layout')
@section('title', 'Home Page')
@section('content')
<h1>Welcome to the Home Page!</h1>
@endsection
条件付きコンテンツの表示
Blade は、条件に基づいてコンテンツを表示するためのいくつかのディレクティブを提供します。
@isset: 変数が設定されているかどうかを確認します
@empty: 変数が空かどうかを確認します
@unless: if のように動作しますが、逆になります
@isset を使用した例を次に示します:
<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>
<!-- Usage -->
<x-button>Click Me</x-button>
XSS からの保護
Blade は出力を自動的にエスケープして、アプリを XSS (クロスサイト スクリプティング) 攻撃から保護します。ただし、生の HTML を出力したい場合もあります。その場合は、{!! !!}:
// In a component class
public function render()
{
return view('components.button', [
'type' => $this->type,
'class' => $this->class,
]);
}
// In the Blade component
<button type="{{ $type }}">
<h2>
Including Subviews
</h2>
<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></p>
<h2>
Blade Directives
</h2>
<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>
<pre class="brush:php;toolbar:false"><form action="/submit" method="POST">
@csrf
@method('PUT')
<button type="submit">Submit</button>
</form>
高度な使い方
Blade 構文を含む生の HTML または JavaScript を含める必要がありますか? @verbatim ディレクティブを使用して、Blade による解析の試行を停止します:
// In a service provider
Blade::directive('datetime', function ($expression) {
return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
});
// Usage in Blade
@datetime($dateVariable)
API を使用しますか? Blade を使用すると、テンプレート内で JSON データを直接レンダリングすることが簡単になります:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
Livewire を使用している場合、Blade は Livewire とシームレスに連携します。 JavaScript をあまり書かなくても、Blade コンポーネントを Livewire コンポーネントと併用して、動的でインタラクティブな UI を実現できます。
@once ディレクティブは、コードのブロックが 1 回だけ実行されるようにします。 Blade を使用すると、渡したデータに基づいて適応する動的コンポーネントを作成できます。これは、柔軟で再利用可能な UI 部分に最適です:
@forelse ($items as $item)
<p>{{ $item }}</p>
@empty
<p>No items found.</p>
@endforelse
@error ディレクティブを使用すると、特定のフィールドのエラー メッセージを簡単に表示できます。
@isset($variable)
<p>{{ $variable }}</p>
@endisset
最初に Blade を使い始めたとき、どれだけのオプションがあるのか少し戸惑いましたが、すぐにまったくの世界が開かれました。今では、この多機能な機能なしでコーディングすることは考えられません。この記事が、この素晴らしいテンプレート エンジンへの道を見つけるのに役立つことを願っています。
以上がBlade を最大限に活用する: Laravel のテンプレート エンジンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。