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

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

前提

ファイル構成

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

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

ルーティング

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

変数展開

表示

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

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

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

エンコードなし

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

JavaScriptのエンコードの例

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

実行結果

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

コメント

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

jsonエンコード

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

javascriptへデータを渡す

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

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.