Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

Riot 3.7と4つの値

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

falsyな値

JavaScriptには、falsyな値(条件式に入れるとfalseとして処理される値)が7つあります1

  • false
  • null
  • undefined
  • 0
  • -0
  • ''(空文字列)
  • NaN

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

実際にやってみた

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

対策

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

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

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

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

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

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

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

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


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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?