(Laravel) ビュー【コンポーネントとサブビューの違い】

 

LaravelのViewについてのメモ書き。
とくにbladeのコンポーネントとサブビューについて

前段階の知識として、viewの基本的なルールや、bladeのディレクティブ、レイアウトに関しての記事は下記

 

 

コンポーネントとサブビューとは

呼び方はコンポーネントやらサブビューやら色々あるが、
どちらも「ビューからビューを呼ぶ」というものだ。

 

コンポーネントとサブビューの違い

ではどんな違いが具体的にあるのだろうか、
概念的な感じだが、以下のような違いがあると解釈した。

コンポーネントとサブビューの違い
  • サブビューは純粋に、他のビューを今のビューの一部として取り入れる。
  • コンポーネントは、コンポーネントという独立した「部品」としてのビューを、今のビューの一部として取り入れる。

 

迷わないためには結局どちらも「ビューからビューを呼ぶ」ことだということだ。

 

コンポーネント

セクションのことは理解した前提で、コンポーネントの説明をしていく。

 

コンポーネントの概念

セクションでは、レイアウトを分割し、それぞれのセクションに内容を書き込めるからテンプレートの作成が楽だという性質がある。

コンポーネントはさらに、それぞれのsection一つ一つに着目する。
section一つ一つを、コンポーネントという形であらかじめテンプレ化しておくことで、本当に内容を考えて書かなければいけない部分と切り分けて作業できるのではと考え生まれたのが、コンポーネント。

つまり、コンポーネント単位で、独立ファイルとして扱う。

laravel-component-about

簡単な例でいうと、例えばwebサイトのヘッダーやフッターがある。
だいたい同じデザインで、表示内容は同じである。

つまり、このヘッダーやフッターの部分は、毎回毎回ソースに記述するのではなく、一つ一つの独立した「部品(コンポーネント)」としてviewに保存しておいて、必要に応じて読み込めばそれで良いよねって話。

そうすることで、本当に時間をかけなければいけないメインコンテンツなどに集中して取り組むことができる

laravel-component-why

 

@component でコンポーネントを呼び出す

コンポーネントを呼び出すには、各セクション内で、
@componentディレクティブを使用する

@component(‘コンポーネント名’)

    @slot(‘slot名’)

    @endslot

@endcomponent

 

上記のように記述することでコンポーネントを呼び出すことができる。
これでviewからview(コンポーネント)を呼びだすということが実現可能。

ちなみに@slotとか書いてるのは、コンポーネント側に変数の値を渡してあげるためのもの。

 

@slotでコンポーネントに値を渡す

@slotディレクティブを使用することで、呼び出し側のviewから、呼び出される側であるコンポーネントに、値を渡すことができる。

コンポーネント側では {{$ }}とbladeの基本的なviewの変数の受け取り方で変数を受け取ることができる。

 

サブビュー

次は、サブビューについての説明。

 

サブビューの概念

あるビューからあるビューを読み込んで、はめ込んだもの。
コンポーネントと概念は似ているが、@slotなど使えない

 

@include でサブビューを呼び出す

サブビューの呼び出し方は下記

@include(‘テンプレート名, [‘キー’=>’値’]

 

@slotのようなもので値を渡さない代わりに、第二引数に値を指定する。
サブビュー側では {{$ }}とbladeの基本的なviewの変数の受け取り方で変数を受け取ることができる。

 

まとめ

どちらも「ビューからビューを呼ぶ」というものである。

ビューの呼び出し方の違いとして、下記のような違いがある。

 

コンポーネントとサブビューの、ビューの呼び出し方の違い

コンポーネント → @componentと@slotを使う

サブビュー → @includeを使う

 

 

呼び出される側のビューに特に違いはない

 

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。