この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:9
ページ更新者:atom
更新日時:2019-06-30 22:10:25

タイトル: Bladeテンプレート(ビュー/レイアウト)
SEOタイトル: LaravelのBladeテンプレート(ビュー/レイアウト)とは

この記事の要点
  • Laravel の Blade テンプレートエンジン
  • 拡張子: .blade.php
  • 主要機能: テンプレート継承 (@extends / @section / @yield) + ディレクティブ (@if / @foreach / @csrf)
  • コンパイル結果は storage/framework/views/ にキャッシュされる

 

LaravelにはBladeというテンプレートエンジンがある。

 

Bladeテンプレートとは？

Bladeテンプレートを使うとと、共通部分（ヘッダー、サイドバー、フッター等）は親ビューに記述し、各ページのコンテンツは親ビューを継承した小ビューに記述するというようなことができる。

また、ディレクティブ（@～）を使用することで「if」や「for」を簡潔に記述することが出来る。

テンプレートの拡張子は「.blade.php」とする。

 

ビューとは

ビューはアプリケーションのフロントエンドを担当する。

Laravelでは、表示用のテンプレートをあらかじめ用意し、それを利用して画面表示を行うことが可能。(Bladeテンプレート)

テンプレートは、「resources」フォルダ内にある「views」フォルダの中に配置する。また、PHPファイルとして作成する。

レイアウトという大枠を作ってそこにビューを組み込むのが一般的なやり方。

 

レイアウトの定義

以下の様に、レイアウトは大枠を定義する。

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel Quickstart - Basic</title>

        <!-- CSSとJavaScript -->
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- ナビバーの内容 -->
            </nav>
        </div>

        @yield('content')
    </body>
</html>

「@yield('content')」にビューを組み込んで内容を表示させる。

@yield('content')

ビューの定義

以下の様に画面に入力項目やボタンを追加する。

<!-- resources/views/tasks.blade.php -->
@extends('layouts.app')

@section('content')

    <!-- Bootstrapの定形コード… -->

    <div class="panel-body">
        <!-- 新タスクフォーム -->
        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- タスク名 -->
            <div class="form-group">
                <label for="task" class="col-sm-3 control-label">タスク</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- タスク追加ボタン -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> タスク追加
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection

「@extends('layouts.app')」は先ほどの「resources/views/layouts/app.blade.php」レイアウトを使用するという意味。

「@section('content')」から「@endsection」の内容を、先ほどのレイアウトで定義した「@yield('content')」の部分に挿入する。

 

ビューの表示

ルーティング機能を利用し、テンプレートの表示が可能。

Route::メソッド ( ※値 , function () ) {

    return view(テンプレート , [連想配列]);

});


第1引数：使用するテンプレートの名前を指定。

第2引数：テンプレートに渡す値を連想配列で指定。指定された連想配列の値は、そのままテンプレート内で使うことが可能。

※ルーティングで割り当てるアドレス

 

具体例は以下の通り。

Route::get('/', function () {
    return view('tasks');
});