Laravel
投稿日
投稿者 dennie

【Laravel】Bladeテンプレート データ展開

Laravelのbladeテンプレートはデータの表示に関しても便利な機能が多くあります。
今回はbladeテンプレートにおけるデータ展開について説明します。

前提

ファイル構成

今回使用するファイルの構成は以下の通りです。

ファイル名 説明
resources/views/layouts/main.blade.php 親ビュー(レイアウトファイル)
resources/views/expansion/data_expansion.blade.php 子ビュー(コンテンツファイル)
routes/web.php ルーティングファイル

ルーティング

ルーティングは以下の通りです。 

Route::get('/data_expansion', function () {
    return view('expansion.data_expansion');
});

変数展開

表示

{{}}を使用すると、変数の内容を表示します。 

@extends('layouts.main')
@php
  $value = 'アイウエオ';
@endphp

@section('content')

  {{-- 変数展開します。 --}}
  <p style="color:#008080">{{$value}}</p>

@endsection

クロスサイトスクリプティング(XSS)への対応

自動的にphpのhtmlspecialcharsが使用され変数の内容を表示します。
クロスサイトスクリプティング(XSS)については、クロスサイトスクリプティングを根絶しよう 【説明編】 を参照して下さい。

エンコードなし

先ほどの説明にもありましたが、LaravelのBladeテンプレートはXSSに対応しています。その為、{{ }} で値を表示する場合、Java Scriptのソースコードはエンコードされ、無効化されてしまいます。
JavaScriptを使用したい(エンコードしたくない)場合、{!! !!} を使います。

JavaScriptのエンコードの例

以下の例は、ボタンを押すとアラートを表示します。
エンコードした場合、JavaScriotのソースコードが文字列として画面に表示されます。 

@extends('layouts.main')
@php
  $htmlValue = "<input type='button' value='click' onclick='sample()'>";
@endphp

@section('content')

  {{-- 以下は、エスケープなし。 --}}
  {!!$htmlValue!!}

  {{-- 以下は、エスケープあり。 --}}
  {{$htmlValue}}

  <script>
    function sample(){
      alert('アラート');
    }
  </script>

@endsection

実行結果

エンコードしない場合、ボタンが表示されます。
一方で、エンコードした場合JavaScriotのソースコードが文字列として画面に表示されます。

コメント

コメントを記載するには{{– コメント –}} を使います。
今までの例の中でコメントを使用しているので、そちらを参考にして下さい。

jsonエンコード

@jsonディレクティブを使用すると、Jsonエンコードします。
以下は、@jsonディレクティブを使用した例です。php関数のjson_encodeを使用した例も同時に記載しています。
結果は同じになります。 

@extends('layouts.main')
@php
  $arrayValue = [
    'data1' => 'さし',
    'data2' => 'すせ',
  ];
@endphp

@section('content')

  <script>

    var data = @json($arrayValue);
    console.log(data);

    var app = <?php echo json_encode($arrayValue); ?>;
    console.log(app);

  </script>

@endsection

javascriptへデータを渡す

Javascriptへデータを渡す場合、{{}}を'(シングルクォート)で囲います。 

@extends('layouts.main')
@php
  $value = 'アイウエオ';
@endphp

@section('content')

  <p id='test' style="color:#808000"></p>

  <script>

    var value = '{{$value}}';
    document.getElementById("test").innerHTML = value;

  </script>

@endsection

javascriptフレームワークへの対応

変数単位の対応

Vue.jsのようなjavascriptフレームワークでは、{{}}を使用します。
この場合、{{}}はbladeで変数展開したくないです。
@{{}}と記載すればbladeは{{}}の変数展開を行いません。

ディレクティブ単位の対応

@verbatimディレクティブを使用すると、@verbatimディレクティブ内の{{}}は変数展開されません。

Viewのキャッシュ

Viewはキャッシュされます。
LaravelはViewが呼び出されると、bladeファイルがphpへコンパイルされ、その結果をキャッシュとして保持します。
その為、毎回bladeファイルがphpへコンパイルされることはないので高速です。
キャッシュが変更されるタイミングはbladeファイルを更新し、viewを呼び出した時です。
Viewのキャッシュは storage/framework/views にあります。
画面が変わらない場合、キャッシュをクリアしましょう。

まとめ

特にありません。

© DeNnie.Lab All Rights Reserved.