こちらの記事ですが、コメントにて有識者による解説を頂けましたので、究極的な原因を知りたい方はそちらを参照してください。
始まりは自己紹介から
初めまして あおげばにゃんこです。
最近JSにこなれ感を出しつつコード書いていた矢先に悲劇が起きましたので、ご報告です。
data属性に「""」がついてくる
普段はrailsで開発を行っているのですが、HTMLのdata属性にデータを入れておいて取り出そうとした際にある問題が生じました。
発生した問題は以下のとおりです。
<input type="checkbox" name="type" id="birthday" data-status=""2024-10-03"">
お気づきになりましたか？
謎の「""」がついてますよね？
こいつはいったい何者なんだと
そう思うのが自然の摂理です。
今回はこちらの直接的な原因について記事を書きます。
※究極的な原因であるhtmlやrails,jsのことについては詳しく述べません
原因はなんぞや
まずは我々が望む美しい理想形を確認してみましょう。
<input type="checkbox" name="type" id="birthday" data-status="2024-10-03">
いかがですか？
実に綺麗でしょう。
それでは再度自身の構造を確認してみましょう。
<input type="checkbox" name="type" id="birthday" data-status=""2024-10-03"">
汚いですね〜
1週間お風呂入ってないのかな？ってくらい汚いですよね？
さて、それではこちらの構造の元になったコードを見てみましょう。
""がついてる方
= check_box_tag 'type', 'birthday', false, id: "birthday", data: { status: birthday }
""がついていない方
= check_box_tag 'type', 'happy', false, id: "happy", data: { status: "#{(@user.birthday )}" }
お気づきになりましたか？
そうです。上は剥き出しの変数のまま、下は式展開を使った文字列なのです。
つまり、data属性にはちゃんと文字列を渡してあげないとhtml側？がエスケープ処理を行い正しく認識されないのです！！！
(たぶん文字列)
今回のまとめ
つまりdata属性にrailsからデータを渡す場合はちゃんと文字列にしてあげることが重要なのです！
今回の記事が誰かの役に立てば幸いです。
余談
この記事を書く前に色々調べてみたのですが、jQueryだとdata属性からデータを取得する際に勝手に型を変換してくれるそうです。
ソースについてはご自身で調べていただければと思います。