Pug+Bladeで要素の属性を設定したりしなかったりする

はじめに

Pugを使うと、HTMLを直接記述するよりもシンプルにコードを書くことができる。
しかし、Blade等のテンプレートエンジンと組み合わせるとなると、思うように書けなくなることもある。
今回、職場の先輩に解決してもらった厄介な問題について書きたいと思う。

分かりやすい例

<div class="@if($flag) class-A @endif">
  <!-- ... -->
</div>

$flagがtrueの時のみclass-Aを付与したいというとき、このように書くことができる。

div(class="@if($flag) class-A @endif")
  // ...

このように、属性の内容を操作することについては、資料が多いこともあり、恐らくそこまで苦戦せずに辿り着くことができる筈である。

本題

今回書きたいのは、Bladeの条件分岐で属性そのものを付与する場合の話である。

例えばラジオボタンのようなinput要素にBladeの条件分岐でchecked属性を付与する場合であるが、HTMLに詳しくなければまずこのようにしようとするだろう。

input(type="radio" name="example" value="0" checked="@if($flag) checked @endif")

これは次のように変換される。

<input type="radio" name="example" value="0" checked="@if($flag) checked @endif">

もし$flagがfalseならば、ブラウザ上では次のように表示される。

<input type="radio" name="example" value="0" checked="">

しかし、これではラジオボタンが選択された状態になってしまう。checked属性は存在するだけで選択された状態にしてしまうのだ。
このように、属性そのものの付与を条件分岐させたい場合が存在する。
これは次のようにして解決することができる。

input(type="radio" name="example" value="0" "@if(flag) checked @endif")

属性="..."の形ではなく、()内に直接ダブルクオートで括った判定条件を書き込むことで、属性そのものの付与を条件分岐させることができる。

おわりに

この方法を知る前、どのサイトを調べても情報が見つからず、しかし実装できなければ記述が煩雑になってしまうと、困り果てていました。
そんな中、時間を割いてこの方法を見つけて下さった先輩に深く感謝しています。ありがとうございました。