Slim で autofocus などの論理属性を書く方法をまとめた。
論理属性って?
例えば,ページのロード時に,特定の入力欄にオートフォーカスさせたいとき,HTML で以下のように書く。
<input type="text" name="keyword" autofocus>
また,チェックボックスにチェックを入れておきたいなら
<input type="checkbox" name="accept" value="yes" checked>
などと書く。
これらの属性は「論理属性」(boolean attributes)と呼ばれており,何かが「有効」か「無効」かを指定する。ちょっと変わっているのは,属性値で有効/無効を切り替えるのではなく,属性が書かれていれば有効,そうでなければ無効となる点だ。
論理属性にはほかにも disabled
,multiple
などがある。
Slim でどう書く?
もちろん,Slim コード中に上記の HTML タグをじかに書くことはできるが,Slim の文法に従うならどう書けるだろう?
「autofocus
」の部分が問題だ。このように,値を与えず属性名だけを書くには,属性部分を括弧で囲む必要がある。
input(type="text" name="keyword" autofocus)
属性部分を囲む ( )
を attribute wrapper と呼ぶようだ。属性囲み記号とでも呼べばいいのかな?
( )
のほかにも [ ]
と { }
が使える。つまり,以下のようにも書ける。
input[type="text" name="keyword" autofocus]
input{type="text" name="keyword" autofocus}
別の書き方
ところで attribute wrapper を使わない書き方もできる。
そのために,HTML の論理属性についてもう少し知ろう。
実は以下の三つの書き方ができる。このうち,どれを使っても autofocus
が有効になる。
<!-- 空の属性値を与える -->
autofocus=""
<!-- 属性名をそのまま属性値にもする -->
autofocus="autofocus"
<!-- 属性名のみ -->
autofocus
1 番目,2 番目の書き方を使うと,Slim では以下のように書ける。
input type="text" name="keyword" autofocus=""
input type="text" name="keyword" autofocus="autofocus"
ちなみに autofocus=
の右に書いた ""
とか "autofocus"
ってのは,Ruby の式(いまの場合は文字列リテラル)だ。
もう一つの書き方
さらにもう一つの書き方を紹介しよう。このやり方は,とくに式の値の真偽で論理属性の有効/無効を切り替えたいときに便利だ。
〈式 ex
の値が真なら autofocus
を有効にし,偽なら無効にする〉という Slim コードは,ここまでの知識だけ使っても,以下のように書ける。
input type="text" name="keyword" autofocus=(ex ? "" : nil)
ex
が真なら autofocus
に空文字列が与えられるから
<input type="text" name="keyword" autofocus="">
になる。
ex
が偽なら autofocus
に nil
が与えられるが,Slim の規則では属性値が偽のとき,属性そのものが無くなるから,
<input type="text" name="keyword">
になる。
だけど,(ex ? "" : nil)
はちょっと複雑すぎやしないか?
実は Slim では,属性値として true
を与えると,論理属性の有効化とみなしてくれることになっている。
気を付けてほしいのは "true"
という文字列ではなく Ruby のオブジェクト true
だということだ。そして,真なら何でもいいわけではなく,true
でなければならない。
この規則を使うと,
input type="text" name="keyword" autofocus=!!ex
と書ける。
!!ex
という Ruby の式は,二重否定により ex
の真/偽を true
/false
にしてくれるものだ。
参考
以下はいずれも Slim のリファレンス。
追記(2016-09-15) 論理属性と紛らわしいもの
論理属性は,値に true
/false
を持つ列挙型の属性とは違うことに注意しよう。紛らわしいね。
たとえば,スペルチェックを利かすかどうかを制御する spellcheck
属性は論理属性ではなく列挙型属性であり,値として true
または false
を取る。
この場合,Slim では以下のように文字列の "true"
または "false"
を与えてやらねばならない。
textarea name="comment" spellcheck="false"