+ JavaScript & jQuery 質問用スレッド vol.8 +
■ このスレッドは過去ログ倉庫に格納されています
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/ $(document).on('mousemove', function() { }); って効かないんですか? ドラッグ時、マウスがbody外に出てもいいようにしたかったんですけど mousemoveイベント自体を検知しなくなってしまいました (documentでなく何かしらのdom要素に対して設定しないといけない?) mouseupはdocumentに設定しても大丈夫だった(boby外でも検知できた)のですが… >$(document) コンソールに、エラーが出ているはず $( '#abc' ) 文字列型で、CSS セレクターを書く >>543 うーん…? でも単に let wa= 0; $(document).on('mousemove', function() { wa++ console.log(wa); return false; }); としただけなら、別にエラーにならずちゃんとログも出るので 何か別の部分がおかしかったのかもしれません (それともたまたま動いてしまっているだけで本当は推奨されていなかったりする…?) mousemoveは "対象要素の上で" 動いたときに発生するんだよ bodyの外で動いても発生しない 外に出るのを検出するのはmouseleave >>545 > bodyの外で動いても発生しない html要素でも正しく発火する mousemoveはウインドウ内限定の発火装置 $(document) この、document って、" " で囲んでいないから変数だよな。 変数を入れても動くのか 知らなかった こんなことしても動くよ DOM要素の配列 $(document.querySelectorAll('A')) 二重jQueryオブジェクト(普通はしない) $($('A')) 数値でも良い(もちろん任意のオブジェクトもOK) $(1).each(function() { console.log(this.valueOf()) }); 数値の配列でもいい $([1,2,3]).each(function() { console.log(this.valueOf()); }); 要するに、$()の中が配列として扱えればそのまま、単数であれば 配列に変換して、それをjQueryオブジェクトでラップしてるだけ jQueryプラグインを作ったことがあればわかるんだけど、 $(・・・).on()とか$(・・・).addClass()とか言ったjQueryオブジェクトの メソッドが呼ばれたら、中でループして(配列に変換できるのでループは必ずできる) 一つ一つの要素に対して、その要素(DOM要素とは限らない)のメソッドを呼び出しているだけ シンプルで汎用的な設計だから柔軟な使い方ができる。 DOM APIとの相性も良い(混ぜて使える) 次のプロジェクトからjQueryは重いから使うなって言われたんだが 便利なjQueryプラグインも使わないわけだよね どうすんの? >>550 jQueryよりも軽いという代替案を要求しろ そしてそれにより開発工数が減るのか検討したい、と言え (検討に結果jQueryを使った方が良いことになるだろうw) >>550 CSSとサーバーサイドでなんとかする… >>551 俺も同じ感じでjQuery否定されてreactになった ReactってjQueryより重いんだけどねw しかもそのReactは将来性が危ういからなぁ 一部の企業でReact Native離れが始まる https://tech.nikkeibp.co.jp/it/atcl/idg/14/481709/082000458/?ST=cio-appli& ;P=2 少なくともReactはNative使ってスマホアプリと コード共有しないと意味がないね そもそもスマホアプリがないならやる意味がない jQuery+underscore.jsで小規模案件たいてい何とかなるよ。 個人的にはvue.jsとかもやるけども。 >>551 >>553 >>554 まあそりゃそうだね。なんかノリと流行りで jQuery否定しているだけみたいだし 理論詰めで問い詰めようw 使ってもいいけど、学習コストかかりますよ とか言えば大抵流れるw jQueryでどんなことしてましたか?って聞かれて、開いたり閉じたり以外が思いつかなかった クラスつけたりはずりたりもたまにやるけど… みんなjQueryで何してるの? >>561 それはjQueryっていうより、JavaScriptで何をしましたかの答えだと思うね ReactNativeはiOSとAndroidのコードを共通にするためのもの。 iOSとAndroid、だ。 Webとアプリではない。 Webビュー使った今までのクロスプラットフォームフレームワークと全然違うから突っ込まれないようにな。 React叩くときにうっかりReactNativeまで話を広げて自爆しないようにしよう。 reactやvueとjQueryは相性悪いよね 両方使いたい場合は片方諦める? reactやvueはDOM操作を直接やるなってやつだっけ? DOM APIも使っちゃだめなのかな 相性悪いっていうか、jqueryが要らなくなるんだよ vueのプロジェクト上でjquery読み込んでゴリゴリ作ったりできるけど、わざわざそんな事する必要がない プラグインに頼りたいなら同居させても良いんじゃない? >>568 DOM APIが使えるならjQueryも使えるんじゃね? わざわざそんな事する必要がないっていうのは DOM APIを使用する意味がないってことね >>563 jQueryは世の中に出回ってるプラグイン、コピペ、開いたり閉じたりで 大抵のことができるからjQueryできますと言いにくい だからといってゴリゴリのJavaScriptを要求されることはない (´;ω;`)… jQueryは一番はDOMを自由にいじれるのと、プラグインだよなあ プラグインも素のjsに対応していないやつも多いし >>572 まぁjQuery得意です!っていう奴は大体他にアピールないことが多いから取りづらいわ… >>572 知らんがなw お前の問題であってjQueryの問題じゃないだろ >>545 画面の端からはみ出てもドラッグ距離を測れたらよかったんですが、やはり無理っぽかったですね… その後別の問題が発生して mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging') みたいな感じのこと(実際はもっと複雑)をしてるのですが たまにmouseupを検知してくれず、ボタンから指を離しているのに.draggingになりっぱなしになってしまいます 何かこれを回避する方法ってあるでしょうか? >>576 訂正 誤 mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging') 正 mousedownでaddClass('dragging')→mousemoveで移動→mouseupでremoveClass('dragging') >>574 そういうものなんだ、参考になった >>575 うん、jQueryは何も悪くない 今の現場でVue使えるはずだったけど世の中には悪い奴がいっぱいいるっていう問題で頭いっぱい 世の中には悪い奴がいっぱいいるって書いてあるじゃん 世の中に悪いヤツがいっぱいいるというのは真実ですよ でも良い奴だってたくさんいるッ! そんな世界を滅ぼすなんて間違ってるッ!! >>576 addEventListenerでcapturing phaseは? 非同期の promise とか then とかがよくわからないんだけど 書けるのは書けるけど人のかいた非同期コードが全く読めない わかりやすい解説サイトとかないですか callback を登録しているだけ すぐに実行されない。 後から実行されるというだけ >>587 初心者が書いたコードはわかりにくいからねw Promise使ってるのに、なぜかネストしていたり Promiseを使ったコードはリファクタリングしていくと最終的にこんな感じになる https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises#Error_propagation doSomething() .then(result => doSomethingElse(result)) .then(newResult => doThirdThing(newResult)) .then(finalResult => console.log(`Got the final result: ${finalResult}`)) .catch(failureCallback); 最初、Promiseを返す関数(doSomething())から始まって、 thenでPromiseを返す関数 もくは Promiseを返さない関数 (そういうのは内部でPromiseに変換される) をつなげていく >>589 こうかくためにはdoSomethingにPromiseを返す関数を実行するプロミスを返す関数を実行するプロミスを… って定義しなきゃいえないんじゃないの? >>590 意味がわからん 最初のdoSomeThingだが、標準でresolve状態のPromsieを 返してくれるメソッドがあるから、こんな感じのコードでも動く Promise.resolve(123) .then(v1 => v1) .then(v2 => v2) .then(v3 => console.log(v3)) functionで書き換えるならば、 Promise.resolve(123) .then(function(v1) { return v1; }) .then(function(v2) { return v2; }) .then(function(v3) { console.log(v3); }) 関数実行をただ連続で行っているだけ。この例では値をそのまま返しているだけだから すぐに次の関数が実行されるが、Promiseを返せば処理が完了してから次の関数が実行される だから、 1. (たくさん)作るのは、ただの関数 または Promiseを返す関数 2. その関数を引数にして、処理をthenでつないでいける という単純な形にまで落とし込まないで使うから、初心者が書くPromiseは複雑になりがち 非同期関数 A B C があって A B は並列で両方おわったら C ってどうかけばいいの? async () => { await () => { A(); B(); }(); }().then(() => C()); みたいなかんじ? そうやって難しいことばっかりでてくるし fork と join だけでいいのに… forkとjoin型のマルチスレッドはマジ勘弁…二度とやりたくない どう見てもPromiseのが簡単だわ。 難しいと感じてるのってお前が今Promise知らないから、それだけじゃん。 Promiseも覚えてから評価してよ。 A, B, Cがasync関数なら await Promise.all([A(), B()]); await C(); で終わりじゃん forkとかjoinとかアホなの? async関数なら、というよりPromise返す関数なら、だな。 明示的にPromise返すならasyncいらない。async付けると暗黙でPromise返すようにしてくれるってだけなので。 思考が逆 awaitやPromise.all時に対象の関数がPromiseを返すかどうか気にする必要はない >>592 Promise.all([A, B]).then(C); そもそも、Promiseの時点で、対象の関数が Promiseを返すかどうか気にする必要はない(>>591 参照) awaitはPromiseのシンタックスシュガーなので、 機能や仕組みそのものは同じ。 書き方がシンプルになったというだけ >>599 async、awaitでPromise書かなくて良くなったのかと思ったら、 Promise.all的なことは、Promiseを直接使わないとできないのか >>601 配列管理すれば、Promise.allを使わずとも出来ると思うが Promise.allを自分で実装すればってことでしょ? >>603 そりゃ、そうだ むしろ、お前は async, awaitを何だと思ってるんだ? >>604 の「async、awaitでPromise書かなくて良くなったのかと思ったら」が答えなんだろうけど、その結論に至るまでの考えが全く書かれてないね 難しすぎる… var jqXHRList = []; for (var i = 0; i < request.length; i++) { jqXHRList.push($.ajax({ type: "POST", contentType: "application/json", url: request[i].url, })); } $.when.apply($, jqXHRList).done(function () { var userId = arguments[0][0]; }).fail(function (ex) { alert("Ajax通信に失敗しました"); }); みたいなよくある並列通信は async await でわかりやすくかけるの? >>606 難しく感じるのはそれ以前の部分に問題があるんだよ 見なくていい部分は見なくて良いように関数にする Ajaxオブジェクトを作ってるところなんか全体の流れからすりゃ見なくていいでしょ? // 第一段階 var jqXHRList = []; for (var i = 0; i < request.length; i++) { jqXHRList.push(createJqXHR(request[i]); } $.when.apply($, jqXHRList).done(function () { var userId = arguments[0][0]; }).fail(function (ex) { alert("Ajax通信に失敗しました"); }); function createJqXHR(request) { return $.ajax({ type: "POST", contentType: "application/json", url: request.url, }) } // 第二段階(requestはrequestsに変更した) var jqXHRList = requests.map(function(request) { return createJqXHR(request); }); // 別解 アロー関数を使った場合 var jqXHRList = requests.map(request => createJqXHR(request)); $.when.apply($, jqXHRList).done(function () { var userId = arguments[0][0]; }).fail(function (ex) { alert("Ajax通信に失敗しました"); }); >>606 最近のjQueryはDOM操作ライブラリ回帰でajaxも互換性のために残してるけどメンテナンスモードだろ。slimビルドでは削除されてる。 無理に$.ajax使ってないで専用ライブラリ使いなよ。 FetchのPolifill入れるぐらいなら jQuery使うだろ Promise.all([f, g]) って $.when.apply($, [f, g]) とおなじ? どのメソッドが何かえすのかぜんぜんわからん >>610 fetchのポリフィルは俺も使わないよ。 俺はrequest-promise好きだがだいたいの人はaxiosかsuperagentじゃね >>607 ,608 余計難しくなった… 関数を返すとか登録するとかなしに sync await だけでかけないの? すみません 便乗で質問なのですが const load(urls) { const data = []; for(let i = 0; i < urls.length; i++) { $ajax(urls[i]).then((res) => { data[i] = res; } } return data; } data = load([...]); console.log(data); こんな感じで並列 ajax で取得したデータをメソッドの外で使うにはどうかいたらいいんでしょうか 固定回数の並列ならメソッド登録なしでかけるけど 可変個のループで並列化するならどうやっても Deffered なり Promise なりでメソッド登録しなきゃかけないんじゃないかな >>613 ちょっと待てよお前>>607 ,608なんてわざわざループでリクエスト作るとかアホじゃねってだけでasync/awaitに書き換えられてなんかねぇだろ 頭使えよ >>606 が「難しすぎる」と思うなら、何を書いても「難しすぎる」と思うよ 一つ一つのコードは理解出来るけど、まとまると分からないなら読解力の問題 一つ一つのコードすら分からないなら勉強不足 fork join を先に覚えてたから自分もなれるのに苦労したわ 要はおわったら次っていう関数を登録するってだけなんだけどね Promise はメソッドチェーンできる、jQuery Object と同じ。 fork・join は面倒 Vue.js をベースとしたフレームワークの、Nuxt.js では、 非同期処理に、axios を使っている とりあえずラフにfetch(というかpromise/async/await)で書いてみた const requests = [/* request data */]; const promises = requests.map(request => fetch( request.url, { method: "POST", headers: ["Content-Type: application/json"], }, )); try { const responses = await Promise.all(promises); responses.map(response => { // something... }); } catch (err) { alert("非同期通信に失敗しました"); } こないだJSスレでfetchはIEで動かないからゴミうんぬんみたいな話題あったな IEを使っているやつは客じゃない ライブラリを使って手間を減らすよりも100ミリ秒でも速いほうが重要。 客も遅くなるぐらいなら使えないほうがマシだろう 官庁系のクライアントだといまだにIE+JSでオフってのがわりとあるんだよ IE対応って、そんな変わったことしなければ文字くらい見れるだろ そこをライブラリなんかでモダンブラウザと同様に動かそうとするやつはアホ IE自体のパフォーマンスも低いし、マシンもそうである確率が高いんだから 俺はいつもそういうこと言う奴にはこの喩えをしてる 夏休み家族で海水浴とか登山に行きたいと思ったとき、 寝たきりのお爺さんも無理やり連れていって同じ体験させますか、と 写真見せるだけでも十分喜んでくれるのではないですか、と 直近ではTLS1.2の話もあるしIE11以外対応することはなくなった 昔と違って新しいことができるようになったウェブで 20年前と変わらずHTMLでしこしこホームページを作るのは間抜け そういうのはプロの仕事ではない Canvasを使って3Dレンダリングしたり WebAssemblyでゲームを作ろうとは思わないのか? WebAssemblyはすでにモダンブラウザに搭載されている 新しい作品を作ろうという意欲のないやつは最先端からおいていかれるぞ 俺は今昔作った同人ゲームの移植をしている >>628 > 夏休み家族で海水浴とか登山に行きたいと思ったとき、 > 寝たきりのお爺さんも無理やり連れていって同じ体験させますか、と > 写真見せるだけでも十分喜んでくれるのではないですか、と お前は本人にそれで十分だって聞いたのか? 聞いたとしても遠慮してるかもしれないだろ お前は寝たきりになったとき、少し頑張ればかわいい孫と海水浴や登山に一緒に行けるのに 赤の他人に「無理無理、写真見せて満足させとけ」と言われて納得するんか? 本当にお前は、自・分・勝・手 だな 最後まで人生を楽しむ https://gendai.ismedia.jp/articles/-/45510 > 「この施設には40人ほどのお年寄りが暮らしています。8割以上が認知症を患っていますが、 > 寝たきりになっている人は一人もいません。自分の力で起き上がれない人でも、 > 毎朝必ずスタッフが手伝って車椅子に乗せます。そして食堂で一緒に食事を楽しむのです」 > 「ここでは、何より本人の意思が一番に尊重されます。散歩に出るのでも普通は誰かが付き添いますが、 > どうしても一人で散歩したいという人がいれば、家族の同意のもと、GPS付きの携帯を持たせて > 出かけるのを許可します。それで本人が事故に遭ったとしてもあくまで自己責任なので、施設の責任が問われることはありません。 > もちろん、ベッドにしばりつけるようなこともありません。私たちが行うのは介護であって拷問ではないのですから。 > アルコールを飲みたいという人には、よほど健康上の理由がない限り、飲ませます。 > 最後まで人生を楽しめるように助けるのが、私たちの仕事なんです」(ヨハンソンさん) 寝たきりは、寝たきりにすることでますます悪化するってことを知ってる人には、 >>628 の説明は、何も響かないどころか逆効果だな IEに対応できないとか工数がかかるとか無能だって自白してるようなもん IE使ってるようなクライアントこそ金払いもいいんだよな HTML内から外部jsの関数実行 または 2つの外部jsで、片方から片方の関数実行 はどうやるのでしょうか? ■HTML <label><input type="checkbox" id="chk">チェック</label> <p id="res"></p> <script src="jquery-*.*.*.min.js"></script> <script src="ex_js_1.js"></script> <script> //※ $(function(){ initChk(); //ReferenceError: initChk is not defined }); </script> ----- ※またはここを↓としたい <script src="ex_js_2.js"></script> ■ex_js_1.js $(function(){ $('#chk').click(function(){ var t = ''; ($(this).prop('checked')) ? t = 'A' : t = 'B'; $('#res').text(t); }); function initChk(){ $('#chk').prop('checked', false); $('#res').text('初期'); } //initChk(); //ここならエラーなし }); ■ex_js_2.js $(function(){ initChk(); //ReferenceError: initChk is not defined }); intChkは関数内で定義されてるから外からは見えないよ initChk = function(){ $('#chk').prop('checked', false); $('#res').text('初期'); }; とvarなしならエラーなしでできましたがこれはしたくないです 何かいい方法ないでしょうか? >>635 やり方はあるんだが、そんなことをするのが間違ってる気がする それをまず聞きたいね ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる