Zenn
📘

【laravel初心者】 Blade TemplatesとBlade Componentsの基本の違い

2024/04/17に公開
Laravel
tech

Blade Templates

テンプレートになるblade

  • viewフォルダ直下にlayouts等の名称で格納しておくとよい
  • viewで使い回す記述（テンプレート）を書く
  • view毎に書き換えたい箇所を@yeild('名称')にしておく
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@yield('title')</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  @yield('content')
</body>

</html>

viewになるblade

  • テンプレートの継承方法と記述の流し込み方
    // 継承したいテンプレートを`@extends('viewディレクトリをルートとしたパス')`で指定する
@extends('layouts.app')

// 継承したテンプレートで設定されている`@yeild('名称')`に記述を流し込む方法
// 1行
@section('名称', '記述')

// 複数行
@section('名称')
<h1>hello</h1>
<h2>world</h2>
@endsection
  • テンプレートが継承しているテンプレートに記述を追加する方法
    継承したテンプレートが
@section('sidebar')
  <p>継承元のサイドバー</p>
@show

のように@sectionと@showを使っている場合、viewになるblade内で

@section('sidebar')
  @parent
  <p>view側からサイドバーに追加できます。</p>
@endsection

のように書くと継承元の@section内に記述を追加できる。

Blade Component

テンプレートになるblade

  • viewフォルダ直下にcomponentsフォルダを作成してその配下に格納する
  • viewで使い回す記述（テンプレート）を書く
    view毎に書き換えたい箇所を{{ $slot }}や{{ $変数名 }}にしておく
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ $title }}</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  <p>サイドバーです。</p>
  {{ $sidebar }}

  {{ $slot }}
</body>

</html>

viewになるblade

  • テンプレートの継承方法と記述の流し込み方
// 継承したいテンプレートを`<x-テンプレートのファイル名></x-テンプレートのファイル名>`で指定する
<x-app>
</x-app>  

// 継承したテンプレートの{{ $slot }}に記述を流し込む
<x-app>
  $slotに流し込む記述
</x-app>

// 継承したテンプレートの{{ $変数名 }}に記述を流し込む
<x-app>
  <x-slot name="変数名1">
    $変数名に流し込む記述
  </x-slot>

  <x-slot name="変数名2">
    $変数名に流し込む記述
  </x-slot>
</x-app>

Discussion