目的
- ベースレイアウトの定義と継承を行いデザインの統一化やコーディングの簡略化の方法を学んだので忘れない様にまとめる
- 主に下記の本に記載されていたことを筆者なりに解釈してまとめる(筆者の文章が稚拙なため、深く勉強したい方は書籍を購入した方が良いかも知れない)
ベースレイアウトとは？
- 文字通りビューファイルのベースとなるレイアウトである。
- アプリケーション内で共通のデザインや共通のhtmlのhead情報などを予め記載しておくことができる。
- ベースレイアウトをビューファイルで継承すれば簡単にデザインの統一ができる。
わかった気になれる考え方(認識違ったらすいません)
- ベースレイアウトはスーパーで売っているお弁当を入れる容器をイメージしていただきたい。
-
下記に筆者がイメージする商品画像を記載する。
-
表示されるページのイメージが、具材が詰め込まれ、店舗に陳列されているお弁当と考えていただきたい。
-
容器のない状態から、同じデザインで幕の内弁当やのり弁当の具材を配置して似たデザインにすることは難しい。
-
なので先ほどの画像の様な「区切り」のついた容器を作り、それに沿って具材を入れてゆくことにより、幕の内弁当でも、のり弁当でも、焼肉弁当でもご飯の比率やおしんこの量を一定に簡単に保つことがベースレイアウトの考え方である。
-
ちょっとお堅い考え方(認識違ったらすいません)
- ベースレイアウトでは表示するページの大枠の部分を定義する。
- 共通するhtmlのhead情報、headerの場所、mainの場所、footerの場所などなど
- header、main、footerなどの場所はそれぞれセクションと呼ばれる単位で定義する。
- headerセクション、mainセクション、footerセクションを定義した場合、そのベースレイアウト継承した別のビューファイルで各セクションに入れるコードを指定することができる。(詳しい方法は後述する。)
- また先に記載したセクションだけでなく任意の名前のセクションを作成することができる。
headerとfooterのデザインを共通にするための書き方の例
- ※フォルダ名、ファイル名は時に決まりはないため、例と完全一致してなくても良いが、お試しで実施する場合下記の名前でベースレイアウトを記載するファイルとそれを格納するフォルダを作成することをお勧めする。
-
laravelのviewファイル内にlayoutというフォルダを作成する。
-
layoutフォルダ内にapplication.blade.phpというファイルを作成する。
-
application.blade.phpファイルがベースレイアウトを記載するファイルである。
-
application.blade.phpに下記の記載を行う。
application.blade.php<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <h1>これはheaderです</h1> </header> <main> <div> @yield('content') </div> <footer> <h1>これはfooterです</h1> </footer> </main> </body> </html> -
お好きな名前で新規にビューファイルを作り、そのビューをブラウザで表示できる最低限の処理をルーティングとコントローラに記載する。
-
新規のビューファイルに下記の記載を行う。
@extends('layout.application') @section('content') <p>これはベースレイアウトで作成したコンテンツです。</p> @endsection -
新規のビューファイルを表示リンクをブラウザで開き、表示を確認する。
簡単な解説
@yield('セクション名')
- ここに後述するセクション宣言時に記載したコードが入ってブラウザで表示される。
- セッションを呼び出している。
- お弁当の容器でいうところの具材が入る区画である。
@extends('ベースレイアウト格納フォルダ名.ベースレイアウトファイル名')
- これは継承の設定である。
- ビューファイルに記載する。ベースレイアウトのファイルには記載しない。
@section('セクション名') @endsection
- セクションの宣言である。
- セクション内に記載したいコードを
@section('セクション名')から@endsectionの間に記載する。 - お弁当の容器でいうところの具材の決定である。
上記をまとめると
- セクションの宣言は
@section('セクション名')と@endsectionの間にセクションに記載したいコードを書く。 -
@yield('セクション名')の部分に@section('セクション名')と@endsectionの間に書かれたコードが記載されて表示される。 - ベースレイアウトとページ表示用のビューファイルは
@extends('ベースレイアウト格納フォルダ名.ベースレイアウトファイル名')を用いて継承を行うことで初めてセッション宣言とセッションの呼び出しは使用できない。 - 今回はheaderとfooterのデザイン統一を目的としておりベースレイアウトにセッションの呼び出しを記載し、ビューファイルにセッションの宣言を記載したが、目的が異なる場合ベースレイアウトでのセッション宣言、ビューファイルでのセッションの呼び出しを行うことももちろんあり得る。
すいません
- 筆者なりに考えてわかりやすく伝えようとした結果、とてもわかりにくい説明になってしまったことをお詫びします。
- 記事内のリンクはアフィリエイトリンクではないのでご安心ください。