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