BladeテンプレートイントロダクションBladeは、Laravelに含まれているシンプルでありながら強力なテンプレートエンジンです。一部のPHPテンプレートエンジンとは異なり、BladeはテンプレートでプレーンなPHPコードの使用を制限しません。実際、すべてのBladeテンプレートはプレーンなPHPコードにコンパイルされ、変更されるまでキャッシュされます。Bladeはアプリケーションに実質的にオーバーヘッドをかけません。Bladeテンプレートファイルは.blade.phpファイル拡張子を使用し、通常はresources/viewsディレクトリに保存します。Bladeビューは、グローバルなviewヘルパを使用してルートまたはコントローラから返します。viewsのドキュメントに記載されているように、データをviewヘルパの2番目の引数を使用してBladeビューに渡せます。Livewireをチェックしてください。Livewireは、ReactやVueのようなフロントエンドフレームワークにのみ可能な動的機能で拡張したBladeコンポーネントを書けるようになります。多くのJavaScriptフレームワークの複雑さ、クライアントサイドレンダリング、構築ステップなしで、モダンなリアクティブフロントエンドを構築する素晴らしいアプローチです。変数を中括弧で囲むことにより、Bladeビューに渡すデータを表示できます。以下のルートがあるとします。name変数の内容を表示できます。}}エコー文は、XSS攻撃を防ぐために、PHPのhtmlspecialchars関数を通して自動的に送信します。ビューに渡した変数の内容を表示するに留まりません。PHP関数の結果をエコーすることもできます。実際、Bladeエコーステートメント内に任意のPHPコードを入れることができます。}}.HTMLエンティティエンコーディングデフォルトのBlade(およびLaraveleヘルパ)はHTMLエンティティをダブルエンコードします。ダブルエンコーディングを無効にする場合は、AppServiceProviderのbootメソッドからBlade::withoutDoubleEncodingメソッドを呼び出します。}}文は、XSS攻撃を防ぐために、PHPのhtmlspecialchars関数を通して自動的に送信します。データをエスケープしたくない場合は、次の構文を使用します。アプリケーションのユーザーによって提供されるコンテンツをエコーするときは十分に注意してください。ユーザーが入力したデータを表示するときはXSS攻撃を防ぐために、通常はエスケープする二重中括弧構文を使用してください。BladeとJavaScriptフレームワーク多くのJavaScriptフレームワークでも「中括弧」を使用して、特定の式をブラウザに表示することを示しているため、@記号を使用して式をそのままにしておくように、Bladeレンダリングエンジンへ通知できます。例を確認してください。}}.この例の@記号はBladeが削除します。}}式はBladeエンジンによって変更されないので、JavaScriptフレームワークでレンダリングできます。@記号は、Bladeディレクティブをエスケープするためにも使用できます。-->@if()JSONのレンダJavaScript変数を初期化するために、配列をJSONとしてレンダリングする目的でビューに配列を渡す場合があります。一例を確認してください。?>;</script>自分でjson_encodeを呼び出す代わりに、Illuminate\Support\Js::fromメソッドディレクティブが使えます。fromメソッドは、PHPのjson_encode関数と同じ引数を受け入れますが、取得結果のJSONはHTMLクオートの中へ含められるよう適切にエスケープされていることを保証します。JavaScript文を文字列として返します。}};</script>最新バージョンのLaravelアプリケーション・スケルトンには、Jsファサードが含まれており、Bladeテンプレート内でこの機能に簡単にアクセスできるようになっています。既存の変数をJSONとしてレンダするには、Js::fromメソッドのみ使用してください。Bladeのテンプレートは正規表現に基づいているため、複雑な表現をディレクティブに渡そうとすると、予期せぬ失敗を引き起こす可能性があります。@verbatimディレクティブテンプレートの大部分でJavaScript変数を表示している場合は、HTMLを@verbatimディレクティブでラップして、各Bladeエコーステートメントの前に@記号を付ける必要がないようにできます。</div>@endverbatimBladeディレクティブテンプレートの継承とデータの表示に加えて、Bladeは条件ステートメントやループなど一般的なPHP制御構造への便利なショートカットも提供しています。したショートカットは、PHP制御構造を操作するための非常にクリーンで簡潔な方法を提供する一方で、慣れ親しんだ同等のPHP構文も生かしています。If文@if、@elseif、@else、@endifディレクティブを使用してifステートメントを作成できます。これらのディレクティブは、対応するPHPの構文と同じように機能します。複数レコードあります。レコードがありません。@endif使いやすいように、Bladeは@unlessディレクティブも提供しています。あなたはサインインしていません。@endunlessすでに説明した条件付きディレクティブに加えて、@issetおよび@emptyディレクティブをそれぞれのPHP関数の便利なショートカットとして使用できます。$recordsは「空」だ...@endempty認証ディレクティブ@authおよび@guestディレクティブを使用すると、現在のユーザーが認証済みであるか、ゲストであるかを簡潔に判断できます。ユーザーは認証されていない...@endguest必要に応じて、@authおよび@guestディレクティブを使用するときにチェックする必要がある認証ガードを指定できます。ユーザーは認証されていない...@endguest環境ディレクティブ@productionディレクティブを使用して、アプリケーションが本番環境で実行されているかを確認できます。Production限定コンテンツ...@endproductionまたは、@envディレクティブを使用して、アプリケーションが特定の環境で実行されているかどうかを判断できます。アプリケーションは"staging"か"production"で動作している...@endenvセクションディレクティブ@hasSectionディレクティブを使用して、テンプレート継承セクションにコンテンツがあるかどうかを判断できます。class="clearfix"></div>@endifsectionMissingディレクティブを使用して、セクションにコンテンツがないかどうかを判断できます。</div>@endifSwitch文Switchステートメントは、@switch、@case、@break、@default、@endswitchディレクティブを使用して作成できます。デフォルトのケース...@endswitch繰り返し条件文に加えて、BladeはPHPのループ構造を操作するための簡単なディレクティブを提供します。繰り返しますが、これらの各ディレクティブは、対応するPHPと同じように機能します。<p>ユーザーはいません。<p>無限ループ中です。使い、ループの最初の反復処理や最後の反復処理というような、反復に関する役立つ情報を取得可能です。ループを使用する場合は、@continueおよび@breakディレクティブを使用して、現在の反復をスキップするか、ループを終了することもできます。@endif@endforeachディレクティブ宣言に継続条件または中断条件を含めることもできます。5)@endforeachループ変数foreachループの反復処理中、ループの内部では$loop変数を利用できます。この変数により、現在のループのインデックスや、ループの最初の反復なのか最後の反復なのか、といった便利な情報にアクセスすることができます。これが最初の繰り返しです。これが最後の繰り返しです。}}</p>@endforeachネストしたループ内にいる場合は、parentプロパティを介して親ループの$loop変数にアクセスできます。これは親ループの最初の繰り返しです。@endforeach@endforeach$loop変数は、他にもいろいろと便利なプロパティを持っています。現在の反復数(初期値1)。条件付きクラスとスタイル@classディレクティブは、CSSのクラス文字列を条件付きでコンパイルします。このディレクティブは、クラスの配列を受け取ります。配列のキーには、追加したいクラスが入り、値は論理値です。配列のキーが数字の場合は、レンダリングするクラスリストへ常に取り込みます。bg-red"></span>同様に、@styleディレクティブは、条件付きでHTML要素へインラインのCSSスタイルを追加するために使用します。使いやすくするため、指定したHTMLのチェックボックス入力が"checked"であることを表す、@checkedディレクティブも使用できます。このディレクティブは、指定条件がtrueと評価された場合、checkedをechoします。/>同様に、@selectedディレクティブは、特定のセレクトオプションが"selected"であることを表すために使用します。@endforeach</select>さらに、@disabledディレクティブは、指定要素が"disabled"であることを表すために使用します。ディレクティブは、指定した要素が"readonly"であるべきかを示すために使用します。/>加えて、@requiredディレクティブは、指定要素が"required"であることを表すために使用します。@includeディレクティブは自由に使用できますが、Bladeコンポーネントは同様の機能を提供しつつ、データや属性のバインドなど@includeディレクティブに比べていくつかの利点があります。Bladeの@includeディレクティブを使用すると、別のビュー内からBladeビューを読み込めます。親ビューで使用できるすべての変数は、読み込むビューで使用できます。</form></div>読み込むビューは親ビューで使用可能なすべてのデータを継承しますが、読み込むビューで使用可能にする必要がある追加データの配列を渡すこともできます。'complete'])存在しないビューを@includeしようとすると、Laravelはエラーを投げます。存在する場合と存在しない場合があるビューを読み込む場合は、@includeIfディレクティブを使用する必要があります。'complete'])指定する論理式がtrueかfalseと評価された場合に、ビューを@includeしたい場合は、@includeWhenおよび@includeUnlessディレクティブを使用できます。'complete'])指定するビュー配列中、存在する最初のビューを含めるには、includeFirstディレクティブを使用します。Bladeビューで__DIR__と__FILE__定数は使用しないでください。これらは、キャッシュされコンパイルされたビューの場所を参照するためです。コレクションのビューのレンダループと読み込みをBladeの@eachディレクティブで1行に組み合わせられます。'job')@eachディレクティブの最初の引数は、配列またはコレクション内の各要素に対してレンダするビューです。2番目の引数は、反復する配列またはコレクションであり、3番目の引数は、ビュー内で現在の反復要素に割り当てる変数名です。したがって、たとえばjobs配列を反復処理する場合、通常はビュー内でjob変数として各ジョブにアクセスしたいと思います。現在の反復の配列キーは、ビュー内でkey変数として使用できます。@eachディレクティブに4番目の引数を渡すこともできます。この引数は、指定された配列が空の場合にレンダするビューを指定します。@eachを使いレンダするビューは、親ビューから変数を継承しません。子ビューでそうした変数が必要な場合は、代わりに@foreachと@includeディレクティブを使用する必要があります。@onceディレクティブ@onceディレクティブを使用すると、レンダリングサイクルごとに1回だけ評価されるテンプレートの部分を定義できます。これは、stacksを使用してJavaScriptの特定の部分をページのヘッダへ入れ込むのに役立つでしょう。ループ内で特定のコンポーネントをレンダする場合に、コンポーネントが最初にレンダされるときにのみ、あるJavaScriptをヘッダに入れ込みたい場合があるとしましょう。@endpush@endonce@onceディレクティブは、@pushや@prependディレクティブと一緒に使われることが多いため、便利なように@pushOnceと@prependOnceディレクティブを用意しました。</script>@endPushOnce生PHP状況によっては、PHPコードをビューに埋め込めると便利です。Blade@phpディレクティブを使用して、テンプレート内でプレーンPHPのブロックを定義し、実行できます。1;@endphpPHP文を1つ書くだけなら、@phpディレクティブ内に含められます。1)コメントまた、Bladeでは、ビューにコメントを定義することができます。HTMLのコメントとは異なり、Bladeのコメントは、アプリケーションが返すHTMLには含まれません。--}}コンポーネントコンポーネントとスロットは、セクション、レイアウト、インクルードと同様の利便性を提供します。コンポーネントとスロットのメンタルモデルが理解しやすいと感じる人もいるでしょう。コンポーネントを作成するには、クラスベースのコンポーネントと匿名コンポーネントの2つのアプローチがあります。Artisanコマンドを使用できます。コンポーネントの使用方法を説明するために、単純な「アラート(Alert)」コンポーネントを作成します。make:componentコマンドは、コンポーネントをapp/View/Componentsディレクトリに配置します。Alertmake:componentコマンドは、コンポーネントのビューテンプレートも作成します。ビューはresources/views/componentsディレクトリに配置されます。独自のアプリケーション用のコンポーネントを作成する場合、コンポーネントはapp/View/Componentsディレクトリとresources/views/componentsディレクトリ内で自動的に検出するため、通常それ以上のコンポーネント登録は必要ありません。サブディレクトリ内にコンポーネントを作成することもできます。Forms/Input上記のコマンドは、app/View/Components/FormsディレクトリにInputコンポーネントを作成し、ビューはresources/views/components/formsディレクトリに配置します。匿名コンポーネント(Bladeテンプレートのみでクラスを持たないコンポーネント)を作成したい場合は、make:componentコマンドを実行するとき、--viewフラグを使用します。--view上記のコマンドは、resources/views/components/forms/input.blade.phpへBladeファイルを作成します。/>により、コンポーネントとしてレンダできます。独自のアプリケーション用コンポーネントを作成する場合、コンポーネントをapp/View/Componentsディレクトリとresources/views/componentsディレクトリ内で自動的に検出します。Bladeコンポーネントを利用するパッケージを構築する場合は、コンポーネントクラスとそのHTMLタグエイリアスを手作業で登録する必要があります。通常、コンポーネントはパッケージのサービスプロバイダのbootメソッドに登録する必要があります。Alert::class);}コンポーネントを登録すると、タグエイリアスを使用してレンダリングできます。<x-package-alert/>または、規約により、componentNamespaceメソッドを使用してコンポーネントクラスを自動ロードすることもできます。Nightshadeパッケージには、Package\Views\Components名前空間内にあるCalendarとColorPickerコンポーネントが含まれているとしましょう。'nightshade');}これにより、package-name::構文を使用して、ベンダーの名前空間でパッケージコンポーネントが使用できるようになります。/>Bladeは、コンポーネント名のパスカルケースを使い、コンポーネントにリンクしているクラスを自動的に検出します。サブディレクトリもサポートしており、「ドット」表記を使用します。コンポーネントのレンダコンポーネントを表示するために、Bladeテンプレート1つの中でBladeコンポーネントタグを使用できます。Bladeコンポーネントタグは、文字列x-で始まり、その後にコンポーネントクラスのケバブケース名を続けます。<x-alert/><x-user-profile/>コンポーネントクラスがapp/View/Componentsディレクトリ内のより深い場所にネストしている場合は、.文字を使用してディレクトリのネストを表せます。コンポーネントがapp/View/Components/Inputs/Button.phpにあるとしたら、以下のようにレンダリングします。<x-inputs.button/>コンポーネントへのデータ渡しHTML属性を使用してBladeコンポーネントへデータを渡せます。ハードコードするプリミティブ値は、単純なHTML属性文字列を使用してコンポーネントに渡すことができます。PHPの式と変数は、接頭辞として:文字を使用する属性を介してコンポーネントに渡す必要があります。:message="$message"/>コンポーネントの全データ属性は、そのクラスコンストラクターで定義する必要があります。コンポーネントのすべてのパブリックプロパティは、コンポーネントのビューで自動的に使用可能になります。コンポーネントのrenderメソッドからビューにデータを渡す必要はありません。}}コンポーネントをレンダするときに、変数を名前でエコーすることにより、コンポーネントのパブリック変数の内容を表示できます。}}</div>ケース形式コンポーネントコンストラクタの引数はキャメルケース(camelCase)を使用して指定する必要がありますが、HTML属性で引数名を参照する場合はケバブケース(kebab-case)を使用する必要があります。次のようにコンポーネントコンストラクタに渡します。$alertType;}$alertType引数は、次のようにコンポーネントに提供できます。属性名と対応する変数名が一致することが多いため、これは便利な方法です。/>属性レンダのエスケープalpine.jsなどのJavaScriptフレームワークもコロンプレフィックスで属性を指定するため、属性がPHP式ではないことをBladeへ知らせるために二重のコロン(::)プレフィックスを使用してください。以下のコンポーネントが存在しているとしましょう。Submit</x-button>Bladeにより、以下のHTMLとしてレンダされます。Submit</button>コンポーネントメソッドコンポーネントテンプレートで使用できるパブリック変数に加えて、コンポーネントの任意のパブリックメソッドを呼び出すこともできます。isSelectedメソッドを持つコンポーネントを想像してみてください。$this->selected;}メソッドの名前に一致する変数を呼び出すことにより、コンポーネントテンプレートでこのメソッドを実行できます。}}</option>コンポーネントクラス内の属性とスロットへのアクセスBladeコンポーネントを使用すると、クラスのrenderメソッド内のコンポーネント名、属性、およびスロットにアクセスすることもできます。このデータにアクセスするには、コンポーネントのrenderメソッドからクロージャを返す必要があります。クロージャは、唯一の引数として$data配列を取ります。この配列はコンポーネントに関する情報を提供するいくつかの要素が含んでいます。};}componentNameは、HTMLタグでx-プレフィックスの後に使用されている名前と同じです。したがって、<x-alert/>のcomponentNameはalertになります。attributes要素には、HTMLタグに存在していたすべての属性が含まれます。slot要素は、コンポーネントのスロットの内容を含むIlluminate\Support\HtmlStringインスタンスです。クロージャは文字列を返す必要があります。返された文字列が既存のビューに対応している場合、そのビューがレンダリングされます。それ以外の場合、返される文字列はインラインBladeビューとして評価されます。追加の依存関係コンポーネントがLaravelのサービスコンテナからの依存を必要とする場合、コンポーネントのデータ属性の前にそれらをリストすると、コンテナによって自動的に注入されます。$message;}非表示属性/メソッドパブリックメソッドまたはプロパティがコンポーネントテンプレートへ変数として公開されないようにする場合は、コンポーネントの$except配列プロパティへ追加してください。コンポーネントテンプレートに公開してはいけないプロパティ/メソッド。['type'];}コンポーネント属性データ属性をコンポーネントへ渡す方法は、すでに説明しました。コンポーネントが機能するためには、不必要なclassなどの追加のHTML属性データを指定する必要が起きることもあります。通常これらの追加の属性は、コンポーネントテンプレートのルート要素に渡します。次のようにalertコンポーネントをレンダリングしたいとします。class="mt-4"/>コンポーネントのコンストラクタの一部ではないすべての属性は、コンポーネントの「属性バッグ」に自動的に追加されます。この属性バッグは、$attributes変数を通じてコンポーネントで自動的に使用可能になります。この変数をエコーすることにより、すべての属性をコンポーネント内でレンダリングできます。コンポーネントタグ内での@envなどのディレクティブの使用は、現時点でサポートしていません。:live="@env('production')"/>はコンパイルしません。属性のデフォルト値を指定したり、コンポーネントの属性の一部へ追加の値をマージしたりする必要のある場合があります。これを実現するには、属性バッグのmergeメソッドを使用できます。このメソッドは、コンポーネントに常に適用する必要のあるデフォルトのCSSクラスのセットを定義する場合、特に便利です。}}</div>このコンポーネントが以下のように使用されると仮定しましょう。class="mb-4"/>コンポーネントが最終的にレンダするHTMLは、以下のようになります。--></div>条件付きマージクラス特定の条件がtrueである場合に、クラスをマージしたい場合があります。これはclassメソッドで実行でき、クラスの配列を引数に取ります。配列のキーには追加したいクラスを含み、値に論理式を指定します。配列要素に数字キーがある場合は、レンダするクラスリストへ常に含まれます。}}</div>他の属性をコンポーネントにマージする必要がある場合は、mergeメソッドをclassメソッドへチェーンできます。マージした属性を受け取るべきではない他のHTML要素にクラスを条件付きでコンパイルする必要がある場合は、@classディレクティブを使用できます。非クラス属性のマージclass属性ではない属性をマージする場合、mergeメソッドへ指定する値は属性の「デフォルト」値と見なします。class属性とは異なり、こうした属性は挿入した属性値とマージしません。代わりに上書きします。buttonコンポーネントの実装は次のようになるでしょう。}}</button>カスタムtypeを指定してボタンコンポーネントをレンダすると、このコンポーネントを使用するときにそれが指定されます。タイプが指定されない場合、buttonタイプを使用します。Submit</x-button>この例でレンダリングされる、buttonコンポーネントのHTMLは以下のようになります。Submit</button>class以外の属性にデフォルト値と挿入する値を結合させたい場合は、prependsメソッドを使用します。この例では、data-controller属性は常にprofile-controllerで始まり、追加で挿入するdata-controller値はデフォルト値の後に配置されます。}}</div>属性の取得とフィルタリングfilterメソッドを使用して属性をフィルタリングできます。このメソッドは、属性を属性バッグへ保持する場合にtrueを返す必要があるクロージャを引数に取ります。}}キーが特定の文字列で始まるすべての属性を取得するために、whereStartsWithメソッドを使用できます。}}逆に、whereDoesntStartWithメソッドは、指定する文字列で始まるすべての属性を除外するために使用します。}}firstメソッドを使用して、特定の属性バッグの最初の属性をレンダできます。}}属性がコンポーネントに存在するか確認する場合は、hasメソッドを使用できます。このメソッドは、属性名をその唯一の引数に取り、属性が存在していることを示す論理値を返します。present</div>@endifgetメソッドを使用して特定の属性の値を取得できます。}}予約語コンポーネントをレンダするBladeの内部使用のため、いくつかのキーワードを予約しています。以下のキーワードは、コンポーネント内のパブリックプロパティまたはメソッド名として定できません。datarenderresolveViewshouldRenderviewwithAttributeswithNameスロット多くの場合、「スロット」を利用して追加のコンテンツをコンポーネントに渡す必要があることでしょう。コンポーネントスロットは、$slot変数をエコーしレンダします。この概念を学習するために、alertコンポーネントに次のマークアップがあると過程してみましょう。}}</div>コンポーネントにコンテンツを挿入することにより、そのコンテンツをslotに渡せます。wrong!</x-alert>コンポーネント内の異なる場所へ、複数の異なるスロットをレンダする必要のある場合があります。「タイトル("title")」スロットへ挿入できるようにするため、アラートコンポーネントを変更してみましょう。}}</div>x-slotタグを使用して、名前付きスロットのコンテンツを定義できます。明示的にx-slotタグ内にないコンテンツは、$slot変数のコンポーネントに渡されます。wrong!</x-alert>スコープ付きスロットVueのようなJavaScriptフレームワークを使用している方は「スコープ付きスロット」に慣れていると思います。これは、スロットの中でコンポーネントのデータやメソッドへアクセスできる機構です。コンポーネントにパブリックメソッドまたはプロパティを定義し、$component変数を使いスロット内のコンポーネントにアクセスすることで、Laravelと同様の動作を実現できます。この例では、x-alertコンポーネントのコンポーネントクラスにパブリックformatAlertメソッドが定義されていると想定しています。wrong!</x-alert>スロット属性ブレードコンポーネントと同様に、CSSクラス名などのスロットに追加の属性を割り当てることができます。</x-slot></x-card>スロット属性を操作するため、スロットの変数のattributesプロパティへアクセスできます。属性を操作する方法の詳細は、コンポーネント属性のドキュメントを参照してください。非常に小さいコンポーネントの場合、コンポーネントクラスとビューテンプレートの両方を管理するのは面倒だと感じるかもしれません。そのため、コンポーネントのマークアップをrenderメソッドから直接返すことができます。blade;}インラインビューコンポーネントの生成インラインビューをレンダするコンポーネントを作成するには、make:componentコマンドを実行するときにinlineオプションを使用します。--inline動的コンポーネント時には、あるコンポーネントをレンダする必要があっても、実行時までどのコンポーネントをレンダすべきか分からないことがあります。この場合、Laravelの組み込みコンポーネントであるdynamic-componentを使用すると、実行時の値や変数に基づいてコンポーネントをレンダできます。コンポーネントの手作業登録に関する以下のドキュメントは、主にビューコンポーネントを含むLaravelのパッケージを作成している開発者に当てはまるものです。したパッケージを書いていない場合は、コンポーネントに関する以下のドキュメントは、あなたに関係しないでしょう。自分のアプリケーションのコンポーネントを書く場合、コンポーネントはapp/View/Componentsディレクトリとresources/views/componentsディレクトリの中から自動的に見つけ出されます。Bladeコンポーネントを利用するパッケージを構築する場合や、コンポーネントをデフォルト外のディレクトリに配置する場合は、コンポーネントクラスとそのHTMLタグエイリアスを手作業で登録し、Laravelがコンポーネントを探す場所を認識できるようにする必要があります。通常、パッケージのサービスプロバイダのbootメソッドでコンポーネントを登録する必要があります。AlertComponent::class);}登録し終えたら、タグエイリアスを使いレンダします。<x-package-alert/>パッケージコンポーネントの自動ロードまた、componentNamespaceメソッドを使用して、コンポーネントクラスを規約に従い自動ロードすることもできます。NightshadeパッケージはCalendarとColorPickerコンポーネントを持ち、PackageViewsComponentsネームスペース下に存在するとしましょう。'nightshade');}これにより、パッケージ名::構文を使い、パッケージコンポーネントをそのベンダーの名前空間により使用できるようになります。/>コンポーネント名をパスカル記法にしたものをこのコンポーネントとリンクするクラスとして、Bladeは自動的に検出します。サブディレクトリも「ドット」記法でサポートします。匿名コンポーネントインラインコンポーネントと同様に、匿名コンポーネントは、単一のファイルを介してコンポーネントを管理するためのメカニズムを提供します。匿名コンポーネントは単一のビューファイルを利用し、関連するクラスはありません。匿名コンポーネントを定義するには、resources/views/componentsディレクトリ内にBladeテンプレートを配置するだけで済みます。resources/views/components/alert.blade.phpでコンポーネントを定義すると、以下のようにレンダできます。<x-alert/>.文字を使用して、コンポーネントがcomponentsディレクトリ内のより深い場所にネストしていることを示せます。コンポーネントがresources/views/components/input/button.blade.phpで定義されていると仮定すると、次のようにレンダリングできます。<x-inputs.button/>匿名インデックスコンポーネントあるコンポーネントが多数のBladeテンプレートから構成されている場合、そのコンポーネントのテンプレートを1つのディレクトリにまとめたいことがあります。以下のようなディレクトリ構造を持つ「アコーディオン」コンポーネントがあるとします。/resources/views/components/accordion.blade.php/resources/views/components/accordion/item.blade.phpこのディレクトリ構造を使用すると、アコーディオン・コンポーネントとそのアイテムを以下のようにレンダできます。</x-accordion.item></x-accordion>しかし、x-accordionでアコーディオンコンポーネントをレンダするには、他のアコーディオン関連のテンプレートと一緒にaccordionディレクトリ内に入れ子にするのではなく、"index"アコーディオン・コンポーネントテンプレートをresources/views/componentsディレクトリ内に配置する必要がありました。ファイルを配置することができます。index.blade.php`のテンプレートがコンポーネントに存在する場合、そのテンプレートはコンポーネントの「ルート」ノードとしてレンダされます。そこで、上記の例で示したのと同じBladeの構文を引き続き使用することができますが、ディレクトリ構造を次のように調整します。匿名コンポーネントには関連付けたクラスがないため、どのデータを変数としてコンポーネントに渡す必要があり、どの属性をコンポーネントの属性バッグに配置する必要があるか、どう区別するか疑問に思われるかもしれません。コンポーネントのBladeテンプレートの上部にある@propsディレクティブを使用して、データ変数と見なすべき属性を指定できます。コンポーネント上の他のすべての属性は、コンポーネントの属性バッグを介して利用します。データ変数にデフォルト値を指定する場合は、変数の名前を配列キーに指定し、デフォルト値を配列値として指定します。}}</div>上記のコンポーネント定義をすると、そのコンポーネントは次のようにレンダできます。class="mb-4"/>親データへのアクセス子コンポーネントの中にある親コンポーネントのデータにアクセスしたい場合があります。このような場合は、@awareディレクティブを使用します。親の<x-menu>と子の<x-menu.item>で構成される複雑なメニューコンポーネントを作っていると想像してください。<x-menu.item>...</x-menu.item></x-menu><x-menu>コンポーネントは、以下のような実装になるでしょう。}}</ul>colorプロップは親(<x-menu>)にしか渡されていないため、<x-menu.item>の中では利用できません。@awareディレクティブを使用すれば、<x-menu.item>内でも利用可能になります。@awareディレクティブは、HTML属性によって親コンポーネントに明示的に渡されていない親データにはアクセスできません。親コンポーネントに明示的に渡されていないデフォルトの@props値は、@awareディレクティブではアクセスすることができません。匿名コンポーネントのパス前で説明したように、匿名コンポーネントは通常、resources/views/componentsディレクトリに、Bladeテンプレートを配置することにより定義します。時にはデフォルトのパスに加えて、他の匿名コンポーネントパスをLaravelへ登録したい場合が起こるでしょう。anonymousComponentPathメソッドは、最初の引数に匿名コンポーネントの場所の「パス」、第2番引数としてコンポーネントを配置するための「名前空間」をオプションで取ります。通常、このメソッドはアプリケーションのサービスプロバイダのbootメソッドから呼び出す必要があります。Blade::anonymousComponentPath(__DIR__.'/../components');}上記の例のように、コンポーネントパスへプレフィックスを指定せず登録した場合、対応するプレフィックスを指定していないBladeコンポーネントと同様にレンダーします。上記で登録したパスにpanel.blade.phpコンポーネントが存在する場合、以下のようにレンダーされるでしょう。/>プレフィックスの「名前空間」は、anonymousComponentPathメソッドの第2引数として与えます。'dashboard');プレフィックスを指定すると、その「名前空間」内のコンポーネントは、コンポーネントがレンダーされるとき、そのコンポーネントの名前空間にプレフィックスを付けレンダーされます。/>レイアウト構築コンポーネント使用の構築ほとんどのWebアプリケーションは、さまざまなページ間で同じ一般的なレイアウトを共有しています。私たちが作成するすべてのビューでレイアウト全体のHTMLを繰り返さなければならない場合、アプリケーションを維持するのは非常に面倒になると懸念できるでしょう。幸いに、このレイアウトを単一のBladeコンポーネントとして定義し、アプリケーション全体で使用できるため、便利です。例として、「TODO」リストアプリケーションを構築していると想像してください。次のようなlayoutコンポーネントを定義できるでしょう。</body></html>レイアウトコンポーネントの適用layoutコンポーネントを定義したら、コンポーネントを利用するBladeビューを作成できます。この例では、タスクリストを表示する簡単なビューを定義します。@endforeach</x-layout>コンポーネントへ挿入されるコンテンツは、layoutコンポーネント内のデフォルト$slot変数として提供されることを覚えてください。お気づきかもしれませんが、layoutも提供されるのであれば、$titleスロットを尊重します。それ以外の場合は、デフォルトのタイトルが表示されます。コンポーネントのドキュメントで説明している標準スロット構文を使用して、タスクリストビューからカスタムタイトルを挿入できます。@endforeach</x-layout>レイアウトとタスクリストのビューを定義したので、ルートからtaskビューを返す必要があります。Task::all()]);});テンプレート継承を使用するレイアウトレイアウトの定義レイアウトは、「テンプレート継承」を介して作成することもできます。これは、コンポーネントの導入前にアプリケーションを構築するための主な方法でした。始めるにあたり、簡単な例を見てみましょう。ページレイアウトを調べます。ほとんどのWebアプリケーションはさまざまなページ間で同じ一般的なレイアウトを共有するため、このレイアウトを単一のBladeビューとして定義でき、便利です。</body></html>ご覧のとおり、このファイルには典型的なHTMLマークアップが含まれています。@sectionと@yieldディレクティブに注意してください。名前が暗示するように、@sectionディレクティブは、コンテンツのセクションを定義しますが、@yieldディレクティブは指定するセクションの内容を表示するために使用します。アプリケーションのレイアウトを定義したので、レイアウトを継承する子ページを定義しましょう。Bladeディレクティブを使用して、子ビューが「継承する」のレイアウトを指定します。Bladeレイアウトを拡張するビューは、@sectionディレクティブを使用してレイアウトのセクションにコンテンツを挿入できます。上記の例で見たように、これらのセクションの内容は@yieldを使用してレイアウトへ表示できます。<p>これは本文の内容</p>@endsectionこの例では、sidebarのセクションは、@parentディレクティブを利用して、(上書きするのではなく)、レイアウトのサイドバーにコンテンツを追加しています。@parentディレクティブは、ビューをレンダするときにレイアウトの内容へ置き換えられます。前の例とは反対に、この「サイドバー」のセクションは@showの代わりに@endectionで終わります。@endectionディレクティブはセクションを定義するだけですが、一方の@showは定義し、そのセクションをすぐに挿入します。@yieldディレクティブは、デフォルト値を2番目の引数に取ります。この値は、生成するセクションが未定義の場合にレンダされます。content')フォームCSRFフィールドアプリケーションでHTMLフォームを定義したときは、CSRF保護ミドルウェアがリクエストをバリデートできるように、フォームへ隠しCSRFトークンフィールドを含める必要があります。Bladeディレクティブを使用してトークンフィールドを生成できます。...</form>MethodフィールドHTMLフォームはput、patch、またはdeleteリクエストを作ることができないので、これらのHTTP動詞を偽装するために_Method隠しフィールドを追加する必要があります。@methodBladeディレクティブは、皆さんのためこのフィールドを作成します。指定する属性にバリデーションエラーメッセージが存在するかをすばやく確認するために@errorディレクティブを使用できます。@errorディレクティブ内では、エラーメッセージを表示するため、$message変数をエコーできます。}}</div>@enderror@errorディレクティブは"if"文へコンパイルされるため、属性のエラーがない場合にコンテンツをレンダしたい場合は、@elseディレクティブを使用できます。@enderror">ページが複数のフォームを含んでいる場合にエラーメッセージを取得するため、特定のエラーバッグの名前を第2引数へ渡せます。}}</div>@enderrorスタックBladeを使用すると、別のビューまたはレイアウトのどこか別の場所でレンダできる名前付きスタックに入れ込めます。これは、子ビューに必要なJavaScriptライブラリを指定する場合、とくに便利です。src="/example.js"></script>@endpushもし、指定した論理式が、trueと評価された場合にコンテンツを@pushしたいのであれば、@pushIfディレクティブを使用します。src="/example.js"></script>@endPushIf必要な回数だけスタックに入れ込めます。スタックしたコンテンツを完全にレンダするには、スタックの名前を@stackディレクティブに渡します。@stack('scripts')</head>スタックの先頭にコンテンツを追加する場合は、@prependディレクティブを使用します。これが最初になる@endprependサービス注入@injectディレクティブは、Laravelサービスコンテナからサービスを取得するために使用します。@injectに渡す最初の引数は、サービスが配置される変数の名前であり、2番目の引数は解決したいサービスのクラスかインターフェイス名です。}}.</div>インラインBladeテンプレートのレンダ素のBladeテンプレート文字列を有効なHTMLに変換する必要が起きるかもしれません。このような場合、Bladeファサードが提供するrenderメソッドを使用します。renderメソッドはBladeテンプレート文字列と、テンプレートに提供するデータの配列をオプションで受け取ります。Bashir']);LaravelはインラインのBladeテンプレートをstorage/framework/viewsディレクトリに書き込むことによってレンダします。Bladeテンプレートをレンダリングした後、Laravelにこれらの一時ファイルを削除させたい場合は、このメソッドにdeleteCachedView引数を指定してください。true);BladeフラグメントのレンダTurboやhtmxなどのフロントエンドフレームワークを使用する場合は、HTTPレスポンスの中からBladeテンプレートの一部のみを返す必要が起きる場合があります。Bladeの「フラグメント(fragment)」は、まさにそれを可能にします。Bladeテンプレートの一部を@fragmentディレクティブと@endfragmentディレクティブの中に配置します。</ul>@endfragmentその後、このテンプレートを利用するビューをレンダする際に、fragmentメソッドを呼び出し、指定したフラグメントのみを送信HTTPレスポンスへ含めるように指示します。$users])->fragment('user-list');fragmentIfメソッドを使用すると、指定条件に基づき、ビューの断片を条件付きで返せます。なければ、ビュー全体を返します。'user-list');fragmentsとfragmentsIfメソッドを使用すると、レスポンスへ複数のビューフラグメントを返せます。フラグメントは一つに連結します。);Bladeの拡張Bladeでは、directiveメソッドを使用して独自のカスタムディレクティブを定義できます。Bladeコンパイラは、カスタムディレクティブを検出すると、ディレクティブに含まれる式を使用して、提供したコールバックを呼び出します。次の例は、指定した$varをフォーマットする@datetime($var)ディレクティブを作成します。これはDateTimeインスタンスである必要があります。}}ご覧のとおり、ディレクティブに渡される式にformatメソッドをチェーンします。したがって、この例でディレクティブが生成する最終的なPHPは、以下のよ​​うになります。Bladeディレクティブのロジックを更新した後は、キャッシュ済みのBladeビューをすべて削除する必要があります。Artisanコマンドを使用して削除できます。カスタムEchoハンドラBladeを使ってオブジェクトを「エコー」しようとすると、そのオブジェクトの__toStringメソッドが呼び出されます。__toStringメソッドは、PHPが組み込んでいる一つの「マジックメソッド」です。操作するクラスがサードパーティのライブラリへ属している場合など、特定のクラスで__toStringメソッドを制御できない場合が起こりえます。このような場合、Bladeで、その特定のタイプのオブジェクト用に、カスタムEchoハンドラを登録できます。Bladeのstringableメソッドを呼び出してください。stringableメソッドは、クロージャを引数に取ります。このクロージャは、自分がレンダリングを担当するオブジェクトのタイプをタイプヒントで指定する必要があります。一般的には、アプリケーションのAppServiceProviderクラスのbootメソッド内で、stringableメソッドを呼び出します。});}カスタムEchoハンドラを定義したら、Bladeテンプレート内のオブジェクトを簡単にエコーできます。}}カスタムIf文カスタムディレクティブのプログラミングは、単純なカスタム条件ステートメントを定義するとき、必要以上の複雑さになる場合があります。そのため、BladeにはBlade::ifメソッドが用意されており、クロージャを使用してカスタム条件付きディレクティブをすばやく定義できます。アプリケーションのデフォルト「ディスク」の設定をチェックするカスタム条件を定義しましょう。これは、AppServiceProviderのbootメソッドで行います。});}カスタム条件を定義すると、テンプレート内で使用できます。2022.タイポ、誤訳、フォーマットの乱れなどはGitHubのIssueかTwitterの@hirokwsまでご連絡ください。注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。閉じる移動クリックで即時移動します。適用ボタンクリック後に、全項目まとめて適用されます。Scaffoldスカフォールド型枠生成スカフィールドLargeスクリーン表示幅640px80%90%100%インデントなし1rem2rem3rem本文フォントコードフォントフォント適用確認フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。バックスラッシュを含むインライン\Code\Blockの例です。以下はコードブロックの例です。}}設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。