【Laravel】Viewのbladeの書き方

**追記：2019/06/13**
**Laravel5.5**、**Laravel5.6**系でも動作確認済み

  
個人的にはCakeのHTMLヘルパーより使いやすかな～～て感じします。

## if文  

```index.php
@if ($val === null)
    <p>NULLだよ</p>
@else 
    <p>NULLじゃないよ</p>
@endif
```

## for文

```index.php
@for ($i = 1; $i < 10 ; $i++)
    <p>{{ $i }} 番目</p>
@endfor
```

## js呼び出し

```index.php
<!-- viewsから見たアドレスを書く 例：views/common/_script.blade.php-->
@include('common._script')
```

この_script.blade.phpの中にscriptを書く
例：

```_script.blade.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    // jsのコード
});
</script>
```
  
## PHPのClass読み込み

```index.php
<!-- 第一引数はbladeで使うためのオブジェクト名、第二引数はパス -->
@inject('value_generator', 'App\Libs\ValueGenerator')
```

## CSRFトークン
フォームがある場合はこれをフォーム要素内に記述しないと**TokenMismatchException**が発生する
→ [【Laravel】TokenMismatchExceptionが発生する原因 - Qiita](https://qiita.com/sola-msr/items/e8d743d3677153a0779e)

```index.php
{{ csrf_field() }}
```

## PUTメソッド

更新処理を行う場合に必要

```index.php
{{ method_field('PUT') }}
```

以下使用例

```html
<form method="POST" action="{{ route('users.update', ['id' => $user->id]) }}">
    {{ csrf_field() }}
    {{ method_field('PUT') }}

    // 更新対象なデータ

    <button type="submit">編集する</button>
</form>
```

## DELETEメソッド

削除処理を行う場合に必要

```index.php
{{ method_field('DELETE') }}
```

以下使用例

```html
<form method="POST" action="{{ route('users.destroy', ['id' => $user->id]) }}">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}
    <button type="submit">削除する</button>
</form>
```


## 改行して表示
※eはエスケープ処理です

```index.php
{!! nl2br(e( $comment )) !!}
```

## 共通のテンプレート内に呼び出して表示させる
例：親テンプレートの**`@yield('content')`**に子のコンテンツを表示させる場合  
### 親（例：views/layouts/mypage.blade.php）

```index.php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>@yield('title')</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        @yield('content')
    </body>
</html>
```

### 子（例：views/mypages/index.blade.php）

```index.php
<!-- 親テンプレート -->
@extends('layouts.mypage')

@section('title', 'ページタイトル')

<!-- 親テンプレートに表示させる場所 -->
@section('content')
    <div class="content">コンテンツ</div>
@endsection
```

# ブレードテンプレート実装例

とりあえずこんな感じに書いておけば柔軟に対応できるはず・・・という実装例

## 親（共通）テンプレート
以下が親（共通）テンプレート例

```.php:layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    {{-- 個別のjavaScript読み込み --}}
    @yield('javascript-head')

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    {{-- 個別のCSS読み込み --}}
    @yield('css')
</head>
<body>
    <div id="app">
        <main class="py-4">
            {{-- コンテンツ部分読み込み --}}
            @yield('content')
        </main>
    </div>

    {{-- 個別のjavaScript読み込み --}}
    @yield('javascript-footer')

</body>
</html>
```

## 子テンプレート
以下が子テンプレート(ここではユーザー登録画面)の実装例

```.php:users/create.blade.php
@extends('layouts.app')

@section('css')
{{-- この場所に画面毎のcssを記述する --}}

@endsection

@section('javascript-head')
{{-- この場所に画面毎(ヘッダ位置)のjsを記述する --}}

@endsection

@section('content')

<form action="{{ route('users.store') }}" method="post">
{{ csrf_field() }}
    <div>
        <!-- エラーメッセージ -->
        @if(count($errors) > 0)
            <div class="error_message">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <table>
            <tbody>
                <tr>
                    <th scope="row">名前<span>必須</span></th>
                    <td><input type="text" id="name" name="name"></td>
                </tr>
                <tr>
                    <th scope="row">メールアドレス<span>必須</span></th>
                    <td><input type="text" id="email" name="email"></td>
                </tr>
                <tr>
                    <th scope="row">パスワード<span>必須</span></th>
                    <td><input type="password" id="password" name="password"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <button type="submit" id="confirm" name="confirm">確認画面へ</button>
</form>
@endsection

@section('javascript-footer')
{{-- この場所に画面毎(フッタ位置)のjsを記述する --}}

@endsection
```


## Sessionの表示

```index.php
@if(Session::has('message'))
    <div class="error_message">
        <p>{{ session('message') }}</p>
    </div>
@endif
```

以下も参考になるかもしれません

- [【Laravel】Laravelでよく使うroute()とview()とredirect()まとめ - Qiita](https://qiita.com/sola-msr/items/4f92686d474118d1cceb#redirect)

## PHPのコードを記述する

```index.php
@php
    echo 'hello';
@endphp
```

ただし公式からの注意

> Tip!! Bladeはこの機能を提供していますが、数多く使用しているのであれば、それはテンプレートへ多すぎるロジックを埋め込んでいるサインです。

## コメントアウト

HTMLソースには表示されません

```index.php
{{-- コメント --}}
```

# 参考

- [Bladeテンプレート 5.4 Laravel](https://readouble.com/laravel/5.4/ja/blade.html)

# おわり

以下もどうぞ

- [【Laravel】Laravelでよく使うroute()とview()とredirect()まとめ](https://qiita.com/sola-msr/items/4f92686d474118d1cceb)
- [【Laravel】わりとよく使うArtisanコマンド集](https://qiita.com/sola-msr/items/a09b857c5e7f7c88d01d)
- [【Laravel】DB登録値取得時のfind()、get()、first()の返り値早見表](https://qiita.com/sola-msr/items/fac931c72e1c46ae5f0f)