PHP

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

スポンサーリンク

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

 

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

 

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

 

こんにちは、誠太です。

 

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

 

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

 

【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で囲ってあげた中に内容を記述してあげた方が良いでしょう。

 

@sectionと@yieldの注意点

これは先ほど紹介したphpファイルを見ていただければわかると思うのですが、@yield('名前')の『名前』の部分は@section('名前')と共通にしなければ、childLayout.blade.phpに正しく内容が反映されないので注意が必要です。

 

今回は簡単にタイトルやコンテンツの内容をmasterLayout.blade.phpから持ってきて必要な部分だけ記述するといった初歩的な部分を解説しましたが、他にもヘッダーやフッター、サイドバーなどの記述が増えてくると、その分内容も複雑になってきます。

 

実際に自身の環境に今回のコードをコピペして使ってみて、childLayout.blade.phpの内容を書き換えて、タイトルやコンテンツ部分の変化をみつつ理解を深めてみてください。

 

プログラミングは書かなければ理解が深まらないという理論については、【プログラミング】とりあえず作るの重要性!知ってから作りたい病の克服が上達のカギという記事で解説しているので、是非あわせてご覧ください。

 

LaravelでBladeテンプレートを使うのは必須

LaravelでBladeテンプレートを使うのは必須

 

今回は、ルーティングの書き方やコントローラの書き方については触れませんでしたが、一応その部分については理解できているという前提で書いてみました。

 

もし自信がない場合は、【Laravel】コントローラの使い方と考え方について【初心者向け】にて解説しているので、一緒に読んでもらえると理解がより深まるかなと思います。

 

Laravelの学習では、Udemyの動画講座で学ぶという方法もあるのですが、一番手っ取り早い方法は『PHPフレームワーク Laravel入門』を購入して学習することですね。

 

 

Udemyは個人的におすすめな学習教材なのですが、Laravelに関しては日本語で解説されている講座の内容が薄いというレビューを見たので、それよりかは1冊青本を持っていた方が、すぐにわからないところを確認できるので便利です。

 

初めてフレームワークを学習する人にとってはLaravelが難しく感じてしまうかもしれませんが、基本的な部分をおさえれば簡単なWebサイトくらいは作れるようになります。

 

ぜひ、楽しんでプログラミングをして自分の目標を達成できるように頑張りましょうね!

 

オススメ記事【Udemyが強い!】Web制作を独学で学べる講座はひとつあれば事足りそう

オススメ記事プログラミングの本は学習に必要だけど、本だけではキツいというお話【体験談】

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

-PHP
-

Copyright© SEITALITY , 2019 All Rights Reserved.