本記事では、LaravelのBladeの使い方をわかりやすく解説します。
以下の記事の続きです。まだ読んでいない方はぜひご一読ください！
初心者の方でもLaravelの動作環境を簡単に作れるWINDIIオリジナルのソースコードを用意したので、実際に動かして学ぶとより深く理解できるようになります！
以下の記事を参考にご活用ください。
Laravelのブレイド(Blade)ってなに？
ブレイド（Blade)とは、Laravelでビューを作るために用意されたテンプレートエンジン です。
要するに見た目を作る手助けをしてくれる機能です。
ここでテンプレートエンジンという言葉に馴染みのない方に、少しテンプレートエンジンについて説明します。
すでに知ってるよ！って人はブレイド(Blade)の使い方に進んでください！
テンプレートエンジンのイメージ
テンプレートエンジンは、データをテンプレート（ひな型）に流し込んで、最終的にユーザに見せる画面を作り出す工場のような役割をします。
例えばブログ投稿システムの場合、タイトルや本文、コメント欄などのレイアウトはどの投稿でも共通なのでテンプレート化できますが、記事によってタイトルや本文、コメント欄の中身（データ）は違います。そこで、テンプレートエンジンがテンプレートとデータを結合して、ユーザに見せるべき画面を作ってくれるというわけです。
テンプレートエンジンについて少しはイメージが湧いたと思いますので、実際に使い方を学びながら理解を深めていきましょう！
ビューの継承
ビューの継承というと何やら難しく聞こえますが、骨格となる親のレイアウトを定義して、各ページにそれを引き継がせることでビューを再利用するための機能です。
例えばブログシステムの場合、ヘッダーやサイドバー、フッターはどこのページでも共通なことが多いです。
そういう場合に、各ページに共通な部分をコピペしていくのは手間な上に、例えばヘッダーのレイアウトを変えたい時、全てのページを変えなければなりません。
そういった悲劇を防ぐためにビューの継承 という仕組みを使います。
それでは例を見ていきましょう。
まず骨格となる親のビューを定義します。
resources/views/layouts/app.blade.php を作成しましょう。
resources/views/layouts/app.blade.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>@yield('title') -サイト名</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Laravelマスターになる！</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">お問い合わせ</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="キーワードを入力してください" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
<div class="container">
@yield('content')
</div>
</body>
</html>
次にこのビューを継承するビューを定義します。お問い合わせページを作るとします。
resources/views/contact.blade.php を作って以下のようにしましょう。
@extends で継承するビューを指定することができます。（この場合、resources/views/layouts/app.blade.php)
resources/views/contact.blade.php
@extends('layouts.app')
@section('title', 'お問い合わせページ')
@section('content')
<div>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">メールアドレス</label>
<input type="email" class="form-control" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">お問い合わせ</label>
<textarea class="form-control"rows="5"></textarea>
</div>
</form>
</div>
@endsection
routes/web.php は以下のようになっているとします。
Route::get('/contact', function() {
return view('contact');
});
それでは、http://localhost:8000/contact を開いてみましょう！
こんな感じになっていると思います！
それでは、仕組みを一つずつ解説していきましょう。
まずresources/views/layouts/app.blade.php をみてみましょう。
ここでは、共通のヘッダーを定義しています。
また、
@yield(‘title’)
@yield(‘content’)
という宣言が重要です。これは、継承先のビュー(例の場合だと、contact.blade.php)で
section(‘title’, ‘お問い合わせページ’)、
@section(‘content’) ~ @endsection
と指定することでデータを実際に流し込むことができます。
言葉だとわかりにくいので、以下に状況をまとめました。
以上がビューの継承です！
データの受け渡し
それでは次にデータをビューに受け渡して表示する方法をご紹介します。
resources/views/posts.blade.phpを作成して以下のようにします。
@extends('layouts.app')
@section('title', '投稿記事一覧')
@section('content')
<h2>{{$title}}</h2>
@endsection
app/Http/Controllers/PostController.php を作成して以下のようにします。
(artisan make:controller PostController.php)
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function index()
{
return view('posts')->with(['title' => 'ここにタイトル']);
}
}
ルーティングは以下のように定義されているとします。
Route::get('/posts', '[email protected]');
この状態でhttp://localhost:8000/posts を開いてみてください。
以下のように表示されているはずです！
コントローラから$title という名前で変数をセットし、ビュー側で表示できていますね。
これがデータの受け渡しの基本的な仕組みです。
ブレイドの他の機能にも触れてみよう！
先ほどまででブレイドの使い方の基礎をご紹介しましたが、ブレイドは実際のアプリケーション開発では欠かせない強力な機能を数多く持っています。全てをご紹介すると長くなってしまうので、よく使う機能をピックアップしてご紹介します。
具体例として、投稿一覧を表示するケースを考えてみましょう。
以下のようなデータがあるとします。
$posts = [
[
'title' => 'タイトルその１',
'content' => 'ここにテキストここにテキスト1',
],
[
'title' => 'タイトルその2',
'content' => 'ここにテキストここにテキスト2',
],
[
'title' => 'タイトルその3',
'content' => 'ここにテキストここにテキスト3',
]
];
これを画面に一覧表示してみましょう。
まず、app/Http/Controllers/PostController.php を以下のようにします。
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function index()
{
$posts = [
[
'title' => 'タイトルその１',
'content' => 'ここにテキストここにテキスト1',
],
[
'title' => 'タイトルその2',
'content' => 'ここにテキストここにテキスト2',
],
[
'title' => 'タイトルその3',
'content' => 'ここにテキストここにテキスト3',
]
];
return view('posts')->with(['posts' => $posts]);
}
}
次にresources/views/posts.blade.php を以下のようにしてください。
@extends('layouts.app')
@section('title', '投稿記事一覧')
@section('content')
@if(count($posts) > 0)
@foreach($posts as $post)
<div class="card my-3">
<div class="card-body">
<h5 class="card-title">{{$post['title']}}</h5>
<p class="card-text">{{$post['content']}}</p>
</div>
</div>
@endforeach
@endif
@endsection
このようにブレイドでは @if や @foreach のような記法で条件分岐したり、配列をループしたりする機能を持っています。
http://localhost:8000/posts を開くと以下のようになっています！
以上ブレイドの使い方でした！
次はマイグレーションです！
WINDII
最新記事 by WINDII (全て見る)
- Canvaが最高すぎる。使い方を完全ガイド【チュートリアルあり】 - 2019年5月14日
- 人気急上昇中のLaravelをはじめよう！【徹底解説】 - 2019年4月23日
- Laravelの認可を理解して実装してみよう！ - 2019年3月29日
この記事へのコメントはありません。