Laravel – ビューの基礎

基本的なビューの表示方法

概要

routes/viewsディレクトリー下かそのサブディレクトリー下にビューファイルを置き、ルーティングでそれを指定する。

ビューファイル名には.blade.phpが付加され、HTML以外にLaravelの機能を持たせるための記述を含む、Bladeテンプレートとして扱われる。

ビューファイルは
- resources/viewsディレクトリー下、あるいはそのサブディレクトリー下に置く
- ファイル名は[ビュー名].blade.phpにする
ルーティングでビューファイルを指定するときは
- 無名関数の処理内容をreturn view('ビュー名');とする
  - ビュー名はビューファイル名から.blade.phpを除いたもの
- ビューファイルをサブディレクトリー下に配置した場合、resources/viewより下のパスを、デリミターを'.'として記述する

例1

Laravelプロジェクト生成直後に表示される”Laravel”の初期ページ。ルーティングファイルに以下だけ記述されている。

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

Route::get('/', function () {

return view('welcome');

});

また、resource/viewsディレクトリーにはwelcome.blade.phpファイルのみ準備されている。

[vagrant@localhost laravel_tutorial]$ ls resources/views
welcome.blade.php

1 2	[vagrant@localhost laravel_tutorial]$ ls resources/views welcome.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">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            .....
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            .....

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Docs</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://blog.laravel.com">Blog</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://vapor.laravel.com">Vapor</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel</title>

<style>

.....

</style>

</head>

<body>

.....

Laravel

</div>

<a href="https://laracasts.com">Laracasts</a>

<a href="https://forge.laravel.com">Forge</a>

<a href="https://vapor.laravel.com">Vapor</a>

<a href="https://github.com/laravel/laravel">GitHub</a>

</div>

</body>

</html>

例2

resourcesディレクトリーの下にsamplesディレクトリーをつくり、その中にview_sample.blade.phpというファイル名で以下の内容のファイルを作成する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>はじめてのView</title>
    <title>簡単なView</title>
  </head>
  <body>
    <h1>簡単なView</h1>
    <p>
      Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。
    </p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>はじめてのView</title>

<title>簡単なView</title>

</head>

<body>

<h1>簡単なView</h1>

<p>

Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。

</p>

</body>

</html>

routes/web.phpファイルに以下のルーティングを追加する。

Route::get('/view_sample', function() {
    return view('samples.view_sample');
});

Route::get('/view_sample', function() {

return view('samples.view_sample');

});

サーバーが起動している状態でブラウザーからドメイン/view_sampleにアクセスすると、view_sample.blade.phpがパースされて表示される。

この場合のビューファイルとview()メソッドでの指定の仕方は以下のとおり。

ビューファイルをviewsディレクトリーのサブディレクトリーsamples下に作成
- views/samples/view_sample.blade.php
view()メソッドで呼び出すときは'.blade.php'を除き、パスのデリミターを'.'にした形で指定
- samples.view_sample

URIの/view_sampleとファイル名のview_sample.blade.phpは必ずしも同じである必要はない。

変数の展開

概要

ビューファイル内に、PHPの変数を埋め込んで内容を反映させることができる。

ビューに対して変数を渡すときは、[変数名]=>[内容]を要素とする連想配列で渡す
ビュー側では、連想配列のキーが変数名、値が内容として解釈される
ビュー内で{{ 変数 }}とすると変数の内容が展開され、HTMLに埋め込まれる

例

resources/samplesディレクトリー下に、ファイル名blade_sample.blade.phpで以下の内容のファイルを作成する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="with=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $head }}</title>
  </head>
  <body>
    <h1>{{ $head }}</h1>
    <ul>
      <li>{{ $mechanism1 }}</li>
      <li>{{ $mechanism2 }}</li>
    </ul>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li>{{ $mechanism1 }}</li>

<li>{{ $mechanism2 }}</li>

</ul>

</body>

</html>

このビューに対して、routes/web.php内で以下の様にルーティングを設定。

Route::get('blade_sample', function() {
    $assoc_array = [
      'head' => 'bladeテンプレートでの変数展開',
      'mechanism1' => '連想配列をview()の第2引数に渡す',
      'mechanism2' => 'それを受け取ったビューでは、キーが変数名、値が変数の内容となる',
    ];
    return view('samples.blade_sample', $assoc_array);
});

Route::get('blade_sample', function() {

$assoc_array = [

'head' => 'bladeテンプレートでの変数展開',

'mechanism1' => '連想配列をview()の第2引数に渡す',

'mechanism2' => 'それを受け取ったビューでは、キーが変数名、値が変数の内容となる',

];

return view('samples.blade_sample', $assoc_array);

});

ビューファイルのパース時に変数が展開され、内容がHTMLに埋め込まれるため、ブラウザーでの表示結果は以下のようなイメージになる。

bladeテンプレートでの変数展開

連想配列をview()の第2引数に渡す
それを受け取ったビューでは、キーが変数名、値が変数の内容となる

出力エスケープ

変数埋め込みで内容を展開する際、HTML特殊文字はエンティティーに変換されるが、エスケープを抑制してHTML特殊文字をそのまま出力する方法もある。

概要

ビューで{{ ... }}とするとHTMLの特殊文字はLaravelによってエスケープされる
{!! ... !!}とするとHTMLの特殊文字はエスケープされず、HTMLとして機能する

例

ルーティングファイルweb.phpに以下の2行を追加する。

Route::get('blade_sample', function() {
    $assoc_value = '変数内容になる値は、リテラルでも任意の前の変数でもよい';
    $assoc_array = [
      'head' => 'bladeテンプレートでの変数展開',
      'mechanism1' => '連想配列をview()の第2引数に渡す',
      'mechanism2' => 'それを受け取ったビューでは、キーが変数名、値が変数の内容となる',
      'escaped' => 'HTML特殊文字は<strike>自動的に</strike>エスケープされる',
      'unescaped' => '{{...}}}ではなく{!!...!!}で囲むとエスケープ<strike>される</strike>されない',
    ];
    return view('samples.blade_sample', $assoc_array);
});

Route::get('blade_sample', function() {

$assoc_value = '変数内容になる値は、リテラルでも任意の前の変数でもよい';

$assoc_array = [

'head' => 'bladeテンプレートでの変数展開',

'mechanism1' => '連想配列をview()の第2引数に渡す',

'mechanism2' => 'それを受け取ったビューでは、キーが変数名、値が変数の内容となる',

'escaped' => 'HTML特殊文字は<strike>自動的に</strike>エスケープされる',

'unescaped' => '{{...}}}ではなく{!!...!!}で囲むとエスケープ<strike>される</strike>されない',

];

return view('samples.blade_sample', $assoc_array);

});

また、先に作成したビューファイルblade_sample.blade.phpに以下の2行を追加する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="with=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $head }}</title>
  </head>
  <body>
    <h1>{{ $head }}</h1>
    <ul>
      <li>{{ $mechanism1 }}</li>
      <li>{{ $mechanism2 }}</li>
    </ul>
    <p>{{ $escaped }}</p>
    <p>{!! $unescaped !!}</p>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li>{{ $mechanism1 }}</li>

<li>{{ $mechanism2 }}</li>

</ul>

<p>{{ $escaped }}</p>

<p>{!! $unescaped !!}</p>

</body>

</html>

この場合のブラウザーの表示結果は以下のイメージ。

bladeテンプレートでの変数展開

連想配列をview()の第2引数に渡す
それを受け取ったビューでは、キーが変数名、値が変数の内容となる

HTML特殊文字は<strike>自動的に</strike>エスケープされる

{{…}}}ではなく{!!…!!}で囲むとエスケープされるされない

Bladeテンプレート内にコメントを書くことができ、HTMLへのパース時にはコメント行は無視される。

概要

Bladeテンプレートのコメントは{{-- ... --}}で記述する
Bladeのコメントはパース後のHTMLには現れない

例

最初に使ったview_sample.blade.phpファイルに以下の2行を追加する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>はじめてのView</title>
    <title>簡単なView</title>
  </head>
  <body>
    <h1>簡単なView</h1>
    {{-- Blade用のコメント文はパース時に無視される --}}
    <!-- HTML用のコメントはHTMLソースに残る -->
    <p>
      Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。
    </p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>はじめてのView</title>

<title>簡単なView</title>

</head>

<body>

<h1>簡単なView</h1>

<p>

Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。

</p>

</body>

</html>

これがパースされた後のHTMLソースは以下の様になり、Blade用のコメントはソースに反映されていない。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>はじめてのView</title>
    <title>簡単なView</title>
  </head>
  <body>
    <h1>簡単なView</h1>
    
    <!-- HTML用のコメントはHTMLソースに残る -->
    <p>
      Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。
    </p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>はじめてのView</title>

<title>簡単なView</title>

</head>

<body>

<h1>簡単なView</h1>

<p>

Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。

</p>

</body>

</html>

ディレクティブ

概要

Bladeテンプレート内に条件分岐やループなどを行うディレクティブを書くことができる。

ディレクティブはBladeテンプレートに記述し、ロジック制御やレイアウト処理などPHPとしての処理を埋め込む
ディレクティブは@キーワード...のように記述する

例

まず、ルーティングでビューに配列を渡す。

Route::get('/directive_sample', function() {
  $dreams = ['一富士', '二鷹', '三茄子'];
  return view('samples.directive_sample', [
      'head' => '初夢',
      'dreams' => $dreams]);
});

Route::get('/directive_sample', function() {

$dreams = ['一富士', '二鷹', '三茄子'];

return view('samples.directive_sample', [

'head' => '初夢',

'dreams' => $dreams]);

});

ビューでは、配列の要素を一つずつ取り出して表示させている。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="with=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $head }}</title>
  </head>
  <body>
    <h1>{{ $head }}</h1>
    <ol>
      @foreach($dreams as $dream)
        <li>{{ $dream }}</li>
      @endforeach
    </ol>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<ol>

@foreach($dreams as $dream)

<li>{{ $dream }}</li>

@endforeach

</ol>

</body>

</html>

ここで使われている@foreachや@endforeachがディレクティブで、ビューの中でPHPの処理・制御をしたり、レイアウトを扱ったりすることができる。

ディレクティブの詳細はこちら。

レイアウト

レイアウトに関するディレクティブを使って、ファイルの共通のレイアウトをまとめることができる。

概要

共通レイアウトのビューを親とする
- プレースホルダーとして@yieldディレクティブを書く
- @yieldごとにその場所に入るべきセクション名を指定
共通レイアウトを利用するビューを子とする
- 親とするレイアウトビューを@extendsディレクティブで指定する
- 親の各@yieldに対応するセクションを@sectionディレクティブで定義し、その内容を記述する

例

共通のレイアウトとして、views/layouts/common.blade.phpを以下の内容で準備する。

titlle要素に'title'セクションの内容を反映
main要素に'content'セクションの内容を反映
header要素の部分は、このページが変わっても同じ内容が表示される

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>@yield('title')</title>
  </head>
  <body>
    <header style="background-color: #ccc">
      共通レイアウトに各ページ共通のヘッダーなどを置けます
    </header>
    <main>
      @yield('content')
    </main>
  </body>
</html>

<!DOCTYPE html>

<head>

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

</head>

<body>

共通レイアウトに各ページ共通のヘッダーなどを置けます

</header>

<main>

@yield('content')

</main>

</body>

</html>

この共通レイアウトを使うページを、views/samples/layout_sample.blade.phpとして以下の内容で準備する。

@extendsディレクティブで、レイアウトとして使うビューを指定している
1つ目の@sectionディレクティブでtitleセクションに反映させる内容を$title変数で与えている
2つ目の@sectionディレクティブでcontentsセクションに反映させる内容を記述している

{{-- レイアウトファイルを指定 --}}
@extends('layouts.common')

{{-- @yield('title') の内容 --}}
@section('title', $title)

{{-- @yield('content') の内容--}}
@section('content')
  <h1>{{ $title }}</h1>
  @for ($i = 1; $i <= 10; $i++)
      @if ($i % 3 == 0)
        <p>{{ $i }}は3の倍数</p>
      @elseif ($i % 5 == 0)
        <p>{{ $i }}は5の倍数</p>
      @endif
  @endfor
@endsection

@extends('layouts.common')

@section('title', $title)

@section('content')

<h1>{{ $title }}</h1>

@for ($i = 1; $i <= 10; $i++)

@if ($i % 3 == 0)

@elseif ($i % 5 == 0)

@endif

@endfor

@endsection

これらについて以下のルーティングを設定し、ブラウザーからアクセスする。

Route::get('/layout_sample', function() {
    return view('samples.layout_sample', [
        'title' => 'レイアウトの例',
    ]);
});

Route::get('/layout_sample', function() {

return view('samples.layout_sample', [

'title' => 'レイアウトの例',

]);

});

出力イメージは以下の様になる。

共通レイアウトに各ページ共通のヘッダーなどを置けます

bladeテンプレートでの変数展開

3は3の倍数
5は5の倍数
6は3の倍数
9は3の倍数
10は5の倍数

スタイル

概要

publicディレクトリー下、あるいはそのサブディレクトリー下にCSSファイルを配置する
linkタグでCSSファイルを指定する

publicディレクトリー以下に配置されたファイルをlinkタグで指定するには、以下の様に記述する。

<link rel="stylesheet" href="{{ asset('publicより下のパス') }}">

1	<link rel="stylesheet" href="{{ asset('publicより下のパス') }}">

例

たとえばpublicディレクトリー下にcssディレクトリーを作成し、その下にstayles.cssを作成、CSSを記述したとする。

このファイルをビューから呼び出すには、以下の様に記述する。

<link rel="stylesheet" href="{{ asset('css/styles.css') }}">

1	<link rel="stylesheet" href="{{ asset('css/styles.css') }}">

TauStation

Laravel – ビューの基礎

基本的なビューの表示方法

概要

例1

例2

変数の展開

概要

例

出力エスケープ

概要

例

コメント

概要

例

ディレクティブ

概要

例

レイアウト

概要

例

スタイル

概要

例

コメントを残すコメントをキャンセル

基本的なビューの表示方法

概要

例1

例2

変数の展開

概要

例

出力エスケープ

概要

例

コメント

概要

例

ディレクティブ

概要

例

レイアウト

概要

例

スタイル

概要

例

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル