[Twig]空白(space)の制御の方法

コーディングをしていると、htmlタグ間のスペースや、改行などを削除したいときがあると思います。
Twigでの空白の制御について解説します。

空白制御修飾子「-」を使う方法:空白の削除

Twigのタグや変数の記述に修飾子-を使用することで空白を削除することが可能です。

使用例

{% set foo = 'test' %}

// sample1 remove all whitespace (including newlines)
<li>
    {{- foo }}    </li>
// result
<li>test    </li>

// sample2 removes all whitespace (excluding newlines)
<li>
    {{~ foo }}    </li>
// result
<li>
test</li>

サンプルを見ていただくとわかる通り、-を付けた側のスペース(改行)が削除されます。

Filterを使って空白を制御する

spacelessフィルターを使うことでも空白を削除することができます。
この場合は、フィルターが適用された値に対して、空白を削除します。

{{ "<div>
        foo
    </div>
    "|spaceless }}

// result
<div>foo</div>

上記のように使用します。
applyタグを使うことでタグで囲った部分すべてに適用できます。

{% apply spaceless %}
    <div>
        foo bar
    </div>
{% endapply %}

// result
<div>foo bar</div>

applyはフィルターを囲った部分に対して適用してくれるタグです。
他のフィルターでも使えるので覚えておくと便利です。

※Twig 2.xの時は、{% spaceless %}というタグがありました。
上記applyと同様に機能します。

Twigおすすめの書籍

Twigだけに特化した書籍は読んだことがないのですが、AmazonのKindleにありました。
これと同じくらいブログでまとめられたらと思います。

テンプレートエンジンTwigを覚える本