JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」＋!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです

■前スレ
+ JavaScript の質問用スレッド vol.142 +
http://mevius.5ch.net/test/read.cgi/hp/1568622157/

■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳)
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events)
http://www.w3.org/TR/uievents/ (UI Events)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等)
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳)
http://www.whatwg.org/specs/ (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
http://developer.mozilla.org/ja/docs
◆ MSDN Library
http://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html

■テンプレ案
http://fiddle.jshell.net/fH4cC/180/show/light/

■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/

■参考URL
ダウンロード、CDN
http://jquery.com/download/
ブラウザサポート
http://jquery.com/browser-support/
jQuery UI
http://jqueryui.com/
jQuery UI ダウンロ－ド
http://jqueryui.com/download/
リファレンス等
http://alphasis.info/
http://www.jquerystudy.info/
http://js.studio-kingdom.com/
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62

■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為にhttp://jsperf.com/ （githubのアカウントが必要です）にコードをUPしてブラウザ毎に速度計測する事を推奨します。

例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証（要出典）されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。

■各種仕様
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳)

■JavaScript主要ライブラリ・フレームワーク

jQuery
http://jquery.com/
jQuery UI
http://jqueryui.com/
jQuery Mobile
http://jquerymobile.com/
Lo-Dash
http://lodash.com/
Backbone.js
http://backbonejs.org/
Underscore.js
http://underscorejs.org/
AngularJS
http://angularjs.org/
Knockoutjs
http://knockoutjs.com/
RequireJS
http://requirejs.org/
D3.js
http://d3js.org/
threejs
http://threejs.org/

Q. jQueryはどのバージョンを使えばいいのですか？
A. IE9以上であれば、jQuery 3.0を使用してください。
IE8以下にも対応するならば、jQuery 1.12を使用してください。

補足

jQuery 1.9 までは一系統しかなく、古いブラウザも含めて全て対応していました。
その後、古いブラウザを切り捨てるためにバージョンを分岐させました。
古いブラウザにも対応した1系（1.10、1.11、12）と
古いブラウザを切り捨てた2系（2.0, 2.1, 2.2）です。

1系と2系は対応ブラウザの違いだけで機能は全く一緒です。
機能が同じなのにメジャーバージョンが違っているのが分かりにくい
ということでバージョン番号の付け方を変えることになり、
新たに古いブラウザを切り捨てたjQuery 3.0、そして古いブラウザにも対応した
jQuery Compat 3.0がリリースされる予定でした。

しかしマイクロソフトが古いIEのサポートポリシーを変更し
サポート中であるOSで動く、最新のIEしかサポートしなくなったために、
2016年1月でVista上のIE8のサポートが終了しました。

そのため予定されていたjQuery Compat 3.0がなくなり、
jQueryは3.0に一本化されました。

■JavaScript主要ライブラリ・フレームワーク 利用率
http://w3techs.com/technologies/overview/javascript_library/all

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合はhttp://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

■各種仕様
◆ Standard ECMA-262
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 2015, いわゆる ES6)
http://www.ecma-international.org/ecma-262/9.0/ (ECMAScript 2018)
http://tc39.es/ecma262/ (ECMA-262 最新ドラフト)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳)

削るべきか要審議
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)

2019年もjQueryのシェアは微増で終わりましたね（苦笑）
だから言ったんだよ。誰もがウェブアプリ作ろうと思ってたりしないんだから
普通のウェブサイトならjQueryでいいんだって
適切じゃない技術に乗り換える意味がない

どっかのフロントエンジニア君（笑）が必死に終わる終わるいっても
結局はこの結果ですよ。Angular？ReactJS？一年経ってもぜんぜん増えてませーんｗ

http://w3techs.com/technologies/history_overview/javascript_library/all
Historical trends in the usage of javascript libraries for websites
73.5%　　73.6%　　73.7%　　73.8%　　73.9%　　74.0%　　73.9%　　73.9%　　74.1%　　74.1%　　74.1%　　74.0%　　74.1%　　74.2%
結果＋0.7%

http://w3techs.com/technologies/history_overview/javascript_library
Market share trends for JavaScript libraries
97.2%　　97.3%　　97.3%　　97.3%　　97.3%　　97.3%　　97.4%　　97.4%　　97.4%　　97.5%　　97.5%　　97.5%　　97.3%　　97.4%
結果+0.2%


2011年より
28.3%　42.8%　54.5%　57.4%　61.5%　68.3%　71.9%　73.1%　73.6%　74.2%
74.0%　84.1%　90.2%　92.9%　94.5%　95.8%　96.4%　96.2%　97.3%　97.4%

形骸化してるだけなのに哀れだね

形骸化？AngularやReactが増えないから
jQueryは減らないんですよ

AngularやReactが形骸化しちゃったと？ｗ

ここまでjQuery信者っぷりが露骨なテンプレだと、何も感じないな
2020年も彼は平常運転なんだろうね

一生懸命覚えたjQueryを使った案件が減っちゃうとまんまが食えなくなっちゃうんだろうね
かわいそうに

でもjQuery減ってないじゃんｗ
AngularとかReactはバージョナップで
また覚え直しになるでしょ？

覚え直し？？

現実を見据えた奴なら全部覚えるだろ
jQueryに拘ってるのは信者だけ

そりゃjQueryが消えるわけないんだから
jQueryも全部の中に含まれるだろうな

>>17みたいにjQuery以外をこき下ろすのはアホってことだな

別にこき下ろしてないだろ
Angularが1と2で互換性なくなったのは事実だし
ブラウザ標準のWeb Componentsが控えてるから
脱Angular、脱Reactの流れは明らか

目指せフルスタックエンジニア

Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
jQueryなんてとっくに使われなくなってるはずでしょ
ここは自ら学ぶスレでJS仙人Web仙人を目指す者が多いだろうけど
全体で見ればできるだけ自ら学びたくなくて他者にすがりたい人が多いでしょ

だからこのスレでライブラリやフレームワークを進めるのは
このスレ以外で相談されたときと比べたら控えるべき

例えば全く無知な人からこういう見た目のグラフを起きたいと言われて、
WebGLの数十のAPIと数十の技法をここで説明仕切るのは不可能だし、
より噛み砕いても説明しきれないときはWebGLを0から学んでこいとだけいうのはあまりに辛辣なので
グラフ表示ライブラリを提示して、そちらのこの使い方を変わりに学べということを言うのは極悪ではないとは思う

何れにせよ目的が学ぶことより問題対処の答えをもらうほうが大きくなってはいけないということ
ここは仕事依頼所ではなくて質問者が自ら学ぶ機会を作るための場所ということを忘れてはいけない

そこで質問者に何を学ばしたいのかということ
jQuery力を身に付けさせたいのか、
jQueryなどに頼らなくてもWebAPIで実現できる力を身に付けさせたいのか、
それは各回答者によって違うし違ってて良いと思うが
ここがJavaScriptスレということは頭の片隅に置いておいてほしい

フランス料理スレがあったとして、そこで電子レンジ中心でするというのは面白いと思うが
あまり電子レンジ最高、これに頼らないのは変だというアピールをすると
なにかに特別こだわるのであれば亜流として他スレでやれということにってしまうのは仕方がないだろう

>>24
> Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
> jQueryなんてとっくに使われなくなってるはずでしょ

それは違うよ。Web Componentsはウェブアプリを作るもの
なので同じウェブアプリを作るAngularやReactと競合してる。

jQueryはウェブサイトに動きをつけるもの
Web Componentsと競合してない。

将来的にはWeb Componentsで作ったコンポーネントを
組み合わせるライブラリとしてjQueryが使われるだろう

jQuery厨と反jQueryとのバトルかお
大晦日だし朝までやってみろだお
生テレビみたいに

>>26
Web ComponentsとjQueryを対比してるのではなくて、
標準で補えるような機能があるから、競合すると言って移行が進むとは限らないでしょってこと
競合するってことは見方を変えると親和性が高く補い合えるということでもあるのだから

Web Componentsはウェブアプリを作るものではなく
要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
それに作れたからと言ってそれらを上手く使ったり運用することまでは含まれていないのだから
そういう面でフレームワークは必要でしょ

またjQueryはウェブサイトに動きをつけるものっていうのであれば
Web Animation APIが競合するでしょ
でもだからといってjQueryが不要ということにはなっていないでしょ

>>26
標準の各機能というのはあくまで機能であって、
フレームワークとか、ライブラリでもjQuery規模のものは
その世界観をまるごと提供するもので、そこに意味があるわけでしょ

そういう使い方をしているのであれば、
標準機能があるからフレームワークやライブラリが不要とはならないでしょ
「機能」のような粒度でそれらを欲しているわけではないのだから

>>28
jQueryとの対比？何を言ってるのですか？
標準の機能があるからAngularやReactのような重いフレームワークが不要になり
またそれに伴いフレームワークがまたガラリと変わるって話をしてるんですが

> Web Componentsはウェブアプリを作るものではなく
> 要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ

従来のWebの延長だから、みんなWeb Componentsを選ぶでしょうね

> またjQueryはウェブサイトに動きをつけるものっていうのであれば
> Web Animation APIが競合するでしょ
動きってアニメーションのことじゃないですよ（笑）

動きというのは各コンポーネントの連携の話です。
AngularやReactでコンポーネントを作る時代は終わり
Web標準のWeb Componentsでコンポーネントを作るようになります。
いろんな所がオレオレブランドのコンポーネントを作るようになるでしょう
そこにフレームワークは組み込まれません

コンポーネントは部品です。その部品をつなげるものが必要です。
それがjQueryです。

jQueryでコンポーネント(笑)作ってる奴には関係ないだろ

Web Componentsでコンポーネント作るんでしょ？

>>30
それは違う
原則として標準機能というのは低レイヤーを攻めてる
フレームワークなどは高レイヤー
Web Componentsも一番大きい部分はなにかというとShadowDOMであり
今まで既存の要素spanやdivなどを無理くり使って
欲しい物を作っていたのがよりスマートにできるということ

スマートにできるようになったからと言って、
開発者誰もが自分でShadowDOMを触るかと言うと違う
そこは引き続きフレームワークを使うのが普通だろう

要するにこの手の標準機能はフレームワークを
よりスマートに作れるようにするためにあると言っても過言ではない

>>コンポーネントは部品です。その部品をつなげるものが必要です。
そのとおり
>>それがjQueryです。
それは違う
jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
要素間の高度な連携のための機能は入っていない
jQueryしか使わないのであればそこのロジックは全部自前で書くことになる
だからjQueryはあくまで「ライブラリ」と言われている

>>33
デスクトップアプリの歴史を学んだほうが良いぞ
ShadowDOMでコンポーネントが作れるようになったら
次起きる流れはコンポーネントの配布だ

コンポーネントは特定のフレームワークに依存せずに
単独で使えたほうが良い。そしてツリービューとかそういった
便利なものが配布される。そしてRADツールの登場だ

RADツールを前提としたプログラミングモデルになる
.NETフレームワークと同じようなもん

今もあるがそれがウェブ標準技術をベースに再構成される
今あるものは何も残らんよ。MFCが消えたのと同じように
すべてが作り直される

>>33
> jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが

jQueryで要素を操作するんじゃないよ。要素の操作はコンポーネントに組み込まれる。

jQueryの担当はイベントハンドラだよ。
コンポーネント時代において、コンポーネント間の情報のやり取りは
すべてイベントによって引き起こされる。イベントドリブンって知ってるかね？ｗ

コンポーネントから特定のベントを受け取り、そしてそのまま又は多少加工して
他のコンポーネントに情報を渡す。コンポーネントは必ずしもUIを持っているとは限らない
タイマーコンポーネントのようなものもある。

ウェブという貧弱な技術からスタートしているだけで
結局の所、必要としているプログラミングモデルは、
最初から自由だったデスクトップアプリと変わらない。
デスクトップアプリを見ればウェブ技術の将来はわかる

イベントハンドラに特化したライブラリがあれば充分だな
めでたしめでたし

それがjQueryなわけだが

FormDataのappendをjqueryのcallbackで使ったらappendされなかったのですが
これはjqueryのせいですよね？
たしか$.ajaxでは"processData":falseと"contentType":falseの設定しなきゃいけなかったような・・
ajaxのときとは違ってエラーがでなかったのでめちゃくちゃハマりました・・

いいえ、あなたの使い方が間違ってるだけです

>>39
よくよく考えるとformdataにはキーも値もsetされていて
そのformdata送信後のパラメーター（コンソールのnetworkのところ）に反映されてないだけかも、でした
jqueryのcallback(例えばtoggleとかeach)の中でformdata.appendのときは送信後のパラメータに反映されてなくて
jquery関係ない外のブロックでformdata.appendすると送信後のパラメーターに反映される
みたいなところまでは検証できたと思います
”そもそもformdataにキーがセットされているか否か”をまた近い内に検証してみます
てっきり、パラーメータに反映されない＝formdataにキーがセットできてない
だと思ってました

http://httpbin.org/
サイト上のコンソール上にて検証しました
var prm=[["key0","val0"],["key1","val1"],["key2","val2"]];
var $hoge=$('<div id="hoge">hogehoge</div>');
$(document.body).append($hoge);
var formData=new FormData();
formData.append(...prm.shift());
$hoge.toggle(function(){
formData.append(prm[0][0],prm[0][1]);
formData.set(prm[1][0],prm[1][1]);
});
$.ajax({
"url": "https://httpbin.org/post",
"type": "POST",
"processData":false,
"contentType":false,
"data": formData
}).complete(res=>console.log(res));

$.eachは大丈夫でした
$().toggleで使うとキーがappendできないっぽいです

> $().toggleで使うとキーがappendできないっぽいです
だからそんなことはないって
お前が使い方間違ってるだけ

だいたいその検証でなにがどうなってるのかさっぱりわからんし
他人にわかるようにかけ

>>42,43
chromeとffでしか検証していませんが
FormDataにはgetメソッドというのがあってそれを使うとキーが取得できます
var prm=[["key0","val0"],["key1","val1"],["key2","val2"],["key4","val4"]];
var $hoge=$('<div id="hoge">hogehoge</div>');
$(document.body).append($hoge);
var formData=new FormData();
formData.append(...prm.shift());
$hoge.toggle(function(){
formData.append(prm[0][0],prm[0][1]);
formData.set(prm[1][0],prm[1][1]);
formData.append("key3","val3");
});
formData.set(prm[2][0],prm[2][1]);
console.log(formData.get("key0"));//val0
console.log(formData.get("key1"));//null
console.log(formData.get("key2"));//null
console.log(formData.get("key3"));//null
console.log(formData.get("key4"));//val4

一応原因はわかりました
toggle内でconsoleするとなぜか最後のconsoleの後にconsole.logされるのでおかしいと思い
時間を置いてから最後のconsole.logを実行したらキーがセットされていました

>>35
コンポーネントは要素でしょ
要素を操作するってことじゃん
逆に要素の属性指定で操作できない要素を作ったら
それWeb Componentの意味半減でしょ

>>46
コンポーネントとなってる要素は操作する（事がある）
コンポーネントの中身の要素は操作しない

> 逆に要素の属性指定で操作できない要素を作ったら
コンポーネントとなってる要素の属性は操作する
コンポーネントの中身の要素の属性は直接操作しない（メソッド、イベント経由で行う）

JQ厨にとってのコンポーネントはこれだから
同じものと思わない方が良い
<div class="my-component">
　<input type="checkbox" name="switch">switch1
</div>

input type="file"のファイルを選択するボタンを押さずにダイアログを開きたいのですが
どうやればいいのでしょうか（File APIの常にひらっきぱなしD&Dのやつではありません）

>>44
「javascript formdata」で検索して、MDN のサンプル通りに作れば？