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

laravel-view-blade-component-subview

 

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

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

 

 

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

laravelにおけるコンポーネントとサブビューは、
どちらも「ビューからビューを呼ぶ」という役割を持つものだ。

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

どちらも「ビューからビューを呼ぶ」もの

 

 

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

では次に、コンポーネントとサブビューでは具体的にどんな違いがあるのだろうか、
概念的な感じだが、以下のような違いがあると解釈した。

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

 

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

その上で、コンポーネントとサブビュー両者の違いを示すならば、サブビューは純粋に、他のビューを今のビューの一部として取り入れることを指し、コンポーネントは、コンポーネントという独立した「部品」としてのビューを、今のビューの一部として取り入れることを指すもの、と言う違いがあると筆者は理解している。

次では両者についてもうちょっと踏み込んだ内容を書いていく。

 

laravelのコンポーネント

まずはコンポーネントの説明をしていく。
laravelのコンポーネントを理解する上で、合わせて理解しておきたいのが、
「セクション」の概念なので、参考までに下記リンクを張っておく。

 

 

laravelのコンポーネントの概念

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

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

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

laravel-component-about

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

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

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

laravel-component-why

上記の画像で言えば、ヘッダー部分とフッター部分はどのページでも共通の内容を表示するものなので、「コンポーネント」として、保存しておけば、毎回わざわざ記述すると言う手間を省くことができる。

本当に重要なメインコンテンツ(赤色の部分)に集中して作業をすることができる。

 

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

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

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

    @slot(‘slot名’)

    @endslot

@endcomponent

 

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

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

 

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

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

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

 

サブビュー

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

 

サブビューの概念

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

 

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

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

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

 

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

 

まとめ

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

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

 

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

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

サブビュー → @includeを使う

 

 

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

 

 

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

コメントを残す

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