見出し画像

jQueryのattr()について相当昔からデグレっぽいものが発生している件

概要

jQueryを使う際に初学者が混乱する元であろうattrメソッドとpropメソッドの違い。

attrメソッドはHTMLの属性から値を取得する。
propメソッドはjavascriptのプロパティから値を取得する。

違いの例としてよく言われるのが、inputタグで使う「checked」や「selected」などだろう。
attr('checked')では"checked"undefinedが取得され、
prop('checked')ではtrue/false(boolean)が取得できる。

より詳しい説明は他の記事をググればすぐに見つかるだろうからここでは割愛する。

さて、jQueryの公式サイトには以下のように書かれている(英文ママ)。

Concerning boolean attributes, consider a DOM element defined by the HTML markup <input type="checkbox" checked="checked" />, and assume it is in a JavaScript variable named elem:

(中略)
$( elem ).attr( "checked" ) (1.6) "checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6.1+) "checked" (String) Will change with checkbox state
(後略)

要するに、checked属性をattr()で取得すると、
A「1.6以前ではHTMLに書いた初期値しか取れず、変更できない」
B「1.6.1以降では変更した現在の属性値が取れる」

ということが書いてある。

ところが、現時点で最新のjQuery3.5.1で実験すると、「HTMLに書いた初期値しか取れず、変更できない」(A)という挙動に逆戻りしてしまっていたのだ!

おいおいおい…API Documationと言ってることが違うじゃねぇか…!

一体いつからおかしくなったのだろう?
ということで、CDNでバージョンを変えながら調べてみた。

結果

※先に記載したA、Bのいずれになったのかを調査。
◆境界の調査
1.6…挙動A
1.6.1…挙動B
◆最新バージョン調査
3.5.1…挙動A
◆バージョンを上げてみる(1.x系の最終バージョンで調査)
1.6.4…挙動B
1.7.2…挙動B
1.8.3…挙動B
1.9.1…挙動A ←!?
1.9.0…挙動A
1.9.0 Beta1 …挙動A

ということで、1.9.0以降は挙動Aに戻ってしまっていると類推された。
なお、1.9.xのリリースノートにはattr()の挙動を戻した旨の記述は確認できなかった。
(私が英語読めてないだけかもしれないので間違ってたら訂正ください)

1.9時代はIE6~8のサポートをやめたいとロードマップ出したり、2.0をリリースしたりと忙しかったようだ。その中でコードがデグレを起こし、そのままズルズルと来てしまったのではないか…。

まとめ

・API Documentのattr()の挙動記述は嘘っぱち。
checkedなどの真偽属性について、
 1.6まで…「HTMLの初期値しか取れない」
 1.6.1~1.8.3…「現在の状態に応じて"checked"かundefinedが取れる」
 1.9.0以降…「HTMLの初期値しか取れない」

結論

propメソッド使おうね。

ニンジャスレイヤーTRPGを盛り上げるために、もしよろしければドネートを…!聖戦の継続の為に…!