Laravel プログラミング サーバサイド

[入門者向け]5分でわかるLaravelでレイアウトを作成してページ間の共通パーツを切り出す方法

どうも、シローです。

普段はサーバサイドやフロントサイドの開発をしております。

今回はLaravelのビューをレイアウトを使って共通パーツを切り出す方法をご紹介します。

対象者

  • Laravelを触り始めた人
  • ビューの共通パーツをレイアウトを使って共通化したい人

レイアウトの作成

まずはレイアウトのファイルを作成します。app/resources/viewsディレクトリにlayoutsフォルダを作成し、その中にdefault.blade.phpファイルを作成します。

default.blade.phpの中身は次のようにします。

レイアウトを使う方法

次のビューファイルに対して作成したレイアウトを使ってみます。

board/index.blade.php

レイアウトを使用したら次のようになります。

これでレイアウトの適用が完了しました。

解説

レイアウトの継承で使用した記述についての解説をします。

@extends

@extends(継承ファイルパス)では継承するレイアウトを指定できます。

今回は@extends('layouts.default')としたのでlayouts/default.blade.phpを継承しました。

@yield

@yield(名前)は要素を仮置きする箱のような役割を持ち、継承したビューファイルから@sectionで内容を決めることができます。

今回はタイトルやヘッダー名はページによって異なるので@yield('title')としたり、ページの中身も異なるので@yield('content')としました。

@section

@sectionでは継承元で記述されている@yieldの内容を決めることができます。

今回はタイトルやヘッダー部分を@section('title', タイトル名)としたり、ページの中身を@section('content') ~ @endsectionとしました。

まとめ

  • Laravelのビューは複数ファイルで組み合わせることができる
  • @extendsでは継承するファイルを指定する
  • @yieldでは継承先で自由に決める要素を設定する
  • @sectionでは@yieldの内容を決める

 

-Laravel, プログラミング, サーバサイド

© 2024 Shiro's secret base