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/
+ JavaScript & jQuery 質問用スレッド vol.8 +
■ このスレッドは過去ログ倉庫に格納されています
2017/11/10(金) 22:44:30.04ID:???
2018/10/27(土) 12:05:49.32ID:???
>>515
jQuery久々ですが、そういえばそういうの見かけた覚えがあります…
ドキュメント見たら普通に書いてありましたね
現代風にするとこうでしょうか…?
$(this).val( (i, value) => {
return value + 'ついか';
}).attr('xxx', (i, attr) => {
return attr + 'ついか';
});
indexは省略しても動くようですが、省略しないほうがいいんですかね?
jQuery久々ですが、そういえばそういうの見かけた覚えがあります…
ドキュメント見たら普通に書いてありましたね
現代風にするとこうでしょうか…?
$(this).val( (i, value) => {
return value + 'ついか';
}).attr('xxx', (i, attr) => {
return attr + 'ついか';
});
indexは省略しても動くようですが、省略しないほうがいいんですかね?
2018/10/29(月) 03:15:25.09ID:???
長いと怒られましたので二つに分けます
かなり初歩的な質問になってしまうと思いますがよろしくお願いします。
最近勉強を始めHTMLCSSでサイトを作ろうとしておりました。
その中に画像のスライダーを入れたく思い、JSもしくはjQueryで組もうと
いろんなサイトを参考にしてたのですがうまくいきません。
現状、画像が縦に並んでる状態です。
jQueryをDLしてプラグインするのは難しそうだったので
head内からファイルで読み込む方法を選択しました。
明記できない部分が多かったので消去してますが
下記のコードで直す点があれば教えていただきたいです。
下記以外のコードでも試しましたができなかったので
もっと根本的なところが間違ってるとも思うのですが
かなり初歩的な質問になってしまうと思いますがよろしくお願いします。
最近勉強を始めHTMLCSSでサイトを作ろうとしておりました。
その中に画像のスライダーを入れたく思い、JSもしくはjQueryで組もうと
いろんなサイトを参考にしてたのですがうまくいきません。
現状、画像が縦に並んでる状態です。
jQueryをDLしてプラグインするのは難しそうだったので
head内からファイルで読み込む方法を選択しました。
明記できない部分が多かったので消去してますが
下記のコードで直す点があれば教えていただきたいです。
下記以外のコードでも試しましたができなかったので
もっと根本的なところが間違ってるとも思うのですが
518517
2018/10/29(月) 03:18:33.12ID:??? <!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="■■.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js";></script>
<title>■■</title>
<style>
</style>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
//ここに指定するクラスと、先ほど<div>に指定したクラスを一致させること
});
</script>
</head>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="■■.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js";></script>
<title>■■</title>
<style>
</style>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
//ここに指定するクラスと、先ほど<div>に指定したクラスを一致させること
});
</script>
</head>
519517
2018/10/29(月) 03:20:33.84ID:??? <body>
<div class="flexslider">
<ul class="slides"><!-- 必ずクラスは slides -->
<li>
<img src="1.jpg" /><!-- 表示させたい項目を<li>に囲んで並べる -->
</li>
<li>
<img src="2.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
長くなりましたがどうぞよろしくお願いいたします
<div class="flexslider">
<ul class="slides"><!-- 必ずクラスは slides -->
<li>
<img src="1.jpg" /><!-- 表示させたい項目を<li>に囲んで並べる -->
</li>
<li>
<img src="2.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
長くなりましたがどうぞよろしくお願いいたします
2018/10/29(月) 06:26:27.67ID:???
flexslider.cssを読んでない
2018/10/29(月) 23:13:10.14ID:???
使っている、jQuery のバージョンが古くない?
それに、jQueryを2つも読み込んでいるのも、おかしい
それに、jQueryよりも先に、jquery.flexslider-min.js を読み込んでいるのも、おかしい。
たいてい、jQueryを一番先に読み込む
参考にしているソースコードが古いのでは?
「javascript jquery slider」で検索!
それに、jQueryを2つも読み込んでいるのも、おかしい
それに、jQueryよりも先に、jquery.flexslider-min.js を読み込んでいるのも、おかしい。
たいてい、jQueryを一番先に読み込む
参考にしているソースコードが古いのでは?
「javascript jquery slider」で検索!
2018/10/30(火) 17:20:47.18ID:???
ありがとうございます
やはり根本的に間違えてるようですね
指摘いただいたところを直し
教えていただいた情報でやり直してみます
やはり根本的に間違えてるようですね
指摘いただいたところを直し
教えていただいた情報でやり直してみます
2018/10/30(火) 23:46:13.60ID:???
jQueryのQってなに
2018/10/31(水) 05:48:12.06ID:???
Queryの頭文字
2018/10/31(水) 05:48:36.67ID:???
イニシャルQ
2018/10/31(水) 06:44:53.21ID:???
めるりんQ
2018/10/31(水) 07:13:45.56ID:???
オバQ
2018/10/31(水) 08:53:36.63ID:???
jQueryのjは?
2018/11/02(金) 15:25:42.78ID:???
jQueryにて
…
<div.aaa>
<div.iii>
<div.aaa>
<div.iii> ★
<div.iii> ★
<div.iii> ★
<div.aaa> ←$(this)
<div.iii>
…
$(this)から見て、違うクラス(あるいは特定のクラス)の連続した兄たち ★★★
(thisと同じクラスの兄に挟まれた兄弟)
を絞り込むにはどうすればよいでしょうか?
…
<div.aaa>
<div.iii>
<div.aaa>
<div.iii> ★
<div.iii> ★
<div.iii> ★
<div.aaa> ←$(this)
<div.iii>
…
$(this)から見て、違うクラス(あるいは特定のクラス)の連続した兄たち ★★★
(thisと同じクラスの兄に挟まれた兄弟)
を絞り込むにはどうすればよいでしょうか?
2018/11/03(土) 02:18:37.81ID:???
div閉じてないから構造がわからん
531529
2018/11/03(土) 17:53:13.42ID:??? >>539
すみません、色々複雑になってはいますがひとまずその場で閉じているということで…
こうですね
<div.aaa></div>
<div.iii></div>
<div.aaa></div>
<div.iii></div> ←★
<div.iii></div> ←★
<div.iii></div> ←★
<div.aaa></div> ←$(this)
<div.iii></div>
すみません、色々複雑になってはいますがひとまずその場で閉じているということで…
こうですね
<div.aaa></div>
<div.iii></div>
<div.aaa></div>
<div.iii></div> ←★
<div.iii></div> ←★
<div.iii></div> ←★
<div.aaa></div> ←$(this)
<div.iii></div>
2018/11/04(日) 10:50:04.18ID:???
2018/11/04(日) 23:48:12.81ID:???
2018/11/05(月) 10:12:39.74ID:???
>>533
prevUntilを使って兄要素を全部取得、eachで直近の兄のクラスを取り、直近の兄以降のクラス判定をして格納、って感じかな
prevUntilを使って兄要素を全部取得、eachで直近の兄のクラスを取り、直近の兄以降のクラス判定をして格納、って感じかな
535529
2018/11/05(月) 12:51:18.54ID:???536533
2018/11/05(月) 19:53:23.26ID:???2018/11/06(火) 15:52:01.80ID:???
そのサイトを閲覧している間(タブを最前面にしている間)だけ動くスクリプトって作れますか?
ブックマークレットでもなんでもいいんですけど、自分用に
「このタブを閲覧しているときだけ動くストップウォッチ」
的なものが欲しくて…
つまり他のタブを閲覧中は止まるようにしたいのです
拡張機能も見かけましたがどちらかというと「今まで何時間見たか」を計るやつっぽくて
そうではなくストップウォッチ的に頻繁にスタートとリセットを繰り返しながら計測したく…
「マウスカーソルがbodyに乗ってる間だけ時計が進む」みたくすれば可能でしょうか?
ブックマークレットでもなんでもいいんですけど、自分用に
「このタブを閲覧しているときだけ動くストップウォッチ」
的なものが欲しくて…
つまり他のタブを閲覧中は止まるようにしたいのです
拡張機能も見かけましたがどちらかというと「今まで何時間見たか」を計るやつっぽくて
そうではなくストップウォッチ的に頻繁にスタートとリセットを繰り返しながら計測したく…
「マウスカーソルがbodyに乗ってる間だけ時計が進む」みたくすれば可能でしょうか?
2018/11/06(火) 17:17:53.55ID:???
>>537
visibilitychangeイベントとdocument.hidden
visibilitychangeイベントとdocument.hidden
2018/11/06(火) 17:36:37.71ID:???
>>538
まさにこれですね!ありがとうございます!
まさにこれですね!ありがとうございます!
540Name_Not_Found
2018/11/10(土) 21:39:13.96ID:sysZOBce2018/11/10(土) 22:07:04.34ID:???
>>540
ブラクラ
ブラクラ
2018/11/11(日) 17:23:24.20ID:???
$(document).on('mousemove', function() {
});
って効かないんですか?
ドラッグ時、マウスがbody外に出てもいいようにしたかったんですけど
mousemoveイベント自体を検知しなくなってしまいました
(documentでなく何かしらのdom要素に対して設定しないといけない?)
mouseupはdocumentに設定しても大丈夫だった(boby外でも検知できた)のですが…
});
って効かないんですか?
ドラッグ時、マウスがbody外に出てもいいようにしたかったんですけど
mousemoveイベント自体を検知しなくなってしまいました
(documentでなく何かしらのdom要素に対して設定しないといけない?)
mouseupはdocumentに設定しても大丈夫だった(boby外でも検知できた)のですが…
2018/11/11(日) 23:43:37.47ID:???
>$(document)
コンソールに、エラーが出ているはず
$( '#abc' )
文字列型で、CSS セレクターを書く
コンソールに、エラーが出ているはず
$( '#abc' )
文字列型で、CSS セレクターを書く
544542
2018/11/11(日) 23:59:30.72ID:??? >>543
うーん…?
でも単に
let wa= 0;
$(document).on('mousemove', function() {
wa++
console.log(wa);
return false;
});
としただけなら、別にエラーにならずちゃんとログも出るので
何か別の部分がおかしかったのかもしれません
(それともたまたま動いてしまっているだけで本当は推奨されていなかったりする…?)
うーん…?
でも単に
let wa= 0;
$(document).on('mousemove', function() {
wa++
console.log(wa);
return false;
});
としただけなら、別にエラーにならずちゃんとログも出るので
何か別の部分がおかしかったのかもしれません
(それともたまたま動いてしまっているだけで本当は推奨されていなかったりする…?)
2018/11/12(月) 01:36:11.64ID:???
mousemoveは "対象要素の上で" 動いたときに発生するんだよ
bodyの外で動いても発生しない
外に出るのを検出するのはmouseleave
bodyの外で動いても発生しない
外に出るのを検出するのはmouseleave
2018/11/12(月) 09:12:36.96ID:???
2018/11/12(月) 09:15:29.83ID:???
自衛隊は暴力装置
548543
2018/11/13(火) 04:20:20.09ID:??? $(document)
この、document って、" " で囲んでいないから変数だよな。
変数を入れても動くのか
知らなかった
この、document って、" " で囲んでいないから変数だよな。
変数を入れても動くのか
知らなかった
2018/11/13(火) 05:14:06.28ID:???
こんなことしても動くよ
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との相性も良い(混ぜて使える)
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との相性も良い(混ぜて使える)
2018/11/13(火) 10:55:45.16ID:???
次のプロジェクトからjQueryは重いから使うなって言われたんだが
便利なjQueryプラグインも使わないわけだよね
どうすんの?
便利なjQueryプラグインも使わないわけだよね
どうすんの?
2018/11/13(火) 11:34:52.58ID:???
2018/11/13(火) 14:02:30.05ID:???
>>550
CSSとサーバーサイドでなんとかする…
CSSとサーバーサイドでなんとかする…
2018/11/13(火) 17:19:01.79ID:???
>>551
俺も同じ感じでjQuery否定されてreactになった
俺も同じ感じでjQuery否定されてreactになった
2018/11/13(火) 17:29:20.72ID:???
>>550
なにに比べて重いのか明確にしてもらえ
なにに比べて重いのか明確にしてもらえ
2018/11/13(火) 17:30:32.20ID:???
ReactってjQueryより重いんだけどねw
しかもそのReactは将来性が危ういからなぁ
一部の企業でReact Native離れが始まる
https://tech.nikkeibp.co.jp/it/atcl/idg/14/481709/082000458/?ST=cio-appli&;P=2
少なくともReactはNative使ってスマホアプリと
コード共有しないと意味がないね
そもそもスマホアプリがないならやる意味がない
しかもそのReactは将来性が危ういからなぁ
一部の企業でReact Native離れが始まる
https://tech.nikkeibp.co.jp/it/atcl/idg/14/481709/082000458/?ST=cio-appli&;P=2
少なくともReactはNative使ってスマホアプリと
コード共有しないと意味がないね
そもそもスマホアプリがないならやる意味がない
2018/11/13(火) 17:31:19.84ID:???
jQuery+underscore.jsで小規模案件たいてい何とかなるよ。
個人的にはvue.jsとかもやるけども。
個人的にはvue.jsとかもやるけども。
2018/11/13(火) 17:32:34.11ID:???
2018/11/13(火) 17:33:06.35ID:???
みんなスマホアプリとか作ってるわけ?
2018/11/13(火) 17:34:46.98ID:???
使ってもいいけど、学習コストかかりますよ
とか言えば大抵流れるw
とか言えば大抵流れるw
2018/11/13(火) 18:04:32.36ID:???
>>554
たぶん気分が重くなるんだろう
たぶん気分が重くなるんだろう
2018/11/13(火) 18:28:07.33ID:???
jQueryでどんなことしてましたか?って聞かれて、開いたり閉じたり以外が思いつかなかった
クラスつけたりはずりたりもたまにやるけど…
みんなjQueryで何してるの?
クラスつけたりはずりたりもたまにやるけど…
みんなjQueryで何してるの?
2018/11/13(火) 18:28:33.20ID:???
>>560
使うなと言われる方が重くなるけどな
使うなと言われる方が重くなるけどな
2018/11/13(火) 18:32:44.12ID:???
>>561
それはjQueryっていうより、JavaScriptで何をしましたかの答えだと思うね
それはjQueryっていうより、JavaScriptで何をしましたかの答えだと思うね
2018/11/13(火) 18:33:37.65ID:???
ReactNativeはiOSとAndroidのコードを共通にするためのもの。
iOSとAndroid、だ。
Webとアプリではない。
Webビュー使った今までのクロスプラットフォームフレームワークと全然違うから突っ込まれないようにな。
React叩くときにうっかりReactNativeまで話を広げて自爆しないようにしよう。
iOSとAndroid、だ。
Webとアプリではない。
Webビュー使った今までのクロスプラットフォームフレームワークと全然違うから突っ込まれないようにな。
React叩くときにうっかりReactNativeまで話を広げて自爆しないようにしよう。
2018/11/13(火) 18:41:00.97ID:???
reactやvueとjQueryは相性悪いよね
両方使いたい場合は片方諦める?
両方使いたい場合は片方諦める?
2018/11/13(火) 18:46:03.68ID:???
reactやvueはDOM操作を直接やるなってやつだっけ?
DOM APIも使っちゃだめなのかな
DOM APIも使っちゃだめなのかな
2018/11/13(火) 18:54:56.07ID:???
はい。DOM APIも使っちゃだめです。
2018/11/13(火) 19:14:51.58ID:???
普通に使ってるが
2018/11/13(火) 19:19:19.65ID:???
相性悪いっていうか、jqueryが要らなくなるんだよ
vueのプロジェクト上でjquery読み込んでゴリゴリ作ったりできるけど、わざわざそんな事する必要がない
プラグインに頼りたいなら同居させても良いんじゃない?
vueのプロジェクト上でjquery読み込んでゴリゴリ作ったりできるけど、わざわざそんな事する必要がない
プラグインに頼りたいなら同居させても良いんじゃない?
2018/11/13(火) 19:23:16.34ID:???
>>568
DOM APIが使えるならjQueryも使えるんじゃね?
DOM APIが使えるならjQueryも使えるんじゃね?
2018/11/13(火) 19:23:54.31ID:???
わざわざそんな事する必要がないっていうのは
DOM APIを使用する意味がないってことね
DOM APIを使用する意味がないってことね
2018/11/13(火) 20:13:04.50ID:???
>>563
jQueryは世の中に出回ってるプラグイン、コピペ、開いたり閉じたりで
大抵のことができるからjQueryできますと言いにくい
だからといってゴリゴリのJavaScriptを要求されることはない
(´;ω;`)…
jQueryは世の中に出回ってるプラグイン、コピペ、開いたり閉じたりで
大抵のことができるからjQueryできますと言いにくい
だからといってゴリゴリのJavaScriptを要求されることはない
(´;ω;`)…
2018/11/13(火) 21:52:07.38ID:???
jQueryは一番はDOMを自由にいじれるのと、プラグインだよなあ
プラグインも素のjsに対応していないやつも多いし
プラグインも素のjsに対応していないやつも多いし
2018/11/13(火) 22:48:17.62ID:???
>>572
まぁjQuery得意です!っていう奴は大体他にアピールないことが多いから取りづらいわ…
まぁjQuery得意です!っていう奴は大体他にアピールないことが多いから取りづらいわ…
2018/11/14(水) 01:43:01.54ID:???
576542
2018/11/14(水) 04:30:07.53ID:??? >>545
画面の端からはみ出てもドラッグ距離を測れたらよかったんですが、やはり無理っぽかったですね…
その後別の問題が発生して
mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging')
みたいな感じのこと(実際はもっと複雑)をしてるのですが
たまにmouseupを検知してくれず、ボタンから指を離しているのに.draggingになりっぱなしになってしまいます
何かこれを回避する方法ってあるでしょうか?
画面の端からはみ出てもドラッグ距離を測れたらよかったんですが、やはり無理っぽかったですね…
その後別の問題が発生して
mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging')
みたいな感じのこと(実際はもっと複雑)をしてるのですが
たまにmouseupを検知してくれず、ボタンから指を離しているのに.draggingになりっぱなしになってしまいます
何かこれを回避する方法ってあるでしょうか?
577542 576
2018/11/14(水) 04:32:21.75ID:??? >>576 訂正
誤 mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging')
正 mousedownでaddClass('dragging')→mousemoveで移動→mouseupでremoveClass('dragging')
誤 mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging')
正 mousedownでaddClass('dragging')→mousemoveで移動→mouseupでremoveClass('dragging')
2018/11/14(水) 06:06:56.68ID:???
2018/11/14(水) 08:46:54.53ID:???
なぜ悪いと決めつける?自分と考えが違うだけだろう
2018/11/14(水) 09:03:06.20ID:???
悪くない言ってんだろ日本語分かんねーのか
2018/11/14(水) 09:05:19.92ID:???
世の中には悪い奴がいっぱいいるって書いてあるじゃん
2018/11/14(水) 09:48:13.15ID:???
世の中に悪いヤツがいっぱいいるというのは真実ですよ
2018/11/14(水) 10:15:46.80ID:???
でも良い奴だってたくさんいるッ!
そんな世界を滅ぼすなんて間違ってるッ!!
そんな世界を滅ぼすなんて間違ってるッ!!
2018/11/14(水) 11:54:44.46ID:???
>>576
addEventListenerでcapturing phaseは?
addEventListenerでcapturing phaseは?
2018/11/14(水) 12:40:39.20ID:???
2018/11/14(水) 21:35:07.61ID:???
いい奴も悪い奴も主観だからね
2018/11/14(水) 22:26:27.97ID:???
非同期の promise とか then とかがよくわからないんだけど
書けるのは書けるけど人のかいた非同期コードが全く読めない
わかりやすい解説サイトとかないですか
書けるのは書けるけど人のかいた非同期コードが全く読めない
わかりやすい解説サイトとかないですか
2018/11/15(木) 01:07:46.39ID:???
callback を登録しているだけ
すぐに実行されない。
後から実行されるというだけ
すぐに実行されない。
後から実行されるというだけ
2018/11/15(木) 01:18:56.13ID:???
>>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に変換される) をつなげていく
初心者が書いたコードはわかりにくいからね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に変換される) をつなげていく
2018/11/15(木) 01:56:49.22ID:???
2018/11/15(木) 02:21:15.41ID:???
>>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は複雑になりがち
意味がわからん
最初の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は複雑になりがち
2018/11/15(木) 20:43:16.76ID:???
非同期関数 A B C があって A B は並列で両方おわったら C ってどうかけばいいの?
async () => {
await () => { A(); B(); }();
}().then(() => C());
みたいなかんじ?
async () => {
await () => { A(); B(); }();
}().then(() => C());
みたいなかんじ?
2018/11/15(木) 22:39:19.23ID:???
Promise.all
2018/11/15(木) 23:00:01.46ID:???
そうやって難しいことばっかりでてくるし
fork と join だけでいいのに…
fork と join だけでいいのに…
2018/11/16(金) 01:33:52.01ID:???
forkとjoin型のマルチスレッドはマジ勘弁…二度とやりたくない
どう見てもPromiseのが簡単だわ。
難しいと感じてるのってお前が今Promise知らないから、それだけじゃん。
Promiseも覚えてから評価してよ。
どう見てもPromiseのが簡単だわ。
難しいと感じてるのってお前が今Promise知らないから、それだけじゃん。
Promiseも覚えてから評価してよ。
2018/11/16(金) 01:47:30.30ID:???
A, B, Cがasync関数なら
await Promise.all([A(), B()]);
await C();
で終わりじゃん
forkとかjoinとかアホなの?
await Promise.all([A(), B()]);
await C();
で終わりじゃん
forkとかjoinとかアホなの?
2018/11/16(金) 02:04:43.96ID:???
async関数なら、というよりPromise返す関数なら、だな。
明示的にPromise返すならasyncいらない。async付けると暗黙でPromise返すようにしてくれるってだけなので。
明示的にPromise返すならasyncいらない。async付けると暗黙でPromise返すようにしてくれるってだけなので。
2018/11/16(金) 06:07:37.56ID:???
思考が逆
awaitやPromise.all時に対象の関数がPromiseを返すかどうか気にする必要はない
awaitやPromise.all時に対象の関数がPromiseを返すかどうか気にする必要はない
2018/11/16(金) 06:32:37.74ID:???
>>592
Promise.all([A, B]).then(C);
Promise.all([A, B]).then(C);
2018/11/16(金) 06:32:41.33ID:???
そもそも、Promiseの時点で、対象の関数が
Promiseを返すかどうか気にする必要はない(>>591 参照)
awaitはPromiseのシンタックスシュガーなので、
機能や仕組みそのものは同じ。
書き方がシンプルになったというだけ
Promiseを返すかどうか気にする必要はない(>>591 参照)
awaitはPromiseのシンタックスシュガーなので、
機能や仕組みそのものは同じ。
書き方がシンプルになったというだけ
2018/11/16(金) 06:35:14.12ID:???
2018/11/16(金) 06:38:24.67ID:???
>>601
配列管理すれば、Promise.allを使わずとも出来ると思うが
配列管理すれば、Promise.allを使わずとも出来ると思うが
2018/11/16(金) 06:50:28.17ID:???
Promise.allを自分で実装すればってことでしょ?
2018/11/16(金) 06:52:49.40ID:???
2018/11/16(金) 07:24:37.63ID:???
>>604の「async、awaitでPromise書かなくて良くなったのかと思ったら」が答えなんだろうけど、その結論に至るまでの考えが全く書かれてないね
2018/11/16(金) 11:36:58.33ID:???
難しすぎる…
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 でわかりやすくかけるの?
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 でわかりやすくかけるの?
2018/11/16(金) 12:27:02.65ID:???
>>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,
})
}
難しく感じるのはそれ以前の部分に問題があるんだよ
見なくていい部分は見なくて良いように関数にする
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,
})
}
2018/11/16(金) 12:27:35.98ID:???
// 第二段階(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通信に失敗しました");
});
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通信に失敗しました");
});
2018/11/16(金) 12:37:21.03ID:???
>>606
最近のjQueryはDOM操作ライブラリ回帰でajaxも互換性のために残してるけどメンテナンスモードだろ。slimビルドでは削除されてる。
無理に$.ajax使ってないで専用ライブラリ使いなよ。
最近のjQueryはDOM操作ライブラリ回帰でajaxも互換性のために残してるけどメンテナンスモードだろ。slimビルドでは削除されてる。
無理に$.ajax使ってないで専用ライブラリ使いなよ。
2018/11/16(金) 15:23:35.10ID:???
FetchのPolifill入れるぐらいなら
jQuery使うだろ
jQuery使うだろ
2018/11/16(金) 16:05:36.44ID:???
Promise.all([f, g]) って
$.when.apply($, [f, g])
とおなじ?
どのメソッドが何かえすのかぜんぜんわからん
$.when.apply($, [f, g])
とおなじ?
どのメソッドが何かえすのかぜんぜんわからん
2018/11/16(金) 16:16:02.72ID:???
2018/11/16(金) 17:22:09.52ID:???
2018/11/16(金) 17:37:36.34ID:???
すみません
便乗で質問なのですが
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 で取得したデータをメソッドの外で使うにはどうかいたらいいんでしょうか
便乗で質問なのですが
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 で取得したデータをメソッドの外で使うにはどうかいたらいいんでしょうか
2018/11/16(金) 17:50:23.82ID:???
固定回数の並列ならメソッド登録なしでかけるけど
可変個のループで並列化するならどうやっても Deffered なり Promise なりでメソッド登録しなきゃかけないんじゃないかな
可変個のループで並列化するならどうやっても Deffered なり Promise なりでメソッド登録しなきゃかけないんじゃないかな
■ このスレッドは過去ログ倉庫に格納されています
ニュース
- 【鹿児島】5キロ2000円台ではコメ作りを続けられない――生産者不在で乱高下する米価。消費者も納得できる適正価格は実現するのか?★6 [シャチ★]
- 「タトゥーで料理不潔」「海なし県なのに海鮮やるな」25歳女将が語る誹謗中傷への本音「じゃあ日本でフランス料理食べられませんね」★3 [muffin★]
- 【神奈川】日産城下町がゴーストタウンになりかねない 「工場閉鎖」で大揺れの横須賀・追浜 商店街からは祈るような声が [ぐれ★]
- SNSで暴れる“読解力のない人”の実態。「読めない」のではなく「書いていないことを読んじゃう」ワケ [少考さん★]
- 【料理】浴槽の次は「コンロキャンセル界隈」 20代は4割、調理家電で十分 ]2 [ぐれ★]
- 【函館】運転免許試験場でブチ切れ 女性警察官の顔面を消毒液ボトルで殴る 18歳無職女を逮捕 [シャチ★]
- インディカーシリーズ2025 インディ500 Part6
- インディカーシリーズ2025 インディ500 Part7
- とらせん
- 【ATP】テニス総合実況スレ2025 Part 92【WTA】
- こいせん祝勝会 全レス転載禁止
- 巨専】
- 小泉進次郎「わあ、こんなに棚が空いてるんですか」 フィフィ「はぁ…」 米売り場視察で庶民感覚ないのバレる [279254606]
- 中1になる妹、iPhoneが欲しすぎて姉激怒 基本的な理由は「Androidはダサいから」 [279254606]
- 【悲報】暇空茜の在宅起訴、不起訴か [833348454]
- もし今死んだら
- 【大票田】非効率すぎて儲からず!コメ農家の75%が、たった2ヘクタール(100m×200m)の農地。なぜ、安倍や自民党は放置してきたのか? [219241683]
- ロシア「一緒に日本叩きましょう!」 中国「ン…拒否するゥ」 対日けん制を中露共同声明から削除 [271912485]