【Laravel】Bladeのテンプレートの使い方と考え方【初心者向け】

2024-04-19

セイタ

ブログ・ゲーム・ガジェットが好きな30歳。普段は営業の仕事をしながらブログを書いたり、トレンドになっているゲームを楽しんでいます。ブログ開始（27歳）→独立（28歳）→コロナで再就職（29歳）→複業ライフ満喫中。ゲーミングデバイスレビューやお仕事の依頼はメールアイコンへ。

あなた

LaravelのBladeでテンプレートが作れるみたいなんだけど、作り方と考え方がよくわからない。

こんな悩みにお答えしたいと思います。

こんにちは、セイタです。

Bladeの考え方については、僕も結構苦労しました。

まだまだLaravelについての開発経験は薄いのですが、わかりやすくお伝えできるかと思いますので、ぜひLaravelのBladeについての考え方で苦しんでいる人の一助になれば幸いに思います。

【Laravel】Bladeのテンプレートの使い方と考え方【初心者向け】

Laravelで扱われる『Blade』というのは、フロントエンドの部分を表示するために使用するものです。

MVCモデルの『V』であるViewで表示するものになるのですが、初歩的に使えるようになると開発がかなり楽になるので、使わない手はない機能になります。

BladeはLaravelの特有のテンプレート機能

さて、それではBladeでは何ができるのかといったところなのですが、HTMLでフロント部分を作成しているとどうしても共通となる部分ができると思います。

その共通部分を引き継いで、ページごとに変更される部分のみ変更させることができるというのがBladeの便利な機能です。

これが便利で、HTMLのコードがとてもスッキリするし、最低限記述を変更したい部分のみダイレクトに変更できるので、時間短縮にも繋がります。

Bladeの使い方

Bladeの使い方といってもそこまで難しいものではなく、ローカル環境にLaravelをインストールするとこちらのディレクトリが作成されます。

ホームディレクトリ→resources→views

この中に『任意の名前.blade.php』というファイルを作成するだけで、Bladeテンプレートファイルは作成完了します。

ここにいつもフロントエンドを作る際に必要なHTMLやBootstrapを貼り付ければOKです。

Bladeテンプレートの考え方

それでは実際にテンプレートの初歩的な使い方について触れていきたいと思います。

ここで、Laravelに準備されている@sectionと@yield(イールド)というディレクティブを使用します。

@sectionと@yieldの使い方については、こちらをご覧ください。

@section=挿入する内容を記述するために使用する
@yield=@sectionに書いた内容を挿入する場所に使用する

文字だけの説明だとよくわからないと思うので、次の項目で実際にコードを交えて確認してみましょう。

Bladeテンプレートの作り方

//masterLayout.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>@yield('title')</title>
  <link rel="stylesheet" href="">
</head>
<body>
  <div>
    <h2>@yield('title')</h2>
    @yield('content')
  </div>
</body>
</html>

このような他のblade.phpに移植するための、ベースとなる親テンプレートを作成します。

親テンプレートを作成するディレクトリはviewsフォルダの中にそのまま入れてもいいと思いますし、layoutフォルダを作成してその中に入れておいても良いと思いでしょう。

注意

親テンプレート.blade.phpをlayoutフォルダの中に作成して、他の複製となる子.blade.phpにCSSをを適応する場合には、CSSのパス部分を{{ asset('/パス') }}として指定して、publicフォルダの中を参照する必要が出てきます。

このassetで囲んでおかないと、思ったようにCSSの内容が反映されないことがあるので、注意してください。

上記の親テンプレートでは、タイトルタグとボディタグの中にそれぞれ、@yield('title')と@yield('content')を入力しました。

このテンプレートを使用して別のHTMLファイル（PHPファイル）を作成するとなった場合、こちらのようなコードになります。

//childLayout.blade.php

@extends('masterLayout')

@section('title','初めてのBladeテンプレート')

＠section('content')

  <p>Bladeのテンプレートは便利です！</p>

@endsection

先ほど、作成した親テンプレートの内容を継承したテンプレートが作りたかったら、これだけの記述で済みます。

このchildLayout.blade.phpのファイルを開くとどうなるかというと、HTMLファイルの内容で書き示せばこのようになります。

//childLayout.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>初めてのBladeテンプレート</title>
  <link rel="stylesheet" href="">
</head>
<body>
  <div>
    <h2>初めてのBladeテンプレート</h2>
    <p>Bladeのテンプレートは便利です！</p>
  </div>
</body>
</html>

このように、@extends('masterLayout')と記述すると、親テンプレートの内容をそっくりそのまま別のPHPファイルに移植することができます。

そして、@yield('title')と@yield('content')の部分に挿入したい内容に関しては、childLayout.blade.phpの中で@section(' @yieldで指定した名前 ','内容')で記述することができますし、@sectionと@endsectionで囲ってその間に内容を記述するという方法のふた通りの方法があります。

@section('title')に関しては、タイトルとなる文言を反映させたいので、そこまで長くなることは想定されないので、第二引数に内容を記述する方が楽だと思います。もちろん、@sectionと@endsectionの中に書いても大丈夫です。

@yield('content')に関しては、内容が長くなることが予想されるので、こういった場合には@section('content')と@endsectionで囲ってあげた中に内容を記述してあげた方が良いでしょう。