15
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Slim で autofocus のような論理属性を書く

Last updated at Posted at 2016-09-10

Slim で autofocus などの論理属性を書く方法をまとめた。

論理属性って?

例えば,ページのロード時に,特定の入力欄にオートフォーカスさせたいとき,HTML で以下のように書く。

HTML
<input type="text" name="keyword" autofocus>

また,チェックボックスにチェックを入れておきたいなら

HTML
<input type="checkbox" name="accept" value="yes" checked>

などと書く。

これらの属性は「論理属性」(boolean attributes)と呼ばれており,何かが「有効」か「無効」かを指定する。ちょっと変わっているのは,属性値で有効/無効を切り替えるのではなく,属性が書かれていれば有効,そうでなければ無効となる点だ。

論理属性にはほかにも disabledmultiple などがある。

Slim でどう書く?

もちろん,Slim コード中に上記の HTML タグをじかに書くことはできるが,Slim の文法に従うならどう書けるだろう?

autofocus」の部分が問題だ。このように,値を与えず属性名だけを書くには,属性部分を括弧で囲む必要がある。

Slim
input(type="text" name="keyword" autofocus)

属性部分を囲む ( ) を attribute wrapper と呼ぶようだ。属性囲み記号とでも呼べばいいのかな?

( ) のほかにも [ ]{ } が使える。つまり,以下のようにも書ける。

Slim
input[type="text" name="keyword" autofocus]
Slim
input{type="text" name="keyword" autofocus}

別の書き方

ところで attribute wrapper を使わない書き方もできる。

そのために,HTML の論理属性についてもう少し知ろう。

実は以下の三つの書き方ができる。このうち,どれを使っても autofocus が有効になる。

HTML
<!-- 空の属性値を与える -->
autofocus=""

<!-- 属性名をそのまま属性値にもする -->
autofocus="autofocus"

<!-- 属性名のみ -->
autofocus

1 番目,2 番目の書き方を使うと,Slim では以下のように書ける。

Slim
input type="text" name="keyword" autofocus=""
Slim
input type="text" name="keyword" autofocus="autofocus"

ちなみに autofocus= の右に書いた "" とか "autofocus" ってのは,Ruby の式(いまの場合は文字列リテラル)だ。

もう一つの書き方

さらにもう一つの書き方を紹介しよう。このやり方は,とくに式の値の真偽で論理属性の有効/無効を切り替えたいときに便利だ。

〈式 ex の値が真なら autofocus を有効にし,偽なら無効にする〉という Slim コードは,ここまでの知識だけ使っても,以下のように書ける。

Slim
input type="text" name="keyword" autofocus=(ex ? "" : nil)

ex が真なら autofocus に空文字列が与えられるから

HTML
<input type="text" name="keyword" autofocus="">

になる。

ex が偽なら autofocusnil が与えられるが,Slim の規則では属性値が偽のとき,属性そのものが無くなるから,

HTML
<input type="text" name="keyword">

になる。

だけど,(ex ? "" : nil) はちょっと複雑すぎやしないか?

実は Slim では,属性値として true を与えると,論理属性の有効化とみなしてくれることになっている。
気を付けてほしいのは "true" という文字列ではなく Ruby のオブジェクト true だということだ。そして,真なら何でもいいわけではなく,true でなければならない。

この規則を使うと,

Slim
input type="text" name="keyword" autofocus=!!ex

と書ける。

!!ex という Ruby の式は,二重否定により ex の真/偽を true/false にしてくれるものだ。

参考

以下はいずれも Slim のリファレンス。

追記(2016-09-15) 論理属性と紛らわしいもの

論理属性は,値に true/false を持つ列挙型の属性とは違うことに注意しよう。紛らわしいね。

たとえば,スペルチェックを利かすかどうかを制御する spellcheck 属性は論理属性ではなく列挙型属性であり,値として true または false を取る。

この場合,Slim では以下のように文字列"true" または "false" を与えてやらねばならない。

Slim
textarea name="comment" spellcheck="false"
15
12
0

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
15
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?