【laravel】ビューの継承〜bladeを表示

HTML/CSS Laravel

もくじ

bladeの作成

bladeは実際にブラウザで表示されるhtmlページの部分です。拡張子は.blade.phpです。

bladeはもちろんひとつですべてのコードを記述してもいいんですが、同じコードを使い回す方法があるのでそれも合わせて紹介します。

resources/views配下にふたつのbladeを作成します。（ファイル名はなんでもいいです）

  • index.blade.php
  • layout.blade.php

コマンドから行う場合は以下コマンドで作成できます。

$ touch ./resources/views/index.blade.php
$ touch ./resources/views/layout.blade.php

全体を記述

まず、全体のコードをlayout.blade.phpに書きます。

典型的なHTMLマークアップで構成されたファイルを今回は例として使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
    <link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
    Hello world!
</body>
</html>

ここから、共通コードを使いまわせるようにします。

共通コードと固有コードの選別

全体をlayout.blade.phpに書きましたが、その中でも後述する内容を選別して他のbladeにコピペしていきましょう。

どのbladeで何を書くか整理します。

親ビュー

今回の場合、layout.blade.phpです。

共通コード（どのページでも必要になるコード）を記述します。

子ビュー

今回はindex.blade.phpです。

ページのメインとなる部分（<body>タグの中身）を記述します。あとは、ページごとに異なる部分（<title>タグなど）です。

HTMLの細かい意味については以下記事をご参照ください。

bonoponz.hatenablog.com

ビューの継承

@yield、@extends、@sectionを使います。

親ビュー　@yield

@yieldを使って、子ビュー固有のパーツをどこで反映させたいかを指定する。

@yield('child')のようにカッコ内に名前をつけて定義する。

子ビュー　@extends　@section

  • @extends 親ビューを継承することを宣言する。

子ビューにおいて一度だけ呼び出します。

@extends('layout')のようにカッコ内にblade名を記述します。

views
　├ index.blade.php
　├ layout.blade.php
　└ users
　　└ mypage.blade.php

もしディレクトリが深い場合はカンマで指定できます。上記のような階層を仮定すると@extends('users.mypage')と書きます。

  • @section 自分固有のパーツを定義する。

子ビュー内で何度でも使用できます。

A:@section('child') 〜 @endsection

B:@section('child', "子ビュー")

上記のように2通りあり、親ビューで定義した@yield('child')部分にそのまま反映されます。

Aの場合は、定義したい内容が多い場合に有効です。一方でBの場合は一単語など短い引数の時に使うと子ビューの見た目がすっきりします。使い分けられるといいですね。

共通コード（親ビュー）の分割

ここで例に挙げたコードにサイドバーを追加しましょう。

この時もちろん親ビューであるlayout.blade.phpにそのまま記述することも可能ですが、パーツごとにbladeを使い分けると将来的に編集などが楽になるので覚えておきましょう！

それではresources/views配下にsidebar.blade.phpを作成します。

親ビュー　@include

@includeを使うことで外部のテンプレートを取り込むことができます。変数を渡すことも可能です。

@include('sidebar')　// ファイルの取り込み
@include('sidebar', ['data' => $data])　// 変数を渡す場合

カッコ内はblade名を指定します。ディレクトリが深い場合は、ビューの継承の時と同様カンマで指定できます。

resources/views/layout/sidebar.blade.php の場合

@include('layout.sidebar')

子ビュー

@include('sidebar')と記述することで、記述箇所にsidebar.blade.phpの中身をまるっと挿入できます。

子ビューでは特に必要な記述はなく、挿入したいコードを記述するだけでOKです。

実際のコード

※コピペする際はコメント部分は消してください。

  • layout.blade.php（親ビュー）
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>　// 子の@section('title')部分を呼び出し
    <link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
    @include('sidebar')　// 外部テンプレート(sidebar.blade.php)を取り込む

    @yield('body')　// 子の@section('body')部分を呼び出し
</body>
</html>
  • sidebar.blade.php（親ビューの別パーツ）
<nav>
    サイドバー
</nav>
  • index.blade.php（子ビュー）
@extends('layout')　// 親の呼び出し

@section('title', "タイトル")　// 親の@yield('title')部分へ第二引数を挿入


@section('body')　// 親の@yield('body')部分へ挿入
    Hello world!
@endsection

そしてルーティングしてブラウザで表示すると、初めに記述した全体像と同じコードになります。

このとき、ルーティングするbladeはindex.blade.phpです。子ビューをルーティングする点に注意しましょう。

ルーティング

routes/web.phpを開いて以下のようにしてください。

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('index');
});

http://127.0.0.1:8000/にアクセスすると「Hello world!」と表示されれば完成です。

参考URL

Bladeテンプレート 7.x Laravel

【Laravel入門】ビューとBladeと継承 - Qiita