X

+ JavaScript & jQuery 質問用スレッド vol.8 +

■ このスレッドは過去ログ倉庫に格納されています
2017/11/10(金) 22:44:30.04ID:???
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

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

+ JavaScript & jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
http://mevius.2ch.net/test/read.cgi/hp/1467906819/
2018/11/18(日) 16:34:55.13ID:???
質問の意図を理解して順序立てて説明すればね
いきなり「そんなやり方間違ってるjQuery使え」ってアホかと
2018/11/18(日) 16:45:19.54ID:???
>>665
ソースかいてやればいいのにそれだけいってもわかるわけ無いだろ
質問者のレベルにあわせて回答してやれよキチガイ
2018/11/18(日) 16:46:14.05ID:???
だから質問者が来るのを待ってると言ってるんだが
2018/11/18(日) 16:47:31.20ID:???
無視されてる時点であいてにされてないか理解できてないってのもわからにアスペ
2018/11/18(日) 16:50:33.53ID:???
開発の会話をきいてるだけで中途半端な知識だけあってコードかいたことがない営業みたい
2018/11/18(日) 17:04:05.95ID:???
chrome 拡張機能で jQuery を動かして
ブラウザゲームの特定の表示がでたらデータを抽出（とりあえず localStorage にでも保存）したいんですけど

$('#result').on('load', () => {
console.log("event start");
});

とかいてもなぜか実行されません
はじめから HTML にかかれてるわけじゃなく動的に生成されるHTM:Lだからな気がするんですが
#result って要素が動的に生成されたときに何かを実行するってどうかけばいいんでしょうか
2018/11/18(日) 17:16:04.75ID:???
最初からある要素にデリゲート
2018/11/18(日) 17:37:31.20ID:???
>>672
ありがとうございます

ttp://js.studio-kingdom.com/jquery/events/delegate
これでいいんでしょうか？

$("body").delegate(".enemy_info", "load", () => {
console.log("enemy_info");
});

とかいても実行されないです
chorome の要素には確かに

<div class="enemy-info">

が存在してるんですが load イベントを起こさずにHTMLを生成することができるんでしょうか
それとも deligate対象は body だとダメなのでしょうか
2018/11/18(日) 17:49:18.43ID:???
>>672
んー delegate の説明を読むと
デフォルトで $document だったものの範囲を制限できるってだけで
別に後から生成されたものにイベントがセットできるだけではない気がするのですが…
本当に delegate だけで load されるようになるんでしょうか…
2018/11/18(日) 17:51:05.58ID:???
要素タブは現在のDOM構造だからソースタブで最初からあるかどうか見なよ。
あとメソッド名はonのままでいいよ。delegateの機能はonに集約された。
2018/11/18(日) 17:59:51.15ID:???
>>671,673-674
delegate 案内している人のそれはミスリードだから無視しなさい
要素ノードが生成されても、loadイベントなど発生しないし、loadイベントはバブリングしない
彼が勝手に誤解しているだけだから参考には値しない

君が必要としているのは、MutationObserver
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver
2018/11/18(日) 20:09:40.45ID:???
jQueryでできないの？
2018/11/18(日) 20:11:45.45ID:???
>>677
Chrome拡張機能でjQueryに拘る理由ある？
2018/11/18(日) 20:13:56.25ID:???
出来ないってことですね分かりました。
2018/11/18(日) 20:15:41.87ID:???
こういう思い込みが激しいところが学習が進まない理由なんだろうな
2018/11/18(日) 20:21:28.75ID:???
他所で「jQueryにはMutationObserverがないと聞いたのですが」で質問するタイプっぽい
2018/11/18(日) 20:44:33.94ID:???
>>681
そこでjQueryでの書き方を教えて貰って、「もう5chは信用しません」と憤慨するところまで読めた
2018/11/18(日) 21:36:49.33ID:???
>>676
いろいろ試したけどうまく動かない

サンプルコードほぼそのままで外側の content とか warapper とか動かなさそうなのあったので
指定してもダメで document ぜんたいにしてもダメなんですよね
直下の要素が変化したときしかイベントはとんでこないんでしょうか
chrome 開発ツール眺めてるとアニメーションごとに DOM ころころかわって（紫色になる）んですが…

target がまだ生成されてないせいかと思って $(() => {}) でかこってみたりもしたけど
１回も console.log にとんでこない…

$(() => {
const target = document;

// オブザーバインスタンスを作成
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log(mutation.type);
});
});

// オブザーバの設定
const config = { attributes: true, childList: true, characterData: true };

// 対象ノードとオブザーバの設定を渡す
observer.observe(target, config);

// 後ほど、監視を中止
observer.disconnect();
});
2018/11/18(日) 21:40:13.90ID:???
ついでに質問なんですけど javascript って slepp みたいなのないんでしょうか

>>676 のページの情報だけだとイベントで取得するのは自分には無理そうなので
setTimer 使ってよむのを遅らせれば enemy-info のDOMがとれるので
1 秒おきぐらいにループで DOM をみはって情報を得ようかなとも考えてるところです
2018/11/18(日) 22:20:00.09ID:???
サンプル通りにobserveしたすぐ後にdisconnectしちゃったら監視も糞もないし
childList: trueだけではtargetに対して追加されたものだけを監視するのでsubtree: trueも必要

あとありがちなMutationObserverのハマリどころとしては
先にdocument fragmentを作ってからDOMツリーに追加されてる場合はMutationRecord.addedNodesには直にDOMツリーに追加した頭の要素のみが列挙される点
2018/11/18(日) 22:27:32.87ID:???
あ subtree は true にしてました
かきわすれです

>サンプル通りにobserveしたすぐ後にdisconnectしちゃったら監視も糞もない
なるほど！
天才です！
動きました！！！
2018/11/18(日) 22:35:14.87ID:???
コードをコピペするだけで説明は全く読んでないだろ
質問しても、アドバイス通りに対応するだけで中身を理解しようとしないから、そうなるんだ…
2018/11/18(日) 22:37:53.83ID:???
すいません…

とりあえず一言動いてくれたらそれから
オプションいろいろ変更してみて使い方おぼて行きたかったんですけど
1回も動かなかったので…

サンプルコードに終了コードはコメントアウトしててほしかった…
まずはコピペで動く状態にしてほしくないですか？
2018/11/18(日) 22:47:04.13ID:???
>>688
キミ、ちょっとは遠慮したまえ
2018/11/18(日) 23:42:22.49ID:???
>>688
>>676のリンク先にdisconnect()の説明が載ってるから、それで分かるだろ
説明を読みたがらないコピペプログラマの自己勝手な都合にしか見えんぞ
2018/11/18(日) 23:46:00.67ID:???
>>684
const sleep = time => new Promise(resolve => {
setTimeout(resolve, time);
});

console.log('4秒後にうんこと叫びたい…');
await sleep(4000);
console.log('うんこ！！');
2018/11/19(月) 01:52:38.68ID:???
>>691
Promiseの無駄遣い
2018/11/19(月) 03:01:21.11ID:???
Ruby で、Nokogiri, Selenium WebDriver で、ブラウザを自動操作しているけど、
たぶん、その要素が現れるまで待つこともできる

タイムアウトも設定できる
2018/11/19(月) 09:14:57.70ID:???
SeleniumはJava製。
公式ドライバーもJava
コミュニティ製の各言語バイントはRubyのドライバーよりNodeのドライバーのほうがよくメンテされている。

まあNodeならSeleniumなんて列車砲持ち出さなくてもPupetteerでらくらく家財宅急便だけとなｗｗｗ

しかし↓の記事読むとRubyもやるじゃんと思ってしまった。

世界最大のソフトウェア開発プラットフォームで最も人気なプログラミング言語は何なのか？
https://gigazine.net/news/20181116-top-programming-languages-2018/
695Name_Not_Found
垢版 |
2018/11/19(月) 10:29:01.09ID:IhOqOzLs
質問です
text()で取得した内容を判断して処理したいのですが
濁点、半濁点等が入っていると上手く動きません

よろしければご教授下さい。

html

<p id="hoge">ガギグゲゴ</p>

script

hogegoge = $('#hoge').text();
if(hogegog == ガギグゲゴ){
　処理　←ここの処理に行かない
}else{
　処理　←こっちらが処理される
}
696Name_Not_Found
垢版 |
2018/11/19(月) 10:31:22.79ID:IhOqOzLs
>>695です
先のはスプリクト間違いです
実際はこちらのスプリクトです。

html

<p id="hoge">ガギグゲゴ</p>

script

hogehoge = $('#hoge').text();
if(hogehoge == ガギグゲゴ){
　処理　←ここの処理に行かない
}else{
　処理　←こっちらが処理される
}
2018/11/19(月) 10:41:06.95ID:???
「ガギグゲゴ」は本当に「ガギグゲゴ」なんでしょうか？
2018/11/19(月) 10:54:23.10ID:???
'ガギグゲゴ' 又は
"ガギグゲゴ" 又は
`ガギグゲゴ`
2018/11/19(月) 11:03:14.90ID:???
>>695
ここに動かないというコードを書け
https://jsfiddle.net/
700Name_Not_Found
垢版 |
2018/11/19(月) 11:04:32.00ID:IhOqOzLs
>>697 「ガギグゲゴ」は本当に「ガギグゲゴ」なんでしょうか？
とはどういうことでしょうか?

>>698
ガギグゲゴ部分は囲ってありました
すいません。
if(hogehoge == 'ガギグゲゴ'){
2018/11/19(月) 11:19:14.04ID:???
ガギグゲゴの前後に空白文字が入ってる
「ガ」ではなくて「カ」+濁点だった
702Name_Not_Found
垢版 |
2018/11/19(月) 11:26:21.55ID:IhOqOzLs
>>701
濁点が分離していました。
エディターが勝手にまとめていたみたいです。
ありがとうございました。
2018/11/19(月) 23:11:21.77ID:???
>>664
jQueryの人勘違いしてたっぽいな
今度はphp使ってと言い出してる
2018/11/19(月) 23:38:56.07ID:???
だから探ってたんだろ
答えもせず否定から入って不自然だった
2018/11/20(火) 00:39:27.63ID:???
>>703
誰と勘違いしてるんだ？
俺はPHPの話なんかしてねぇよ
2018/11/20(火) 01:47:36.72ID:???
>>695-702
結合文字列は「カ」+濁点で、合成文字は「ガ」

Mac だけは、デフォルトで結合文字列なので要注意！
2018/11/20(火) 02:27:40.98ID:???
NFDの独自拡張とかいう聳え立つクソ
2018/11/20(火) 06:30:04.82ID:???
文字列の比較はtrimなどをした後normalize関数を通すのが常識
横着してそのまま比較しちゃそりゃうまくいかないよ
2018/11/20(火) 06:46:22.53ID:???
それだと違う文字に一致するだろ
2018/11/20(火) 10:09:12.45ID:???
常識ｗ
2018/11/20(火) 11:11:15.27ID:???
違う文字と一致しないといけないってケースじゃん
2018/11/20(火) 12:44:25.43ID:???
ものすごい忖度だな
2018/11/20(火) 23:09:11.21ID:???
日中韓でnormalize すると、別の文字に変わるものがあるから、危険と聞いたが？
714713
垢版 |
2018/11/20(火) 23:10:46.49ID:???
異字体・旧字体とか
2018/11/20(火) 23:23:52.07ID:???
おまえら常識を疑うつもりか！！
2018/11/20(火) 23:41:06.59ID:???
常識を疑え
2018/11/20(火) 23:43:29.87ID:???
バカの常識世間の非常識
2018/11/21(水) 07:05:43.14ID:???
ここまで結合文字列の注意対策方法バカ以外に無し
2018/11/25(日) 09:00:45.84ID:???
if( str.match() )とかで指定文字列があるかどうかを確かめてからそれをreplace()するのって意味ないですか？
文字列を2回探させるぶんムダな処理をさせてしまうことになる…？
それなら最初からreplace()だけのほうがいいですか？
2018/11/25(日) 10:12:55.38ID:???
>>719
はい
2018/11/25(日) 11:12:50.08ID:???
世の中無駄な処理ばかりだからどっちでもいい
他人に無駄と言われようがどうせソースなんか見ない
そんなことより何かを実現させるほうを先にやるんだ
バグなんかどんなアプリにも存在する
世界はクソコードで動いている
2018/11/25(日) 12:14:43.81ID:???
大抵の場合、書いたコードを見るのは自分自身なんだ
そのためにできるだけメンテしやすく書いておくだけなんだよ
2018/11/26(月) 06:49:21.87ID:???
実際のところメンテナンスのしやすさは簡単な話ではない。
極力シンプルなほうが良いのか、思考したままの情報が多い方が良いのか。
そういうことを考えることが時間の無駄。
自然と思いつくまま書くのが最も生産性が高い。
あえてメンテナンスしにくいように書くやつはいないから、
それでも自分にとっては十分なコードになる。
2018/11/26(月) 08:49:17.73ID:???
自分自身も変わり続けるからねぇ
2018/11/26(月) 09:04:55.70ID:???
自分のことだけなら、何も考える必要はないだろうな
2018/11/26(月) 11:07:38.93ID:???
>>723
そこにコードがあるからメンテナンスしなきゃいけないんだよ。
コードがなければ（少なければ）メンテナンスするものも少なくなる

それだけははっきりしてるんだから
書き方でどうこう言う前に、まず書くコードを減らすこと優先すれば良い
2018/11/26(月) 19:17:21.27ID:???
3ヶ月前の自分の書いたコード見てぶん殴りたくなる事もある
2018/11/26(月) 19:18:59.35ID:???
それだけ成長してるってことやね
期間置いてもスムーズにコードを書けるなら、それはよくやったと自分をhomeてあげていいと思う
2018/11/26(月) 19:19:11.91ID:???
なんだこの変換は
730Name_Not_Found
垢版 |
2018/11/26(月) 21:26:36.48ID:iXoFbA7t
どうにも解決できなくて困っております( ；´Д｀)エロい人お願いします。
Animate.cssを実行するJクエリ、たとえばwaypointsやScrollTriggerなどで作成したスクロールで可視範囲になってから動くアニメーションがmacOSのSafariだけで動かなかったり、動いても目的のアニメーションが実現しないのはなぜですか。他のブラウザはOKなのに
2018/11/26(月) 21:33:41.82ID:???
Safariはクソだからなあ
2018/11/26(月) 21:36:26.50ID:???
safari css のサジェストが酷いな
反映されない、崩れる、バグなどお祭り状態だ
2018/11/27(火) 01:28:48.20ID:???
漏れは、WEB+DB 106号に載っている、web-animations-js というポリフィルを使ってみたけど、
Edge では対応していなかった

Safari でも動くのは、Technology Preview 版だけかも
2018/12/01(土) 10:10:00.92ID:???
無名関数の
funciton(){}
が長いので
f(){}
みたいに書ければと思ったのですが、

f = funciton();

のようなことはできますか？
2018/12/01(土) 16:42:11.11ID:???
それは出来ない。
()=>{}
とか
_=>{}
とかで我慢できんか？
2018/12/01(土) 17:11:28.57ID:???
言語宗教脳があると辛いらしい
2018/12/01(土) 17:16:41.61ID:???
https://minnie.tuhs.org//cgi-bin/utree.pl?file=V7/usr/src/cmd/sh/mac.h

これと同じ臭いがする
2018/12/01(土) 17:29:39.32ID:???
>>735
こんな書き方があったのですね、ありがとうございます

即時関数にするとこうですね
(()=>{
alert('aaa');
})()
気持ち悪いですね
2018/12/01(土) 17:45:57.80ID:???
>>737
そんな怪しいurl踏むかよ
2018/12/01(土) 17:52:16.85ID:???
いまどき即時関数とか使う場面なくないか？
2018/12/01(土) 17:54:56.14ID:???
少なくともアロー関数で即時関数はやる場面ないな
2018/12/01(土) 18:26:13.75ID:???
アロー関数使えるってことはletやconst使えるってことだもんな…
2018/12/01(土) 18:40:10.02ID:???
>>739
tuhs.orgが怪しいとか草生えますよ
2018/12/01(土) 18:43:52.94ID:???
あれスラッシュって2つ続けても問題なく解決できるのか
2018/12/01(土) 19:01:51.05ID:???
みんな当たり前のようにanguler, react, vue使えるもんなの？
2018/12/01(土) 20:10:24.31ID:???
テーブルって真横の値（とあるtdの一つ前or次のtd）は簡単に取得できるけど
真上や真下の値は簡単に取得する方法ある？
2018/12/01(土) 20:41:14.67ID:???
>>746
多分、無い
ライブラリとかもなさそう
地味に数えていくしかないみたいだね
https://qiita.com/PianoScoreJP/items/be721f1b06745c2bbc39
748737
垢版 |
2018/12/01(土) 21:02:33.71ID:???
Bourne ShellのソースだとURLから分かって貰えない悲しみ
2018/12/02(日) 13:33:58.34ID:???
>>746
とあるセルの周囲のセルが１つとは限らないだろう
そこはどうするつもりなんだ？
2018/12/02(日) 17:33:26.45ID:???
react超めんどくさい……
2018/12/02(日) 17:36:14.87ID:???
reactとreduxでログインページ作るのに20ファイルも必要とかww
はぁ
2018/12/02(日) 17:44:03.21ID:???
>>749
俺のテーブルは限るんだよ
2018/12/03(月) 08:34:07.68ID:???
>>751
な？バカみたいだろ？
reactとか、JavaScriptに完全に依存したサイトで
すでにJavaScriptファイルが数十個作られています
みたいな状況を解決するものであって、
HTMLメインのサイトではただ面倒になるだけなんだよ
2018/12/03(月) 09:15:44.56ID:???
それは当たり前だろ。
必要の無いものを無理に使っては絶対にダメ。
js無しで済むならそれが一番軽いし速いんだから。
2018/12/03(月) 16:56:41.41ID:???
>>753
jsファイルが数十個なんてサイトは作り直しだな
あとhtmlメインサイトをこのスレで出しても無意味
2018/12/03(月) 21:13:29.74ID:???
Extensible Web、Module、HTTP2的には数十個あっても正しい
2018/12/04(火) 00:14:18.31ID:???
>>755
無意味ではないね。HTMLメインのサイトで使うのが
JavaScriptの一番多いユースケースだから
2018/12/04(火) 02:23:45.91ID:???
普通バンドルまとめるだろ
共通部分別にするにしても数十個とか異常
2018/12/04(火) 07:05:54.25ID:???
1モジュール1000行未満で切り分けていけば
そこそこのWebアプリなら数十モジュールくらいいく
おかしくはない
2018/12/04(火) 08:42:08.39ID:???
普通バンドルまとめるだろ
共通部分別にするにしても数十個とか異常
2018/12/04(火) 12:40:46.32ID:???
まとめない状態の話に決まってるだろ
2018/12/04(火) 12:45:02.91ID:???
普通バンドルまとめるだろ
共通部分別にするにしても数十個とか異常
2018/12/04(火) 16:44:38.90ID:???
>>762
なんでバンドルにまとめるの？
まとめなかったらどんな問題があるの？
2018/12/04(火) 17:18:57.69ID:???
お客様にお待ちいただくことになる
しかしそんなお客様もキャッシュを持ってるから普段は気づかない
要は開発者の傲慢
傲慢を客に押し付けて

「ドヤ！ロードはええだろ！バンドラー使ってるんだぜ！」

たったのこれだけ
2018/12/04(火) 17:35:13.93ID:???
まとめると単純にはやくなるわけでもないがな
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況