+ JavaScript の質問� ..
2:Name_Not_Found
19/12/27 01:15:43.40 .net
■FAQ
◆開発者ツール(Developer Tools)の基本的な使い方
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
URLﾘﾝｸ(developer.apple.com)
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。)
3:Name_Not_Found
19/12/27 01:15:59.17 .net
■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (DOM Standard (DOM4) 和訳)
URLﾘﾝｸ(www.w3.org) (DOM3 Events)
URLﾘﾝｸ(www.w3.org) (UI Events)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (CSSOM 和訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
URLﾘﾝｸ(domparsing.spec.whatwg.org) (DOM Parsing and Serialization - innerHTML等)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (XMLHttpRequest 和訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (File API 和訳)
URLﾘﾝｸ(www.whatwg.org) (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
URLﾘﾝｸ(developer.mozilla.org)
◆ MSDN Library
URLﾘﾝｸ(msdn.microsoft.com) (Internet Explorer API)
URLﾘﾝｸ(msdn.microsoft.com) (JavaScript)
URLﾘﾝｸ(msdn.microsoft.com) (JScript)
URLﾘﾝｸ(msdn.microsoft.com) (DHTML)
◆ JavaScript Garden (ja)
URLﾘﾝｸ(bonsaiden.github.com)
◆ JSON (JavaScript Object Notation)
URLﾘﾝｸ(www.json.org)
■テンプレ案
URLﾘﾝｸ(fiddle.jshell.net)
■FAQ
URLﾘﾝｸ(fiddle.jshell.net)
4:Name_Not_Found
19/12/27 01:16:15.89 .net
■参考URL
ダウンロード、CDN
URLﾘﾝｸ(jquery.com)
ブラウザサポート
URLﾘﾝｸ(jquery.com)
jQuery UI
URLﾘﾝｸ(jqueryui.com)
jQuery UI ダウンロ－ド
URLﾘﾝｸ(jqueryui.com)
リファレンス等
URLﾘﾝｸ(alphasis.info)
URLﾘﾝｸ(www.jquerystudy.info)
URLﾘﾝｸ(js.studio-kingdom.com)
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
URLﾘﾝｸ(qiita.com)
5:Name_Not_Found
19/12/27 01:16:34.96 .net
■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に URLﾘﾝｸ(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
URLﾘﾝｸ(bclary.com) (ECMAScript 3 HTML版)
URLﾘﾝｸ(www2u.biglobe.ne.jp) (ECMAScript 3 和訳)
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 5.1 HTML版)
URLﾘﾝｸ(tsofthome.appspot.com) (ECMAScript 5.1 和訳)
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 6 / ECMAScript 2015)
URLﾘﾝｸ(kangax.github.io) (ECMAScript 5 compatibility table)
URLﾘﾝｸ(kangax.github.io) (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
URLﾘﾝｸ(www.whatwg.org)
URLﾘﾝｸ(momdo.s35.xrea.com) (HTML5.1 部分訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (Web Storage 和訳)
6:Name_Not_Found
19/12/27 01:16:50.73 .net
■JavaScript主要ライブラリ・フレームワーク
jQuery
URLﾘﾝｸ(jquery.com)
jQuery UI
URLﾘﾝｸ(jqueryui.com)
jQuery Mobile
URLﾘﾝｸ(jquerymobile.com)
Lo-Dash
URLﾘﾝｸ(lodash.com)
Backbone.js
URLﾘﾝｸ(backbonejs.org)
Underscore.js
URLﾘﾝｸ(underscorejs.org)
AngularJS
URLﾘﾝｸ(angularjs.org)
Knockoutjs
URLﾘﾝｸ(knockoutjs.com)
RequireJS
URLﾘﾝｸ(requirejs.org)
D3.js
URLﾘﾝｸ(d3js.org)
threejs
URLﾘﾝｸ(threejs.org)
7:Name_Not_Found
19/12/27 01:17:06.24 .net
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に一本化されました。
8:Name_Not_Found
19/12/27 01:17:22.59 .net
■JavaScript主要ライブラリ・フレームワーク 利用率
URLﾘﾝｸ(w3techs.com)
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は URLﾘﾝｸ(validator.w3.org) で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
9:Name_Not_Found
19/12/27 01:17:39.19 .net
■各種仕様
◆ Standard ECMA-262
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 2015, いわゆる ES6)
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 2018)
URLﾘﾝｸ(tc39.es) (ECMA-262 最新ドラフト)
◆ HTML Standard (HTML5)
URLﾘﾝｸ(www.whatwg.org)
URLﾘﾝｸ(momdo.s35.xrea.com) (HTML5.1 部分訳)
URLﾘﾝｸ(www.hcn.zaq.ne.jp) (Web Storage 和訳)
削るべきか要審議
URLﾘﾝｸ(www.ecma-international.org) (ECMAScript 5.1 HTML版)
URLﾘﾝｸ(tsofthome.appspot.com) (ECMAScript 5.1 和訳)
URLﾘﾝｸ(kangax.github.io) (ECMAScript 5 compatibility table)
URLﾘﾝｸ(kangax.github.io) (ECMAScript 6 compatibility table)
10:Name_Not_Found
19/12/29 17:05:16.56 RZV6QmbA.net
html内に記述のjavascriptにはlinter?は効かないのでしょうか。
オンラインでそれに対応したサービスはないでしょうか。
11:Name_Not_Found
19/12/30 19:50:08.90 .net
2019年もjQueryのシェアは微増で終わりましたね（苦笑）
だから言ったんだよ。誰もがウェブアプリ作ろうと思ってたりしないんだから
普通のウェブサイトならjQueryでいいんだって
適切じゃない技術に乗り換える意味がない
12:Name_Not_Found
19/12/30 20:02:39.64 .net
どっかのフロントエンジニア君（笑）が必死に終わる終わるいっても
結局はこの結果ですよ。Angular？ReactJS？一年経ってもぜんぜん増えてませーんｗ
URLﾘﾝｸ(w3techs.com)
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%
URLﾘﾝｸ(w3techs.com)
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%
13:Name_Not_Found
19/12/30 20:37:31.23 .net
形骸化してるだけなのに哀れだね
14:Name_Not_Found
19/12/30 20:40:29.08 .net
形骸化？AngularやReactが増えないから
jQueryは減らないんですよ
AngularやReactが形骸化しちゃったと？ｗ
15:Name_Not_Found
19/12/30 21:24:40.42 .net
ここまでjQuery信者っぷりが露骨なテンプレだと、何も感じないな
2020年も彼は平常運転なんだろうね
16:Name_Not_Found
19/12/30 22:01:38.93 .net
一生懸命覚えたjQueryを使った案件が減っちゃうとまんまが食えなくなっちゃうんだろうね
かわいそうに
17:Name_Not_Found
19/12/30 22:23:51.87 .net
でもjQuery減ってないじゃんｗ
AngularとかReactはバージョナップで
また覚え直しになるでしょ？
18:Name_Not_Found
19/12/30 22:47:42.82 .net
覚え直し？？
19:Name_Not_Found
19/12/31 01:26:51.56 .net
現実を見据えた奴なら全部覚えるだろ
jQueryに拘ってるのは信者だけ
20:Name_Not_Found
19/12/31 03:43:03.03 .net
そりゃjQueryが消えるわけないんだから
jQueryも全部の中に含まれるだろうな
21:Name_Not_Found
19/12/31 05:12:47.54 .net
>>17みたいにjQuery以外をこき下ろすのはアホってことだな
22:Name_Not_Found
19/12/31 05:27:29.38 .net
別にこき下ろしてないだろ
Angularが1と2で互換性なくなったのは事実だし
ブラウザ標準のWeb Componentsが控えてるから
脱Angular、脱Reactの流れは明らか
23:Name_Not_Found
19/12/31 05:37:48.66 .net
目指せフルスタックエンジニア
24:Name_Not_Found
19/12/31 09:30:44.31 .net
Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
jQueryなんてとっくに使われなくなってるはずでしょ
ここは自ら学ぶスレでJS仙人Web仙人を目指す者が多いだろうけど
全体で見ればできるだけ自ら学びたくなくて他者にすがりたい人が多いでしょ
だからこのスレでライブラリやフレームワークを進めるのは
このスレ以外で相談されたときと比べたら控えるべき
例えば全く無知な人からこういう見た目のグラフを起きたいと言われて、
WebGLの数十のAPIと数十の技法をここで説明仕切るのは不可能だし、
より噛み砕いても説明しきれないときはWebGLを0から学んでこいとだけいうのはあまりに辛辣なので
グラフ表示ライブラリを提示して、そちらのこの使い方を変わりに学べということを言うのは極悪ではないとは思う
何れにせよ目的が学ぶことより問題対処の答えをもらうほうが大きくなってはいけないということ
ここは仕事依頼所ではなくて質問者が自ら学ぶ機会を作るための場所ということを忘れてはいけない
25:Name_Not_Found
19/12/31 09:37:35.58 .net
そこで質問者に何を学ばしたいのかということ
jQuery力を身に付けさせたいのか、
jQueryなどに頼らなくてもWebAPIで実現できる力を身に付けさせたいのか、
それは各回答者によって違うし違ってて良いと思うが
ここがJavaScriptスレということは頭の片隅に置いておいてほしい
フランス料理スレがあったとして、そこで電子レンジ中心でするというのは面白いと思うが
あまり電子レンジ最高、これに頼らないのは変だというアピールをすると
なにかに特別こだわるのであれば亜流として他スレでやれということにってしまうのは仕方がないだろう
26:Name_Not_Found
19/12/31 12:45:02.16 .net
>>24
> Web Componentsが控えてるから脱Angular、脱Reactになるというのなら
> jQueryなんてとっくに使われなくなってるはずでしょ
それは違うよ。Web Componentsはウェブアプリを作るもの
なので同じウェブアプリを作るAngularやReactと競合してる。
jQueryはウェブサイトに動きをつけるもの
Web Componentsと競合してない。
将来的にはWeb Componentsで作ったコンポーネントを
組み合わせるライブラリとしてjQueryが使われるだろう
27:Name_Not_Found
19/12/31 19:12:55.80 .net
jQuery厨と反jQueryとのバトルかお
大晦日だし朝までやってみろだお
生テレビみたいに
28:Name_Not_Found
19/12/31 19:42:37.59 .net
>>26
Web ComponentsとjQueryを対比してるのではなくて、
標準で補えるような機能があるから、競合すると言って移行が進むとは限らないでしょってこと
競合するってことは見方を変えると親和性が高く補い合えるということでもあるのだから
Web Componentsはウェブアプリを作るものではなく
要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
それに作れたからと言ってそれらを上手く使ったり運用することまでは含まれていないのだから
そういう面でフレームワークは必要でしょ
またjQueryはウェブサイトに動きをつけるものっていうのであれば
Web Animation APIが競合するでしょ
でもだからといってjQueryが不要ということにはなっていないでしょ
29:Name_Not_Found
19/12/31 19:47:56.44 .net
>>26
標準の各機能というのはあくまで機能であって、
フレームワークとか、ライブラリでもjQuery規模のものは
その世界観をまるごと提供するもので、そこに意味があるわけでしょ
そういう使い方をしているのであれば、
標準機能があるからフレームワークやライブラリが不要とはならないでしょ
「機能」のような粒度でそれらを欲しているわけではないのだから
30:Name_Not_Found
19/12/31 23:39:49.36 .net
>>28
jQueryとの対比？何を言ってるのですか？
標準の機能があるからAngularやReactのような重いフレームワークが不要になり
またそれに伴いフレームワークがまたガラリと変わるって話をしてるんですが
> Web Componentsはウェブアプリを作るものではなく
> 要素を新たに作ったりコンポーネント化するというのはむしろ旧来のWebの作り方の延長上にあるものでしょ
従来のWebの延長だから、みんなWeb Componentsを選ぶでしょうね
> またjQueryはウェブサイトに動きをつけるものっていうのであれば
> Web Animation APIが競合するでしょ
動きってアニメーションのことじゃないですよ（笑）
動きというのは各コンポーネントの連携の話です。
AngularやReactでコンポーネントを作る時代は終わり
Web標準のWeb Componentsでコンポーネントを作るようになります。
いろんな所がオレオレブランドのコンポーネントを作るようになるでしょう
そこにフレームワークは組み込まれません
コンポーネントは部品です。その部品をつなげるものが必要です。
それがjQueryです。
31:Name_Not_Found
19/12/31 23:45:28.54 .net
jQueryでコンポーネント(笑)作ってる奴には関係ないだろ
32:Name_Not_Found
20/01/01 00:09:12.79 .net
Web Componentsでコンポーネント作るんでしょ？
33:Name_Not_Found
20/01/01 15:14:45.12 .net
>>30
それは違う
原則として標準機能というのは低レイヤーを攻めてる
フレームワークなどは高レイヤー
Web Componentsも一番大きい部分はなにかというとShadowDOMであり
今まで既存の要素spanやdivなどを無理くり使って
欲しい物を作っていたのがよりスマートにできるということ
スマートにできるようになったからと言って、
開発者誰もが自分でShadowDOMを触るかと言うと違う
そこは引き続きフレームワークを使うのが普通だろう
要するにこの手の標準機能はフレームワークを
よりスマートに作れるようにするためにあると言っても過言ではない
>>コンポーネントは部品です。その部品をつなげるものが必要です。
そのとおり
>>それがjQueryです。
それは違う
jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
要素間の高度な連携のための機能は入っていない
jQueryしか使わないのであればそこのロジックは全部自前で書くことになる
だからjQueryはあくまで「ライブラリ」と言われている
34:Name_Not_Found
20/01/01 16:34:48.95 .net
>>33
デスクトップアプリの歴史を学んだほうが良いぞ
ShadowDOMでコンポーネントが作れるようになったら
次起きる流れはコンポーネントの配布だ
コンポーネントは特定のフレームワークに依存せずに
単独で使えたほうが良い。そしてツリービューとかそういった
便利なものが配布される。そしてRADツールの登場だ
RADツールを前提としたプログラミングモデルになる
.NETフレームワークと同じようなもん
今もあるがそれがウェブ標準技術をベースに再構成される
今あるものは何も残らんよ。MFCが消えたのと同じように
すべてが作り直される
35:Name_Not_Found
20/01/01 16:52:45.29 .net
>>33
> jQueryは「Query」とついてることで分かるように要素を扱うことには特化しているが
jQueryで要素を操作するんじゃないよ。要素の操作はコンポーネントに組み込まれる。
jQueryの担当はイベントハンドラだよ。
コンポーネント時代において、コンポーネント間の情報のやり取りは
すべてイベントによって引き起こされる。イベントドリブンって知ってるかね？ｗ
コンポーネントから特定のベントを受け取り、そしてそのまま又は多少加工して
他のコンポーネントに情報を渡す。コンポーネントは必ずしもUIを持っているとは限らない
タイマーコンポーネントのようなものもある。
ウェブという貧弱な技術からスタートしているだけで
結局の所、必要としているプログラミングモデルは、
最初から自由だったデスクトップアプリと変わらない。
デスクトップアプリを見ればウェブ技術の将来はわかる
36:Name_Not_Found
20/01/01 18:51:12.67 .net
イベントハンドラに特化したライブラリがあれば充分だな
めでたしめでたし
37:Name_Not_Found
20/01/01 23:49:57.33 .net
それがjQueryなわけだが
38:Name_Not_Found
20/01/02 00:39:17.61 .net
FormDataのappendをjqueryのcallbackで使ったらappendされなかったのですが
これはjqueryのせいですよね？
たしか$.ajaxでは"processData":falseと"contentType":falseの設定しなきゃいけなかったような・・
ajaxのときとは違ってエラーがでなかったのでめちゃくちゃハマりました・・
39:Name_Not_Found
20/01/02 00:42:39.36 .net
いいえ、あなたの使い方が間違ってるだけです
40:Name_Not_Found
20/01/02 01:13:52.66 .net
>>39
よくよく考えるとformdataにはキーも値もsetされていて
そのformdata送信後のパラメーター（コンソールのnetworkのところ）に反映されてないだけかも、でした
jqueryのcallback(例えばtoggleとかeach)の中でformdata.appendのときは送信後のパラメータに反映されてなくて
jquery関係ない外のブロックでformdata.appendすると送信後のパラメーターに反映される
みたいなところまでは検証できたと思います
”そもそもformdataにキーがセットされているか否か”をまた近い内に検証してみます
てっきり、パラーメータに反映されない＝formdataにキーがセットできてない
だと思ってました
41:40
20/01/02 08:37:20.01 .net
URLﾘﾝｸ(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": "URLﾘﾝｸ(httpbin.org)
"type": "POST",
"processData":false,
"contentType":false,
"data": formData
}).complete(res=>console.log(res));
$.eachは大丈夫でした
$().toggleで使うとキーがappendできないっぽいです
42:Name_Not_Found
20/01/02 08:58:04.72 .net
> $().toggleで使うとキーがappendできないっぽいです
だからそんなことはないって
お前が使い方間違ってるだけ
43:Name_Not_Found
20/01/02 09:06:04.54 .net
だいたいその検証でなにがどうなってるのかさっぱりわからんし
他人にわかるようにかけ
44:Name_Not_Found
20/01/02 10:57:00.44 .net
>>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
45:Name_Not_Found
20/01/02 11:08:02.59 .net
一応原因はわかりました
toggle内でconsoleするとなぜか最後のconsoleの後にconsole.logされるのでおかしいと思い
時間を置いてから最後のconsole.logを実行したらキーがセットされていました
46:Name_Not_Found
20/01/02 11:34:00.98 .net
>>35
コンポーネントは要素でしょ
要素を操作するってことじゃん
逆に要素の属性指定で操作できない要素を作ったら
それWeb Componentの意味半減でしょ
47:Name_Not_Found
20/01/02 11:46:59.68 .net
>>46
コンポーネントとなってる要素は操作する（事がある）
コンポーネントの中身の要素は操作しない
> 逆に要素の属性指定で操作できない要素を作ったら
コンポーネントとなってる要素の属性は操作する
コンポーネントの中身の要素の属性は直接操作しない（メソッド、イベント経由で行う）
48:Name_Not_Found
20/01/02 12:57:56.70 .net
JQ厨にとってのコンポーネントはこれだから
同じものと思わない方が良い
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
49:Name_Not_Found
20/01/02 17:46:44.67 .net
input type="file"のファイルを選択するボタンを押さずにダイアログを開きたいのですが
どうやればいいのでしょうか（File APIの常にひらっきぱなしD&Dのやつではありません）
50:Name_Not_Found
20/01/02 18:28:40.53 .net
>>44
「javascript formdata」で検索して、MDN のサンプル通りに作れば？
51:Name_Not_Found
20/01/02 19:00:35.75 .net
>>49
任意のタイミングで開きたいって話ならそんな横着は無理
あくまでもユーザーのアクションが起点
URLﾘﾝｸ(jsfiddle.net)
52:Name_Not_Found
20/01/02 19:08:57.22 .net
>>50
フォームの設置は簡単なのですが
ファイルを選択ボタンをjavascriptでクリックしたことにするやりかたがわからなかったのです
>>51
.click()で思い通りのやつができました！！
ありがとうございました！
53:Name_Not_Found
20/01/02 21:42:02.91 .net
click()は？
54:Name_Not_Found
20/01/03 06:50:22.61 .net
>>48
"俺が想像する"JQ厨にとってのコンポーネントはこれだから
でしょ？
そしてお前は、お前が想像するjQuery厨を叩いてるだけ
お前の中のお前が作り出した架空のjQuery厨と争ってるｗ
55:Name_Not_Found
20/01/03 08:56:28.07 .net
>>54
ならこのコードをコンポーネントと呼ぶ奴は
jQuery厨でもないただのアホってことでいいんだよな？
いやー良かった良かった
56:Name_Not_Found
20/01/03 14:20:36.90 .net
Web Componentsの話をしてるんだから
（今の文脈では）コンポーネント＝Web Componentsでしょ？
今の文脈ではだからね。
Reactの話をしているときに、コンポーネント＝Web Componentsなわけはない
57:Name_Not_Found
20/01/03 15:22:45.77 .net
おもち
58:Name_Not_Found
20/01/03 15:53:59.15 .net
>>56
つまり文脈が変わればコンポーネントと呼ぶと？
59:Name_Not_Found
20/01/03 16:09:50.73 .net
そりゃあそうだろう
componentsは何かの固有名詞ではなく
部品って意味の一般名詞だもの
60:Name_Not_Found
20/01/03 16:13:11.16 .net
いや全然部品じゃないじゃん
61:Name_Not_Found
20/01/03 17:18:50.68 .net
>>60
PHPなどを使ってその部分だけ別ファイルにして
使い回せるようにすれば部品になるでしょ？
62:Name_Not_Found
20/01/04 08:54:51.63 .net
結局>>42さんの＞だからそんなことはないって
のそんなことってどんなことだったんですか・・？
63:Name_Not_Found
20/01/04 22:31:49.98 .net
URLﾘﾝｸ(api.jquery.com)
toggle関数の仕様を確認すると、
durationを省略してcompleteのみを指定した場合、completeが実行されるのはdurationのデフォルトである400ms後。
つまり、>41 は設定処理実行前に出力してる。
よって
> $().toggleで使うとキーがappendできないっぽいです
toggle関数の中でFormData#appendの動作が変わる、なんてことは起きてない。
64:Name_Not_Found
20/01/05 09:49:35.82 .net
ようは400ms経つ前にappendされてないformdataを送ってしまうので
post先に反映されないということでは？
つまり>>42の段階で＞そんなことはないって
のニュアンスが違うような
仮にそういう意味ではなく>>63だということは最初からわかってた
ってことなら>>44の結果が出る前に
「toggleの処理より先に$.ajaxやってるから」もしくは「全部toggleの中に書け」みたいな言い当てができているはず
それらを踏まえて＞そんなことはない
のニュアンスは明らかに、>>41通りやってもformdataは送れる
みたいな意味だよなぁ・・
65:Name_Not_Found
20/01/05 10:12:41.94 .net
＞$().toggleで使うとキーがappendできないっぽいです
の意味は質問者回答者それぞれの視点で
質問者>>41 （ 結果的にappendされていないデータが返ってきた → appendできない、なぜ？ ）
回答者１ （ appendはできていることを知っている → appendできない、と言っているのは間違っている ）
回答者２ （ appendはできていることを知っている → appendできないと思っているのは、処理の順番を質問者が知らないから ）
ざっくりこういう回答者の思考パターンがあると思うけど
回答者１みたいな人だと、そもそもソレがわからないから質問してるんだが？みたいな質問とかなり相性が悪い
もちろん質問者がコードを開示しなかったり質問の難易度にもよるけど
66:きりん
20/01/13 01:45:37.42 O01yZc0t.net
function boxclear03() {
const clears = document.getElementsByClassName('clear03');
for(var i=0, len = clears.length; i< len; i++){
var clearem = clears.item(i);
clearem.value = "";
clearem.checked = false;
}
}
あるイベントが行われると、
クラス「clear03」の要素全ての、フォームの値とチェックボックスのチェックが取り除かれる
スクリプトを作ってみたのですが、フォームはクリアになるのですが、チェックボックスはクリアに
なりません。
チェックボックスをクリアにするにはどうすればいいでしょうか？
67:きりん
20/01/13 02:45:34.21 O01yZc0t.net
すいません。自己解決しました。
68:Name_Not_Found
20/01/14 08:57:13 1IADoVEp.net
【環境】Windows10 pro, chrome バージョン: 79.0.3945.117（Official Build） （64 ビット）
【条件】自前の class データを、JSON 経由で保存・復元したいが、復元部分のやりかたがわからない
【何をしたのか】
(1) 自前の class データを用意
(2) データを入力
(3) そのデータを、class ごと localStrageに stringify で保存
(4) (3) のデータを localStrage から stringify と parse で取得
(問題) 取得した文字列をどうしたら、自前の class に再格納できるのかわからない
【エラーメッセージ】なし
【期待する結果】自前の class にすんなりデータ格納する方法が知りたい
【サンプルコード】
(1) class testClass {
constructor ( a, b, c ) {
this.aa = a; this.bb = b; this.cc = c;
};
あとは上記のゲッターセッター
}
(2) var xxx = new testClass ( 963, 852, 741 );
(3) localStorage.setItem ( "testKey", JSON.stringify( xxx ) );
ここで、 testKey を chrome のデバッグ機能で見ると、
{ "aa": 963, "bb": 852, "cc": 741 } が入っているのは確認。
(4) JSON.parse( JSON.stringify ( localStorage.getItem ( "testKey" ) ) );
で取得すると、{ "aa": 963, "bb": 852, "cc": 741 } が得られるが、
この値をどうしたら testClass 型に戻せるのかわからないです。
イメージ的には、下記のような感じのことがしたいです。testClass yyy にデータを読み込む感じ
testClass yyy = JSON.parse( JSON.stringify ( localStorage.getItem ( "testKey" ) ) );
69:Name_Not_Found
20/01/14 10:01:01.54 .net
>>68
(2) var xxx = new testClass ( 963, 852, 741 );
(3) localStorage.setItem ( "testKey", xxx.AABBCC );
みたな感じで(3)で{ "aa": 963, "bb": 852, "cc": 741 }を返すゲッター（AABBCC）を放り込み
で、その後は（も）xxxを扱う
というのが普通だと思うけど
70:Name_Not_Found
20/01/14 11:14:50.45 1IADoVEp.net
>>69
すみません、(4) について教えて下さい。
新しく作った testClass のデータに
以前のセッションで保存していた localStorage データを
復元するように読み込む方法が知りたいです。
71:Name_Not_Found
20/01/14 14:50:40.46 .net
test
72:Name_Not_Found
20/01/14 14:51:30.03 .net
>>70
localStorage.setItem('testKey', `data:text/html,<ｓｃｒｉｐｔ>alert('testClass相当のオブジェクトを書き込む');</ｓｃｒｉｐｔ>`);
$(document.body).append(localStorage.getItem("testKey"));
73:Name_Not_Found
20/01/14 18:52:23.05 PQLCVKFf.net
一般的にインラインの記述をすると、デバッガーが効かなくなるんでしょうかね
74:Name_Not_Found
20/01/14 23:29:02.33 .net
>>70
型とかそもそも…
説明ではnewしてインスタンスが返る
とか普通の言語っぽく言ってっけど
ただのオブジェクトですし
そのtestClassをコピペしてtestClass2作って
new testClass2したら
全く同じもの出来ちゃうよ
75:Name_Not_Found
20/01/15 00:17:26.17 .net
RegExp.$1.replace('foo', 'bar')
などとすると、RegExp.$2が機能しなくなるようなんですが
この理由について解説してるサイトがあれば教えて下さい
76:Name_Not_Found
20/01/15 03:14:48.65 .net
RegExp
URLﾘﾝｸ(developer.mozilla.org)
$1, $2(match[ 1 ], match[ 2 ])などは正規表現で、( ) で囲ったキャプチャー部分を表す。
match[ 0 ] は、マッチした全体を表す
例えば、
var re = /([0-9]+)-([0-9]+)/;
var str = '123-789';
var match = re.exec( str );
console.log( match[ 0 ], match[ 1 ], match[ 2 ] );
// 123-789, 123, 789
77:Name_Not_Found
20/01/15 03:39:33.40 .net
それは後方参照の説明をしてるだけで質問の答ではない
78:Name_Not_Found
20/01/15 04:16:57 .net
>>68
constructor の引数を、オブジェクト渡しに、変えた方が良いのでは？
JavaScript では、constructorの多重定義が出来ないので、面倒
class Test {
constructor ( obj ) {
this.a = obj.a;
this.b = obj.b;
}
}
var obj = new Test ( { b: "2", a: 1 } );
console.log( obj );
// Test { a: 1, b: '2' }
79:Name_Not_Found
20/01/15 05:54:33 .net
>>77
・回答には多様性があります。他人の回答を尊重してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです
80:Name_Not_Found
20/01/15 06:19:09 .net
つまりそれを利用してわざと的外れな回答をしたわけだな
81:Name_Not_Found
20/01/15 06:28:18.73 .net
わざと的外れな回答をしたかどうかは関係ありません
ルールに従いましょう
82:Name_Not_Found
20/01/15 09:27:17.98 .net
new FileReaderのreader.readAsTextってめちゃくちゃ読み込み遅くないですか？
フォルダ３０個分（ファイル数１００個くらい）を同時にやってみたら
いつまで経ってもうんともすんともいいません
マシンのスペックに依存しているのはわかるのですがもしかしてそれ以外にも制限あったりしますか
83:Name_Not_Found
20/01/15 12:04:19.53 .net
否定してなくて草
84:Name_Not_Found
20/01/15 12:17:13.18 .net
new FileReaderで読み込んでアップロードし終わったファイルデータ？の
メモリ解放的なことってどうにかできないものか・・
タブ閉じればいいけど、同じタブだとどんどん貯まってく
85:Name_Not_Found
20/01/15 14:08:56 .net
>>84
どっかに変数で保持し続けてたりしない？
86:Name_Not_Found
20/01/15 22:03:57.68 .net
chromium edge公開記念日
87:Name_Not_Found
20/01/15 22:13:43.55 .net
>>85
var hoge=formdata;みたいにそのままにしてた
hoge=nullとかにすれば開放されるの？
今度試してみる
88:Name_Not_Found
20/01/16 12:45:06 //pOUTQK.net
>>68 です。
みなさん、いろいろご回答ありがとうございます。
説明が下手ですみません。
ゲームのセーブデータのような使い方をしたいと思いました。
ネットを頼りに見様見真似で、保存していた
{ "aa": 963, "bb": 852, "cc": 741 }
を取得できたのはいいけど、この文字列をどうしたら便利に使えるか
（＝元のデータに復元できるか）、がわかりませんでした。
探し方がわるいのか、どの説明も上記の「文字列として取れます」で終わっていて、
その先の解説が欲しいなと…
それとも、文字列を取得できた時点で JSON の役目はおわっていて、
あとは csv 読み込みみたいに自分で切り分けて使うのでしょうか。
みなさんなら、この文字列どうするかんじでしょうか。。。
最悪、JSON使わなくても大丈夫そうな処理なのですが、
せっかくなので使って便利なら試したく思いました。
89:Name_Not_Found
20/01/16 13:35:55.10 .net
const obj = JSON.parse()
const yyy = new testClass(obj.aa, obj.bb, obj.cc)
yyy.aa // 963
90:Name_Not_Found
20/01/16 22:29:56 .net
>>88
データ形式によっちゃ使えないけど例だけ満たせればよいなら
const yyy = new testClass(null, null, null);
JSON.parse(json, (key, value) => {
if (key) yyy[key] = value;
});
とかｗ
91:78
20/01/16 23:34:41 .net
>>78
みたいに、
new testClass( obj )
と、1つの引数のオブジェクト渡しに変えた方が、良さそう
引数を3つも渡すのは、面倒でしょ？
92:Name_Not_Found
20/01/17 03:55:24 .net
理由は面倒だから？ｗ
new testClass(1, 2, 3)
と書くのが面倒で、
new testClass({a: 1, b: 2, c: 3})
と書くのは面倒じゃないんだ？ｗｗｗ
93:Name_Not_Found
20/01/17 06:25:26.57 .net
頭が悪いね
大ヒント：obj.a
94:Name_Not_Found
20/01/17 06:40:13.58 c4cACoID.net
テトリスくらい作れないと話になりませんか？
95:Name_Not_Found
20/01/17 08:13:00.78 gip8AQMU.net
WebフォームとDBいじるだけならテトリス要らないと思われ
ゲーム作るならテトリスをコピーするのは大事だけど、新しい落ちゲー作るアイデアのが大変
96:Name_Not_Found
20/01/17 08:21:36.97 c4cACoID.net
新しいおちげー作るにしてもテトリスは基本になるかなと
ゲームエンジン使ってるんですけどね
97:Name_Not_Found
20/01/17 15:43:36 s+p7yde/.net
みなさん本当にありがとうございます。
>>89
すみません、保存するのは何かのポイントのように変わるものです
数字は固定じゃないです
>>90
アロー演算子わかんないです…
>>91
ちょっと何言ってるかわかんないです…（自分の習熟度が低すぎて）
localStorage.getItem ( "testKey" ) から取れた値を復元したいです
>>92
var aaa = new testClass ( 1, 2, 3 );
localStorage.setItem ( "testKey", JSON.stringify( aaa ) );
var bbb = new testClass( localStorage.getItem ( "testKey" ) );
で、bbb が {aa: "{"aa":1,"bb":2,"cc":3}", bb: undefined, cc: undefined} になっちゃった…
おしい…？
でも、そんなニュアンスのことをしたかったです。
>>93
はい（真顔）
なんで皆さんが頑なに localStorage.getItem ( "testKey" ) を起点に答えてくれないのか
未だにわかっていません…
{"aa":1,"bb":2,"cc":3} になった時点で再利用できないデータなのか。。。
－－－
初歩から出直すべきですかね… （＾＾；；；
98:Name_Not_Found
20/01/17 17:05:22.40 .net
出直すべきだね
99:Name_Not_Found
20/01/17 20:08:42.03 .net
最近不思議に思っていることがあります
各ブラウザがサードパーティクッキーを制限すると発表して騒ぎになっていますが、
別に広告主が提供先サイトにＪＳを埋め込ませれば好きなように好きなだけ広告主のサーバーとやり取りさせられますよね?
サードパーティクッキーを制限すると、どんな問題が本質的に解決するのでしょうか?
100:Name_Not_Found
20/01/17 20:11:14.10 .net
広告主に「たくさん広告表示されました！だからお金ください！」って
請求できるってこと？
101:Name_Not_Found
20/01/17 20:45:00 .net
>>99
> 別に広告主が提供先サイトにＪＳを埋め込ませれば好きなように好きなだけ広告主のサーバーとやり取りさせられますよね?
URLﾘﾝｸ(developer.mozilla.org)
102:Name_Not_Found
20/01/17 21:20:12 .net
>>101
それは広告主のサーバー側の設定の話なので問題にはならないのでは？
103:Name_Not_Found
20/01/17 21:25:38 .net
>>100
それはCookieでもできますよね？
だから最近は表示ではなくほとんどクリックベースになっているのでは？
104:78
20/01/18 00:18:02.34 .net
>>97
JavaScript では、他の言語のように、constructor の多重定義が出来ないから、
設計する際、どちらかを選択しないといけない！
Test は引数を、1つのオブジェクトとして渡す方法で、
Test2 は各引数を、別々に渡す方法だけど、
Testの方が分かりやすいかなと思って
class Test {
constructor ( obj ) {
this.a = obj.a;
this.b = obj.b;
} }
var obj = new Test ( { b: "2", a: 1 } );
console.log( obj );
// Test { a: 1, b: '2' }
次へ続く
105:78
20/01/18 00:18:40.19 .net
class Test2 {
constructor ( a, b ) {
this.a = a;
this.b = b;
} }
var obj = new Test2 ( 1, "2" );
console.log( obj );
// Test2 { a: 1, b: '2' }
各引数を別々に渡す方法だど、引数の順序で決まるから、
下のように、引数を逆の順番で渡せない！
つまり、順番を確認しないといけないので、ややこしく、バグりやすい設計
var obj = new Test2 ( "2", 1 );
console.log( obj );
// Test2 { a: '2', b: 1 }
106:78
20/01/18 01:02:28 .net
>>97
【JavaScript入門】JSONの作成とparse() / stringify()の使い方！
URLﾘﾝｸ(www.sejuku.net)
var js_obj = {
a: 1,
b: "2"
}
console.log( js_obj );
// { a: 1, b: '2' }
// JSON.stringify で、JavaScript(JS)のオブジェクトを、JSON に変換する
var json_obj = JSON.stringify( js_obj );
console.log( json_obj );
// {"a":1,"b":"2"} JSONは、プロパティ名が文字列になっている！
// JSON.parse で、JSONをJSオブジェクトに戻す
js_obj2 = JSON.parse( json_obj );
console.log( js_obj2 );
// { a: 1, b: '2' }
107:78
20/01/18 03:41:24 .net
>>106
の続き
JSON.parse で、JSONをJSオブジェクトに戻した、js_obj2 は、{ a: 1, b: '2' }
ここで、>>104
で述べた、constructor の引数に、1つのオブジェクトとして渡す方法が、便利！
class Test {
constructor ( obj ) {
this.a = obj.a;
this.b = obj.b;
} }
var obj = new Test ( js_obj2 );
console.log( obj );
// Test { a: 1, b: '2' }
次ページ最新レス表示スレッドの検索類似スレ一覧話題のニュースおまかせリスト▼オプションを表示暇つぶし2ch
1563日前に更新/95 KB
担当:undef