本記事では、laravelのbladeで使うことができる、
コンポーネントとサブビューについて使い方などを解説していく。
関連記事として、viewの基本的なルールや、bladeのディレクティブ、レイアウトに関しての記事は下記になるので参考までに。
(laravel) コンポーネントとサブビューとは
laravelにおけるコンポーネントとサブビューは、
どちらも「ビューからビューを呼ぶ」という役割を持つものだ。
どちらも「ビューからビューを呼ぶ」もの
(laravel) コンポーネントとサブビューの違い
では次に、
コンポーネントとサブビューでは具体的にどんな違いがあるのだろうか、
概念的な感じだが、以下のような違いがあると解釈した。
- サブビュー：純粋に、他のビューを今のビューの一部として取り入れる。
- コンポーネント：コンポーネントという独立した「部品」としてのビューを、今のビューの一部として取り入れる。
迷わないためには結局どちらも「ビューからビューを呼ぶ」ことは念頭に置いておこう。
その上で、コンポーネントとサブビュー両者の違いを示すならば、
- サブビューは純粋に、他のビューを今のビューの一部として取り入れることを指したもの。
- コンポーネントは、コンポーネントという独立した「部品」としてのビューを、今のビューの一部として取り入れることを指したもの
と言う違いがあると筆者は理解している。
次では両者についてもうちょっと踏み込んだ内容を書いていく。
laravelのコンポーネントの使い方
まずはコンポーネントの使い方の説明をしていく。
laravelのコンポーネントを理解する上で、合わせて理解しておきたいのが、
「セクション」の概念なので、参考までに下記リンクを張っておく。
laravelのコンポーネントの概念
セクションでは、レイアウトを分割しそれぞれのセクションに内容を書き込めるからテンプレートの作成が楽だという性質がある。
コンポーネントはさらに、それぞれのセクション一つ一つに着目する。
section一つ一つを、コンポーネントという形であらかじめテンプレ化しておくことで、本当に内容を考えて書かなければいけない部分と切り分けて作業できるのではと考え生まれたのが、コンポーネント。
つまり、コンポーネント単位で、独立ファイルとして扱う。
簡単な例でいうと、例えばwebサイトのヘッダーやフッターがある。
だいたい同じデザインで、表示内容は同じである。
つまり、このヘッダーやフッターの部分は、毎回毎回ソースに記述するのではなく、一つ一つの独立した「部品（コンポーネント）」としてviewに保存しておいて、必要に応じて読み込めばそれで良いよねって話。
そうすることで、本当に時間をかけなければいけないメインコンテンツなどに集中して取り組むことができる
上記の画像で言えば、ヘッダー部分とフッター部分はどのページでも共通の内容を表示するものなので、「コンポーネント」として、保存しておけば、毎回わざわざ記述すると言う手間を省くことができる。
本当に重要なメインコンテンツ（赤色の部分）に集中して作業をすることができる。
@component でコンポーネントを呼び出す
コンポーネントを呼び出すには、各セクション内で、
@componentディレクティブを使用する
@component(‘コンポーネント名’)
@slot(‘slot名’)
@endslot
@endcomponent
上記のように@componentディレクティブを記述することでコンポーネントを呼び出すことができる。これでviewからview（コンポーネント）を呼びだすということが実現可能。
ちなみに@slotとか書いてるのは、コンポーネント側に変数の値を渡してあげるためのもの。
@slotでコンポーネントに値を渡す
＠slotディレクティブを使用することで、呼び出し側のviewから、呼び出される側であるコンポーネントに、値を渡すことができる。
コンポーネント側では {{$ }}とbladeの基本的なviewの変数の受け取り方で変数を受け取ることができる。
サブビューの使い方
次は、サブビューについての説明。
サブビューの概念
あるビューからあるビューを読み込んで、はめ込んだもの。
コンポーネントと概念は似ているが、@slotなど使えない。
@include でサブビューを呼び出す
サブビューの呼び出し方は下記
@include(‘テンプレート名, [‘キー’=>’値’]
@slotのようなもので値を渡さない代わりに、第二引数に値を指定する。
サブビュー側では {{$ }}とbladeの基本的なviewの変数の受け取り方で変数を受け取ることができる。
(Laravel) コンポーネントとサブビューの違いまとめ
- どちらも「ビューからビューを呼ぶ」というものである。
- ビューの呼び出し方の違いとして、下記のような違いがある。
コンポーネント → @componentと@slotを使う
サブビュー → @includeを使う
呼び出される側のビューに特に違いはない
関連記事
https://qiita.com/gone0021/items/91d733f4d5c0ea2bd289
