Laravel：改行コードを含んだ変数をBladeで表示させる

BPSの福岡拠点として一緒にお仕事させて頂いてます、株式会社ウイングドアのソノダです。

今回、Laravelで改行コードを含む変数を、
Bladeできちんと改行表示させる方法についてご紹介したいと思います。

Bladeで変数を表示させようとしたときに、改行コード(\n)を渡したはずなのに、
「\nがそのまま表示されてる！」
「ソースで見ると改行されてるのにHTML上だと改行されてない！」
となって、その仕組みが分からなかったので…💦

ちゃんと改行されるように修正しよう！というところで、
調べたことの備忘録がてら、記事にさせていただきます。

結論

前提として、改行コード付きの変数は、
「シングルクォーテーションではなくダブルクォーテーションで囲む」必要があります。

$true_text = "一行目\n二行目\n三行目";   // \nが改行として機能する⭕️
$false_text = '一行目\n二行目\n三行目';   // \nが改行として機能しない❌

Bladeで改行コード付きの変数を表示させる場合は、以下のようになります。

{!! nl2br(e($変数)) !!}

なぜ改行コードをダブルクォーテーションで囲む必要があるのか、
なぜBlade側の表記が通常({{ $変数 }})と異なるのかを、調べた範囲でご説明していきます。

変数の設定

PHPの規約上、改行コード\nやタブ\tなどの、「\」を含む特殊文字は
ダブルクォーテーションで囲ってエスケープしないと機能しないようです。

文字列が二重引用符 (") で括られた場合、
PHP は、以下のエスケープシーケンスを特殊な文字として解釈します。

参考：PHPマニュアル…文字列（二重引用符）

シングルクォーテーションで囲った場合は、
\nが文字列として扱われるので、そのまま表示されてしまいます。
ですので、\nを改行コードとして機能させたい場合には、""で囲む必要があります。

// 特殊文字を""で囲った場合
$true_text = "一行目\n二行目\n三行目";
    // echo $true_text; の結果
    // 一行目
    // 二行目
    // 三行目

// 特殊文字を''で囲った場合
$false_text = '一行目\n二行目\n三行目';
    // echo $false_text; の結果
    // 一行目\n二行目\n三行目 

しかし❗️
PHP上で動作確認をすると改行されているように見えますが、これだけではまだ足りず…。
BladeのPHPデフォルト表記{{ }}では、viewで正しく表示されませんので、
正しく改行を出力する際には以下の設定が必要となります！

Blade側：変数表示の設定

通常、BladeでPHPの変数を出力する場合は{{ $変数 }}となります。
今回は、改行コードを含む変数を、改行表示させたいので、
デフォルトの表記から大きくわけて3つ変更があります。

1. 改行文字\nの前にHTMLの改行タグ(<br>)を挿入する
2. 特殊文字(<br>)をエスケープしないようにする
3. <br>以外をエスケープさせる

ちなみに今回目指す最終形がこちらになります↓

{!! nl2br(e($変数)) !!}

1. 改行文字の前にHTMLの改行タグを挿入する

nl2br($変数)

// Blade側での記述例：{{ nl2br($変数) }}

参考：PHPマニュアル…nl2br

BladeはベースがHTMLであるため、改行には<br>タグが必要が必要となります。

こちらのnl2br()関数を使うことで、
変数内の改行文字\nの前に、改行タグ「<br>」が挿入されます。

2. 特殊文字をエスケープしないようにする

{!! $変数 !!}

// Blade側での記述例：{!! nl2br($変数) !!}

BladeのPHPデフォルト表記{{ }}は優れモノでXSS攻撃を防いでくれますが、
その処理内で特殊文字がエスケープされてしまい、改行が機能しません。
（今回の場合だと<br>タグのカッコ部分がエスケープされてしまいます）

Bladeの{{ }}記法はXSS攻撃を防ぐため、
自動的にPHPのhtmlspecialchars関数を通されます。

参考：Laravel…Bladeテンプレート

こちらの{!! !!}記法ですと、エスケープせずに変数を使用することができます⭕️

3. <br>以外をエスケープする

e($変数)

// Blade側での記述例：{!! nl2br(e($変数)) !!}

2で、XSS攻撃を防いでくれる{{}}ではなく、{!! !!}を使用したため、
ユーザーの入力を表示する際などに、スクリプトタグなどが埋め込まれていた場合、危険が生じます。

ですので、e()関数を使用し、
nl2br()で付いた<br>タグ以外をエスケープさせてXSS攻撃から保護します。

e関数は、PHPのhtmlspecialchars関数を
double_encodeオプションにデフォルトでtrueを指定し、実行します。

参考：Laravel…ヘルパ関数（e）

完成形

{!! nl2br(e($変数)) !!}

以上３つの関数・表記方法を組み合わせることで、Bladeで改行表示をすることができます🎉

最後に

LaravelのBladeで、改行コードを含む変数を表示させる方法についてご紹介しました。

素のBladeだと<br>タグでなんなく改行できるのに、
改行を含んだ変数だと一工夫必要になるんだなぁ…としみじみ思いました🤔

自分自身まだまだ経験不足で、知らないことがたくさんあるので、これから様々な案件に関わって、
コーディングの方法や規則などについて知見を広げていけたらと思います！

---

株式会社ウイングドアでは、Ruby on RailsやPHPを活用したwebサービス、webサイト制作を中心に、
スマホアプリや業務系システムなど様々なシステム開発を承っています。