LoginSignup
5
6

More than 3 years have passed since last update.

【Laravel】テンプレートの書き方

Last updated at Posted at 2020-06-21

概要

LaravelのMVCのうちのビュー周辺について説明するよ
つまり、テンプレートの書き方だね
初心者向け程度の内容だよ
【Laravel】コントローラの書き方と一緒に読むといいよ

ビューの呼び出し

コントローラ側でview()が呼ばれると、引数に与えられたテンプレートがレンダリングされてブラウザに表示されるよ
例えば、view('welcome')の場合、resourcesフォルダ内のviewフォルダの中にあるwelcome.blade.phpまたはwelcome.phpというファイルが呼び出される
2つともファイルがあると拡張子がblade.phpの方が呼び出される

viewフォルダの中にさらにフォルダを作りその中にテンプレートを作ると、
  view('フォルダ名.テンプレート名')
のように呼び出せばいい

テンプレートの例

  • htmlファイルと同じように書く
resources/view/hello.blade.php
<html>
<head>
    <title>Hello</title>
</head>
<body>
    <h1>Hello</h1>
    <p>Hello World</p>
    <p>Hello Laravel</p>
</body>
</html>

これでもいいんだけど、フレームワークらしくないよね
そこで

  • Bladeを使う
resources/view/hello.blade.php
@extends('template')
@section('title', 'Hello')
@section('greeting')
    <p>Hello World</p>
    <p>Hello Laravel</p>
@endsection
resources/view/template.blade.php
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <h1>Hello</h1>
    @yield('greeting')
</body>
</html>

@で書かれたものはディレクティブと呼ばれているよ
extendsディレクティブで「template.blade.phpを使うよ」と宣言して、
yieldディレクティブのところに、sectionディレクティブで設定したものが入る感じだよ

ディレクティブには、

  • section
  • yield
  • component
  • include

のような組み込むものがあったり

  • if
  • for
  • foreach
  • while
  • switch

のような制御構文のものがあったり

  • csrf
  • method
  • error

のようなフォーム関連のものがあるよ
使い方や説明はReadoubleに書いてあるから見ておくといいよ(ここでは詳しくは説明しない)

値の埋め込み

resources/view/hello.blade.php
@extends('template')
@section('title', 'Hello')
@section('greeting')
    <p>Hello World</p>
    @if ($name != null)
    <p>Hello {{$name}}</p>
    @endif
@endsection

上のように{{ }}の中に変数や関数を書くことで値を埋め込めることができる
例えば、コントローラ側で
  view('hello',['name'=>'Laravel'])
とあったら、{{$name}}の部分にLaravelが表示されることになるよ

おわり

今回はここまで
ディレクティブの部分は全部説明すると長くなりそうだったのでReadoubleに丸投げ(手抜き)
要は

  • view()でテンプレートを呼び出してレンダリング
  • ディレクティブを使いこなそう
  • {{ }}内に変数や関数を書いて値を埋め込む

ということ
以上!

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6