Laravel Breeze使ってみよう♪テンプレートファイルの構造と組み込み方

Laravel Breeze

LaravelのBreezeをインストールすると、デフォルトで、テンプレートファイル(app.blade.php)が入ってきます。

テンプレートを使うと、次のようなナビゲーションバー付きのページを手軽に作れます。

このテンプレートファイルは、ComponentとSlotという仕組みにより、手軽に他のファイルに組み込むことができます。

ただこの仕組み、最初はちょっと理解しにくいかもしれません。

本記事ではBreezeを初めて使う方向けに、デフォルトで準備されているナビゲーション付のレイアウトファイルの組み込み方を分かりやすく解説します。

Breezeのレイアウトファイルの場所

デフォルトのレイアウトファイルは、resources/views/layoutsに入っています。ナビゲーション付のレイアウトファイルは、app.blade.php となります。

このファイルを他のファイルに組み込むことで、ナビゲーションバーなどを手軽に使うことができます。

こういったテンプレート的な部分を、Component(コンポーネント)と呼びます。

ファイルの中身は、次の通りです。

【app.blade.php】

赤枠部分は、resources/views/layouts/navigation.blade.phpファイルの内容がそのままスッポリ入ります。

@includeを使うと、他のファイルのコードをそのまま埋め込むことができます。

黄色枠部分と緑枠部分には、このapp.blade.phpファイルをテンプレートとして使った時、各ファイルの情報が入る部分になります。

なお、この黄色枠と緑枠部分をslot(スロット)と言います。

{{slot}}には、各ファイルの内容が入ります。

スロット部分が複数ある場合には、{{$header}}など、各スロットに名前を付けます。

どんなふうに各ファイルごとの情報をいれていくのか、具体的にコードを入れてみましょう。

ナビテーション付きレイアウトファイルの組み込み方

まずは、routes/web.phpファイルに、次のルート設定を加えます。

【web.php】

そのあと、resources/viewsの中にtest.blade.phpファイルを追加します。

このtest.blade.phpファイルには、次のようにコードをいれます。

【test.blade.php】

app.blade.phpファイルを組み込むために、test.blade.phpファイルの一番上には、<x-app-layout>と書かれています。ファイル最後は</x-app-layout>で締めくくってあります。

<x-slot name=”header”></x-slot> で囲んである部分入れたコードは、app.blade.phpの{{$header}}部分に入ります。

そのあとのコードはは、app.blade.phpの{{$slot}}部分に入ります。

分かりやすく書くと、次のとおりです。

このコードをブラウザに表示すると、次のようになります。

app.blade.phpの内容が反映されて、ちゃんとナビゲーションバーが表示されています。

同じような構成でファイルを作れば、app.blade.phpファイルをテンプレートとして組み込めます。

ナビゲーションバーが不要な時はguest.blade.phpが使える

なおナビゲーションバーが不要な時用に、resources/views/layoutsの中にguest.blade.phpも用意されています。

【guest.blade.php】

guest.blade.phpファイルの中には、二重波カッコ{{}}で囲まれている部分は、{{$slot}}一か所だけです。

このファイルを組み込む場合、次のように <x-guest-layout></x-slot>でコードを囲むだけでOKです。

【guest.blade.phpをcomponentとして使う時の例】

上記のファイルをブラウザに表示すると、次のようになります。

さいごに

以上、ざっとBreezeでレイアウトファイルの組み込み方を解説しました。

componentを新規作成する方法や、変数の受け渡し方は、また別の記事で解説しようと思います。

ちなみにLaravelでは、@extendsや@sectionを使って、共通部分を組み込む方法もあります。この方法は別の記事で解説しています。

併せて参考にしてください。

Junko
Junko

個人的には@extendsや@sectionを使った方法が好きです。

両方知っておくと、便利かなと思います。

 

Laravel Breeze

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【AWS関連・Webアプリ開発・生成AIのAPI活用のご相談承ってます】
お気軽にお声がけください。
御社にとって、最善の方法をご一緒に考えてまいります。
Zoomミーティング実施中。サンプルアプリご利用可能です。

お問合せフォーム

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました