JavaScript情報交換所(プログラミング既習者専用） [無断転載禁止]©2ch.net

**デフォルトの名無しさん** · 2015/12/07(月) 07:26:33.87

実際にJavaScriptを書いている人の情報交換所です。
プログラミング既習者専用です。初心者の方はご遠慮下さい。
玄人の方、歓迎致します。

**デフォルトの名無しさん** · 2020/05/12(火) 13:08:44.44

'(シングルクウォーテーション)と"(ダブルクウォーテーション)の使い分けに悩みます。
悩みを消しこれだと自信を持って使う考え方はありますか？
どっちを使ってもいい場合とどちらか限定の使い方があるので気持ち悪いですw

**デフォルトの名無しさん** · 2020/05/12(火) 13:33:40.94

>>562
シェルスクリプトだと、'と"とは、展開の有無等であきらかに異なるから、
それにしたがって使い分ける。

どちらも同じって場合は、文字列に空白が含まれる場合や入れ子になる場合に"を使って、
その他、基本的には'でくくってる。
jsやpythonなんかがこれに該当。

"しか使えないバッチファイルは文句なしに"。
ただし、*nix由来のプログラムの場合、オプション内部で'を入れ子で使うことがある。

こんな感じ？

**デフォルトの名無しさん** · 2020/05/13(水) 06:16:03.92

VSCode のデフォルトが、Beautify だろ。
拡張機能のPrettier とか

'・" かどうかは、これらの設定で変わる

HTML の属性が、" で囲むから、それらの文字列をさらに囲むには、' を使う

JavaScript の話は、web 制作管理板の方で聞いてください！
この板には、あまり人がいないから

**質問者** · 2020/05/13(水) 13:14:18.33

こちらで良いかわかりませんが、
・web上でモニタリングをしたい
・10秒ごとに自動更新
・固定htmlに要素を用意。javascriptで変数を持ち、値によって要素の画像を切り替える。
getElementById(*).src=****
setTimeout(this,10000)
これをサーバーに置いて10人くらいがアクセスしたら、サーバーの負荷はどうでしょうか？
画像切り替えるときにサーバーにアクセスするので、やはりだめでしょうか？
わかる方いましたらお願いいたします。

**デフォルトの名無しさん** · 2020/05/13(水) 13:59:35.07

数枚程度なら、すべての画像を送ってしまって、
ブラウザ側で、スライダーなどで切り替える

Google map みたいに、無数の画像があるなら、
ajax でサーバー側にアクセスして、必要な画像を送ってもらう

JavaScript の話は、web 制作管理板の方で聞いてください！
この板には、あまり人がいないから

**デフォルトの名無しさん** · 2020/05/13(水) 14:02:19.06

>>565
いろいろイミフ

>・web上でモニタリングをしたい
誰が何をどうやってモニタリングするの？

>・10秒ごとに自動更新
何を更新するの？

>これをサーバーに置いて10人くらいがアクセスしたら、サーバーの負荷はどうでしょうか？
クライアント側JavaScriptの話でサーバー負荷とどう関係があるの？

**デフォルトの名無しさん** · 2020/05/13(水) 14:12:08.64

>>563
そうざますかありがとう
どっちみち慣れないうちは混乱しますね
JSだけのエンジニアなら当然その人の哲学や宗教により迷わず判断してると思うけど
こっちはJSは片手間でやっててさわるのが数年ぶりということがあるから混乱しますわ

**デフォルトの名無しさん** · 2020/05/13(水) 14:14:46.69

何の要素か知らんが、
「cssで作るスライドショー」とかでググったら答えが落ちてそう

**デフォルトの名無しさん** · 2020/05/13(水) 14:21:07.89

>>568
自分で決められないならとりあえずビッグネームのstyle guideに従っとけばいい

JavaScript =>single quote
HTML => double quote
CSS => single quote
https://google.github.io/styleguide/jsguide.html#features-strings-use-single-quotes
https://google.github.io/styleguide/htmlcssguide.html#HTML_Quotation_Marks
https://google.github.io/styleguide/htmlcssguide.html#CSS_Quotation_Marks

**質問者** · 2020/05/13(水) 15:12:19.72

>>566
ありがとうございます。

>>567

>>・web上でモニタリングをしたい
>誰が何をどうやってモニタリングするの？

やりたい事は、100個のセンサや機械の情報をブラウザ上にリアルタイムで表示して、異常ならば、ブラウザを見てる人に通知したいということです。

>・10秒ごとに自動更新
センサーや機械の情報です。

>>これをサーバーに置いて10人くらいがアクセスしたら、サーバーの負荷はどうでしょうか？
>クライアント側JavaScriptの話でサーバー負荷とどう関係があるの？

javascriptで動的にイメージ画像を切り替えたら、結局サーバーにアクセスすることになってしまうのではと思ったのです。
画像イメージはサーバー上に置かれているので。一回アクセスしたらキャッシュされるかもしれませんが。

>>569
ありがとうございます。

**デフォルトの名無しさん** · 2020/05/13(水) 15:52:15.36

>>571
なるほど

サーバー側のセンサーや機械の状態更新を
クライアントからのアクセスによってトリガーする仕組みだと不味いけど
そうじゃなくてサーバー側ですでに存在してるデータに対して
10人くらいが数秒に1回アクセスするんなら
その負荷は微々たるものだよ

各状態に応じた画像は
最初にモニタリング用画面にアクセスした時に全部ダウンロードさせておいて
数秒に1回AJAXでサーバー側の状態のみ取得してその値によって画面表示を切り替えればいい

**質問者** · 2020/05/13(水) 16:03:47.03

>>572
そうです。

>最初にモニタリング用画面にアクセスした時に全部ダウンロードさせておいて

この技術がわかりません。何をキーワードにして調べれば良いのでしょうか、すみませんが、お願いいたします。

**質問者** · 2020/05/13(水) 16:51:28.10

すみません。解決しました。
最初にリロードしたときに正常な画像だけでなく、異常な画像もリンク(表示しない)しておけばよいのですね。
そうしておけばブラウザ側にキャッシュされるので。

**デフォルトの名無しさん** · 2020/05/13(水) 17:25:36.80

>>574
いろいろ方法あるけど一番堅いのはCSSスプライト
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS

他には
- visibility: hidden
- JavaScriptでページロード時に画像を読み込む
- 凡例として異常時の画像も一つ表示しておく
など

この辺の話はJSのプログラミングの話じゃないので
誰か書いてたけどweb制作板で聞いたほうがいいかも

**質問者** · 2020/05/13(水) 17:50:05.96

>>575

本当にいろいろとありがとうございました。

**564** · 2020/05/13(水) 18:01:05.87

>>568

>>564
にも書いたけど、

VSCode のデフォルトが、Beautify で、拡張機能のPrettier が有名

Ruby on Rails で有名な、Airbnb などのStyle Guide だろ

**デフォルトの名無しさん** · 2020/05/13(水) 18:09:08.10

>>571
>画像イメージはサーバー上に置かれているので。一回アクセスしたらキャッシュされるかもしれません
確かに、同じファイルパスなら、キャッシュを使う

データは、ajax で、JSON でやりとりすることが定番

**質問者** · 2020/05/14(木) 00:27:54.68

>>578

はい、ありがとうございます。

**デフォルトの名無しさん** · 2020/06/20(土) 11:09:53.20

できる訳ないだろうなと思いつつ聞くんだけど、javascriptでローカルのファイルを別のディレクトリに移動させたりすることってできる？

**デフォルトの名無しさん** · 2020/06/20(土) 13:24:24.10

つNode

**デフォルトの名無しさん** · 2020/06/20(土) 13:27:05.74

つcscript/wscript

**デフォルトの名無しさん** · 2020/06/20(土) 20:45:20.50

>>581
これはサーバサイドでjs書いたときの話だもんね

ユーザーがブラウザ操作してる時に動くブラウザ上のjsでファイル操作がしたいんだよなあ
そんなこと出来たらやべーからまあ無理なんだろうけど、なんか代わりの手段ないものか

**デフォルトの名無しさん** · 2020/06/20(土) 21:17:03.49

>>583
プラットフォームとしてブラウザが欲しいのなら electron = chromium + node がそれだろ。
代表アプリはatomとVSCode。
サイトのJSでユーザーのローカルファイルを弄りたいというのなら、それが出来るようなら困るだろ。

**デフォルトの名無しさん** · 2020/06/20(土) 21:21:46.31

>>583
あと、今現在使っていいか、使えるか、というのはあるが、技術的にはActiveX。
wiki読めば大体分かるはず。

**デフォルトの名無しさん** · 2020/06/29(月) 12:03:45.83

うんち

**デフォルトの名無しさん** · 2020/06/29(月) 12:04:05.78

htmlタグに書くonclick=の中には
JSの処理を直接書くこともfunction(){}と書いてその中に処理を書くことも、どちらもokですか？その違いはありますか？

**デフォルトの名無しさん** · 2020/06/29(月) 12:07:23.28

onclick=のあと関数名(関数が入った変数)を書く場合は()は書かないほうがいいですか？書くべきですか？

<button onclick='unko'> or <button onclick='unko()'>

unko=function(){
alert('unko!');
}

みたいなときです。

**デフォルトの名無しさん** · 2020/06/29(月) 12:51:41.62

最初に喧嘩売ってきてわろた

**デフォルトの名無しさん** · 2020/06/29(月) 12:54:40.10

>>587
こういう感じで、直接内容も書けるみたい

on@click='con@sole.log("abc")'

注意！書き込めないため、@ を入れました

>>588
on@click='unko()'

みたいに、すべて( ) が付いている

それと、JavaScript の質問は、web制作管理板の方へ書き込んでください！

こちらの板は、web制作管理板が荒らしに荒らされた時に、
緊急避難的に立てられたものだから、今は使われていない

**デフォルトの名無しさん** · 2020/06/29(月) 21:14:29.05

>>586-588
オムツがまだ取れてなくてウンコ臭い初心者はWeb板へ
何度も言われていることだが

それ以前にお前レベルの超超超超初心者はそもそもここ(5ch)に来るべきではない
各自が勝手に意見を言ってるだけだから、それなりの確率で間違いや勘違いはどうしても発生する
それを自分で修正する能力がないうちは、5chを使うのは止めた方がいい
超超超超初心者なら、少なくとも間違っていたら訂正してもらえる場所、
つまり本か信頼出来るWebサイトを参考にするべきだ

なお俺はお前みたいなウンコお漏らし初心者用の本やサイトは知らない
というか、そんな、始めて3時間で通過するレベルの事柄を、ネットで質問しようとすること自体、かなり頭がおかしい
少なくともお前はプログラマには向いてないし、間違って就職しても浮きまくって仲間に入れず不幸な人生になるから止めとけ
それを教えてもらいたければ、「1週間の集中講座ででWebページ開設出来ます！」みたいなセミナーとかに行け
JavaScriptの部を始めて10分後にはそれについて教えてくれるだろう

**デフォルトの名無しさん** · 2020/06/30(火) 01:12:09.33

>>551
通りすがりだけどソレみて長年のモヤモヤがはれました、ありがとう。

**デフォルトの名無しさん** · 2020/07/23(木) 00:01:42.43

$("div").click(function())

**デフォルトの名無しさん** · 2020/07/23(木) 00:02:03.83

$("div").click(function(){
})

**デフォルトの名無しさん** · 2020/07/23(木) 00:05:54.40

$("div").click(function(){
$(this).css('background','red');
})

のこの$(this)が$("div")を指す理由はなんですか？
Javaではthisというのはそれを定義したクラスのインスタンスを指すと習いましたが。

**デフォルトの名無しさん** · 2020/07/23(木) 00:38:57.14

jQuery, Haxe のthis は、JavaScript/TypeScript のthis とは異なる。
this がwindow を指したり、おかしな部分があるので、それを変えている

それと、JavaScript の質問は、web制作管理板の方へ書き込んでください！

こちらの板は、web制作管理板が荒らしに荒らされた時に、
緊急避難的に立てられたものだから、今は使われていない

**デフォルトの名無しさん** · 2020/07/23(木) 07:12:59.16

>>596
「おかしな部分があるので、それを変えている」とは？

**デフォルトの名無しさん** · 2020/07/23(木) 07:13:47.98

thisの正体を見分けるコツはないですか？

**デフォルトの名無しさん** · 2020/07/23(木) 07:32:15.26

>>595
> のこの$(this)が$("div")を指す理由はなんですか？

DOM APIとの互換性

例えば、これのイベントハンドラの中身を書き換えるならば
$("div").click(function(){
　　$(this).css('background','red');
})

このようになる。（おまけで引数のjQuery eventを追加）
$("div").click(function(event){
　　this.style.background = 'red';
})

このイベントハンドラ（function）はDOM APIと互換性があるので全く同じように使える。
（引数のeventはjQuery eventではなくDOM APIの eventだがある程度の互換性がある）
divElement.addEventListener('click', unction(event){
　　this.style.background = 'red';
})

つまりイベントハンドラをDOM APIのものと互換性があるようにしているのが理由
そうすることで、コードを相互に変換しやすくなる。
例えば後からjQuery化するときなど少しずつ移植できる。

**デフォルトの名無しさん** · 2020/07/23(木) 07:36:27.79

>>598
thisは実行時に変わるからコードを見てもわからない
つまり呼び出されているコードを見てもわからない。
「誰が呼び出しているか？」を知る必要がある。

同じthisであっても「あれ」に登録して「あれ」から
呼び出されれば「それ」とは違うthisの場合がある。

だからthisが何かは仕様を調べるしかない
関数の引数にobjが入ってる場合、このobjの正体はなんですか？と
言ってるのと同じ質問だよ

**デフォルトの名無しさん** · 2020/07/23(木) 07:39:49.30

>595
Javaではthisを変えられることができないが
JavaScriptはthisは呼び出し側で与えるオブジェクト
JavaScriptだけではなくRubyやPerlなどいくつかの言語は呼び出し側でthisを変更できる

**デフォルトの名無しさん** · 2020/07/23(木) 08:18:34.22

>>599-601
ありがとうございます。
深いですね。
まだちゃんと理解できてないですが
ゆっくり吟味して考えてみます。

**デフォルトの名無しさん** · 2020/07/23(木) 08:20:56.24

this=eventとなっているということかな？

**デフォルトの名無しさん** · 2020/07/23(木) 08:24:35.38

>>603
違うぞ。eventはおまけ。thisの話とは直接関係ない

**デフォルトの名無しさん** · 2020/07/23(木) 08:25:10.27

ようするにjQueryはブラウザ標準のDOM APIと
互換性をもたせて作られているということ

**デフォルトの名無しさん** · 2020/07/23(木) 20:38:07.50

>>598
ID:/b5pS+w+ の言っていることは全面的に正しいが、補足すると、
> thisの正体を見分けるコツはないですか？
こんな事を言っている時点で糞サイト（或いはゴミ本）に騙されているから止めとけ。
見分ける必然性も意味もない。単なる暗黙の引数程度でしかなく、
実際にそれなりに組織的にコーディングするとcallはそれなりに使う。

DOM APIのthisがe.currentTargetを指すのはそもそもJava用の仕様、
つまりJavaでもクライアントスクリプトを書けるようにする為の仕様らしい。（とここ5chで聞いた）
しかし現在はJavaで書く奴なんて一人もいないし、JavaScriptにおいてはe.targetを全面的に使うのが正しい。
理由は、
1. thisにはe.currentTargetが入っているが、マトモなサイトなら通常はbubbleを利用する為、e.target主体で書くことになる。
　つまりこの仕様のthisでは使い物にならない。
2. e.currentTragetで役に立つ場合は、Elementに直接onXXXかaddEventListenerした場合だが、
　こんな事をやっているのはjQueryを使っている程度の簡単なサイトだけ。
　やれば分かるがbubbleを利用した方が実行効率もよく、コードも綺麗になるから、マトモなサイトは全部そうしてる。
　ただし、Elementに直接貼った方が直感的で分かりやすいので、jQueryのような簡単/初心者向けの場合には活用される。
　(なおjQueryでもbubble主体で書くことは可能ではあるが、それをやるとjQueryの意味がほぼ無くなるので普通はやってないと思う）

**デフォルトの名無しさん** · 2020/07/23(木) 20:39:00.72

3. それなりに組織的にコーディングすると、どうしてもイベントハンドラで共通の関数を使いたい要求が出てくる。
　しかしイベントハンドラだとthisがe.currentTargetによって潰されているので、共通関数をクロージャ（最終段はグローバル）で掴むしかないが、
　クロージャはクローズ(追加不能だしコード配置が限定される＝C++で言うクラスはクローズ、namespaceはオープンと同じ意味のクローズ）ので、
　現実的には使いにくく、俺はイベントハンドラを集めたオブジェクト（その中に共通関数も入っている）をthisとしてcallし直して、
　イベントハンドラ内ではthis.my_sub_function()で共通関数を呼べるようにしている。
　この場合、thisは単なるオブジェクトなので、継承出来るのがいい。(共通関数の共通関数を__proto__側に追い出せる）
　どうせthisが使い物にならない仕様なので他の連中も同様にやっているとは思う。

なお俺はjQuery不要派だがjQuery自体は初心者には分かりやすく偉大だと思っている。
実際にjQueryを使っていて問題ないのなら使うこと自体も悪いことではない。
ただしそれは世の中のマトモなサイト≒ガチのプログラマーが本気で書いたサイトではほぼ使われていない手法だということも理解しておいた方がいい。
といっても今の君には分からないだろうが、イベントハンドラ内でthisをe.currentTargetとして利用することはガチのサイトではほぼ無い、ということ。
今はどうせ何も分かってない状態なんだろうから、それならイベントハンドラ内ではthisを使わずe.currentTargetを使う癖を付けた方が多分いい。
それ以前にbubbleを使うようにした方がいいが。

**デフォルトの名無しさん** · 2020/07/23(木) 20:41:48.09

といっても多分さっぱり何がなにやら、だと思うが、そういうものだと思っておいてくれ。
質問の質問を受けていたら話が進まないのでそれは断る。

**デフォルトの名無しさん** · 2020/07/23(木) 21:58:10.24

>>606
> 　(なおjQueryでもbubble主体で書くことは可能ではあるが、それをやるとjQueryの意味がほぼ無くなるので普通はやってないと思う）

イベントのキャプチャフェーズとバブリングフェーズの話をしてるなら
jQueryはバブリングフェーズしか対応してません
jQueryの意味がなくなる？なぜですか？

そもそもIE8以前がキャプチャフェーズに対応してないので
それ以前からあるjQueryでは実装が不可能です。
（jQuery 4.0では実装されるらしい）

間違ったことを書かないでください

**デフォルトの名無しさん** · 2020/07/23(木) 22:00:14.35

>>607
>　現実的には使いにくく、俺はイベントハンドラを集めたオブジェクト（その中に共通関数も入っている）をthisとしてcallし直して、
>　イベントハンドラ内ではthis.my_sub_function()で共通関数を呼べるようにしている。
>　この場合、thisは単なるオブジェクトなので、継承出来るのがいい。(共通関数の共通関数を__proto__側に追い出せる）

やめましょう。無関係のイベントハンドラをまとめることは
単一責任の原則に違反しています。

**デフォルトの名無しさん** · 2020/07/23(木) 22:01:00.61

>>607
> イベントハンドラ内でthisをe.currentTargetとして利用することはガチのサイトではほぼ無い、ということ。
いいえ。殆どがthisを使っています。e.currentTargetは冗長なだけです。

**デフォルトの名無しさん** · 2020/07/23(木) 22:41:43.25

>>606
> DOM APIのthisがe.currentTargetを指すのはそもそもJava用の仕様、
> つまりJavaでもクライアントスクリプトを書けるようにする為の仕様らしい。（とここ5chで聞いた）

逆です。Javaではe.currentTargetを使い、thisは使えません。
（当時の）Javaでは言語仕様上の制限でイベントハンドラとして関数を使用することはできません。
イベントハンドラはオブジェクトである必要があります。

イベントハンドラ自体がオブジェクトであるため、thisはイベントハンドラオブジェクトになります。
そのためJavaでthisは使えません。

また昔のIEはaddEventListnerがなくattachEventを使いますが。
attachEventの場合thisはwindowでありe.currentTargetではありません。
つまり初期のIEのDOM APIはもちろんJavaでも使えますが
event.srcElement（e.currentTarget相当）しか実装されてないということです。
thisがe.currentTargetなのはJavaScriptのために作られた仕様です。

**デフォルトの名無しさん** · 2020/07/23(木) 22:44:12.81

>>606
> JavaScriptにおいてはe.targetを全面的に使うのが正しい。
いいえ。e.targetは廃止されてます。
https://developer.mozilla.org/ja/docs/Web/API/Event/target

わざと正反対のことを書いてるんですかね？

**デフォルトの名無しさん** · 2020/07/23(木) 22:47:04.66

>>609
キャプチャフェーズの話はしてない。
なお俺の判断では、キャプチャフェーズは余程のパッチ当て以外では使うべきではない。
あれは使わないでも十分組めるし、そもそもキャプチャフェーズを使わなければならないシチュエーションがまるでない。
だから俺は何であの仕様が入れられたのか不明なのだが、君はそれが分かるか？
具体的に、キャプチャフェーズのユースケースを知りたい。

> jQueryの意味がなくなる？なぜですか？
jQueryは基本的に
queryしたElementに何か(この場合はイベント追加)するのを宣言スタイルで短く分かりやすく書けるのが売りだろ。
バブル主体で書くとそもそもqueryしないから、jQueryを使う意味がないんだよ。
それはやれば分かる。分からないのはやってないからでしかない。

> やめましょう。無関係のイベントハンドラをまとめることは
> 単一責任の原則に違反しています。
無関係ではないんだよ。
そしてその考え方がJava的オブジェクト指向の限界であり、JavaでGUIを誰もやらない理由だよ。
いずれにしても、JavaのGUIなんてキングオブゴミだし、GUIに関してはJava的オブジェクト指向は一旦捨てた方がいい。
実際、.NETにしても、データはバインディングでグローバルストア方式になってるだろ。
（末端のオブジェクトにデータを持たせている風に見せているが、
現実問題としてそれだと状態のセーブが出来なくて(やりにくくて）いきなり詰むから、実際はバインディングでゴニョゴニョ出来るようにしている）
だからJava的な、末端のオブジェクトにデータもイベント関数も全部持たせる、というのがGUIに絶望的に向いてないんだよ。
だからJavaではろくなGUIが作れない、というよりは無駄に苦労するので誰もやらない。その結果が今だ。

> いいえ。殆どがthisを使っています。e.currentTargetは冗長なだけです。
それは君がbubbleを使ってないから。jQueryもだがフレームワーク等は仕様はDOMAPIに合わせているだろうけど、
実際にbubbleの場合はe.currentTargetなんて使い物にならないから当然thisも使わない。
これもやれば分かるだけのこと。君はやってないだけ。

**デフォルトの名無しさん** · 2020/07/23(木) 22:49:01.44

>>614
> バブル主体で書くとそもそもqueryしないから

そういう意味ですか？
意味不明なので他のわかりやすいサイトを
探し出してください

**デフォルトの名無しさん** · 2020/07/23(木) 22:49:21.91

×そういう意味ですか？
○どういう意味ですか？

**デフォルトの名無しさん** · 2020/07/23(木) 22:50:10.57

＞それは君がbubbleを使ってないから。

bubbleを使うとやらのコードを書いてください

**デフォルトの名無しさん** · 2020/07/23(木) 22:53:40.02

Description: The current DOM element within the event 「bubbling」 phase.
https://api.jquery.com/event.currentTarget/

**デフォルトの名無しさん** · 2020/07/23(木) 22:53:41.19

>>612
いや俺はthisがオブジェクトそのものだと聞いたが、
まあJavaの仕様については俺は詳しくないし、いずれにしてもスレチだし、この話は止めよう。

>>613
それは初耳だが、
LS見た限り当然載っているから移動されただけではないか？
そのページのLSの所押すと割と丁度いい場所に飛ぶから見てみればいい。

やれば分かるが、バブルで組んだ場合にe.target無しでは組めない。
廃止されるにしても、名前が変わって何かが定義されるとかであって、丸々捨てられることはないよ。
そしてbubbleを使わずに一々全Elementにイベントを付けていくのは完全に旧式であって、
マトモなサイトでは誰もそんなことやってない。
それも確認してみればいい。

**デフォルトの名無しさん** · 2020/07/23(木) 22:54:31.55

jQuery event.currentTarget
日本語訳説明：イベントバブリングフェーズ内の現在のDOM要素。

**デフォルトの名無しさん** · 2020/07/23(木) 22:55:20.17

>>619
だからjQueryはバブルしかサポートしてないし、
jQueryのevent.currentTargetは（DOM APIと同じで）
イベントバブリングフェーズ内の現在のDOM要素。

**デフォルトの名無しさん** · 2020/07/23(木) 22:57:37.04

>>619
> そしてbubbleを使わずに一々全Elementにイベントを付けていくのは完全に旧式であって、

jQueryでは全Elementにイベントハンドラを使えずに、
ocumentエレメントにイベントハンドラを付ける場合このように書きます。

$(document).on('click', 'a', function() {
　$(this).css("background": "red");
});

知ってましたか？ｗ

**デフォルトの名無しさん** · 2020/07/23(木) 23:16:41.69

https://jsfiddle.net/m8q15376/

例えばこの2つのコードはイベントハンドラをつけてるところは違いますが
同じよう動作をします。thisが使えない？何の話でしょうかねｗ

$("#id1").on('click', 'a', function() {
　$(this).css("background", "red");
});

$("#id2 a").on('click', function() {
　$(this).css("background", "red");
});

**デフォルトの名無しさん** · 2020/07/23(木) 23:18:15.34

>>621
君と話が通じないのは君がbubble主体で組んだことがないからだよ。
ただし、bubbleの重要性に触れた『初心者向け』サイトは皆無で、俺が知ってるのはuhyohyoだけ。
気になるならそこでも読むんだね。
或いはそこら辺のまともなサイト、ガチの商用サイトだとbubbleを使ってない方が珍しい（と思いたい）から、見てみるとか。
ただし日本のサイトは割とまじで糞で、20年前と同じですねー、ってのも普通にあるからそういうところは駄目だが。
(ここ5chもそうだし）

ちなみに２度目だが、フェースの話はしてない。
イベントがバブルするのを「イベントバブル」と言うんだよ。
これはWPF等でも使われているからJavaScriptのローカル用語ではなくてプログラミング用語だ。
（といっても俺が知っている限りイベントバブルを最初に実装したフレームワークはHTMLで、
それらをWPF等も採り入れたから当然同じ用語になっているだけだが）
そしてそれをbubbleと（短く短くとうるさいお前ら用に)略して言っているだけ。
もう一度言うが、フェーズの話はしてないし、そもそも既に書いたように俺はキャプチャフェーズの存在価値が分からない。
今のところの見方では、あれは不要な仕様だと思う。
jQueryでも対応してないのなら、実際それで困ることはないからだろ。

>>622
知ってる。そしてそれだとjQueryを使う意味が無い＝生のDOMAPIでも同様に書けるだろ
だからみんなjQueryを捨て始めてるだけ。
勿論君のようにjQueryが無いと死んじゃう人がそれに抗っているのも知ってる。

**デフォルトの名無しさん** · 2020/07/23(木) 23:21:08.33

もうわかりましたね？ ID:QHkNbR5l はイベントデリゲーションのことを
バブルなんて言ってるわけです（笑）

https://developer.mozilla.org/ja/docs/Web/API/Event/target
> event.target プロパティは、イベントデリゲーションを実装するために使用できます。

所詮オレオレ用語を使うレベルなんですよ

**デフォルトの名無しさん** · 2020/07/23(木) 23:22:10.11

>>623
だからそれ明らかにイベントバブル使ってないじゃん。
それを>>622形式で書いた時にe.targetが無いとどうしようもないでしょ。
それを言ってるんだよ。

**デフォルトの名無しさん** · 2020/07/23(木) 23:22:48.51

>>624
> 知ってる。そしてそれだとjQueryを使う意味が無い＝生のDOMAPIでも同様に書けるだろ

では生のDOM APIを使ってe.targetなしで書いてみてください。
できますか？ jQueryはe.targetなしで書きました。

**デフォルトの名無しさん** · 2020/07/23(木) 23:23:26.39

>>626
> だからそれ明らかにイベントバブル使ってないじゃん。]

最初に言ったよね？イベントバブル使うコードかけって
なんでお前かけないの？

**デフォルトの名無しさん** · 2020/07/23(木) 23:24:31.81

>>626
1. jQueryのコードはイベントバブルしか使わない（使えない）
2. >>622のコードはe.targetを使ってない

ここまではいいですかねぇ（呆れ）

**デフォルトの名無しさん** · 2020/07/23(木) 23:28:46.58

>>625
まあ君との話はもうする価値がないから終わりにするけど、
イベントバブルはオレオレ用語ではないと思うよ。
イベントデリゲーションってのは確かにそこにあるが、初めて聞いたが。

e.targetについては、
> 複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。
> 複数の要素に同じイベントハンドラーを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。
と、重要だからか？まじで2回書いてあるし、それが廃止とか使用禁止とかにはならないよ。
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events

**デフォルトの名無しさん** · 2020/07/23(木) 23:28:53.91

> イベントバブルを最初に実装したフレームワークはHTMLで、

笑うしかないわw HTMLがフレームワークとかｗ

**デフォルトの名無しさん** · 2020/07/23(木) 23:29:21.73

> イベントデリゲーションってのは確かにそこにあるが、初めて聞いたが。

はい、初めて聞くレベル

**デフォルトの名無しさん** · 2020/07/23(木) 23:29:24.10

>>613
そのMDNの廃止されたって言うのは以前の仕様書が廃止って意味じゃないの？

**デフォルトの名無しさん** · 2020/07/23(木) 23:30:10.44

> e.targetについては、
> 複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。

↓このコードが複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせているコード

https://jsfiddle.net/m8q15376/

$("#id1").on('click', 'a', function() {
　$(this).css("background", "red");
});

**デフォルトの名無しさん** · 2020/07/23(木) 23:56:14.14

まとめ

こいつはイベントデリゲーション（複数の要素に同じイベントハンドラを割り当てるコード）を
jQueryで書いているコードを見たことがない、もしくは見たことあっても気づかないで
jQueryでもDOM APIと同じように書くしかないはずだ！だからjQueryを使う意味がない！と考えていたようだが
そのイベントデリゲーションこそjQueryでシンプルに書けるコードの一つだったという話です。

**デフォルトの名無しさん** · 2020/07/24(金) 00:01:31.32

>>632
というかね、「イベントバブル」をオレオレ用語だと噛みついてくる時点でお前はどうかしてる。
JavaScript使ってて今まで聞いたことがないってのは本当に酷い。

MDNにも「イベントのバブリング」とは書いてある。
> https://developer.mozilla.org/ja/docs/Web/Guide/Events/Creating_and_triggering_events
uhyohyoでも「イベントバブリング」って言ってる。
> https://uhyohyo.net/javascript/3_3.html
-ing形だから通じないって事も無いだろうし、そもそもbubbleフェーズを表すと勘違いしても大体通じる内容でしかない。
そこで噛みついてくる意味が分からん。

JavaScriptが世のGUIを席巻しつつあるのは、イベントバブルの功績が大きい。
これがあるのと無いのとでは、GUIの組みやすさの次元が違うんだよ。
だから.NETもWPFで、GTKでもGTK+3から採用されてる。(Qtは知らん)

それを全く使わずにJavaScriptのGUIを語るのは完全に間違ってる。
そこら辺がjQueryしか出来ない人（つまり君とか）の問題だと思うよ。
jQueryしか出来ない人が馬鹿にされているのは君も知っているだろ？そういうことだよ。

**デフォルトの名無しさん** · 2020/07/24(金) 00:22:53.71

お前のオレオレ用語っていうのは「バブル主体」だアホめ
なんだよバブル主体って（笑）

**デフォルトの名無しさん** · 2020/07/24(金) 00:24:19.77

>>636
> JavaScriptが世のGUIを席巻しつつあるのは、イベントバブルの功績が大きい。

だから、イベントバブルじゃなくてイベントデリゲーションな（笑）
何がオレオレ用語なのかわかってない。
用語の使い方を間違ってんだよお前は。

jQueryはイベントバブルを使ってる

**デフォルトの名無しさん** · 2020/07/24(金) 00:25:21.34

何度も言うがjQueryを使うということは
イベントバブルを使ってるということだ

**デフォルトの名無しさん** · 2020/07/24(金) 00:28:52.61

ちなみにイベントデリゲーションという用語は
MDNでも使われているが、jQueryが最初に使った用語なんじゃないかと思ってる。

もともとはjQueryでイベントデリゲーションを使う時
delegateというメソッドを使っていたから。それが廃止になりonに統一された。

onに統一された結果、jQueryでイベントデレゲーションを使ったコードと
使ってないコードの差異が減って、e.targetを使わずにthisでコードが書けるようになった。

jQueryでイベントデレゲーションを使うのは、DOM APIを使うよりも
格段にシンプルに書けるようになっている
無関係のイベントハンドラを統合するという単一責任の原則に反するコードを書くことなく
イベントデレゲーションを使うことが可能になっている。

**デフォルトの名無しさん** · 2020/07/24(金) 00:33:37.06

>>637-639
半島に帰れ

**デフォルトの名無しさん** · 2020/07/24(金) 01:22:11.42

>>626
訂正、>>623でもバブルを利用しているようだ。

jQueryはこの形式だとDelegated event handlers として扱われ、
on時点でサブクエリして一致した子要素に付けるのではなく、
内部的にバブルしてきたイベントを使い、実行時にクエリして一致を確かめるようだ。（後半部は予想、実装依存）
https://api.jquery.com/on/

だから確かにバブルを利用してはいるが、これだともっさり遅くはなる。（とはいえGUIの場合は大抵問題にはならない）
jQueryは使ってないし今後も使う予定もないので仕様には詳しくなく、見た目で判断してしまった。
なるほど何だかんだで上手く出来てはいる。

が、まあ、いずれにしてもこれをDOMAPIだけで書くのも別段苦労しないし、
jQuery内部でe.targetを使っているだけで、e.targetが無ければjQuery自体が組めないだけでしかない。

>>640
イベントデリゲーションの方がかなりオレオレ用語だと思うが。
確かにMDNには書いてあるが、俺は今まで聞いたこともなかったし、そもそもそれを「デリゲーション(ｷﾘｯ」とかいうのもどうかしてると思うが。
OOPで言う委譲に当たるから「デリゲーション」なんだろうが、それはOOPで言う「継承か委譲か」、という話とは全然違っていて、
単に親要素でしかなく、子要素とは何の関わりもない。（一応包含してはいるが）
だから無理やりOOP的な解釈をすれば「デリゲート」しかないのだろうけど、
それは、世の中の全てを無理矢理OOPで解釈するJava脳みたいな感覚を受け、
Java以外で普通にOOPを分かっている奴からしたら相当気持ち悪い使い方だし、実際に流行ってもないだろ。
これが気持ち悪いと思わないのは君がOOPを理解してないからだよ。
ただし俺はGUI自体がOOPにフィットしないと思っているから、GUIしかやらないのなら理解している必要はないとも思うけども。

そして君は都合の悪い>>633は無視なのか？
既に言ったが、現在の状況でe.targetが無くなることはない。
ただ、あの辺デタラメに拡張して仕様がグダグダなので、整理しろよな、とは思うが。

**デフォルトの名無しさん** · 2020/07/24(金) 01:48:12.97

ちなみにgoogle、

イベントバブル　約 22,500,000 件（0.43 秒）
イベントデリゲーション　約 23,600 件（0.28 秒）

**デフォルトの名無しさん** · 2020/07/24(金) 06:57:14.92

バブリングフェーズとイベントデリゲーションはバスタブとミカンくらい意味が違うがおんなじもんだと思ってたわけ？ｗ

バブリングフェーズはイベント伝搬のステージのことで、
div
a
a
という構造ならhtmlからdiv→aと伝搬してくるのがキャプチヤリングフェーズ。
その後a→divとhtmlまで戻っていくのがバブリングフェーズ。

イベントデリゲーションは２つのaにイベントパンドラ設定するよりdiv１つに設定してaのイベントまとめてハンドルしてもらいましょうというやり方。

a(子)のイベントハンドリングをdiv(親または祖先)に委譲(delegate)するからイベントデリゲーション。

ちんちんとマンチェスターユナイテッドくらい意味が違うけどおんなじもんだと思ってたわけ？ｗ

**デフォルトの名無しさん** · 2020/07/24(金) 07:07:22.97

>>642
イベントバブルっていうのはイベントがバブルのように上に上がっていくってだけで
一つのイベントハンドラで処理を行うって意味じゃねーんだよｗ
あーほ

**デフォルトの名無しさん** · 2020/07/24(金) 07:07:57.79

>>642
> だから確かにバブルを利用してはいるが、これだともっさり遅くはなる。（とはいえGUIの場合は大抵問題にはならない）
遅くなるの理由が何もないｗｗｗ

**デフォルトの名無しさん** · 2020/07/24(金) 07:09:14.13

>>642
> 確かにMDNには書いてあるが、俺は今まで聞いたこともなかったし、

それがすべて。お前が無知なだけ

**デフォルトの名無しさん** · 2020/07/24(金) 07:10:55.78

結局の所 >>635 のまとめで書いたとおり

こいつはイベントデリゲーション（複数の要素に同じイベントハンドラを割り当てるコード）を
jQueryで書いているコードを見たことがない、もしくは見たことあっても気づかないで
jQueryでもDOM APIと同じように書くしかないはずだ！だからjQueryを使う意味がない！と考えていたようだが
そのイベントデリゲーションこそjQueryでシンプルに書けるコードの一つだったという話です。

そのイベントデリゲーションこそjQueryでシンプルに書けるコードの一つだったという話です。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

**デフォルトの名無しさん** · 2020/07/24(金) 07:27:42.03

>>642
> が、まあ、いずれにしてもこれをDOMAPIだけで書くのも別段苦労しないし、

だから最初に書けと言ってる。なんで書かないのか？

**デフォルトの名無しさん** · 2020/07/24(金) 08:10:38.59

>>644
お前が日本語が出来なくていろいろ勘違いしてるだけだろ。

まず示したように、「イベントデリゲーション」なんて言葉は誰も使ってないから止めとけ。
イベントバブルの説明に必ず出てくる言葉なら、使用頻度＝ヒットページ数も1:1になるはずであって、
約1000:1ってのは誰も使ってないって事でしかない。

> バブリングフェーズとイベントデリゲーションはバスタブとミカンくらい意味が違うがおんなじもんだと思ってたわけ？ｗ
俺は同じ物だとは一言も言ってない。それを勝手に誤解しているのはお前の日本語が韓国人レベルだからだ。
ただ、これらは表裏一体であって、イベントがバブルしなければ纏めるも何もないので、
お前が思っているほど区別する意味もない。
お前みたいな文系馬鹿はやたら細かく区別して意味無くドヤる傾向があるが、プログラミングってのはそもそもそういうものではない。

実際問題として、イベントバブルを説明する際に、
確かに「バブルしてくるイベントを親で捕らえて纏めて処理する」事を示す名詞が欲しい、というのはあるだろう。
ただ、誰もそこで「イベントデリゲーション」なんて言葉を使ってないから1000:1の使用頻度になってる。
実際は、「バブルしてくるイベントを親で捕らえて」とそのまま言っているのだと思う。
ただそもそもバブルさせる＝親で捕らえて纏めて処理する大前提だから、それ含めてイベントバブルでも大して問題ないんだよ。

**デフォルトの名無しさん** · 2020/07/24(金) 08:10:58.84

同様にお前が無駄に拘っているのが以下だが、
> > イベントバブルを最初に実装したフレームワークはHTMLで、
> 笑うしかないわw HTMLがフレームワークとかｗ (>>631)
HTML/CSS/JavaScriptはほぼ常にセットで使われていて、どれだと区別する意味はないし、
確かに厳密にはどれでもないからWebAPIとか別括りにされてるが、そこに拘る意味もない。
俺は「イベントバブルを最初に実装した『フレームワークが』がHTMLだと言った。
お前的には「プラットフォーム」か、または別用語が適切なのかもしれんが、
いずれにしても言葉というのはコミュニケーションの手段であって、つまり通じるかどうかが最重要であって、
明らかに通じているのに揚げ足取りしているつもり？でドヤって来るのも頭おかしいとしか思えないが。
（オレオレ用語を使うなってのは「通じないから使うな」ということであって、オレオレ用語を使うこと自体が悪いというわけではない)

お前いつものjQuery厨か？
ならお前はここ2～3年、まるで成長してないな。

>>649
むしろお前がそれを書けないと言っているに近いが、それをお前は認めるか？
日本語が通じない馬鹿なお前の為に敢えて言い直すと、
お前が「僕は書けませんから書いてみてください」と言うのなら書くが、
あまりに簡単すぎてお前の馬鹿さが際だつだけだぞ。

いずれにしても、脱jQueryなんてのが出てくるのはjQueryを使う意味がなくなりつつあるからであって、
お前がそれを気に入らなくても、それは事実として認めるしかないし、
実際にjQueryから輸入された仕様もあるのだからjQuery自体が糞だったわけでもないんだよ。
ただ、役割を終えつつある、というだけの話であってさ。

**デフォルトの名無しさん** · 2020/07/24(金) 08:42:13.69

バブリングフェーズとイベントデリゲーションはバスタブとミカンくらい意味が違うがおんなじもんだと思ってたわけ？ｗ

**デフォルトの名無しさん** · 2020/07/24(金) 08:55:46.07

> まず示したように、「イベントデリゲーション」なんて言葉は誰も使ってないから止めとけ。

↓

https://developer.mozilla.org/ja/docs/Web/API/Event/target
event.target プロパティは、イベントデリゲーションを実装するために使用できます。

https://developer.mozilla.org/en-US/docs/Web/API/Event/target
The event.target property can be used in order to implement event delegation.

**デフォルトの名無しさん** · 2020/07/24(金) 08:56:14.50

> まず示したように、「イベントデリゲーション」なんて言葉は誰も使ってないから止めとけ。

えーっと、ボクチン英語が分かりませーんという話かな？ｗｗｗ
英語
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation
日本語
https://developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation

**デフォルトの名無しさん** · 2020/07/24(金) 08:58:29.43

URLからしてイベントデリゲーション使ってるなｗ
誰も使ってない用語とは…？ｗ

**デフォルトの名無しさん** · 2020/07/24(金) 08:58:39.33

>>650
> イベントバブルの説明に必ず出てくる言葉なら、

でてくるわけねーだろｗ
イベントバブル＝イベントデリゲーションじゃねーんだから

DOM APIのイベントモデルではイベントバブルがデフォルトで使われる
イベントモデルの説明でバブルフェーズとキャプチャフェーズの話は出る
だがイベントデリゲーションはかならず使うものではない

お前が、イベントバブル＝イベントデリゲーション（つまり同じ意味）だと
勘違いしてるから、使用頻度＝ヒットページ数も1:1になるという間違った結論になってる

イベントデリゲーションはかならず使うものじゃないんだから
イベントデリゲーションの方が数は少なくなるのは当たり前

**デフォルトの名無しさん** · 2020/07/24(金) 09:03:00.98

プッチンプリンとにんにく卵黄は同じものだ！
その証拠に、卵黄にんにくのほうが検索ヒット数が少ない！！

にんにく卵黄なんて用語は誰も使ってない！
プッチンプリンが正しい！！

？？？ｗｗｗｗｗ

**デフォルトの名無しさん** · 2020/07/24(金) 09:08:11.32

>>651
> 俺は「イベントバブルを最初に実装した『フレームワークが』がHTMLだと言った。

HTMLの仕様にイベントバブルなんてものはない
DOM APIの仕様だ

「イベントバブルを最初に実装した」というのはどういう意味か言ってみ
上の要素でイベントを捕まえて処理することではないのはもう理解してるよな

お前は「イベントがDOM要素の下位から上位へバブルのように登っていくこと」を実装した。
と言ってるわけだが、自分で理解してるのか？

**デフォルトの名無しさん** · 2020/07/24(金) 09:09:27.92

>>651
> むしろお前がそれを書けないと言っているに近いが、それをお前は認めるか？

だからさっさと書けよ。お前をテストしてやってるに決まってるだろｗ
最初からコード書けと言ってるのになんで書けないのは
お前がそれを書けないと言っているに近いが、それをお前は認めるか？

**デフォルトの名無しさん** · 2020/07/24(金) 09:21:46.61

脱jQueryなんて言葉が出てきても、脱jQueryが進んでいないのは事実だろ

https://w3techs.com/technologies/history_overview/javascript_library/all/y

jQuery
2017年1月 71.9%
2018年1月 73.1% （+0.1%/月）
2019年1月 73.6% （+0.05%/月）
2020年1月 74.2%
同年2月 74.4% （+0.2%/月）※1ヶ月経過時点
同年6月 75.5% （+0.26%/月））※5ヶ月経過時点
同年7月 76.0% （+0.3%/月）※6ヶ月経過時点

今年はなぜかjQueryのシェアの増加が加速してきてるんだわ。
最初の1ヶ月で0.2%しか増えてなかったのに、
6ヶ月後は1.2%増ではなく1.8%増、増加スピードが上がってる

後半さらに増加スピードが上がるとは思えないが、
このペースだと今年は1年で4%も増える可能性だってある。
ここ数年1%程度しか増えていなかったのに不思議だ

脱jQueryなんて所詮言葉だけだったということだ

**デフォルトの名無しさん** · 2020/07/24(金) 09:24:24.50

>>656
> イベントデリゲーションはかならず使うものじゃないんだから
> イベントデリゲーションの方が数は少なくなるのは当たり前
ここが違う。
バブルを利用する時点で「親で纏めて処理する」大前提なんだよ。これも既に言ったが。
逆に、バブルだけしても親で処理しないのなら意味無いだろ。
（まあバブル自体は勝手にするのだが）

だからイベントバブルの説明の際には必ず「親で処理する」事が含まれるんだよ。
これもお前みたいな文系馬鹿は「知識」としてそれぞれを別々にインストールしているから分からないのだろうが、
イベントバブルの説明＝イベントバブル自体とその使い方の説明＝当然親でイベントを纏めて処理する＝「イベントデリゲーション」も説明される
なんだよ。イベントバブルをお前はJavaScriptの「知識」として捕らえ、
「バブルフェーズとキャプチャフェーズ」もまた別の知識であり、
「イベントデリゲーション」も全く別の手法として「別知識」としているから駄目なんだ。

イベントバブルだけ理解しても、普通は、「ほ～ん、で？何が嬉しいの？」となるから、どうやって使うか、何が美味しいかまで説明されてる。
だけどそこでは誰も「イベントデリゲーション」と言ってないから1000:1の使用頻度になってる。
ただし実際にイベントバブルを活用するにはそれなりの知識と設計が必要であり、
初心者には無理だから初心者用サイトでの説明は皆無で、既に言ったとおり俺が知っているのはuhyohyoだけ。
そしてここら辺が有機的に繋がっているのを理解出来ないのは君が「イベントバブルを活用するのは難しい初心者」レベルだから。

お前は相変わらず初心者のままなんだよ。

**デフォルトの名無しさん** · 2020/07/24(金) 09:30:06.20

> バブルを利用する時点で「親で纏めて処理する」大前提なんだよ。これも既に言ったが。

誰が言ってるんですか？
そうであってほしいという願望ですよねｗ