Laravel 8.x Bladeテンプレート

イントロダクションIntroduction

Bladeは、Laravelに含まれているシンプルでありながら強力なテンプレートエンジンです。一部のPHPテンプレートエンジンとは異なり、BladeはテンプレートでプレーンなPHPコードの使用を制限しません。実際、すべてのBladeテンプレートはプレーンなPHPコードにコンパイルされ、変更されるまでキャッシュされます。つまり、Bladeはアプリケーションに実質的にオーバーヘッドをかけません。Bladeテンプレートファイルは.blade.phpファイル拡張子を使用し、通常はresources/viewsディレクトリに保存します。Blade is the simple, yet powerful templating engine that is included with Laravel. Unlike some PHP templating engines, Blade does not restrict you from using plain PHP code in your templates. In fact, all Blade templates are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. Blade template files use the .blade.php file extension and are typically stored in the resources/views directory.

Bladeビューは、グローバルなviewヘルパを使用してルートまたはコントローラから返します。もちろん、viewsのドキュメントに記載されているように、データをviewヘルパの２番目の引数を使用してBladeビューに渡せます。Blade views may be returned from routes or controller using the global view helper. Of course, as mentioned in the documentation on views[/docs/{{version}}/views], data may be passed to the Blade view using the view helper's second argument:

Route::get('/', function () {
    return view('greeting', ['name' => 'Finn']);
});

lightbulb">Tip!! Bladeテンプレートを次のレベルに引き上げ、ダイナミックなインターフェイスを簡単に構築したいと思いませんか？Laravel Livewireをチェックしてください。{tip} Want to take your Blade templates to the next level and build dynamic interfaces with ease? Check out Laravel Livewire[https://laravel-livewire.com].

データの表示Displaying Data

変数を中括弧で囲むことにより、Bladeビューに渡すデータを表示できます。たとえば、以下のルートがあるとします。You may display data that is passed to your Blade views by wrapping the variable in curly braces. For example, given the following route:

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

次のように name変数の内容を表示できます。You may display the contents of the name variable like so:

Hello, {{ $name }}.

lightbulb">Tip!! Bladeの{{ }}エコー文は、XSS攻撃を防ぐために、PHPのhtmlspecialchars関数を通して自動的に送信します。{tip} Blade's {{ }} echo statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks.

ビューに渡した変数の内容を表示するに留まりません。PHP関数の結果をエコーすることもできます。実際、Bladeエコーステートメント内に任意のPHPコードを入れることができます。You are not limited to displaying the contents of the variables passed to the view. You may also echo the results of any PHP function. In fact, you can put any PHP code you wish inside of a Blade echo statement:

The current UNIX timestamp is {{ time() }}.

HTMLエンティティエンコーディングHTML Entity Encoding

デフォルトのBlade(およびLaraveleヘルパ)はHTMLエンティティをダブルエンコードします。ダブルエンコーディングを無効にする場合は、AppServiceProviderのbootメソッドからBlade::withoutDoubleEncodingメソッドを呼び出します。By default, Blade (and the Laravel e helper) will double encode HTML entities. If you would like to disable double encoding, call the Blade::withoutDoubleEncoding method from the boot method of your AppServiceProvider:

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * 全アプリケーションサービスの初期起動処理
     *
     * @return void
     */
    public function boot()
    {
        Blade::withoutDoubleEncoding();
    }
}

エスケープしないデータの表示Displaying Unescaped Data

デフォルトのBlade {{ }}文は、XSS攻撃を防ぐために、PHPのhtmlspecialchars関数を通して自動的に送信します。データをエスケープしたくない場合は、次の構文を使用します。By default, Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:

Hello, {!! $name !!}.

Note: note アプリケーションのユーザーによって提供されるコンテンツをエコーするときは十分に注意してください。ユーザーが入力したデータを表示するときはXSS攻撃を防ぐために、通常はエスケープする二重中括弧構文を使用してください。{note} Be very careful when echoing content that is supplied by users of your application. You should typically use the escaped, double curly brace syntax to prevent XSS attacks when displaying user supplied data.

BladeとJavaScriptフレームワークBlade & JavaScript Frameworks

多くのJavaScriptフレームワークでも「中括弧」を使用して、特定の式をブラウザに表示することを示しているため、@記号を使用して式をそのままにしておくように、Bladeレンダリングエンジンへ通知できます。例を確認してください。Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the @ symbol to inform the Blade rendering engine an expression should remain untouched. For example:

<h1>Laravel</h1>

Hello, @{{ name }}.

この例の@記号はBladeが削除します。そして、{{ name }}式はBladeエンジンによって変更されないので、JavaScriptフレームワークでレンダリングできます。In this example, the @ symbol will be removed by Blade; however, {{ name }} expression will remain untouched by the Blade engine, allowing it to be rendered by your JavaScript framework.

@記号は、Bladeディレクティブをエスケープするためにも使用できます。The @ symbol may also be used to escape Blade directives:

{{-- Bladeテンプレート --}}
@@if()

<!-- HTML出力 -->
@if()

JSONのレンダーRendering JSON

JavaScript変数を初期化するために、配列をJSONとしてレンダリングする目的でビューに配列を渡す場合があります。一例を確認してください。Sometimes you may pass an array to your view with the intention of rendering it as JSON in order to initialize a JavaScript variable. For example:

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

自分でjson_encodeを呼び出す代わりに、Illuminate\Support\Js::fromメソッドディレクティブが使えます。fromメソッドは、PHPのjson_encode関数と同じ引数を受け入れますが、取得結果のJSONはHTMLクオートの中へ含められるよう適切にエスケープされていることを保証します。fromメソッドは、与えたオブジェクトや配列を有効なJavaScriptオブジェクトに変換するJSON.parse JavaScript文を文字列として返します。However, instead of manually calling json_encode, you may use the Illuminate\Support\Js::from method directive. The from method accepts the same arguments as PHP's json_encode function; however, it will ensure that the resulting JSON is properly escaped for inclusion within HTML quotes. The from method will return a string JSON.parse JavaScript statement that will convert the given object or array into a valid JavaScript object:

<script>
    var app = {{ Illuminate\Support\Js::from($array) }};
</script>

最新バージョンのLaravelアプリケーション・スケルトンには、Jsファサードが含まれており、Bladeテンプレート内でこの機能に簡単にアクセスできるようになっています。The latest versions of the Laravel application skeleton include a Js facade, which provides convenient access to this functionality within your Blade templates:

<script>
    var app = {{ Js::from($array) }};
</script>

Note: note 既存の変数をJSONとしてレンダーするには、Js::fromメソッドのみ使用してください。Bladeのテンプレートは正規表現に基づいているため、複雑な表現をディレクティブに渡そうとすると、予期せぬ失敗を引き起こす可能性があります。{note} You should only use the Js::from method to render existing variables as JSON. The Blade templating is based on regular expressions and attempts to pass a complex expression to the directive may cause unexpected failures.

@verbatimディレクティブThe @verbatim Directive

テンプレートの大部分でJavaScript変数を表示している場合は、HTMLを@verbatimディレクティブでラップして、各Bladeエコーステートメントの前に@記号を付ける必要がないようにできます。If you are displaying JavaScript variables in a large portion of your template, you may wrap the HTML in the @verbatim directive so that you do not have to prefix each Blade echo statement with an @ symbol:

@verbatim
    <div class="container">
        Hello, {{ name }}.
    </div>
@endverbatim

BladeディレクティブBlade Directives

テンプレートの継承とデータの表示に加えて、Bladeは条件ステートメントやループなど一般的なPHP制御構造への便利なショートカットも提供しています。こうしたショートカットは、PHP制御構造を操作するための非常にクリーンで簡潔な方法を提供する一方で、慣れ親しんだ同等のPHP構文も生かしています。In addition to template inheritance and displaying data, Blade also provides convenient shortcuts for common PHP control structures, such as conditional statements and loops. These shortcuts provide a very clean, terse way of working with PHP control structures while also remaining familiar to their PHP counterparts.

If文If Statements

@if、@elseif、@else、@endifディレクティブを使用してifステートメントを作成できます。これらのディレクティブは、対応するPHPの構文と同じように機能します。You may construct if statements using the @if, @elseif, @else, and @endif directives. These directives function identically to their PHP counterparts:

@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

使いやすいように、Bladeは@unlessディレクティブも提供しています。For convenience, Blade also provides an @unless directive:

@unless (Auth::check())
    You are not signed in.
@endunless

すでに説明した条件付きディレクティブに加えて、@issetおよび@emptyディレクティブをそれぞれのPHP関数の便利なショートカットとして使用できます。In addition to the conditional directives already discussed, the @isset and @empty directives may be used as convenient shortcuts for their respective PHP functions:

@isset($records)
    // $recordsが定義されており、nullでもない
@endisset

@empty($records)
    // $recordsは空
@endempty

認証ディレクティブAuthentication Directives

@authおよび@guestディレクティブを使用すると、現在のユーザーが認証済みであるか、ゲストであるかを簡潔に判断できます。The @auth and @guest directives may be used to quickly determine if the current user is authenticated[/docs/{{version}}/authentication] or is a guest:

@auth
    // ユーザーは認証済み
@endauth

@guest
    // ユーザーは認証されていない
@endguest

必要に応じて、@authおよび@guestディレクティブを使用するときにチェックする必要がある認証ガードを指定できます。If needed, you may specify the authentication guard that should be checked when using the @auth and @guest directives:

@auth('admin')
    // ユーザーは認証済み
@endauth

@guest('admin')
    // ユーザーは認証されていない
@endguest

環境ディレクティブEnvironment Directives

@productionディレクティブを使用して、アプリケーションが本番環境で実行されているかを確認できます。You may check if the application is running in the production environment using the @production directive:

@production
    // 本番環境だけのコンテンツ
@endproduction

または、@envディレクティブを使用して、アプリケーションが特定の環境で実行されているかどうかを判断できます。Or, you may determine if the application is running in a specific environment using the @env directive:

@env('staging')
    // アプリケーションは"staging"環境で動いている
@endenv

@env(['staging', 'production'])
    // アプリケーションは"staging"か"production"環境で動いている
@endenv

セクションディレクティブSection Directives

@hasSectionディレクティブを使用して、テンプレート継承セクションにコンテンツがあるかどうかを判断できます。You may determine if a template inheritance section has content using the @hasSection directive:

@hasSection('navigation')
    <div class="pull-right">
        @yield('navigation')
    </div>

    <div class="clearfix"></div>
@endif

sectionMissingディレクティブを使用して、セクションにコンテンツがないかどうかを判断できます。You may use the sectionMissing directive to determine if a section does not have content:

@sectionMissing('navigation')
    <div class="pull-right">
        @include('default-navigation')
    </div>
@endif

Switch文Switch Statements

Switchステートメントは、@switch、@case、@break、@default、@endswitchディレクティブを使用して作成できます。Switch statements can be constructed using the @switch, @case, @break, @default and @endswitch directives:

@switch($i)
    @case(1)
        最初のケース
        @break

    @case(2)
        ２番目のケース
        @break

    @default
        デフォルトケース
@endswitch

繰り返しLoops

条件文に加えて、BladeはPHPのループ構造を操作するための簡単なディレクティブを提供します。繰り返しますが、これらの各ディレクティブは、対応するPHPと同じように機能します。In addition to conditional statements, Blade provides simple directives for working with PHP's loop structures. Again, each of these directives functions identically to their PHP counterparts:

@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>ユーザーが存在しない</p>
@endforelse

@while (true)
    <p>無限にループ中。</p>
@endwhile

lightbulb">Tip!! foreachループの反復処理中に、ループ変数 を使い、ループの最初の反復処理や最後の反復処理というような、反復に関する役立つ情報を取得可能です。{tip} While iterating through a foreach loop, you may use the loop variable[#the-loop-variable] to gain valuable information about the loop, such as whether you are in the first or last iteration through the loop.

ループを使用する場合は、@continueおよび@breakディレクティブを使用して、ループを終了するか、現在の反復をスキップすることもできます。When using loops you may also end the loop or skip the current iteration using the @continue and @break directives:

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif

    <li>{{ $user->name }}</li>

    @if ($user->number == 5)
        @break
    @endif
@endforeach

ディレクティブ宣言に継続条件または中断条件を含めることもできます。You may also include the continuation or break condition within the directive declaration:

@foreach ($users as $user)
    @continue($user->type == 1)

    <li>{{ $user->name }}</li>

    @break($user->number == 5)
@endforeach

ループ変数The Loop Variable

foreachループの反復処理中、ループの内部では$loop変数を利用できます。この変数により、現在のループのインデックスや、ループの最初の反復なのか最後の反復なのか、といった便利な情報にアクセスすることができます。While iterating through a foreach loop, a $loop variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop:

@foreach ($users as $user)
    @if ($loop->first)
        ここは最初の繰り返し
    @endif

    @if ($loop->last)
        ここは最後の繰り返し
    @endif

    <p>This is user {{ $user->id }}</p>
@endforeach

ネストしたループ内にいる場合は、parentプロパティを介して親ループの$loop変数にアクセスできます。If you are in a nested loop, you may access the parent loop's $loop variable via the parent property:

@foreach ($users as $user)
    @foreach ($user->posts as $post)
        @if ($loop->parent->first)
            ここは親ループの最初の繰り返し処理
        @endif
    @endforeach
@endforeach

$loop変数は、他にもいろいろと便利なプロパティを持っています。The $loop variable also contains a variety of other useful properties:

プロパティProperty	説明Description
$loop->index$loop->index	現在の反復のインデックス（初期値０）The index of the current loop iteration (starts at 0).
$loop->iteration$loop->iteration	現在の反復数（初期値１）。The current loop iteration (starts at 1).
$loop->remaining$loop->remaining	反復の残数。The iterations remaining in the loop.
$loop->count$loop->count	反復している配列の総アイテム数The total number of items in the array being iterated.
$loop->first$loop->first	ループの最初の繰り返しか判定Whether this is the first iteration through the loop.
$loop->last$loop->last	ループの最後の繰り返しか判定Whether this is the last iteration through the loop.
$loop->even$loop->even	今回が偶数回目の繰り返しか判定Whether this is an even iteration through the loop.
$loop->odd$loop->odd	今回が奇数回目の繰り返しか判定Whether this is an odd iteration through the loop.
$loop->depth$loop->depth	現在のループのネストレベルThe nesting level of the current loop.
$loop->parent$loop->parent	ループがネストしている場合、親のループ変数When in a nested loop, the parent's loop variable.

条件クラスConditional Classes

@classディレクティブは、CSSのクラス文字列を条件付きでコンパイルします。このディレクティブは、クラスの配列を受け取ります。配列のキーには、追加したいクラスが入り、値は論理値です。配列のキーが数字の場合は、レンダリングするクラスリストへ常に取り込みます。The @class directive conditionally compiles a CSS class string. The directive accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:

@php
    $isActive = false;
    $hasError = true;
@endphp

<span @class([
    'p-4',
    'font-bold' => $isActive,
    'text-gray-500' => ! $isActive,
    'bg-red' => $hasError,
])></span>

<span class="p-4 text-gray-500 bg-red"></span>

サブビューの読み込みIncluding Subviews

lightbulb">Tip!! @includeディレクティブは自由に使用できますが、Bladeコンポーネントは同様の機能を提供しつつ、データや属性のバインドなど@includeディレクティブに比べていくつかの利点があります。{tip} While you're free to use the @include directive, Blade components[#components] provide similar functionality and offer several benefits over the @include directive such as data and attribute binding.

Bladeの@includeディレクティブを使用すると、別のビュー内からBladeビューを読み込めます。親ビューで使用できるすべての変数は、読み込むビューで使用できます。Blade's @include directive allows you to include a Blade view from within another view. All variables that are available to the parent view will be made available to the included view:

<div>
    @include('shared.errors')

    <form>
        <!-- フォームのコンテンツ -->
    </form>
</div>

読み込むビューは親ビューで使用可能なすべてのデータを継承しますが、読み込むビューで使用可能にする必要がある追加データの配列を渡すこともできます。Even though the included view will inherit all data available in the parent view, you may also pass an array of additional data that should be made available to the included view:

@include('view.name', ['status' => 'complete'])

存在しないビューを@includeしようとすると、Laravelはエラーを投げます。存在する場合と存在しない場合があるビューを読み込む場合は、@includeIfディレクティブを使用する必要があります。If you attempt to @include a view which does not exist, Laravel will throw an error. If you would like to include a view that may or may not be present, you should use the @includeIf directive:

@includeIf('view.name', ['status' => 'complete'])

指定する論理式がtrueかfalseと評価された場合に、ビューを@includeしたい場合は、@includeWhenおよび@includeUnlessディレクティブを使用できます。If you would like to @include a view if a given boolean expression evaluates to true or false, you may use the @includeWhen and @includeUnless directives:

@includeWhen($boolean, 'view.name', ['status' => 'complete'])

@includeUnless($boolean, 'view.name', ['status' => 'complete'])

指定するビュー配列中、存在する最初のビューを含めるには、includeFirstディレクティブを使用します。To include the first view that exists from a given array of views, you may use the includeFirst directive:

@includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])

Note: note Bladeビューで__DIR__と__FILE__定数は使用しないでください。これらは、キャッシュされコンパイルされたビューの場所を参照するためです。{note} You should avoid using the __DIR__ and __FILE__ constants in your Blade views, since they will refer to the location of the cached, compiled view.

コレクションのビューのレンダーRendering Views For Collections

ループと読み込みをBladeの@eachディレクティブで1行に組み合わせられます。You may combine loops and includes into one line with Blade's @each directive:

@each('view.name', $jobs, 'job')

@eachディレクティブの最初の引数は、配列またはコレクション内の各要素に対してレンダーするビューです。２番目の引数は、反復する配列またはコレクションであり、３番目の引数は、ビュー内で現在の反復要素に割り当てる変数名です。したがって、たとえばjobs配列を反復処理する場合、通常はビュー内でjob変数として各ジョブにアクセスしたいと思います。現在の反復の配列キーは、ビュー内でkey変数として使用できます。The @each directive's first argument is the view to render for each element in the array or collection. The second argument is the array or collection you wish to iterate over, while the third argument is the variable name that will be assigned to the current iteration within the view. So, for example, if you are iterating over an array of jobs, typically you will want to access each job as a job variable within the view. The array key for the current iteration will be available as the key variable within the view.

@eachディレクティブに４番目の引数を渡すこともできます。この引数は、指定された配列が空の場合にレンダーするビューを指定します。You may also pass a fourth argument to the @each directive. This argument determines the view that will be rendered if the given array is empty.

@each('view.name', $jobs, 'job', 'view.empty')

Note: note @eachを使いレンダーするビューは、親ビューから変数を継承しません。子ビューでそうした変数が必要な場合は、代わりに@foreachと@includeディレクティブを使用する必要があります。{note} Views rendered via @each do not inherit the variables from the parent view. If the child view requires these variables, you should use the @foreach and @include directives instead.

@onceディレクティブThe @once Directive

@onceディレクティブを使用すると、レンダリングサイクルごとに１回だけ評価されるテンプレートの部分を定義できます。これは、stacksを使用してJavaScriptの特定の部分をページのヘッダへ入れ込むのに役立つでしょう。たとえば、ループ内で特定のコンポーネントをレンダーする場合に、コンポーネントが最初にレンダーされるときにのみ、あるJavaScriptをヘッダに入れ込みたい場合があるとしましょう。The @once directive allows you to define a portion of the template that will only be evaluated once per rendering cycle. This may be useful for pushing a given piece of JavaScript into the page's header using stacks[#stacks]. For example, if you are rendering a given component[#components] within a loop, you may wish to only push the JavaScript to the header the first time the component is rendered:

@once
    @push('scripts')
        <script>
            // カスタムJavaScript…
        </script>
    @endpush
@endonce

生PHPRaw PHP

状況によっては、PHPコードをビューに埋め込めると便利です。Blade@phpディレクティブを使用して、テンプレート内でプレーンPHPのブロックを定義し、実行できます。In some situations, it's useful to embed PHP code into your views. You can use the Blade @php directive to execute a block of plain PHP within your template:

@php
    $counter = 1;
@endphp

コメントComments

また、Bladeでは、ビューにコメントを定義することができます。ただし、HTMLのコメントとは異なり、Bladeのコメントは、アプリケーションが返すHTMLには含まれません。Blade also allows you to define comments in your views. However, unlike HTML comments, Blade comments are not included in the HTML returned by your application:

{{-- このコメントはレンダー結果のHTMLに存在しません --}}

コンポーネントComponents

コンポーネントとスロットは、セクション、レイアウト、インクルードと同様の利便性を提供します。ただし、コンポーネントとスロットのメンタルモデルが理解しやすいと感じる人もいるでしょう。コンポーネントを作成するには、クラスベースのコンポーネントと匿名コンポーネントの2つのアプローチがあります。Components and slots provide similar benefits to sections, layouts, and includes; however, some may find the mental model of components and slots easier to understand. There are two approaches to writing components: class based components and anonymous components.

クラスベースのコンポーネントを作成するには、make:component Artisanコマンドを使用できます。コンポーネントの使用方法を説明するために、単純な「アラート（Alert）」コンポーネントを作成します。make:componentコマンドは、コンポーネントをApp\View\Componentsディレクトリに配置します。To create a class based component, you may use the make:component Artisan command. To illustrate how to use components, we will create a simple Alert component. The make:component command will place the component in the App\View\Components directory:

php artisan make:component Alert

make:componentコマンドは、コンポーネントのビューテンプレートも作成します。ビューはresources/views/componentsディレクトリに配置されます。独自のアプリケーション用のコンポーネントを作成する場合、コンポーネントはapp/View/Componentsディレクトリとresources/views/componentsディレクトリ内で自動的に検出するため、通常それ以上のコンポーネント登録は必要ありません。The make:component command will also create a view template for the component. The view will be placed in the resources/views/components directory. When writing components for your own application, components are automatically discovered within the app/View/Components directory and resources/views/components directory, so no further component registration is typically required.

サブディレクトリ内にコンポーネントを作成することもできます。You may also create components within subdirectories:

php artisan make:component Forms/Input

上記のコマンドは、App\View\Components\FormsディレクトリにInputコンポーネントを作成し、ビューはresources/views/components/formsディレクトリに配置します。The command above will create an Input component in the App\View\Components\Forms directory and the view will be placed in the resources/views/components/forms directory.

パッケージコンポーネントの手動登録Manually Registering Package Components

独自のアプリケーション用コンポーネントを作成する場合、コンポーネントをapp/View/Componentsディレクトリとresources/views/componentsディレクトリ内で自動的に検出します。When writing components for your own application, components are automatically discovered within the app/View/Components directory and resources/views/components directory.

ただし、Bladeコンポーネントを利用するパッケージを構築する場合は、コンポーネントクラスとそのHTMLタグエイリアスを手動で登録する必要があります。通常、コンポーネントはパッケージのサービスプロバイダのbootメソッドに登録する必要があります。However, if you are building a package that utilizes Blade components, you will need to manually register your component class and its HTML tag alias. You should typically register your components in the boot method of your package's service provider:

use Illuminate\Support\Facades\Blade;

/**
 * パッケージの全サービスの初期起動処理
 */
public function boot()
{
    Blade::component('package-alert', Alert::class);
}

コンポーネントを登録すると、タグエイリアスを使用してレンダリングできます。Once your component has been registered, it may be rendered using its tag alias:

<x-package-alert/>

または、規約により、componentNamespaceメソッドを使用してコンポーネントクラスを自動ロードすることもできます。たとえば、Nightshadeパッケージには、Package\Views\Components名前空間内にあるCalendarとColorPickerコンポーネントが含まれているとしましょう。Alternatively, you may use the componentNamespace method to autoload component classes by convention. For example, a Nightshade package might have Calendar and ColorPicker components that reside within the Package\Views\Components namespace:

use Illuminate\Support\Facades\Blade;

/**
 * パッケージの全サービスの初期起動処理
 *
 * @return void
 */
public function boot()
{
    Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}

これにより、package-name::構文を使用して、ベンダーの名前空間でパッケージコンポーネントが使用できるようになります。This will allow the usage of package components by their vendor namespace using the package-name:: syntax:

<x-nightshade::calendar />
<x-nightshade::color-picker />

Bladeは、コンポーネント名のパスカルケースを使い、コンポーネントにリンクしているクラスを自動的に検出します。サブディレクトリもサポートしており、「ドット」表記を使用します。Blade will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.

コンポーネントのレンダーRendering Components

コンポーネントを表示するために、Bladeテンプレート１つの中でBladeコンポーネントタグを使用できます。Bladeコンポーネントタグは、文字列x-で始まり、その後にコンポーネントクラスのケバブケース名を続けます。To display a component, you may use a Blade component tag within one of your Blade templates. Blade component tags start with the string x- followed by the kebab case name of the component class:

<x-alert/>

<x-user-profile/>

コンポーネントクラスがApp\View\Componentsディレクトリ内のより深い場所にネストしている場合は、.文字を使用してディレクトリのネストを表せます。たとえば、コンポーネントがApp\View\Components\Inputs\Button.phpにあるとしたら、以下のようにレンダリングできます。If the component class is nested deeper within the App\View\Components directory, you may use the . character to indicate directory nesting. For example, if we assume a component is located at App\View\Components\Inputs\Button.php, we may render it like so:

<x-inputs.button/>

コンポーネントへのデータ渡しPassing Data To Components

HTML属性を使用してBladeコンポーネントへデータを渡せます。ハードコードするプリミティブ値は、単純なHTML属性文字列を使用してコンポーネントに渡すことができます。PHPの式と変数は、接頭辞として:文字を使用する属性を介してコンポーネントに渡す必要があります。You may pass data to Blade components using HTML attributes. Hard-coded, primitive values may be passed to the component using simple HTML attribute strings. PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix:

<x-alert type="error" :message="$message"/>

コンポーネントの必要なデータは、そのクラスコンストラクターで定義する必要があります。コンポーネントのすべてのパブリックプロパティは、コンポーネントのビューで自動的に使用可能になります。コンポーネントのrenderメソッドからビューにデータを渡す必要はありません。You should define the component's required data in its class constructor. All public properties on a component will automatically be made available to the component's view. It is not necessary to pass the data to the view from the component's render method:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * 警告タイプ
     *
     * @var string
     */
    public $type;

    /**
     * 警告メッセージ
     *
     * @var string
     */
    public $message;

    /**
     * コンポーネントインスタンスを作成
     *
     * @param  string  $type
     * @param  string  $message
     * @return void
     */
    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * コンポーネントを表すビュー／コンテンツを取得
     *
     * @return \Illuminate\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

コンポーネントをレンダーするときに、変数を名前でエコーすることにより、コンポーネントのパブリック変数の内容を表示できます。When your component is rendered, you may display the contents of your component's public variables by echoing the variables by name:

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

ケース形式Casing

コンポーネントコンストラクタの引数はキャメルケース（camelCase）を使用して指定する必要がありますが、HTML属性で引数名を参照する場合はケバブケース（kebab-case）を使用する必要があります。たとえば、次のようにコンポーネントコンストラクタに渡します。Component constructor arguments should be specified using camelCase, while kebab-case should be used when referencing the argument names in your HTML attributes. For example, given the following component constructor:

/**
 * コンポーネントインスタンスの作成
 *
 * @param  string  $alertType
 * @return void
 */
public function __construct($alertType)
{
    $this->alertType = $alertType;
}

$alertType引数は、次のようにコンポーネントに提供できます。The $alertType argument may be provided to the component like so:

<x-alert alert-type="danger" />

属性レンダーのエスケープEscaping Attribute Rendering

alpine.jsなどのJavaScriptフレームワークもコロンプレフィックスで属性を指定するため、属性がPHP式ではないことをBladeへ知らせるために二重のコロン(::)プレフィックスを使用してください。たとえば、以下のコンポーネントが存在しているとしましょう。Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you may use a double colon (::) prefix to inform Blade that the attribute is not a PHP expression. For example, given the following component:

<x-button ::class="{ danger: isDeleting }">
    Submit
</x-button>

Bladeにより、以下のHTMLとしてレンダーされます。The following HTML will be rendered by Blade:

<button :class="{ danger: isDeleting }">
    Submit
</button>

コンポーネントメソッドComponent Methods

コンポーネントテンプレートで使用できるパブリック変数に加えて、コンポーネントの任意のパブリックメソッドを呼び出すこともできます。たとえば、isSelectedメソッドを持つコンポーネントを想像してみてください。In addition to public variables being available to your component template, any public methods on the component may be invoked. For example, imagine a component that has an isSelected method:

/**
 * 指定したオプションが現在選択されているオプションであるか判別
 *
 * @param  string  $option
 * @return bool
 */
public function isSelected($option)
{
    return $option === $this->selected;
}

メソッドの名前に一致する変数を呼び出すことにより、コンポーネントテンプレートでこのメソッドを実行できます。You may execute this method from your component template by invoking the variable matching the name of the method:

<option {{ $isSelected($value) ? 'selected="selected"' : '' }} value="{{ $value }}">
    {{ $label }}
</option>

コンポーネントクラス内の属性とスロットへのアクセスAccessing Attributes & Slots Within Component Classes

Bladeコンポーネントを使用すると、クラスのrenderメソッド内のコンポーネント名、属性、およびスロットにアクセスすることもできます。ただし、このデータにアクセスするには、コンポーネントのrenderメソッドからクロージャを返す必要があります。クロージャは、唯一の引数として$data配列を取ります。この配列はコンポーネントに関する情報を提供するいくつかの要素が含んでいます。Blade components also allow you to access the component name, attributes, and slot inside the class's render method. However, in order to access this data, you should return a closure from your component's render method. The closure will receive a $data array as its only argument. This array will contain several elements that provide information about the component:

/**
 * コンポーネントを表すビュー／コンテンツを取得
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return function (array $data) {
        // $data['componentName'];
        // $data['attributes'];
        // $data['slot'];

        return '<div>Components content</div>';
    };
}

componentNameは、HTMLタグでx-プレフィックスの後に使用されている名前と同じです。したがって、<x-alert/>のcomponentNameはalertになります。attributes要素には、HTMLタグに存在していたすべての属性が含まれます。slot要素は、コンポーネントのスロットの内容を含むIlluminate\Support\HtmlStringインスタンスです。The componentName is equal to the name used in the HTML tag after the x- prefix. So <x-alert />'s componentName will be alert. The attributes element will contain all of the attributes that were present on the HTML tag. The slot element is an Illuminate\Support\HtmlString instance with the contents of the component's slot.

クロージャは文字列を返す必要があります。返された文字列が既存のビューに対応している場合、そのビューがレンダリングされます。それ以外の場合、返される文字列はインラインBladeビューとして評価されます。The closure should return a string. If the returned string corresponds to an existing view, that view will be rendered; otherwise, the returned string will be evaluated as an inline Blade view.

追加の依存関係Additional Dependencies

コンポーネントがLaravelのサービスコンテナからの依存を必要とする場合、コンポーネントのデータ属性の前にそれらをリストすると、コンテナによって自動的に注入されます。If your component requires dependencies from Laravel's service container[/docs/{{version}}/container], you may list them before any of the component's data attributes and they will automatically be injected by the container:

use App\Services\AlertCreator

/**
 * コンポーネントインスタンスを作成
 *
 * @param  \App\Services\AlertCreator  $creator
 * @param  string  $type
 * @param  string  $message
 * @return void
 */
public function __construct(AlertCreator $creator, $type, $message)
{
    $this->creator = $creator;
    $this->type = $type;
    $this->message = $message;
}

非表示属性/メソッドHiding Attributes / Methods

パブリックメソッドまたはプロパティがコンポーネントテンプレートへ変数として公開されないようにする場合は、コンポーネントの$except配列プロパティへ追加してください。If you would like to prevent some public methods or properties from being exposed as variables to your component template, you may add them to an $except array property on your component:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * alertタイプ
     *
     * @var string
     */
    public $type;

    /**
     * コンポーネントテンプレートに公開してはいけないプロパティ／メソッド。
     *
     * @var array
     */
    protected $except = ['type'];
}

コンポーネント属性Component Attributes

データ属性をコンポーネントへ渡す方法は、すでに説明しました。ただ、コンポーネントが機能するためには、不必要なclassなどの追加のHTML属性データを指定する必要が起きることもあります。通常これらの追加の属性は、コンポーネントテンプレートのルート要素に渡します。たとえば、次のようにalertコンポーネントをレンダリングしたいとします。We've already examined how to pass data attributes to a component; however, sometimes you may need to specify additional HTML attributes, such as class, that are not part of the data required for a component to function. Typically, you want to pass these additional attributes down to the root element of the component template. For example, imagine we want to render an alert component like so:

<x-alert type="error" :message="$message" class="mt-4"/>

コンポーネントのコンストラクタの一部ではないすべての属性は、コンポーネントの「属性バッグ」に自動的に追加されます。この属性バッグは、$attributes変数を通じてコンポーネントで自動的に使用可能になります。この変数をエコーすることにより、すべての属性をコンポーネント内でレンダリングできます。All of the attributes that are not part of the component's constructor will automatically be added to the component's "attribute bag". This attribute bag is automatically made available to the component via the $attributes variable. All of the attributes may be rendered within the component by echoing this variable:

<div {{ $attributes }}>
    <!-- コンポーネントの内容 -->
</div>

Note: note コンポーネントタグ内での@envなどのディレクティブの使用は、現時点でサポートしていません。たとえば、<x-alert :live="@env('production')"/>はコンパイルしません。{note} Using directives such as @env within component tags is not supported at this time. For example, <x-alert :live="@env('production')"/> will not be compiled.

デフォルト/マージした属性Default / Merged Attributes

属性のデフォルト値を指定したり、コンポーネントの属性の一部へ追加の値をマージしたりする必要のある場合があります。これを実現するには、属性バッグのmergeメソッドを使用できます。このメソッドは、コンポーネントに常に適用する必要のあるデフォルトのCSSクラスのセットを定義する場合、特に便利です。Sometimes you may need to specify default values for attributes or merge additional values into some of the component's attributes. To accomplish this, you may use the attribute bag's merge method. This method is particularly useful for defining a set of default CSS classes that should always be applied to a component:

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

このコンポーネントが以下のように使用されると仮定しましょう。If we assume this component is utilized like so:

<x-alert type="error" :message="$message" class="mb-4"/>

コンポーネントが最終的にレンダーするHTMLは、以下のようになります。The final, rendered HTML of the component will appear like the following:

<div class="alert alert-error mb-4">
    <!-- $message変数の中身 -->
</div>

条件付きマージクラスConditionally Merge Classes

特定の条件がtrueである場合に、クラスをマージしたい場合があります。これはclassメソッドで実行でき、クラスの配列を引数に取ります。配列のキーには追加したいクラスを含み、値に論理式を指定します。配列要素に数字キーがある場合は、レンダーするクラスリストへ常に含まれます。Sometimes you may wish to merge classes if a given condition is true. You can accomplish this via the class method, which accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:

<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
    {{ $message }}
</div>

他の属性をコンポーネントにマージする必要がある場合は、mergeメソッドをclassメソッドへチェーンできます。If you need to merge other attributes onto your component, you can chain the merge method onto the class method:

<button {{ $attributes->class(['p-4'])->merge(['type' => 'button']) }}>
    {{ $slot }}
</button>

lightbulb">Tip!! マージした属性を受け取るべきではない他のHTML要素にクラスを条件付きでコンパイルする必要がある場合は、@classディレクティブを使用できます。{tip} If you need to conditionally compile classes on other HTML elements that shouldn't receive merged attributes, you can use the @class directive[#conditional-classes].

非クラス属性のマージNon-Class Attribute Merging

class属性ではない属性をマージする場合、mergeメソッドへ指定する値は属性の「デフォルト」値と見なします。ただし、class属性とは異なり、こうした属性は挿入した属性値とマージしません。代わりに上書きします。たとえば、buttonコンポーネントの実装は次のようになるでしょう。When merging attributes that are not class attributes, the values provided to the merge method will be considered the "default" values of the attribute. However, unlike the class attribute, these attributes will not be merged with injected attribute values. Instead, they will be overwritten. For example, a button component's implementation may look like the following:

<button {{ $attributes->merge(['type' => 'button']) }}>
    {{ $slot }}
</button>

カスタムtypeを指定してボタンコンポーネントをレンダーすると、このコンポーネントを使用するときにそれが指定されます。タイプが指定されない場合、buttonタイプを使用します。To render the button component with a custom type, it may be specified when consuming the component. If no type is specified, the button type will be used:

<x-button type="submit">
    Submit
</x-button>

この例でレンダリングされる、buttonコンポーネントのHTMLは以下のようになります。The rendered HTML of the button component in this example would be:

<button type="submit">
    Submit
</button>

class以外の属性にデフォルト値と挿入する値を結合させたい場合は、prependsメソッドを使用します。この例では、data-controller属性は常にprofile-controllerで始まり、追加で挿入するdata-controller値はデフォルト値の後に配置されます。If you would like an attribute other than class to have its default value and injected values joined together, you may use the prepends method. In this example, the data-controller attribute will always begin with profile-controller and any additional injected data-controller values will be placed after this default value:

<div {{ $attributes->merge(['data-controller' => $attributes->prepends('profile-controller')]) }}>
    {{ $slot }}
</div>

属性の取得とフィルタリングRetrieving & Filtering Attributes

filterメソッドを使用して属性をフィルタリングできます。このメソッドは、属性を属性バッグへ保持する場合にtrueを返す必要があるクロージャを引数に取ります。You may filter attributes using the filter method. This method accepts a closure which should return true if you wish to retain the attribute in the attribute bag:

{{ $attributes->filter(fn ($value, $key) => $key == 'foo') }}

キーが特定の文字列で始まるすべての属性を取得するために、whereStartsWithメソッドを使用できます。For convenience, you may use the whereStartsWith method to retrieve all attributes whose keys begin with a given string:

{{ $attributes->whereStartsWith('wire:model') }}

逆に、whereDoesntStartWithメソッドは、指定する文字列で始まるすべての属性を除外するために使用します。Conversely, the whereDoesntStartWith method may be used to exclude all attributes whose keys begin with a given string:

{{ $attributes->whereDoesntStartWith('wire:model') }}

firstメソッドを使用して、特定の属性バッグの最初の属性をレンダーできます。Using the first method, you may render the first attribute in a given attribute bag:

{{ $attributes->whereStartsWith('wire:model')->first() }}

属性がコンポーネントに存在するか確認する場合は、hasメソッドを使用できます。このメソッドは、属性名をその唯一の引数に取り、属性が存在していることを示す論理値を返します。If you would like to check if an attribute is present on the component, you may use the has method. This method accepts the attribute name as its only argument and returns a boolean indicating whether or not the attribute is present:

@if ($attributes->has('class'))
    <div>Class attribute is present</div>
@endif

getメソッドを使用して特定の属性の値を取得できます。You may retrieve a specific attribute's value using the get method:

{{ $attributes->get('class') }}

予約語Reserved Keywords

コンポーネントをレンダーするBladeの内部使用のため、いくつかのキーワードを予約しています。以下のキーワードは、コンポーネント内のパブリックプロパティまたはメソッド名として定できません。By default, some keywords are reserved for Blade's internal use in order to render components. The following keywords cannot be defined as public properties or method names within your components:

スロットSlots

多くの場合、「スロット」を利用して追加のコンテンツをコンポーネントに渡す必要があることでしょう。コンポーネントスロットは、$slot変数をエコーしレンダーします。この概念を学習するために、alertコンポーネントに次のマークアップがあると過程してみましょう。You will often need to pass additional content to your component via "slots". Component slots are rendered by echoing the $slot variable. To explore this concept, let's imagine that an alert component has the following markup:

<!-- /resources/views/components/alert.blade.php -->

<div class="alert alert-danger">
    {{ $slot }}
</div>

コンポーネントにコンテンツを挿入することにより、そのコンテンツをslotに渡せます。We may pass content to the slot by injecting content into the component:

<x-alert>
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

コンポーネント内の異なる場所へ、複数の異なるスロットをレンダーする必要のある場合があります。「タイトル（"title"）」スロットへ挿入できるようにするため、アラートコンポーネントを変更してみましょう。Sometimes a component may need to render multiple different slots in different locations within the component. Let's modify our alert component to allow for the injection of a "title" slot:

<!-- /resources/views/components/alert.blade.php -->

<span class="alert-title">{{ $title }}</span>

<div class="alert alert-danger">
    {{ $slot }}
</div>

x-slotタグを使用して、名前付きスロットのコンテンツを定義できます。明示的にx-slotタグ内にないコンテンツは、$slot変数のコンポーネントに渡されます。You may define the content of the named slot using the x-slot tag. Any content not within an explicit x-slot tag will be passed to the component in the $slot variable:

<x-alert>
    <x-slot name="title">
        Server Error
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

スコープ付きスロットScoped Slots

VueのようなJavaScriptフレームワークを使用している方は「スコープ付きスロット」に慣れていると思います。これは、スロットの中でコンポーネントのデータやメソッドへアクセスできる機構です。コンポーネントにパブリックメソッドまたはプロパティを定義し、$component変数を使いスロット内のコンポーネントにアクセスすることで、Laravelと同様の動作を実現できます。この例では、x-alertコンポーネントのコンポーネントクラスにパブリックformatAlertメソッドが定義されていると想定しています。If you have used a JavaScript framework such as Vue, you may be familiar with "scoped slots", which allow you to access data or methods from the component within your slot. You may achieve similar behavior in Laravel by defining public methods or properties on your component and accessing the component within your slot via the $component variable. In this example, we will assume that the x-alert component has a public formatAlert method defined on its component class:

<x-alert>
    <x-slot name="title">
        {{ $component->formatAlert('Server Error') }}
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

スロット属性Slot Attributes

ブレードコンポーネントと同様に、CSSクラス名などのスロットに追加の属性を割り当てることができます。Like Blade components, you may assign additional attributes[#component-attributes] to slots such as CSS class names:

<x-card class="shadow-sm">
    <x-slot name="heading" class="font-bold">
        Heading
    </x-slot>

    Content

    <x-slot name="footer" class="text-sm">
        Footer
    </x-slot>
</x-card>

スロット属性を操作するため、スロットの変数のattributesプロパティへアクセスできます。属性を操作する方法の詳細は、コンポーネント属性のドキュメントを参照してください。To interact with slot attributes, you may access the attributes property of the slot's variable. For more information on how to interact with attributes, please consult the documentation on component attributes[#component-attributes]:

@props([
    'heading',
    'footer',
])

<div {{ $attributes->class(['border']) }}>
    <h1 {{ $heading->attributes->class(['text-lg']) }}>
        {{ $heading }}
    </h1>

    {{ $slot }}

    <footer {{ $footer->attributes->class(['text-gray-700']) }}>
        {{ $footer }}
    </footer>
</div>

インラインコンポーネントビューInline Component Views

非常に小さいコンポーネントの場合、コンポーネントクラスとビューテンプレートの両方を管理するのは面倒だと感じるかもしれません。そのため、コンポーネントのマークアップをrenderメソッドから直接返すことができます。For very small components, it may feel cumbersome to manage both the component class and the component's view template. For this reason, you may return the component's markup directly from the render method:

/**
 * コンポーネントを表すビュー／コンテンツの取得
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}
        </div>
    blade;
}

インラインビューコンポーネントの生成Generating Inline View Components

インラインビューをレンダーするコンポーネントを作成するには、make:componentコマンドを実行するときにinlineオプションを使用します。To create a component that renders an inline view, you may use the inline option when executing the make:component command:

php artisan make:component Alert --inline

匿名コンポーネントAnonymous Components

インラインコンポーネントと同様に、匿名コンポーネントは、単一のファイルを介してコンポーネントを管理するためのメカニズムを提供します。ただし、匿名コンポーネントは単一のビューファイルを利用し、関連するクラスはありません。匿名コンポーネントを定義するには、resources/views/componentsディレクトリ内にBladeテンプレートを配置するだけで済みます。たとえば、resources/views/components/alert.blade.phpでコンポーネントを定義すると、以下のようにレンダーできます。Similar to inline components, anonymous components provide a mechanism for managing a component via a single file. However, anonymous components utilize a single view file and have no associated class. To define an anonymous component, you only need to place a Blade template within your resources/views/components directory. For example, assuming you have defined a component at resources/views/components/alert.blade.php, you may simply render it like so:

<x-alert/>

.文字を使用して、コンポーネントがcomponentsディレクトリ内のより深い場所にネストしていることを示せます。たとえば、コンポーネントがresources/views/components/input/button.blade.phpで定義されていると仮定すると、次のようにレンダリングできます。You may use the . character to indicate if a component is nested deeper inside the components directory. For example, assuming the component is defined at resources/views/components/inputs/button.blade.php, you may render it like so:

<x-inputs.button/>

無名インデックスコンポーネントAnonymous Index Components

あるコンポーネントが多数のBladeテンプレートから構成されている場合、そのコンポーネントのテンプレートを１つのディレクトリにまとめたいことがあります。例えば、以下のようなディレクトリ構造を持つ「アコーディオン」コンポーネントがあるとします。Sometimes, when a component is made up of many Blade templates, you may wish to group the given component's templates within a single directory. For example, imagine an "accordion" component with the following directory structure:

/resources/views/components/accordion.blade.php
/resources/views/components/accordion/item.blade.php

このディレクトリ構造を使用すると、アコーディオン・コンポーネントとそのアイテムを以下のようにレンダーできます。This directory structure allows you to render the accordion component and its item like so:

<x-accordion>
    <x-accordion.item>
        ...
    </x-accordion.item>
</x-accordion>

しかし、x-accordionでアコーディオンコンポーネントをレンダーするには、他のアコーディオン関連のテンプレートと一緒にaccordionディレクトリ内に入れ子にするのではなく、"index"アコーディオン・コンポーネントテンプレートをresources/views/componentsディレクトリ内に配置する必要がありました。However, in order to render the accordion component via x-accordion, we were forced to place the "index" accordion component template in the resources/views/components directory instead of nesting it within the accordion directory with the other accordion related templates.

Bladeでは幸い、コンポーネントのテンプレートディレクトリ内に index.blade.php ファイルを配置することができます。index.blade.php`のテンプレートがコンポーネントに存在する場合、そのテンプレートはコンポーネントの「ルート」ノードとしてレンダーされます。そこで、上記の例で示したのと同じBladeの構文を引き続き使用することができますが、ディレクトリ構造を次のように調整します。Thankfully, Blade allows you to place an index.blade.php file within a component's template directory. When an index.blade.php template exists for the component, it will be rendered as the "root" node of the component. So, we can continue to use the same Blade syntax given in the example above; however, we will adjust our directory structure like so:

/resources/views/components/accordion/index.blade.php
/resources/views/components/accordion/item.blade.php

データのプロパティ／属性Data Properties / Attributes

匿名コンポーネントには関連付けたクラスがないため、どのデータを変数としてコンポーネントに渡す必要があり、どの属性をコンポーネントの属性バッグに配置する必要があるか、どう区別するか疑問に思われるかもしれません。Since anonymous components do not have any associated class, you may wonder how you may differentiate which data should be passed to the component as variables and which attributes should be placed in the component's attribute bag[#component-attributes].

コンポーネントのBladeテンプレートの上部にある@propsディレクティブを使用して、データ変数と見なすべき属性を指定できます。コンポーネント上の他のすべての属性は、コンポーネントの属性バッグを介して利用します。データ変数にデフォルト値を指定する場合は、変数の名前を配列キーに指定し、デフォルト値を配列値として指定します。You may specify which attributes should be considered data variables using the @props directive at the top of your component's Blade template. All other attributes on the component will be available via the component's attribute bag. If you wish to give a data variable a default value, you may specify the variable's name as the array key and the default value as the array value:

<!-- /resources/views/components/alert.blade.php -->

@props(['type' => 'info', 'message'])

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

上記のコンポーネント定義をすると、そのコンポーネントは次のようにレンダーできます。Given the component definition above, we may render the component like so:

<x-alert type="error" :message="$message" class="mb-4"/>

親データへのアクセスAccessing Parent Data

子コンポーネントの中にある親コンポーネントのデータにアクセスしたい場合があります。このような場合は、@awareディレクティブを使用します。例えば、親の<x-menu>と子の<x-menu.item>で構成される複雑なメニューコンポーネントを作っていると想像してください。Sometimes you may want to access data from a parent component inside a child component. In these cases, you may use the @aware directive. For example, imagine we are building a complex menu component consisting of a parent <x-menu> and child <x-menu.item>:

<x-menu color="purple">
    <x-menu.item>...</x-menu.item>
    <x-menu.item>...</x-menu.item>
</x-menu>

<x-menu>コンポーネントは、以下のような実装になるでしょう。The <x-menu> component may have an implementation like the following:

<!-- /resources/views/components/menu/index.blade.php -->

@props(['color' => 'gray'])

<ul {{ $attributes->merge(['class' => 'bg-'.$color.'-200']) }}>
    {{ $slot }}
</ul>

colorプロップは親(<x-menu>)にしか渡されていないため、<x-menu.item>の中では利用できません。しかし、@awareディレクティブを使用すれば、<x-menu.item>内でも利用可能になります。Because the color prop was only passed into the parent (<x-menu>), it won't be available inside <x-menu.item>. However, if we use the @aware directive, we can make it available inside <x-menu.item> as well:

<!-- /resources/views/components/menu/item.blade.php -->

@aware(['color' => 'gray'])

<li {{ $attributes->merge(['class' => 'text-'.$color.'-800']) }}>
    {{ $slot }}
</li>

動的コンポーネントDynamic Components

コンポーネントをレンダーする必要があるが、実行時までどのコンポーネントをレンダーする必要のわからない場合があります。その状況では、Laravel組み込みのdynamic-componentコンポーネントを使用して、ランタイム値または変数に基づいてコンポーネントをレンダーできます。Sometimes you may need to render a component but not know which component should be rendered until runtime. In this situation, you may use Laravel's built-in dynamic-component component to render the component based on a runtime value or variable:

<x-dynamic-component :component="$componentName" class="mt-4" />

コンポーネントの手動登録Manually Registering Components

Note: note コンポーネントの手動登録に関する以下のドキュメントは、主にビューコンポーネントを含むLaravelパッケージを作成している人に当てはまります。パッケージを作成していない場合は、コンポーネントドキュメントのこの箇所は関係ないでしょう。{note} The following documentation on manually registering components is primarily applicable to those who are writing Laravel packages that include view components. If you are not writing a package, this portion of the component documentation may not be relevant to you.

独自のアプリケーション用のコンポーネントを作成する場合、コンポーネントはapp/View/Componentsディレクトリとresources/views/componentsディレクトリ内で自動的に検出されます。When writing components for your own application, components are automatically discovered within the app/View/Components directory and resources/views/components directory.

ただし、Bladeコンポーネントを利用するパッケージを構築する場合、またはコンポーネントを従来とは異なるディレクトリに配置する場合は、Laravelがコンポーネントの場所を認識できるように、コンポーネントクラスとそのHTMLタグエイリアスを手動で登録する必要があります。通常、コンポーネントはパッケージのサービスプロバイダのbootメソッドで、登録する必要があります。However, if you are building a package that utilizes Blade components or placing components in non-conventional directories, you will need to manually register your component class and its HTML tag alias so that Laravel knows where to find the component. You should typically register your components in the boot method of your package's service provider:

use Illuminate\Support\Facades\Blade;
use VendorPackage\View\Components\AlertComponent;

/**
 * パッケージの全サービスの初期起動処理
 *
 * @return void
 */
public function boot()
{
    Blade::component('package-alert', AlertComponent::class);
}

コンポーネントを登録すると、タグエイリアスを使用してレンダーできます。Once your component has been registered, it may be rendered using its tag alias:

<x-package-alert/>

パッケージコンポーネントの自動ロードAutoloading Package Components

または、規約により、componentNamespaceメソッドを使用してコンポーネントクラスを自動ロードすることもできます。たとえば、Nightshadeパッケージには、Package\Views\Components名前空間内にあるCalendarとColorPickerコンポーネントが含まれているとしましょう。Alternatively, you may use the componentNamespace method to autoload component classes by convention. For example, a Nightshade package might have Calendar and ColorPicker components that reside within the Package\Views\Components namespace:

use Illuminate\Support\Facades\Blade;

/**
 * パッケージの全サービスの初期起動処理
 *
 * @return void
 */
public function boot()
{
    Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}

これにより、package-name::構文を使用して、ベンダーの名前空間でパッケージコンポーネントを使用できるようになります。This will allow the usage of package components by their vendor namespace using the package-name:: syntax:

<x-nightshade::calendar />
<x-nightshade::color-picker />

Bladeは、コンポーネント名のパスカルケースを使い、コンポーネントにリンクしているクラスを自動的に検出します。サブディレクトリもサポートしており、「ドット」表記を使用しますBlade will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.

レイアウト構築Building Layouts

コンポーネント使用の構築Layouts Using Components

ほとんどのWebアプリケーションは、さまざまなページ間で同じ一般的なレイアウトを共有しています。私たちが作成するすべてのビューでレイアウト全体のHTMLを繰り返さなければならない場合、アプリケーションを維持するのは非常に面倒になると懸念できるでしょう。幸いに、このレイアウトを単一のBladeコンポーネントとして定義し、アプリケーション全体で使用できるため、便利です。Most web applications maintain the same general layout across various pages. It would be incredibly cumbersome and hard to maintain our application if we had to repeat the entire layout HTML in every view we create. Thankfully, it's convenient to define this layout as a single Blade component[#components] and then use it throughout our application.

レイアウトコンポーネントの定義Defining The Layout Component

例として、「TODO」リストアプリケーションを構築していると想像してください。次のようなlayoutコンポーネントを定義できるでしょう。For example, imagine we are building a "todo" list application. We might define a layout component that looks like the following:

<!-- resources/views/components/layout.blade.php -->

<html>
    <head>
        <title>{{ $title ?? 'Todo Manager' }}</title>
    </head>
    <body>
        <h1>Todos</h1>
        <hr/>
        {{ $slot }}
    </body>
</html>

レイアウトコンポーネントの適用Applying The Layout Component

layoutコンポーネントを定義したら、コンポーネントを利用するBladeビューを作成できます。この例では、タスクリストを表示する簡単なビューを定義します。Once the layout component has been defined, we may create a Blade view that utilizes the component. In this example, we will define a simple view that displays our task list:

<!-- resources/views/tasks.blade.php -->

<x-layout>
    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

コンポーネントへ挿入されるコンテンツは、layoutコンポーネント内のデフォルト$slot変数として提供されることを覚えてください。お気づきかもしれませんが、layoutも提供されるのであれば、$titleスロットを尊重します。それ以外の場合は、デフォルトのタイトルが表示されます。コンポーネントのドキュメントで説明している標準スロット構文を使用して、タスクリストビューからカスタムタイトルを挿入できます。Remember, content that is injected into a component will be supplied to the default $slot variable within our layout component. As you may have noticed, our layout also respects a $title slot if one is provided; otherwise, a default title is shown. We may inject a custom title from our task list view using the standard slot syntax discussed in the component documentation[#components]:

<!-- resources/views/tasks.blade.php -->

<x-layout>
    <x-slot name="title">
        カスタムタイトル
    </x-slot>

    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

レイアウトとタスクリストのビューを定義したので、ルートからtaskビューを返す必要があります。Now that we have defined our layout and task list views, we just need to return the task view from a route:

use App\Models\Task;

Route::get('/tasks', function () {
    return view('tasks', ['tasks' => Task::all()]);
});

テンプレート継承を使用するレイアウトLayouts Using Template Inheritance

レイアウトの定義Defining A Layout

レイアウトは、「テンプレート継承」を介して作成することもできます。これは、コンポーネントの導入前にアプリケーションを構築するための主な方法でした。Layouts may also be created via "template inheritance". This was the primary way of building applications prior to the introduction of components[#components].

始めるにあたり、簡単な例を見てみましょう。まず、ページレイアウトを調べます。ほとんどのWebアプリケーションはさまざまなページ間で同じ一般的なレイアウトを共有するため、このレイアウトを単一のBladeビューとして定義でき、便利です。To get started, let's take a look at a simple example. First, we will examine a page layout. Since most web applications maintain the same general layout across various pages, it's convenient to define this layout as a single Blade view:

<!-- resources/views/layouts/app.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

ご覧のとおり、このファイルには典型的なHTMLマークアップが含まれています。ただし、@sectionと@yieldディレクティブに注意してください。名前が暗示するように、@sectionディレクティブは、コンテンツのセクションを定義しますが、@yieldディレクティブは指定するセクションの内容を表示するために使用します。As you can see, this file contains typical HTML mark-up. However, take note of the @section and @yield directives. The @section directive, as the name implies, defines a section of content, while the @yield directive is used to display the contents of a given section.

アプリケーションのレイアウトを定義したので、レイアウトを継承する子ページを定義しましょう。Now that we have defined a layout for our application, let's define a child page that inherits the layout.

レイアウトの拡張Extending A Layout

子ビューを定義するときは、@extends Bladeディレクティブを使用して、子ビューが「継承する」のレイアウトを指定します。Bladeレイアウトを拡張するビューは、@sectionディレクティブを使用してレイアウトのセクションにコンテンツを挿入できます。上記の例で見たように、これらのセクションの内容は@yieldを使用してレイアウトへ表示できます。When defining a child view, use the @extends Blade directive to specify which layout the child view should "inherit". Views which extend a Blade layout may inject content into the layout's sections using @section directives. Remember, as seen in the example above, the contents of these sections will be displayed in the layout using @yield:

<!-- resources/views/child.blade.php -->

@extends('layouts.app')

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

@section('sidebar')
    @parent

    <p>これはマスターサイドバーに追加される</p>
@endsection

@section('content')
    <p>これは本文の内容</p>
@endsection

この例では、sidebarのセクションは、@parentディレクティブを利用して、(上書きするのではなく)、レイアウトのサイドバーにコンテンツを追加しています。@parentディレクティブは、ビューをレンダーするときにレイアウトの内容へ置き換えられます。In this example, the sidebar section is utilizing the @@parent directive to append (rather than overwriting) content to the layout's sidebar. The @@parent directive will be replaced by the content of the layout when the view is rendered.

lightbulb">Tip!! 前の例とは反対に、この「サイドバー」のセクションは@showの代わりに@endectionで終わります。@endectionディレクティブはセクションを定義するだけですが、一方の@showは定義し、そのセクションをすぐに挿入します。{tip} Contrary to the previous example, this sidebar section ends with @endsection instead of @show. The @endsection directive will only define a section while @show will define and immediately yield the section.

@yieldディレクティブは、デフォルト値を２番目の引数に取ります。この値は、生成するセクションが未定義の場合にレンダーされます。The @yield directive also accepts a default value as its second parameter. This value will be rendered if the section being yielded is undefined:

@yield('content', 'Default content')

フォームForms

CSRFフィールドCSRF Field

アプリケーションでHTMLフォームを定義したときは、CSRF保護ミドルウェアがリクエストをバリデートできるように、フォームへ隠しCSRFトークンフィールドを含める必要があります。@csrf Bladeディレクティブを使用してトークンフィールドを生成できます。Anytime you define an HTML form in your application, you should include a hidden CSRF token field in the form so that the CSRF protection[/docs/{{version}}/csrf] middleware can validate the request. You may use the @csrf Blade directive to generate the token field:

<form method="POST" action="/profile">
    @csrf

    ...
</form>

MethodフィールドMethod Field

HTMLフォームはput、patch、またはdeleteリクエストを作ることができないので、これらのHTTP動詞を偽装するために_Method隠しフィールドを追加する必要があります。@methodBladeディレクティブは、皆さんのためこのフィールドを作成します。Since HTML forms can't make PUT, PATCH, or DELETE requests, you will need to add a hidden _method field to spoof these HTTP verbs. The @method Blade directive can create this field for you:

<form action="/foo/bar" method="POST">
    @method('PUT')

    ...
</form>

バリデーションエラーValidation Errors

指定する属性にバリデーションエラーメッセージが存在するかをすばやく確認するために@errorディレクティブを使用できます。@errorディレクティブ内では、エラーメッセージを表示するため、$message変数をエコーできます。The @error directive may be used to quickly check if validation error messages[/docs/{{version}}/validation#quick-displaying-the-validation-errors] exist for a given attribute. Within an @error directive, you may echo the $message variable to display the error message:

<!-- /resources/views/post/create.blade.php -->

<label for="title">Post Title</label>

<input id="title" type="text" class="@error('title') is-invalid @enderror">

@error('title')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

@errorディレクティブは"if"文へコンパイルされるため、属性のエラーがない場合にコンテンツをレンダーしたい場合は、@elseディレクティブを使用できます。Since the @error directive compiles to an "if" statement, you may use the @else directive to render content when there is not an error for an attribute:

<!-- /resources/views/auth.blade.php -->

<label for="email">Email address</label>

<input id="email" type="email" class="@error('email') is-invalid @else is-valid @enderror">

ページが複数のフォームを含んでいる場合にエラーメッセージを取得するため、特定のエラーバッグの名前を第２引数へ渡せます。You may pass the name of a specific error bag[/docs/{{version}}/validation#named-error-bags] as the second parameter to the @error directive to retrieve validation error messages on pages containing multiple forms:

<!-- /resources/views/auth.blade.php -->

<label for="email">Email address</label>

<input id="email" type="email" class="@error('email', 'login') is-invalid @enderror">

@error('email', 'login')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

スタックStacks

Bladeを使用すると、別のビューまたはレイアウトのどこか別の場所でレンダーできる名前付きスタックに入れ込めます。これは、子ビューに必要なJavaScriptライブラリを指定する場合、とくに便利です。Blade allows you to push to named stacks which can be rendered somewhere else in another view or layout. This can be particularly useful for specifying any JavaScript libraries required by your child views:

@push('scripts')
    <script src="/example.js"></script>
@endpush

必要な回数だけスタックに入れ込めます。スタックしたコンテンツを完全にレンダーするには、スタックの名前を@stackディレクティブに渡します。You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the @stack directive:

<head>
    <!-- HEADのコンテンツ -->

    @stack('scripts')
</head>

スタックの先頭にコンテンツを追加する場合は、@prependディレクティブを使用します。If you would like to prepend content onto the beginning of a stack, you should use the @prepend directive:

@push('scripts')
    これは２番めになる
@endpush

// Later...

@prepend('scripts')
    これが最初になる
@endprepend

サービス注入Service Injection

@injectディレクティブは、Laravelサービスコンテナからサービスを取得するために使用します。@injectに渡す最初の引数は、サービスが配置される変数の名前であり、２番目の引数は解決したいサービスのクラスかインターフェイス名です。The @inject directive may be used to retrieve a service from the Laravel service container[/docs/{{version}}/container]. The first argument passed to @inject is the name of the variable the service will be placed into, while the second argument is the class or interface name of the service you wish to resolve:

@inject('metrics', 'App\Services\MetricsService')

<div>
    Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>

Bladeの拡張Extending Blade

Bladeでは、directiveメソッドを使用して独自のカスタムディレクティブを定義できます。Bladeコンパイラは、カスタムディレクティブを検出すると、ディレクティブに含まれる式を使用して、提供したコールバックを呼び出します。Blade allows you to define your own custom directives using the directive method. When the Blade compiler encounters the custom directive, it will call the provided callback with the expression that the directive contains.

次の例は、指定した$varをフォーマットする@datetime($var)ディレクティブを作成します。これはDateTimeインスタンスである必要があります。The following example creates a @datetime($var) directive which formats a given $var, which should be an instance of DateTime:

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * アプリケーションの全サービスの登録
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * アプリケーションの全サービスの初期起動処理
     *
     * @return void
     */
    public function boot()
    {
        Blade::directive('datetime', function ($expression) {
            return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
        });
    }
}

ご覧のとおり、ディレクティブに渡される式にformatメソッドをチェーンします。したがって、この例でディレクティブが生成する最終的なPHPは、以下のよ​​うになります。As you can see, we will chain the format method onto whatever expression is passed into the directive. So, in this example, the final PHP generated by this directive will be:

<?php echo ($var)->format('m/d/Y H:i'); ?>

Note: note Bladeディレクティブのロジックを更新した後は、キャッシュ済みのBladeビューをすべて削除する必要があります。キャッシュ済みBladeビューは、view:clear Artisanコマンドを使用して削除できます。{note} After updating the logic of a Blade directive, you will need to delete all of the cached Blade views. The cached Blade views may be removed using the view:clear Artisan command.

カスタムEchoハンドラCustom Echo Handlers

Bladeを使ってオブジェクトを「エコー」しようとすると、そのオブジェクトの__toStringメソッドが呼び出されます。__toStringメソッドは、PHPが組み込んでいる一つの「マジックメソッド」です。しかし、操作するクラスがサードパーティのライブラリへ属している場合など、特定のクラスで__toStringメソッドを制御できない場合が起こりえます。If you attempt to "echo" an object using Blade, the object's __toString method will be invoked. The __toString[https://www.php.net/manual/en/language.oop5.magic.php#object.tostring] method is one of PHP's built-in "magic methods". However, sometimes you may not have control over the __toString method of a given class, such as when the class that you are interacting with belongs to a third-party library.

このような場合、Bladeで、その特定のタイプのオブジェクト用に、カスタムEchoハンドラを登録できます。Bladeのstringableメソッドを呼び出してください。stringableメソッドは、クロージャを引数に取ります。このクロージャは、自分がレンダリングを担当するオブジェクトのタイプをタイプヒントで指定する必要があります。一般的には、アプリケーションのAppServiceProviderクラスのbootメソッド内で、stringableメソッドを呼び出します。In these cases, Blade allows you to register a custom echo handler for that particular type of object. To accomplish this, you should invoke Blade's stringable method. The stringable method accepts a closure. This closure should type-hint the type of object that it is responsible for rendering. Typically, the stringable method should be invoked within the boot method of your application's AppServiceProvider class:

use Illuminate\Support\Facades\Blade;
use Money\Money;

/**
 * アプリケーションの全サービスの初期起動処理
 *
 * @return void
 */
public function boot()
{
    Blade::stringable(function (Money $money) {
        return $money->formatTo('en_GB');
    });
}

カスタムEchoハンドラを定義したら、Bladeテンプレート内のオブジェクトを簡単にエコーできます。Once your custom echo handler has been defined, you may simply echo the object in your Blade template:

Cost: {{ $money }}

カスタムIf文Custom If Statements

カスタムディレクティブのプログラミングは、単純なカスタム条件ステートメントを定義するとき、必要以上の複雑さになる場合があります。そのため、BladeにはBlade::ifメソッドが用意されており、クロージャを使用してカスタム条件付きディレクティブをすばやく定義できます。たとえば、アプリケーションのデフォルト「ディスク」の設定をチェックするカスタム条件を定義しましょう。これは、AppServiceProviderのbootメソッドで行います。Programming a custom directive is sometimes more complex than necessary when defining simple, custom conditional statements. For that reason, Blade provides a Blade::if method which allows you to quickly define custom conditional directives using closures. For example, let's define a custom conditional that checks the configured default "disk" for the application. We may do this in the boot method of our AppServiceProvider:

use Illuminate\Support\Facades\Blade;

/**
 * アプリケーションの全サービスの初期起動処理
 *
 * @return void
 */
public function boot()
{
    Blade::if('disk', function ($value) {
        return config('filesystems.default') === $value;
    });
}

カスタム条件を定義すると、テンプレート内で使用できます。Once the custom conditional has been defined, you can use it within your templates:

@disk('local')
    <!-- アプリケーションはローカルディスクを使用している -->
@elsedisk('s3')
    <!-- アプリケーションはs3ディスクを使用している -->
@else
    <!-- アプリケーションは他のディスクを使用している -->
@enddisk

@unlessdisk('local')
    <!-- アプリケーションはローカルディスクを使用していない -->
@enddisk