HubLの変数と文字列の結合を楽に行う

HubLで変数と文字列の結合をするとき、通常は次のコードのように行うと思います。JavaScriptでいえば、いわゆるES5的な方法ですね。例えば今回は複数の変数を使用して、1つのclass属性値を作りたいとしましょう。コードの可読性のために、class属性内でhogeやfugaを展開するのはではなく、予めclass属性値を1つの変数にまとめる形とします。

{% set hoge = 'hoge' %}
{% set fuga = 'fuga' %}
{% set class_val = hoge + ' ' + fuga + ' piyo' %}

<p class="{{ class_val }}">テキストが入ります</p>
↓出力結果
<p class="hoge fuga piyo">テキストが入ります</p>

いかんせん、いちいちクォーテーションを切り替えて文字列を結合するのがめんどくさいですね。これを楽にする方法として、次の2つがあります。

JavaScriptのテンプレートリテラルっぽく記述する方法（ハック）

JavaScriptではES2015からテンプレートリテラルが導入され、こういうったケースの変数と文字列の結合がだいぶ楽になりました。実はHubLでも、書き方を工夫すると似たようことを実現できるようになります。class_valの定義を次のように記述します。

{% set class_val = '{{ hoge }} {{ fuga }} piyo' %}

ただしこれはハックレベルのものなので、今回のようなシンプルなコードでは動作しますが、この変数をまた別の変数に渡したりすると、期待通りに動作しません。

リストを作ってその場でjoinする方法

こちらは公式ドキュメントに記載されている方法の組み合わせですので、胸を張ってオススメできます。一時的にリストを作成し、その場でjoinフィルタを使って文字列として結合します。次のようなコードです。

{% set hoge = 'hoge' %}
{% set fuga = 'fuga' %}
{% set class_val = [hoge, fuga, 'piyo']|join(' ') %}

<p class="{{ class_val }}">テキストが入ります</p>
↓出力結果
<p class="hoge fuga piyo">テキストが入ります</p>

これだけのシンプルな方法ですが、これをするだけでそれなりに開発が楽になり、またコードの可読性が向上することによりミスも減ると思います。ぜひご活用ください。