TwigのHTMLエスケープとrawフィルタの使い方を完全解説！初心者にもわかるテンプレート表示のコツ
生徒
「SymfonyのTwigテンプレートで、HTMLがそのまま表示されず文字として出ちゃうんですけど、どうしたらいいですか？」
先生
「Twigでは、セキュリティのために自動でHTMLをエスケープして表示しているんですよ。」
生徒
「なるほど…でもHTMLとして表示したいときはどうしたらいいんですか？」
先生
「その場合は|rawというフィルタを使えば、HTMLがそのまま表示されるようになりますよ！」
1. Twigのエスケープとは？
SymfonyのテンプレートエンジンであるTwigでは、セキュリティの観点から、変数の中身をそのままHTMLに出力するときに自動的にエスケープされます。エスケープとは、「HTMLタグとして解釈されるのを防ぐために、安全な文字に置き換えること」です。
例えば、変数に<strong>重要</strong>という文字列が入っていたとしても、そのままでは画面上には以下のようにタグが文字として表示されてしまいます。
<strong>重要</strong>
これは、Twigが自動でHTMLをエスケープして表示しているからです。ユーザーが入力した危険なコードを表示しないための仕組みで、とても大切なセキュリティ対策です。
2. HTMLとして表示したいときは「|raw」
ただし、場合によってはHTMLタグとして表示したいこともあります。たとえば、太字や改行を表示したい場合ですね。そういったときは、Twigの|rawフィルタを使えばOKです。
使い方はとても簡単です。変数の出力に|rawをつけるだけで、その中のHTMLがエスケープされずそのまま出力されます。
{{ message|raw }}
例えば、コントローラから以下のようなHTMLを含んだ文字列を渡したとします。
// コントローラ（PHP）
$message = '<p>ようこそ！</p>';
return $this->render('sample.html.twig', [
'message' => $message
]);
通常はエスケープされて、以下のように文字列のまま表示されます。
<p>ようこそ！</p>
しかし、Twigで|rawをつけて表示すると、次のようにHTMLとして解釈されて表示されます。
ようこそ！
3. |rawを使うときの注意点
|rawは便利ですが、絶対に注意しなければならない点があります。それは、「ユーザーが入力したデータには使わない」ということです。
もし、ユーザーがフォームなどで悪意あるスクリプト（例：<script>悪いコード</script>）を入力してしまった場合、それを|rawで表示してしまうと、クロスサイトスクリプティング（XSS）というセキュリティの脆弱性につながります。
そのため、|rawを使うのは、自分で用意した安全なHTMLだけにしましょう。
4. |rawを使った具体例
ここでは、HTML付きのメッセージを表示する簡単な例を見てみましょう。
// コントローラ（Controller）
$notice = '<p class="text-success">保存が完了しました！</p>';
return $this->render('page.html.twig', [
'notice' => $notice
]);
Twigテンプレートでは次のように|rawを使います。
{{ notice|raw }}
表示結果は以下のようになります。
保存が完了しました！（緑色で表示）
5. TwigとHTMLの関係を理解しよう
HTMLはウェブページを構成するための言語で、TwigテンプレートはそのHTMLをより動的に作るための仕組みです。Twigでは変数を簡単に表示できますが、セキュリティを守るために、表示される内容はHTMLとして解釈されず、文字列として安全に出力されます。
HTMLを意図的に表示したいときだけ、|rawを使い、その他はTwigの自動エスケープに任せるのがベストプラクティスです。
