元スレjQuery ライブラリ総合質問所 vol.4

JavaScript覧 / PC版 /

みんなの評価 :

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ

/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで

101 = :

ライブラリスレのタイトルに問題はないな

102 = :

そう思うなら勝手にそう思ってればいい
検索でヒットするか否かは結果の通り

103 = :

jQueryスレ立てたい奴はちゃんとライブラリスレでお伺いをたてろよ勝手にスレを立てて勝手に誘導する奴はコノスレヲ立てた荒らしと同じだからな

104 = :

ここスレ立てしてもなかなか落ちない板なのに
あまり考えないで立てる奴多いよな

105 = :

>>103
何様w

106 = :

>>103
向こうからこっちに誘導するヤツなんているか？
逆はいるが

107 = :

何かを始める前に相談するという当たり前のマナーを守れない奴もいるんだな
好き勝手に何でもやっていいと思ってる

109 = :

jQueryの質問はライブラリスレにするのが同然

110 = :

jQueryの質問はjQueryスレにするのが同然なのですね
わかりました

111 = :

同然ｗｗ

112 = :

揚げ足取りしか出来ない馬鹿が何か言ってるぞ

113 = :

jQueryって今主流？googletrendsで確認したら2012年をピークに下がっているんだけど...
ウェブデザインの勉強を独学でしていてj-queryは必須と思っていたのですが現場はどうなんでしょうか？

115 = :

ウェブデザインでjQuery？

言っとくけど、jQueryは使われているが
ほとんどのjQueryプラグインはゴミだぞ。
あれは勉強する価値がない

116 = :

ゴミではないだろ
ゴミは>>115

120 = :

jQueryはオワコン

121 = :

$thi = $(this)

変数に入れるのは、変数が1つ増えるだけで、
特に損はないでしょ？

それとも、変数の管理がしにくくなる？

122 = :

変数っていうのは名前をつけるっていうことなんだけど、
何のために名前をつけるのか？ってことだよ。

$thisも$(this)も、ほとんど同じ単語、同じ意味なわけで
わざわざ名前をつける理由がない。
後からみた時になんでそんな名前をつけたのかわからないしね。

要するに意味が無いことはやらないほうがいいよ。
必要のないものは書かない。これがコードの鉄則

123 = :

>>118
意味はあるが、パフォーマンスを気にするなら this のまま利用して、 DOM API を使うことも検討した方がいい

124 = :

変数の名前には誰も触れてないのにいきなり持論を繰り出すのは例の人か
$this がNGなら別のユニークな名前を付ければいいだけ
そして、誰も質問してない内容を主張するのは時間の無駄

125 = :

> 変数の名前には誰も触れてないのに

え？

変数の名前に触れているから、書いたんだけど。

>>121が見えない？

↓ これ

> $thi = $(this)

126 = :

>>122
>後からみた時になんでそんな名前をつけたのかわからないしね。

え？たいていの人わかるのでは？
毎回$(this)使うことが意味が無いこと、必要のないことではないの？

>>125は意味がわからない

127 = :

>>124
> $this がNGなら別のユニークな名前を付ければいいだけ
違う名前をつけるのなら意味はあるよ。

これはリファクタリング関連の用語で「説明用変数」とか言われているやつで
http://www.woodensoldier.info/computer/refactoring/IntroduceExplaningVariable.htm

例えば関数が長すぎたり、違う意味のthisが近くにたくさんあったりして
コードが読みづらい時に、コードを説明するためにつける変数

thisが分かりにくいから説明としてつけるわけで、$thisとかいう名前だと
何も説明になってないから意味が無いわけ。
（なお、$(this)を変数に入れてもパフォーマンスの点ではほぼ意味が無いことは既に言ったとおり）

128 = :

>>126
> 毎回$(this)使うことが意味が無いこと、必要のないことではないの？

一旦変数に入れるとしたら、
var $x = $(this)
最低限これだけのコードが必要でしょ？

それだけのコードを書いた結果、節約できるのは
() のたった２文字。

普通はメソッドチェーン使ったり、引数を効率良く書くので
「毎回$(this)使うこと」自体があまりないことなんだよ。

ほらこれだけやっても$(this)を使うのはたった１回。

var css = {width: '100px', height: '100px'};
var events = {
　change: function() {},
　keydown: function() {},
}
$(this).prop('disable', false).css(css).on(events);

129 = :

>>128
そりゃ処理内容によるだろ

130 = :

$(this)は、そんなにアクセスが速いの？

色々と処理がありそうだから、
いったん変数に入れるのでは？

131 = :

>>127
$this という名前を出したのはおまえが初めてだろ
独り相撲して自己否定すんなよ

132 = :

>>130
普通はベンチマークするべきところだけど、ソースコード読めばわかるよ。
http://code.jquery.com/jquery-2.1.3.js

$ = jQuery だから、まずこれが実行される

jQuery = function( selector, context ) {
　　return new jQuery.fn.init( selector, context );
}

133 = :

$(this)ということは、selector = DOMElement。
そしてfn.initの中身のうちselect = DOMElementの場合に通るコード
やっている所は★をつけた所だけ。

init = jQuery.fn.init = function( selector, context ) {
　　// HANDLE: $(""), $(null), $(undefined), $(false)
　　if ( !selector ) {
　　　　return this; //通らない
　　}

　　// Handle HTML strings
　　if ( typeof selector === "string" ) {
　　　　// 通らない

　　// HANDLE: $(DOMElement)
　　} else if ( selector.nodeType ) {
　　　　// ★ やってるのはこれだけ
　　　　this.context = this[0] = selector;
　　　　this.length = 1;
　　　　return this;

　　// HANDLE: $(function)
　　// Shortcut for document ready
　　} else if ( jQuery.isFunction( selector ) ) {

　　// 以下、通らない

134 = :

>>130

> 色々と処理がありそうだから、

君が言った処理というのは、
this = DOMElementの場合、たったこれだけの
コードで終わりなんだよ。

　　　　this.context = this[0] = selector;
　　　　this.length = 1;
　　　　return this;

色々処理があるのは、DOMElement以外の値
つまりselectorなどを渡した場合の話であって

$(this) や $(DOMElement)の場合は
それらに比べればはるかに高速だってわかるだろう？

135 = :

>>134
セレクタ処理と比較して変換処理が安いのは事実だが、無駄かどうか判断するのは質問者であっておまえじゃない
質問にいたるまでの背景、社内規定、質問者の好み...諸々が何もわかっていないのに安易に「無駄」と断定するなよ
0.1秒の差が顧客を逃がすと主張するGoogleなら些細な見逃さず、塵も積もればを体言するだろうし、ベンチマークテストしてニヤニヤする奴がいるかもしれんだろ
価値観の多様化を認める努力をしろ

136 = :

>>127
$(this)に違う名前をつける意味がわからない
同じような（またはそれとわかる）名前だから意味あるのでは？

137 = :

>>135
質問者ですが、無駄だと思いました。

>>134がいっていることは正しいですよ。

138 = :

>>137
では、あなたと>>134にとっては正しいんだろうな

139 = :

正しいか正しいかはみた人が決めることよ。

できるのは、その人のために情報を書いておくこと。

$(this)を変数にキャッシュしておくことで
1回当たり0.00001秒早くあるというメリットが有る。
その反面コードの行数が増えて使用メモリも増えるというデメリットが有る。

意味があると思う人だけ、使えばいい。

140 = :

>>137
質問を三日間放置して初めて返した発言が「>>134がいっていることは正しいですよ」か
回答者を人と思わん態度が文章に現れているな

141 = :

× >>134がいっていることは正しいですよ。
○ >>134がいっていることは私の中では正しいですよ。

142 = :

なんか誰にでも噛みつきたい奴がいるみたいだなｗ

143 = :

質問者ですが放置ですみません
>>137は質問者ではなく、なりすましか自演です

放置というかだんだん難しくなっていって返すにもどうにも
もう少し落ち着いたら返事なり書くつもりで今は展開を見てる状態です

>>128のメソッドチェーンはわかりますしすでに使っています
今気になっているのは$this不要なら$(this)に限らず他のオブジェクトもそうなのかなと
せっかく勉強になるいい展開なのに>>137には残念です

144 = :

>>143
> せっかく勉強になるいい展開なのに>>137には残念です

なら無視すればいいべｗ

あなたの欲しかった情報、
$(this)を変数に入れることによる速度アップは
殆ど無いってことが、ソースコードより明らかになったでしょう？

145 = :

>>143
> 今気になっているのは$this不要なら$(this)に限らず他のオブジェクトもそうなのかなと

セレクタの検索が遅い（場合がある）から、それに関してキャッシュすることで速度アップすることはあるよ。
getElementByIDが使われるあろうセレクタにID単体を入れた場合に有意な速度アップになるかは微妙だけど

でもthisを含めたDOM要素の場合、同様に不要だろうね。
ナノ秒レベルのごくわずかの速度アップが必要っていうのなら話は別だけどｗ

146 = :

>>144
なりすましに無視はないだろ
そこは一言でも言っておかないと

147 = :

ベンチマークしてみたよ。
http://jsperf.com/efivmfqsat2gfbrsm57h

Firefoxの場合なんと2.77倍も速くなったよ！
* $(el) ・・・ 570741 ops/sec
* $el ・・・ 1578389 ops/sec

IE11だと1.04倍
* $(el) ・・・ 49793 ops/sec
* $el ・・・ 51797 ops/sec

Chromeだと1.41倍
* $(el) ・・・ 233268 ops/sec
* $el ・・・ 328296 ops/sec

やはり、$el変数に入れたほうがいいみたいだね！

・・・ここまでは素人判断ｗ

倍率だけで判断するのは素人判断。

148 = :

ここからが本番ね

あらためてよく見ると

Firefoxの場合
* $(el) ・・・ 1.752 ナノ秒/回
* $el ・・・ 0.6335 ナノ秒/回
1回あたり 1.1185 ナノ秒速くなる

IE11の場合
* $(el) ・・・ 20.083 ナノ秒/回
* $el ・・・ 19.306 ナノ秒/回
1回あたり 0.777 ナノ秒速くなる

Chromeの場合
* $(el) ・・・ 4.287 ナノ秒/回
* $el ・・・ 3.046 ナノ秒/回
1回あたり 1.241 ナノ秒速くなる

あとは、これが意味があるかを考えて判断しなさい。

俺はこの結果からパフォーマンスアップのにために
わざわざ変数に入れる意味は無いと思っている。

149 = :

複雑なセレクタ式を何度もループの中とかで参照するなら効果はあるんじゃないかな

150 = :

>>149
複雑なセレクタの場合は当然そうだよ。
それは最初から今回の話の対象外の話。

今の話は、$(this)を$thisに入れることの意味って話だから。

関係ないけど、よくさブラウザとかのバージョンアップで
速度が○倍になりましたとかいう宣伝文句あるじゃん。
あれっってまさにこれなんだよね。

> Firefoxの場合なんと2.77倍も速くなったよ！

確かに、2.77倍になっている。だけど全体が2.77倍になったわけじゃなく
処理の一部が速くなっただけで、しかも元々ナノ秒レベルの体感できない部分が
10倍になっただけ。だから当然体感できない。
○倍になったって宣伝文句は話半分に聞くべきだよねって話がしたかった。