今更ながらHTMLタグの属性の型の話

何を今更という感じもあるのだけどHTMLの文法で、はたと困った事がありまして….

 <option selected> オプション1 </option> 

とか

<button disabled> ボタン </button>

のようなタグの属性で =”xxxx” が付かない奴があるじゃないですか。こういう属性はBoolean型で、存在しているかいないかで “true” / “false” が切り替わるわけですが、これを明示的に記述して “false” にする方法はないんですよね。
つまり、

<option selected="false" >aaaa</option>aaaa

なんて書いてもオフにする事はできません (ちなみにJavaScriptからは element.selected = false; とかやれば切り替えられますので、あくまでHTMLの文法上の問題です)。これに関する正式な文書の定義はここにあります。
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},
}

のように型と初期値を指定したプロパティがHTMLの属性として設定できるようになるのですが、ここで基本的にはenableだけどたまにdisableで使いたいというつもりで

enable: {type:Boolean, value:true},

とやってしまうと、これはHTMLからdisableにする方法がなくなります。代替手段としては型をNumberにして、”0″ / “1” を使う、または文字列にして “false” / “true” という文字をパースするという方法はなくはないですが。

それぞれの型の属性でHTMLに書いた値がPolymerのコード側にどう渡ってくるかというとこうなります。

どうだろうなあ、将来的にオン/オフ以外の状態の拡張の可能性があるなら String にしておくというのも良いかも知れないけどパースするのも面倒だし、わざわざ標準のBooleanと挙動の違うものを作るというのもねぇ。

本来どうあるべきかという話でいえば、これはやはり Boolean 型にすべきでしょう。ただし、前述のように明示的に false にはできませんので、デフォルト値が false で属性名を書いたら true になるという動作になります。

つまり、標準的にオンになっている機能に対して “enable” という属性名を付けるのがよろしくないのであって、属性名を “disabled” にして不要な時だけディセーブルにする、というのが正解なのではないかと思います。

属性の型をどうするか考えてただけのはずなのにいつの間にか属性の名前も考え直さないといけなくなってたぜ!!
しかしまあ、WebComponentsを見て「やったー、これで独自のタグをがしがし作れるぜー!!」という状況の中でここまで気が回せるかと言うと、まあ無理かなと。しばらく経ってからこれはまずかったなぁと後悔する事になるわけです。
気がついたらその時直せば良い話ではあるのですが、ものが共通部品的なものなので影響を受ける範囲が広がってしまっていない事を祈りましょう。

本当に便利に使える共通部品を作るために必要な時間と労力って思っている以上に大変なもんです。