🔽

【Laravel11】Bladeで簡単に改行を実装する方法（nl2br）

tatata-keshi

2024/11/15に公開

Laravel

PHP

tech

 はじめにこんにちは！tatata-keshiです 😃

今回は、LaravelのBladeテンプレート上で改行を表示する方法について解説します ✨

 環境OS: macOS Sonoma 14.6.1
Laravel: 11.23.5
PHP: 8.3.11

 テキストが改行されない！Webアプリケーションを作成する中で、↓のように改行を含めたテキストを保存・表示させたいケースってありますよね？

しかし実際に投稿されたテキストを表示させようとすると、このように改行されていたはずの投稿が改行されない😨という経験はありませんか？

投稿を表示させるテーブルのコードは以下のようになっています。これを、改行して表示できるように変更していきます👍
index.blade.php
<table>
    <tr>
        <th>id</th>
        <th>本文</th>
    </tr>
    @foreach($posts as $post)
        <tr>
            <td>{{ $post->id }}</td>
            <td>{{ $post->body }}</td>
        </tr>
    @endforeach
</table>

 本文を改行して表示させる一覧画面のbladeファイルindex.blade.phpの中で、投稿の本文を表示させているのはこの行です。
index.blade.php
<td>{{ $post->body }}</td>
改行して表示させるには、先ほどのindex.blade.phpの記述を以下のように変更してください。
index.blade.php
<td>{!! nl2br(e($post->body)) !!}</td>
書き換えてページを再読み込みさせると以下のように投稿内容が改行を含んだ状態で正しく表示されます🙌

 解説
 nl2br()
今回の肝となる関数です。このnl2br()関数は、渡された文字列に改行文字（\nなど）が含まれる場合、その前に<br>タグを挿入して返す関数です。

これにより、改行表示ができるようになります！
↓ドキュメント

PHP: nl2br

 {!! !!}
通常Controllerから渡された変数をblade上で表示させる際などには、{{ }}というように囲みますよね？しかし、先述のnl2br()関数を通した後の文字列を{{ }}で囲った場合、以下のように表示されてしまいます😢

これは、{{ }}がhtmlタグをエスケープする役割を持っているからです。逆に{!! !!}で囲った場合、htmlタグはエスケープされません。今回の場合、nl2br()関数により生成されたbrタグはエスケープされて欲しくないため、{!! !!}を用いて囲います。

 e()
普段{!! !!}ではなく{{ }}を用いているのは、XSS攻撃を防ぐためです。逆に言えば、ただnl2br()関数を通しただけの文字列を{!! !!}で囲うのはとても危険な行為なのです😨
このようにscriptタグを含めた投稿を作成します。

するとscriptタグがエスケープされていないのでwindow.alert()が実行されてしまいます🥺

そこでこのe()関数を用います。この関数はドキュメントでは以下のように解説されています。

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

Laravel11: e()

PHP: htmlspecialchars

 おわりにこのように、nl2br関数を活用することで文字列を改行して表示させることができます🙌 ただし、XSS攻撃を防ぐためエスケープ処理は忘れず組み込むようにしましょう👍