LoginSignup
1
3

More than 3 years have passed since last update.

laravel入門! bladeの作り方(extends,yield,section)

Posted at

laravelではHTMLではなくbladeというものが使われます。
bladeはテンプレートエンジンというもので、HTML+PHPを書きやすく、そして見やすくするためのもの(すごくざっくり言うと)。

そのbladeを書くにあたって、いろんな構文を使うから特に覚えておきたいものをメモしておきます。
僕の特に覚えておきたいものは、extends,yield,section の3つ。
この3つは、ビュー(bladeで作成したファイル)のレイアウトを共通化して、使い回しがしやすいようにするための構文。

今回使うファイル

・app.blade.php(親)
・index.blade.php(子)

という2種類のファイルを使っていきます。
app.blade.phpというのがブラウザ上に表示させるファイルの、雛形となるもの。親ファイル。
index.blade.phpの方が、app.blade.phpを引き継いで、雛形を具体化(?)させたファイル。

どちらもviewsというフォルダに入っている前提です。
階層的にはこんな感じ。

laravel\resouces\views

app.blade.php(親)


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">

  <title>
    @yield('title')
  </title>

  <!-- Styles -->
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>

  @yield('content')

</body>

</html>

index.blade.php(子)

@extends('app')

@section('title', 'ユーザー登録')

@section('content')
  <div class="container">
    メインとなるコンテンツの中身をここに書く
  </div>
@endsection

このapp.blade.phpとindex.blade.phpを合体させて、
ブラウザで人が見れるページを生成していきます。

@extends:ビューの継承

index.blade.phpの中で
@extends('app')
とすることで、
viewsフォルダの中にある、「app.blade.php」というファイルを継承する。

※いくつものファイルに何回も同じことを書きたくないから、
app.blade.phpを作って、その中に毎回書くであろう同じ内容(雛形になる部分)を予め書いておく。
それを子のファイル(index.blade.php)に継承させる。

いつもファイルの先頭に書くから存在を忘れがち。

@yield(読み方:イールド)と@section~@endsection:コンテンツの挿入

@yieldには、外部化したいコードを書く。

@yieldは親のファイルに書いて、@sectionは子のファイルに書く。

app.blade.phpの中で

@yield('title')

とすることで

index.blade.phpで書いた

@section('title', 'ユーザー登録')


app.blade.phpの中の

@yield('title')

の中に入る。
(sectionの中身がyieldに置きかわる)

また、

@section('content')
    <div>
        コンテンツ
    </div>
@endsection

という形もあって、@endsectionがつくタイプもある。
これも親のファイルの、@yield(‘content’)と書いてあるところに入ります。

親のファイルでcontent部分の位置だけ決めておいて、子ファイルでそのcontentの具体的な内容を入れる、みたいな感じ。

合体させると…

app.blade.phpとindex.blade.phpを合体させると、以下のようなファイルになります。

index.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">

  <title>
    ユーザー登録
  </title>

  <!-- Styles -->
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>

  <div class="container">
    メインとなるコンテンツの中身をここに書く
  </div>

</body>

</html>

今回は内容の簡素化のため、ヘッダーもフッダーもなしにして書きました。

titleタグの中にはユーザー登録のタイトル名が入り、
bodyタグの中にはdivタグのコンテンツが入りましたね。
試してないけどこうなるはず。

参考

よく見るサイトはこちらです。

https://blog.hiroyuki90.com/articles/laravel-blade/

こちらのサイトはこの記事を書くにあたって参考にさせていただきました。

http://blog.katty.in/7087

こちらのサイトはコントローラーとビューをつなぐときに参考にさせていただきました。
今回の記事とはあんまり関係ないけど、多分bladeの次につまづきそうなところなので自分用メモ。

https://blog.hrendoh.com/getting-start-and-overview-of-laravel5/

こちらのサイトはlaravelで一連の流れをサーとやるときに参考にさせていただきました。

余計なお世話かも

bladeを書くにあたって、HTMLの構造をわかっていた方が理解しやすいと思いました。

なので、そもそもHTMLの基本構造がわからないときには
https://mdstage.com/html-css/website-practice/html-structure
このサイトがわかりやすいかも。

1
3
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
1
3