2016/06/02 (2016年06月 のアーカイブ)
今更ながらHTMLタグの属性の型の話
何を今更という感じもあるのだけどHTMLの文法で、はたと困った事がありまして....
<option selected> オプション1 </option>
<button disabled> ボタン </button>
<option selected="false" >aaaa</option><option selected="0" >aaaa</option>
https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
何にしてもブラウザがそう解釈するなら使う側としてはそう書くまでなのですが.... ここでWebComponentsのカスタムエレメントですよ。
ライブラリとしてはPolymerとかを使う事になると思いますが、
「ユーザーが自由に新しいタグを定義できます!!
これがあればあんなタグやこんなタグが作り放題。すばらしい。すばらしい...のだけどその裏にはタグの属性はどうあるべきか、みたいな事を考える責任もついてくるわけですね。
Polymerの書式では例えば、
properties:{
width: {type:Number, value:100},
text: {type:String, value:"xxxxx"},
enable: {type:Boolean, value:false},
}
enable: {type:Boolean, value:true},
それぞれの型の属性でHTMLに書いた値がPolymerのコード側にどう渡ってくるかというとこうなります。
宣言 | HTMLでの記述 <tag attr="xxx"> | |||||||
---|---|---|---|---|---|---|---|---|
型 | 初期値 | 記述なし | 属性名のみ | ="false" | ="true" | ="0" | ="1" | |
Boolean | false | false | true | true | true | true | true | |
Boolean | true | true | true | true | true | true | true | |
Number | 0 | 0 | 0 | NaN | NaN | 0 | 1 | |
Number | 1 | 1 | 0 | NaN | NaN | 0 | 1 | |
String | "false" | "false" | "" | "false" | "true" | "0" | "1" | |
String | "true" | "true" | "" | "false" | "true" | "0" | "1" |
どうだろうなあ、将来的にオン/オフ以外の状態の拡張の可能性があるなら String にしておくというのも良いかも知れないけどパースするのも面倒だし、わざわざ標準のBooleanと挙動の違うものを作るというのもねぇ。 本来どうあるべきかという話でいえば、これはやはり Boolean 型にすべきでしょう。ただし、前述のように明示的に false にはできませんので、デフォルト値が false で属性名を書いたら true になるという動作になります。
つまり、標準的にオンになっている機能に対して "enable" という属性名を付けるのがよろしくないのであって、属性名を "disabled" にして不要な時だけディセーブルにする、というのが正解なのではないかと思います。
属性の型をどうするか考えてただけのはずなのにいつの間にか属性の名前も考え直さないといけなくなってたぜ!!
しかしまあ、WebComponentsを見て「やったー、これで独自のタグをがしがし作れるぜー!!」という状況の中でここまで気が回せるかと言うと、まあ無理かなと。しばらく経ってからこれはまずかったなぁと後悔する事になるわけです。 気がついたらその時直せば良い話ではあるのですが、ものが共通部品的なものなので影響を受ける範囲が広がってしまっていない事を祈りましょう。
本当に便利に使える共通部品を作るために必要な時間と労力って思っている以上に大変なもんです。
Posted by g200kg : 2016/06/02 10:30:57