LoginSignup
26

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-09-28

この記事は,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"

とする。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26