初心者向け。Laravelの@yield・@extends・@sectionについて解説

初心者向け。Laravelの@yield・@extends・@sectionについて解説

みなさんこんにちは、WEB制作のエンジニアのjonioです。

私がLaravelでWEBアプリを作る勉強をしていた時に@yieldと@extendsが何か分からなくて調べたのですが説明が分かりにくい記事しかありませんでした。

色んな記事を調べた結果「多分こうかな?」と思ってコードをいじって理解できたのですが意味が分からなくて困っている人が多いと思うので私なりの説明をします。

この記事で理解できない事はないと思いますが意味が分かったら簡単に感じるはずです。

 

@yieldと@extendsと@sectionの関係

例えで説明した方がイメージが湧くと思うので例えを使います。

企画の内容が書いてある紙を会議で使う時に大元になる原本を作成してそれをプリンタでコピーしてみんなに渡して使いますよね。

@yieldが書いてあるファイルはコピーの原本で@extendsが書いてあるファイルはコピーした紙というイメージです。

だから@yieldが書いてあるファイルの内容は@extendsが書いてあるファイルにそのまま使うことができます。

ファイルはbladeの事ですが@yieldが書いてあるファイル名をparent.blade.phpとして@extendsが書いてあるファイルをchild.blade.phpとします。

また例えで説明しますが会議で使う紙に参加者の名前を書かないといけなかったとします。

その場合大元の紙の名前を書く所ですがコピーした紙で書き換えができるようにしないといけません。

この時の原本で名前を自由に書き換えることができる部分に「@yield」を書いてコピーした紙の名前を書く所に@sectionを使って名前を変える事ができるようにします。

@extendsに触れていませんが実際のコードで説明します。

 

コードへの書き方

↓のコードを見てください。

parent.blade.phpで書き換えたい部分に「@yield(‘名称‘)」と書きます。

名称」は自分で決めていいです。

次はchild.blade.phpです。

parent.blade.phpの内容を移しますがまず8行目の「@extends(‘ファイル名‘)」と書きます。

ファイル名はコピーの大元のファイルの事でLaravelのプロジェクトの中の「プロジェクト名 > resources > views」の下に「layouts」フォルダを作りその下に

「parent.blade.php」を作っています。

だからファイル名は「layouts.parent」になります。(blade.phpは省略します)

もしviewsフォルダの下にparent.blade.phpを作った場合のファイル名は「parent」です。

そしてparent.blade.phpの「@yield(‘name’)」の内容をchild.blade.phpに書く時に9行目〜11行目のように「@section(‘名称‘)」と「@endsection」の間に書きますが今は適当に「jonio」と書いています。

名称はparent.blade.phpで付けた名前と同じにします。(青色の背景色が付いているので対応させてください)

これでchild.blade.phpの内容を表示させると↓になります。