JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
JavaScriptライブラリ を自ら学ぶ人のための質問スレッドです。
■質問を書く上で
(1) 質問にならない投稿はご遠慮ください。(煽り、コード制作依頼など)
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 長い間連続して質問する場合にレス番を名前にしてあれば、質問の流れが回答者に伝わりやすくなります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。質問テンプレートを活用してみてください。
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【ライブラリ】使用しているライブラリ名を記入してください。(ex: jQuery)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ jQuery Compat 3.0のサポートブラウザがよくわからん >>5
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/
こっちに答え書いてあるよw + JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/8
>>7
書いたよw だから、
> そのため予定されていたjQuery Compat 3.0がなくなり、
> jQueryは3.0に一本化されました。
って
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/
に書いてあるのにw
読んでんだろwww やっぱりjQueryの話はjQueryスレの方が
正しい情報書いてあるな。
なんだこのスレwww Qiitaのまとめが分かりやすいな
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62 これもプログラム板に移すんじゃなかったのか
また荒らされて終わるでしょ http://qiita.com/fmy/items/345a264a1cf2e2a73f62#warning-document-ready%E3%81%8C%E5%B8%B8%E3%81%AB%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%AB
「document-readyが常に非同期に」はこういうことか
ずいぶんとトリッキーな動きだな
'use stirct';
document.addEventListener('DOMContentLoaded', function (event) {
console.log(document.readyState);
jQuery(function () {
console.log(2);
});
console.log(1);
}, false);
DOMContentLoaded 的には何もしないのが正解なのだろうが このスレの書き込みをjQueryスレに投稿し直してる奴は何なんだ?
そこまでして向こうのみならずスレを盛り上げたいのか…
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/ >>15
DOMContentLoadedハンドラの後で動作するようにしてるのね
DOMContentLoadedのショートハンドとしてはありえない動きだけど、イベントを知らない初心者向けとしてはありがたい挙動なのかもね >>16
それ本家質問スレに常駐してる荒らしが立てたスレだからだよ
以前も自分の建てた乱立スレに本スレから質問コピペ→自己レスして伸ばしてた ■ライブラリ総合スレ
【jQuery】JavaScript ライブラリ総合質問所 vol.3
http://echo.2ch.net/test/read.cgi/hp/1369444026/
JavaScript ライブラリ総合質問所 vol.4
http://echo.2ch.net/test/read.cgi/hp/1400834117/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/
■jQueryスレ
※前スレは「【jQuery】JavaScript ライブラリ総合質問 vol.3」(総合スレ)で「jQueryスレ vol.3」はない。
つまり、ライブラリスレの乗っ取り行為。
jQuery ライブラリ 総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400313626/
+ JavaScript & jQuery 質問用スレッド vol.5 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1452081417/
+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/ >>19
jQueryスレとこっちを比較しているならこっちが本家 試してみてびっくりしたんだが、下記コードを実行すると
jquery-2.2.4.js では「1 -> 3 -> 2」となり、
jquery-3.0.0.js では「1 -> 2 -> 3」だった
document.addEventListener('DOMContentLoaded', function () {
console.log(2);
}, false);
jQuery(function () {
console.log(3);
});
console.log(1); > 例えば"abc.def"というidを持つ要素をjQueryで取得することは出来ませんでしたが、この関数を使って$("#" + $.escapeSelector("abc.def"))と取得することができます。
http://qiita.com/fmy/items/345a264a1cf2e2a73f62#new-%E6%96%B0%E3%81%97%E3%81%84escapeselector%E9%96%A2%E6%95%B0
そんな馬鹿な、と思って試してみた
<p id="abc.def">#abc.def</p>
<script type="text/javascript">
'use stirct';
console.log(document.querySelector('#abc\\.def')); // OK
console.log(jQuery('#abc\\.def')[0]); // 2.2.4, 3.0.0 共にOK
console.log(jQuery('#' + jQuery.escapeSelector('abc.def'))[0]); // 3.0.0 のみOK
</script>
やはり、jquery-2.2.4.js でも実装できるな(エスケープ関数が用意されてなかっただけ) jQueryにArray.prototype.concatと同等の関数はありますか。
var a = jQuery('#a');
var b = jQuery('#b');
var c = jQuery('#d');
var abc = jQuery('#a,#b,#c');
変数a,b,cから変数abcを一つの関数で生成したいのですが、APIが見つかりませんでした。 >>25のコードに誤りがありましたので訂正します。
var c = jQuery('#c'); >>27
ありがとうございます。出来ました。
jQueryにmerge機能が付いていたんですね。
ヒントを頂いたのでjQueryオブジェクト以外も試してみましたが、NodeListやHTMLCollectionはmergeしてくれませんでした…。
console.log(jQuery([document.querySelectorAll('p'), document.getElementsByTagName('div')])); http://echo.2ch.net/test/read.cgi/hp/1452081417/894がいってたjQuery版は16日経過した今も出てこないな
彼がどんなコードを書くのか興味があったんだが…、まあいいか >>25
このスレで聞いても間違いしか出てこないよ。
こっちにjQueryを混ぜようとしたいだけで
jQueryが好きでもないやつがjQueryの話をしているだけだから。
あなたの疑問に対する答えはこっちに書いた。あとはこっちでやるように。
http://echo.2ch.net/test/read.cgi/hp/1465566635/63 >>30
間違いを指摘してくれた事には感謝しますが、このスレで満足していますのでそちらに書いて頂かなくて結構です。
>>21にあるように本スレはこちらだと思っています。
.add()はa.add(b, c)が期待通りに動かず、a.add(b).add(c)と書いてようやく要件を満たします。
(勿論、2回関数を呼び出してしまっていますので完全ではありません)。
.add()はどちらかといえば機能限定版(非破壊的、可変引数ではない)のArray.prototype.pushに近いメソッドだと認識しています。
そういえば、jQuery APIで可変引数の関数は見ないですね。
https://api.jquery.com/add/ ああ、jQuery.extendが可変引数ですね。
反面、jQuery.mergeが可変引数でない仕様が謎です…。
jQuery作者はjQuery.merge(a, b, c);と書くニーズがないと思ってるんですかね。
https://api.jquery.com/jQuery.extend/
https://api.jquery.com/jQuery.merge/ とりあえず、Spread要素で実装できました。
jQuery([...a,...b,...c]);
が、Babelを使うならjQueryを使う必要性が激減します。
jQuery APIの範囲内では何ともならないのでしょうかね…。 ES5で妥協したコード。
Array.prototype.reduceとjQuery.mergeで2回呼んでるので私的にはまだ不満です。
もっとすっきり書けるコードがあればいいのですが。
[a, b, c].reduce(jQuery.merge); // 破壊的
console.log(a);
var abc = jQuery(a);
[abc, b, c].reduce(jQuery.merge); // 非破壊的
console.log(abc); ほらねw 結局ここでやるなら自分で答えを考えるしか無いわけさw 可読性を低くしてまでやることじゃないけどなw
動きをドヤ顔で説明したくなるようなコードはだめ ぶっちゃけ、この質問者はそこらの回答者よりもレベルが高い
向こうの回答よりも自分で導き出したコードの方が洗練されてるから、どこで質問しても結果は同じだっただろうな レベルが高い(笑)
27 名前:Name_Not_Found[sage] 投稿日:2016/06/22(水) 21:23:37.27 ID:???
jQuery([a,b,c])
28 名前:25[] 投稿日:2016/06/22(水) 21:41:22.02 ID:0C9LwOLq [3/3]
>>27
ありがとうございます。出来ました。
自作自演バレバレなんだよなぁ とりあえず、>>27は私ではないという事は伝えておきます。
>>28は私の確認ミスですので言い訳するつもりはありませんが、>>27,30には回答してくれた事に感謝しています。
私にとっては回答の正誤はどうでもよく、最終的に最適解に辿りつければ良いのです。
質問や回答に優劣をつける事に価値はありません。 reduceは可読性落ちてないよなあ
これで可読性落ちるっていうならreduceを理解してないだけ
jQueryにreduceないから知らんのかもしれんけど Array.fn.concatを独自定義するのが現実的かねえ
上でreduceが挙がったけど、jQueryは配列操作関数としては物足りないところがあるよね $.merge() を合成に使うのは危険な気がするがどうだろう?
あくまで配列的に合成してしまうのでは >>45
いや、そっちじゃなくて
添字とlength以外が適切に処理されないのではと
たとえば.add() の場合は前回選択している部分が残されて
.end() で取り出せるわけだけどそういう処理が行えないんではないかな >>46
ごめん、何を言ってるのかわからなかった
>>34の実装ならどちらも a を基本としているから a にあるプロパティは引き継がれると思うんだけど、どういうコードで弊害が発生するんだろう? >>46
わかった、こういう事ね
end()を使わなければ弊害がなさそうだけど、それが嫌ならadd()をreduceのコールバック関数に持ってくるしかなさそうだね
var abc = jQuery(a);
[abc, b, c].reduce(jQuery.merge);
console.log(abc); // [#a, #b, #c]
console.log(abc.end()); // new Object
var abc = a.add(b).add(c);
console.log(abc); // [#a, #b, #c]
console.log(abc.end()); // [#a, #b] end()はslice()で代用できると思うが、どうだろう?
abc.slice(0, -1); .end()は例えば現状ではって話で
(jQuery的にやっていいのかわからないけど)プラグインで内部に値を持つとか
将来jQueryが機能拡張されて…
とかいう意味での危険ね
まあ、そうなっていると認識していればOKかなあ >>50
前方互換性を考慮するならjQuery APIを使ってマージ処理を実装した方がいいと思う
>25のケースなら.add()か.pushStack()を使えばいいね(関数一つで実装する条件は満たせないけど)
ちなみに、jquery-3.0.0.jsのコードはこんな感じ
add: function( selector, context ) {
return this.pushStack(
jQuery.uniqueSort(
jQuery.merge( this.get(), jQuery( selector, context ) )
)
);
},
> (jQuery的にやっていいのかわからないけど)プラグインで内部に値を持つとか
その設計だと.add()で引き継がれるか不明だし、filter()のような非破壊系メソッドでは引き継がれないよね
必要ならプラグイン作者側で破壊的メソッドだけでも値が引き継がれるように設計してもらわないといけない
「将来jQueryが機能拡張されて… 」を考慮するならやってはいけない設計だと思う
安全に設計するなら.data()を使うか、DOM側に値を持たせる
> まあ、そうなっていると認識していればOKかなあ
同意
コーダー側でもある程度はjQueryオブジェクトの設計を知っているべきだと思う つまり最善策(わかりやすく、最小の実現方法)はどれ? >>42
> reduceは可読性落ちてないよなあ
> これで可読性落ちるっていうならreduceを理解してないだけ
reduceを理解していれば、reduceの戻り値を
捨てるなんてありえないと思うがね。
reduceの機能を理解しているかどうかじゃなくて、
reduceはどういうときに使うものかっていう話だよ。
例えばmapかいてmapの戻り値を捨てるようなもんだよw
最初からeach使えという話。 >>53
reduceは一つの値を連続処理する関数なのだから返り値を使わなくてもいいんだよ
返り値を使えばもっと短く書けるけど、「可読性を低くしてまで」は関係ない
var abc = [b, c].reduce(jQuery.merge, jQuery(a)); >>55
関数型を理解してくださいとしか言いようがないな。
関数型言語から来たものなのに副作用に依存するとか
ちょっとセンスがわるい >>56
君にセンスを理解してもらう必要はないんだけど…、頭が固いと大変だね というか、>>55は返り値を使ってるけどね
自分の世界観から抜けられないだけのような >>59
冗長合戦したいなら$()が冗長だから出直しておいで この程度で冗長とか正しい書き方とか、偏執的にも程がある コードだけ読んで批判は聞き流せばいい
相手の為を思って叱ってくれる人も中にはいるが、こいつのはただjQueryスレに誘導するためにこき下ろしているだけだからな jQueryの話題をjQueryスレに誘導することに
なんの問題があるんだ?w ライブラリスレでjQueryの質問しても何の問題もない
荒らしのたてたスレに誘導する必要もない そしたら今度はこっちがjQueryで占領されるわからないのかなぁ?w こっちはjQueryを含めるライブラリ全部のスレ
向こうはJavaScriptとjQueryのスレってことでいいじゃないか >>67
タイトルで誤魔化してるが、向こうはただのjQueryスレ
JavaScriptの質問はスレ違い ふたを開けてみれば、jQuery 3.0はあまり変わってないな
もっと思い切ったAPI変更が欲しかったら >>75
もう完成されているんだよ。
アドビ イラストレータと同じww 基本的に後方互換性重視だな
Deferedを廃止してPromiseを使うとか、classListを実装するとか、eachをforEach互換にするとか、標準に近づけてほしかったな >>77
互換性をなくしてまで仕様を変える意味は? 学習コストの低下と汎用性じゃない?
メジャーバージョンアップで互換性がなくなるなんて良くあること
個人的にはDeferedはPromiseに変えて良かった気がしないでもない >>79
> 学習コストの低下と汎用性じゃない?
学習コストは一度覚えればいいだけ
過去のソースを書き換えるほうが手間がかかる。
汎用性は意味不明。標準よりも高機能のほうが汎用性は高いし。 > 個人的にはDeferedはPromiseに変えて
機能が低下している。 PromiseはAndroid4.4が非対応だからな。
標準のPromiseを使うことはできないのだ。 > 学習コストは一度覚えればいいだけ
さすがにこれはない
jQuery一色に染まってるな 多機能が必ずしもいいとは限らんのよ
Promiseは内部的にPolyfillを作ればいいだけでPromisesの実装が進めばPolyfillは削除できる
event.pageXの独自拡張が削除されたように標準を使ってもらう形の進化は有りだと思う slim版で$.ajax()が削除されたのはFetch APIの実装が整ったら削除するための布石かな
実装が整ったからAPI削除ってjQuery 3.0でもいくつかあったよね >>13にまとめられてなかったっけ?
削除されたAPIはajaxのcompleteが記憶に新しいが
$.parseJSONの非推奨も次で削除する為の準備段階な印象 >>87
ありがとうございます。
リンク先参照します >>84
> Promiseは内部的にPolyfillを作ればいいだけでPromisesの実装が進めばPolyfillは削除できる
それをいうなら、jQuery 3.0のDefferedはPromise互換なので、
Promiseを使ってDefferedを実装すれば良いだけ。 >>85
Fetch APIはあまり関係ないと思うよ。
Slim build
https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/
> Finally, we’ve added something new to this release. Sometimes you don’t need ajax,
> or you prefer to use one of the many standalone libraries that focus on ajax requests.
> And often it is simpler to use a combination of CSS and class manipulation for all your
> web animations. Along with the regular version of jQuery that includes the ajax and
> effects modules, we’re releasing a “slim” version that excludes these modules. All in all,
> it excludes ajax, effects, and currently deprecated code. The size of jQuery is very rarely
> a load performance concern these days, but the slim build is about 6k gzipped bytes
> smaller than the regular version ? 23.6k vs 30k. These files are also available in the npm package and on the CDN:
要するにjQueryをDOM用のライブラリだけとして使いたい人のため。それで6KBのサイズ削減ができる。
Ajax関連はいろんなライブラリに搭載されてるから機能が重複しやすかった。 >>85
> 実装が整ったからAPI削除ってjQuery 3.0でもいくつかあったよね
実装が整ったという理由で消えたAPIはないよ。
jQueryの互換性は高い。
jQueryはDOM APIよりも使いやすいという利点のライブラリなんだから
実装が整った程度じゃAPI削除する理由にはなりえない。 >>89
> Promiseを使ってDefferedを実装すれば良いだけ。
Promiseをprototype拡張するつもりか >>92
prototype拡張は駄目なやり方だという設計してるのがjQueryなんでぇ。
当然jQueryと同じようにラップするに決まってるでしょう(笑) そもそもDOM APIはPromiseを使うべきだろうな。
将来はイベントハンドラとか全部Promiseに置き換わるはず ん?標準のPromiseにprogressってあったっけ?
標準のPromiseは基本機能しかサポートしてないから
普通はQとかを使うのが常識だと思ってたが。 >>93
Promiseをラップするぐらいなら、現行のPrpmise互換オブジェクトの方が数段マシだと思うが
拡張部分とPromise互換部分の整合性をとるのが面倒で内部的にPromiseを使うメリットが感じられん そもそもさ、notifyとprogressの事を忘れてないか?
http://blog.toshimaru.net/jquerydeferred-is-most-important-client/
> deferredへ通知する: notify()とprogress()
>
> jQuery1.7からresolve/rejectに加えて、progressが導入された。、
> progress()により、deferred内でnotify()がコールされたときに実行される
> コールバック関数を登録することができ、resolved状態に対する「進捗(progress)」を
> 表現できるようになった。notify()で事前にコールバックを登録しておくことで例えば、
> ロードに時間がかかるリソースを持つdeferredオブジェクトの定期的に更新されるプログレスバーを描画できる。
> deferredはロード中に通知(notify)され、ロード完了時に解決(resolve)される。
jQueryでDeferredを使ってる所っていうのはAjax通信の部分だけだと思うが、
Ajax通信を置き換える目的ならば、XMLHttpRequestにあるprogress相当の機能を実装する必要がある。
ってことは素のPromiseオブジェクトでは明らかに機能不足なんだよ。
そういう前提において、DefferedにPromiseと互換性を持たせる(jQuery 3.0で実現したこと)のではなく
Promiseを使えって言うならば、足りない機能を実装するしか無いだろ。
そして>>96の言うとおり標準のPromiseをラップして使うメリットはないので
DefferedのままPromiseと互換性をもたせるのが一番すぐれたやり方なわけだよ。 そもそも、「>>77や>>84が目指しているゴール」と「現行jQuery擁護派のゴール」が違いすぎるので議論にならない
反論するなら相手の立場になって反論しないとな
でなければ、ただの宗教戦争だ まあ確かに、Promise派としてはprogressはXMLHttpRequestと同じ方法で実装してくれれば満足するだろうね >>98
そうか?単に標準のXMLHttpRequestで必要とされている機能を
満たすにはPromiseの機能だけでは不足しているから
拡張する必要があるってことに気づいているかどうかだと思うぞ。