Riot 3.7と4つの値

Riot 3.7にアップデートしたところ、今まで動いていたコードがうまく動かなくなってしまいました。

falsyな値

JavaScriptには、falsyな値（条件式に入れるとfalseとして処理される値）が7つあります¹。

• false
• null
• undefined
• 0
• -0
• ''（空文字列）
• NaN

Riot 3.7では、このうち数値でない4つ（false、null、undefined、''（空文字列））の挙動が3.6以前と違ってきます。

実際にやってみた

まずはこちらのPlunkrを御覧ください。ラジオボタンを生成して、onchangeでvalueをalertするようにしてあるだけですが、false、null、undefined、''の4つは、「on」という妙な値を表示します²。これは、Riotで値のないvalue属性を削除してしまっているからということです（Issue）。そして、valueのないラジオボタンはonという値を持つものとみなされるので、このような挙動となります。

対策

なかなかバグの方は解決しないので、対策を考えてみました。

Q1: HTMLとして書き出したい値は何？

Riotが最終的に生成するのはHTMLである以上、その結果は何かしらの文字列となります。最終結果がfalseという形で必要なのなら、"false"という文字列にすれば、この問題は影響しません。ただ、最終型として空文字列を出力したいのなら、この方法は使えません。

Q2: 属性なしではまずいですか？

多くの属性では、attr=''とした場合と、attrがない場合で動作は変わりません。影響しないのなら、入っていないままでも特に困りません。ただ、一部には意味が違う例があります。

• typeがradioやcheckboxの<input>の場合、valueなしではvalue="on"とみなされることがあります。
• <img>のaltについては、alt=""だと「画像は装飾なのでテキスト化不要」、altなしでは「画像はテキストで代替不能」と、テキストにならない点では同じですが、セマンティクスは正反対になります。
• （絶賛募集中）

Q3: 他の手段はありませんか？

<img>のaltはどうしようもなさそうですが、<input>のvalue="on"については直接radioやcheckboxを出力に使わず、hiddenで値を出力させるようにすれば、valueなしがvalue=""と同じように動いてくれます。

1. 厳密に言えば言語外＆規格外ですが、昔のIEとの互換上、document.allはfalsyに評価されます。 ↩

2. Plunkerの過去版に、Riot 3.6.3で動かしているものがありますが、そちらではfalseは「false」と、残り3つは空文字列が表示されます。 ↩