jQuery dataとattrで値が変わる…らん!

Read More


先日会社でこんな記事を教えてもらった。


■jQuery dataとattrで値が変わる|このコードわからん
http://hai3.net/blog/2012/07/16/jquery-data-attr/



この記事によるとdata()attr()では、
それぞれ取得する値が変わる(ことがある?)ので困ることがあるよってことらしい。



以下は記事の一部を抜き出したもの。

↓↓↓↓↓ここから。


<div id="data1" data-value="0100"></div>
という要素があったとする。

この要素のdata-valueを取得する方法によって、値が変わってしまって困ることがある。
$("#data1").data('value');
// -> 100 になる

$("#data1").attr('data-value');
// -> "0100" になる



↑↑↑↑↑ここまで。




へー、data()とattr()で取得する値が変わるんだ。そーなんだ。
ちょっと自分でも試してみよ。

自分の環境で同じことをやってみた。








結果、











値は変わらなかった





ほー。ふーん。

まあjQueryのVerの差異だろーなー。
って試したらビンゴ。



試した結果だけ書くと、
jQueryのVer.1.9.1ではdata()でもattr()でも問題なかった(同じ値が取れた)。
Ver.1.7では先述した問題が再現できた(値が変わった)。
Ver.1.2.6ではdata()で値が取れなかった(undefined)。


調べてみると、data()がまともに使えるようになったのはVer.1.4.3以降の話とのこと。

なおVer.1.2.6でもattr()を使えば問題なく値が取れる



つまりjQueryのVerを気にせず安定して動かしたいならdata()を使わずattr()を使えってこと。
最新のVer.1.9.1が使える環境ならdata()を使ってもいいよって話。




あと注意点として、
data()はキャッシュを使っているのでattr()で変更した値はdata()には反映されていないという点。


例えば、これはVer.1.9.1での話になるが、
$("#data1").data('value');
// -> "0100" になる

$("#data1").attr('data-value', 2);

$("#data1").data('value');
// -> "0100" になる

となる。


data()で取れる値に正しく反映させたい場合はこうなる。
$("#data1").data('value');
// -> "0100" になる

$("#data1").attr('data-value', 2);
$("#data1").data('value', 2);

$("#data1").data('value');
// -> "2" になる




速度的にdata()の方が早いらしいんだけど一旦data()を使っちゃうと、別の人が変更修正したりするようなときとか、一つ扱いを間違えると色々と面倒なことになりそうな感じ。

それに上記みたいに同じようなことを二回も記述するのもどうなんだろ…。

data()の値を最新のものにするためにキャッシュをクリアする方法はないのかなあ。
~調べた、けどよくわからん~

でもまあ仮にキャッシュクリアする方法があったとしても頻繁にあっちこっちでキャッシュクリアするのは負荷高そうだなあ。
そうなるとdata()を使うメリットって減っちゃうよなあ。


なんてことをごちゃごちゃ考えたり。





えーい しらん!







というかそもそもの話になるけどjavascriptに大きな仕事を任せるのは好きじゃないんデス。



ほんとにそのjavascriptは必要?


それはjavascript(クライアントサイド)じゃないとできないこと?









Comments(4)

1  みやび  2014/05/31 (土) 18:59 ID:kdaE1i315
言及なかったのであれですけど、
dataはHTML5で追加された独自データ属性ですね
(HTML4.01やXHTML1.0では属性に好き勝手な値を持たせる事は禁止されている)

その辺も踏まえて考えると、
Ver.1.4.3でようやくHTML5の対応が出来たってことですね

因みにこの独自データ属性ですが、
HTML5に対応しているブラウザならelement.setdata.hogehoge等でアクセス出来ますが、
HTML5に対応していないIE8等のブラウザではelement.setAttribute("hogehoge")という昔ながらのやり方を使う必要があります

jQueryもタダのJavaScriptコードなので、
dataで管理を試みた場合、
まずデータセットが使えるか確認後、無理なら従来のsetAttributeでやってるんじゃないですかね?
Ver.1.7ではこのdataで取得した値が一旦式として評価されるバグか仕様みたいなのがあったのですかね?

jQueryの使い分けですが、どんな属性でも値を弄れてしまうattr、独自データ属性のみ対応しているdata
個人的には独自データ属性の操作はdataでしたいですね


関係ないですけど、PSO2 Wikiの武器一覧に面白い機能があって
武器一覧を攻撃力とかでソート出来るんで捗ってます(`・ω・´)
http://pso2.swiki.jp/index.php?%E3%82%BD%E3%83%BC%E3%83%89

2  115ちゃん  2014/06/02 (月) 13:46 ID:y14ZWxu15
ほ~~~!勉強になりまっす!!

3  シラサヤ  2014/06/03 (火) 15:03 ID:nZaIO9515
> dataはHTML5で追加された独自データ属性ですね
(HTML4.01やXHTML1.0では属性に好き勝手な値を持たせる事は禁止されている)

カスタムdata属性を使ってる場合は古いブラウザを切るってことの意思の表れだととらえてよいかもねー。
あるいはなんも知らないまま(考えないまま)使っているか。



> 武器一覧を攻撃力とかでソート出来るんで捗ってます(`・ω・´)

話の流れからjQueryでソートってことだと思うんだけど、
(リンク先のページもjquery.tablesorter.js使ってるし)、
ソートについてはちょっと個人的な意見があってだなー。


ソート機能をjQueryとかで実装するのには否定的なんです。
ソートそのものは良いと思うからPHPを使って実装するのはOK。


というのは、
一覧に表示する件数が100件~500件程度ならともかく、
3000件とか5000件、さらには1万件になったらどうするのって話。


jQueryなんかでソート機能つけちゃうとそのページ内のものだけでしかソートをしないわけで。
とすると同一ページに1万件とか表示させないと全ソートはできないってことだよねえ?


ページネートさせてるような場合とかどうするわけ?
実装方法と将来的に件数が増えた場合の管理方法とか、そういうところぜひ聞きたいんだが





4  みやび  2014/06/03 (火) 18:27 ID:TQpuQ7u15
>古いブラウザを切るってことの意思の表れ
ですです
確かjQueryはVer1.9だか2.0だかでIE6みたいな古いブラウザのサポート切ったはずですし

>jQueryなんかでソート機能つけちゃうとそのページ内のものだけでしかソートをしない
1カテゴリの武器が1万種類もあるゲームはやだなぁw
良いとこ100~200アイテムで収まると想定されてるから1ページで収まる前提で、なおかつソートすると便利な項目に対して使うものですね
Unobtrusive Scriptingの概念からしても問題ないよく出来た使い方だと思います

>ページネートさせてるような場合とかどうするわけ?
ページネートの処理含めて全部JavaScriptで実装してしまえっていう強引な発想がありますね

PHP側にGETパラメータ(ページ番号、ソート順)を元にJSON形式で出力するページを用意
ページ表示が終わった後、JSONを読み込みに行って最初の20件を読み込む
ページネートやソートボタンを押すとAjaxが走って、JSONを読み込みに行く

JSON吐き出すページに関してはCakePHPやFuelPHPがお手軽で
Ajaxで管理するHTML+JavaScript側はAngularJSで作るとさっくり作れますね
Unobtrusive Scriptingガン無視になっちゃうんで、JavaScript動かないブラウザの事も考えると酷いコードになりそうですが