Edited at

Slim の属性値指定のちょっといい話

More than 1 year has passed since last update.

この記事は,Slim を既にちょっぴり知っている方向けに,属性値の書き方で「へえ,そう書けるんだ。いいね」的な小ネタを若干拾ったもの。

Slim をご存じない方へ

Slim は簡潔な記述と高速変換を特長とする,HTML,XML 向けの Ruby 製テンプレートエンジン。

(2017-02-07 追記)Slim のより良い書き方を集めた下記の記事もご覧ください。

Slim コードのリファクタリング - Qiita


属性値の文字列化

属性値は自動的に文字列化してくれる。従って,

td colspan="2"

などと書かなくても

td colspan=2

でいい。もちろん

td colspan=(n+2)

みたいな式を書いたり,

- [:name, :age].each do |field_name|

div class=field_name = params[field_name]

みたいにシンボルを与えてもいい。

ちなみに属性値に nilfalse を与えると,属性自体が出力されない。つまり,

div class=nil

<div></div>

となる。


クラスのマージ

例えば

div class="foo" id="bar" class="baz"

のように二つの class を書いても

<div class="foo baz" id="bar"></div>

のように,まとめてくれる。

クラスのドット記法を混ぜて

div.foo class="bar"

と書いても期待通り

<div class="foo bar"></div>

のようにまとめてくれる。


クラスを追加

変数 is_happy が真のときだけ happy クラスを追加したいとき,

div.item class=('happy' if is_happy)

みたいに書ける。Ruby って,is_happy が偽のとき

'happy' if is_happy

の評価値は nil だよね。だから,上記のような Slim コードは,is_happy が真のときは

<div class="item happy"></div>

となり,偽のときは

<div class="item"></div>

となる。まったくもって期待通り!


追記(2016-02-14)


属性値が "false" の場合

属性値として "true", "false" を取る列挙型属性がある。これは要注意。

例えば,textarea などでスペルチェックを行うかどうかを指定する spellcheck 属性 がこれにあたる。

以下のようにすれば,(ブラウザーが対応していれば)スペルチェックが無効になる。

<textarea spellcheck="false"></textarea>

しかし,これを Slim で書くのに

textarea spellcheck=false

とやったのではダメ。= の右側は Ruby の式として評価され,false は偽なので以下のように属性自体が無くされてしまう。(nil も同じ)

<textarea></textarea>

正しくは

textarea spellcheck="false"

のように,文字列リテラルで与える。

同じように,"true"

textarea spellcheck=true

はダメ。これだと

<textarea spellcheck=""></textarea>

のようになってしまう。正しくは

textarea spellcheck="true"

とする。