20160422 laravel.osaka

Laravelのテンプレートエンジン
Bladeの機能

Who are you?
庄埜詩織
株式会社chatbox　エンジニア
Shono Shiori
まだまだ勉強中

❖ テンプレートとデータモデルの２つでHTMLを生成する
　（デザインとロジックの分離）
❖ 分業しやすい、使い回し◎、セキュリティ◎
テンプレートエンジンとは
Data
(ロジック)
Template
(デザイン)
Document
Templating
Engine
※図は「PHP+MySQLマスターブック P268」を参考にしました。

Bladeの基本
❖ Laravelのテンプレートエンジン
❖ ビューに生のPHPを書いてもOK
❖ 拡張子は.blade.php
❖ resources/views ディレクトリの下に置く
❖ コメントは {{--コメント--}} で書く
　（HTMLには吐き出されない）

データの表示
テンプレートエンジンの
一番のポイント
if文・ループ文
{ } や ( ) は使わず、
@ if といった書き方でOK
さいごに @endif を忘れずに
便利な機能
Stacksで他のビューにpush
クラスのメソッドが使える
Blade間の共通部品も作れる
おしながき
Laravel 5.2
新機能も !!
レイアウトの継承
ヘッダー、フッターなど
レイアウトを部品化して
使いまわせる
1 22 3
4

データの表示
Route::get('greeting', function () {
return view('welcome', ['name' => 'Samantha']);
});
Hello, {{ $name }}.　　　// 出力結果： Hello, Samantha.　・・・①
The current UNIX timestamp is {{ time() }}.　・・・②
Hello, @{{ name }}.　// 「 Bladeの {{}} だ」と認識される　・・・③
blade.php
※XSS（クロスサイトスクリプティング）：他人のウェブサイトへ悪意のあるスクリプトを埋め込むこと。
①　タグのまま出力されるので XSS 対策になる
②　PHP関数もそのまま埋め込める
③　JSフレームワークを使う時は @をつける
route.php

❖ デフォルト値の設定が可能
// 3項演算子
{{ isset($name) ? $name : 'Default' }}
// Blade 特有の書き方
{{ $name or 'Default' }}
変数を出力したいけど値がセットされてるかわからないときに使える
Blade特有の書き方だと or だけで済む
{ !! hoge !! } と書くとエスケープされないので注意
Hello, {!! $name !!}.　// 出力結果：Hello, $name.

If 文・ループ文
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif
❖ @if, @elseif
最後の @endif を忘れないように注意

@unless (Auth::check())
You are not signed in.　// ログインしてなければ表示
@endunless
❖ @unless
<title>
@hasSection('title')
@yield('title') - App Name
@else
App Name
@endif
</title>
❖ @hasSection

@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
@while (true)
<p>I'm looping forever.</p>
@endwhile
❖ @for, @foreach, @forelse, @while

@if($user->type == 1)
@continue
@endif
@if($user->number == 5)
@break
@endif
@endforeach
// 一行でも書ける
@continue($user->type == 1)
@break($user->number == 5)
@endforeach
❖ @continue, @break も使えます

<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
master.blade.php
レイアウトの継承
❖ @yieldで子のブロックを出力する
❖ @sectionは親のブロックを子テンプレートに出力する

❖ @extendsで親ページのビューを継承する
@extends('layouts.master')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsection
呼び出すときは子テンプレートのビューを呼び出すだけで OK
Route::get('blade', function () {
return view('child');
});
child.blade.php

<div>
@include('shared.errors')
<form>

</form>
</div>
// データも渡せます
@include('view.name', ['some' => 'data'])
❖ @includeで既存のビューを読み込める
__DIR__ や __FILE__ を使うとキャッシュされたビューを参照するので使わない方がいい

便利な機能
　　ビューやレイアウトが pushできる
　　子ビューの中身を親ビューでも見失わずに済む、などのメリット
@push('scripts')
<script src="/example.js"></script>
@endpush
❖ @stacks
<head>

@stack('scripts')
</head>
child.blade.php
master.blade.php

❖ @inject：サービスの注入
@inject('metrics', 'AppServicesMetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>
Laravelのサービスコンテナからサービスを取得して Blade内で使える
最初の引数はそのサービスを取り込む変数名、第２引数が対象となるクラス名

※使用前はphp artisan view:clear でキャッシュを消去
❖ directive の登録
<?php
namespace AppProviders;
use Blade;
use IlluminateSupportServiceProvider;
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
Blade::directive('datetime', function($expression) {
return "<?php echo with{$expression}->format('m/d/Y H:i'); ?>";
});
}
}
自分でディレクティブを作れる（上のコードだと @datetime($var) で呼び出し）
使用前は php artisan view:clear でキャッシュを消去する

Thanks!
Any questions?
You can find me at:
@username
user@mail.me

20160422 laravel.osaka

Recommended

Recommended

More Related Content

Similar to 20160422 laravel.osaka

Similar to 20160422 laravel.osaka (20)

More from シオリショウノ

More from シオリショウノ (10)

Recently uploaded

Recently uploaded (9)