+ JavaScript の質問用スレッド vol.124 +

[表示 : 全て最新50 1-99 101- 201- 301- 401- 501- 601- 701- 801- 901- 1001- 2ch.scのread.cgiへ]
Update time : 02/24 16:40 / Filesize : 334 KB / Number-of Response : 1026
[このスレッドの書き込みを削除する]
[＋板最近立ったスレ＆熱いスレ一覧 : ＋板最近立ったスレ／記者別一覧] [類似スレッド一覧]


↑キャッシュ検索、類似スレ動作を修正しました、ご迷惑をお掛けしました

1 名前：デフォルトの名無しさん mailto:sage [2021/11/10(水) 15:24:24.80 ID:jxD2VXPG0.net]: JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

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

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured
545 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 09:30:24.96 ID:Cs4PttVsr.net]: >>531
awaitを使えば返り値でとれる
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await

別スレで似た質問があったが、同一人物ではないよな？
https://mevius.5ch.net/test/read.cgi/hp/1478002550/499
質問者の応対が酷かった
546 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 10:14:14.84 ID:U0qNtUpH0.net]: >>532
>>533
ごめん色々試してみて自己解決したかも
$ajaxをfunctionに包んでたけど単にreturnするのがsuccessに与えてる無名関数へのreturnになってるからな気がした
その質問者はしらんけどそんなすれあるのねスレチならあっちいくわ

function getdata() {
$.ajax({
type: 'post',
url: 'aaaa',
contentType: 'application/json',
dataType: 'json',
success: function(jsondata) {
return jsondata;
});
}
呼び出し元
var a = getdata();
これでaがnullなのはasyncとかだと思ってたけどfunctionの返し先が無名関数だからだと思う
こういう場合javascript的にはどうするのが定石なの？
getdataの引数に結果を入れる変数渡すの？
547 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 10:18:12.60 ID:Cs4PttVsr.net]: >>534
PromiseかDeferredを使う
548 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 10:24:10.95 ID:U0qNtUpH0.net]: >>535
やばいこれおもしろいね
また世界が広がったわありがとう！
javascript始めてみて非同期処理の世界で頭おかしくなりそう
threadやforkとは微妙に違うおもしろさがある
549 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 10:59:23.57 ID:de7whWW50.net]: 今時fetch使おうよ
550 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 11:12:57.49 ID:HyI7NswaM.net]: ブラウザ資源を独占できない以上非同期なのは仕方がない
隅っこに入れたWEB広告が通信するから描画スレッド止めますなんて言い始めたらぶん殴るわ
551 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 11:18:48.71 ID:EGYBINjxM.net]: >>531
強制されてるなら別だけど、とりあえずjQueryはヤメた方がいい
552 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 18:13:15.28 ID:U0qNtUpH0.net]: >>539
素？のJavascriptの方が良いって事かな？
ブラウザー対応考えたら楽だと聞いたけど動作対象がモダン環境なら気にしなくても良いとか？
553 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 20:06:52.37 ID:2mwlDhCB0.net]: >>540
caniuseやMDNで互換性を調べ�
554 名前：謔､ https://caniuse.com/fetch https://developer.mozilla.org/ja/docs/Web/API/Fetch_API#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7 []: [ここ壊れてます]
555 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 20:17:36.42 ID:BHHQkJq20.net]: IE6ぐらいはサポートしとけ
長期デフォルトブラウザの実績は覆せない
556 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 20:24:49.60 ID:2mwlDhCB0.net]: >>542
MSのサポート期限を調べよう
https://www.google.com/search?q=ie6+%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E7%B5%82%E4%BA%86
557 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 20:30:03.00 ID:bXFYtOtEM.net]: >>540
IE対応するかしないかでほぼ決まる
お仕事ならお客さん次第
558 名前：デフォルトの名無しさん mailto:sage [2022/03/10(木) 04:35:08.01 ID:mUiYAuMC0.net]: >>540
そうなんだありがとう
caniuseで見たら一番下の緑4個の行だけがターゲットだからfetchで良いんかな
Javascript=JQueryってのが当たり前になってるから意識変えれそうで良かった
559 名前：デフォルトの名無しさん mailto:sage [2022/03/10(木) 16:41:12.37 ID:QC1L9XJq0.net]: >>545
対応ブラウザの問題がないならfetchで良いと思う
未対応ならPolyfillの選択肢もある
560 名前：デフォルトの名無しさん mailto:sage [2022/03/11(金) 21:03:13.79 ID:XGwo6uIj0.net]: JavaScriptに「型」を～Microsoftが新構文を提案へ
https://www.google.com/amp/s/forest.watch.impress.co.jp/docs/news/1394/209/amp.index.html

これは気になる
仕様化されるのかね…
561 名前：デフォルトの名無しさん mailto:sage [2022/03/12(土) 12:10:31.15 ID:Nwo5BHml0.net]: VScodeを使っていますが
この画面のカスタマイズはできますか
具体的には、ソース全体の縦長のビューがあってそのうち今見ているところが少し明るく表示されてますよね？その色が分かりにくい！
つかんでドラッグしたくても見つけにくい！
もっとハッキリした色にできますか
562 名前：デフォルトの名無しさん mailto:sage [2022/03/12(土) 12:37:17.47 ID:ilfolIlBM.net]: >>548
Visual Studio Code / VSCode Part11
https://mevius.5ch.net/test/read.cgi/tech/1632311131/
563 名前：デフォルトの名無しさん [2022/03/12(土) 18:02:33.03 ID:gZ07u/du0.net]: <html>
<head>
<meta charset="UTF-8">
<title>てすと</title>
</head>
<body>

<スクリプト>
for(let n=1;n<=300;n++){
let str = "<p>" + n + "</p>";
document.write(str);
}
alert(document.body.clientHeight);
alert(window.innerHeight);
</スクリプト>

</body>
</html>
ページ全体の高さを求めたいけどdocument.body.clientHeightで
695と表示されウィンドウの高さと同じになってしまいます。
どうすればちゃんとページの高さが求まりますか？
564 名前：デフォルトの名無しさん mailto:sage [2022/03/12(土) 21:32:42.84 ID:9cczQYeA0.net]: web 系の質問は、web制作管理板の方のスレで聞いてください！

この板のスレは以前、荒らしが出た時に、緊急避難用に立てたもので、
本来はweb制作管理板の方です
565 名前：デフォルトの名無しさん mailto:sage [2022/03/12(土) 21:36:30.85 ID:5XddXhdb0.net]: >>550
document.body.scrollHeight
document.documentElement.clientHeight
566 名前：デフォルトの名無しさん mailto:sage [2022/03/12(土) 22:58:01.42 ID:iDbN5UB10.net]: >>551はただのコピペなので気にしないように
Web制作板の現状は>>213,253
567 名前：551 mailto:sage [2022/03/12(土) 23:28:29.22 ID:9cczQYeA0.net]: ここはプログラム板

HTML, DOM, CSS/SASS や、ブラウザ・サイトのページの知識などは、
web制作管理板の方がよい。ウェブ制作

それ以上のフレームワークなどは、WEBプログラミング板。ウェブ開発

YouTube で有名な、雑食系エンジニア・KENTA の本でも、
ウェブ制作はフロントエンド・コーダー、
ウェブ開発はバックエンド・SE みたいに、異なる分野となっている
568 名前：デフォルトの名無しさん [2022/03/13(日) 00:51:37.82 ID:zkh0XZKF0.net]: >>552
ありがとう
<!DOCTYPE html>をつけたらdocument.body.clientHeightで取得できるようになりました。
569 名前：デフォルトの名無しさん [2022/03/13(日) 15:40:27.22 ID:jxSWNPd90.net]: オブジェクトの中で別のプロパティを参照するのはどうすればいいのでしょうか？
thisを使うとundefinedが返ってきて、thisを付けないとまだ定義されてないと
エラーが出ます。下記の例だとsideSpaceを参照したいのですが
うまくいきません。

const sp = {
width: 640,
sideSpace: 20,
space: this.sideSpace * 2,
inner: this.width - this.space,
}
570 名前：デフォルトの名無しさん mailto:sage [2022/03/13(日) 15:48:53.49 ID:MhWbhXb10.net]: >>556
getterかProxyを使えば良い
571 名前：デフォルトの名無しさん [2022/03/13(日) 17:18:48.53 ID:jxSWNPd90.net]: 書き直してみたんですがやはりgetSpace()が未定義エラーが出てしまいます。

const sp = {
width: 640,
sideSpace: 20,

get getSpace() {
return this.sidespace * 2;
},

space: getSpace()
};
572 名前：デフォルトの名無しさん mailto:sage [2022/03/13(日) 17:25:30.15 ID:gKsfpaAq0.net]: >>558
const sp = {
width: 640,
sideSpace: 20,
get space() { return this.sideSpace * 2; },
get inner() { return this.width - this.space; },
};
console.log(sp.space); // 40
console.log(sp.inner); // 600
573 名前：デフォルトの名無しさん mailto:sage [2022/03/13(日) 17:26:15.54 ID:MhWbhXb10.net]: >>558
spaceとinnerをgetterにすれば良い
574 名前：デフォルトの名無しさん mailto:sage [2022/03/17(木) 19:32:02.34 ID:v8AF8giY0.net]: 関数の引数にオブジェクトを使ってる時要素を固定する方法ってある
例えば

function main(obj){
obj.a;
obj.b;
}

みたいなときaとbだけの要素を受け入れたいんだけど
575 名前：デフォルトの名無しさん mailto:sage [2022/03/17(木) 19:36:12.35 ID:v8AF8giY0.net]: 一応その要素があるかで判断して返すって方法はわかるどそれ以外でシンプルな感じで出来ないかなと思って
576 名前：デフォルトの名無しさん mailto:sage [2022/03/17(木) 19:38:09.18 ID:N96K+gAsM.net]: 理解できないから適当に答えるが
objに必要なメンバーだけを抽出複製するメソッドを作ってみては？
577 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 14:30:35.47 ID:ZaiWDhWv.net]: aysncとawaitで頭がこんがらがってきました

function sleep() {
return new Promise(resolve => {
setTimeout(()=>resolve(),2000);
});
}

async function run(x) {
var a = await sleep();
var b = await sleep();
return x;
}
run(10).then(v=>console.log(v));
//これは4秒後に10と表示されます
//しかし、、

async function run2(x) {
var a = sleep();
var b = sleep();
var _a=await a;
var _b=await b;
return x;
}
run2(20).then(v=>console.log(v));
//これは２秒後に10と表示されます

//一体なぜ・・
var _a=await a; //ここで２秒待ち、
var _b=await b;//ここで２秒待ち、
だと思ったのですが・・・
578 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 14:37:22.28 ID:TKJ0fISW0.net]: >>564
遡ってのawaitは不可能
579 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 14:47:10.12 ID:zP5GoGcDM.net]: >>564
Promise内の処理がいつ開始されるのかを考えてみれば？
580 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 15:19:23.16 ID:ZaiWDhWv.net]: >>565,566
なるほど・・？

runの方では
var a=await sleep()のタイミングで返り値Promise内処理がされてresolve()されるまで（２秒）待ち、
次いでvar b=await sleep()の計４秒
これはしっくりくるのですが

一方、run2の方では
var a = sleep();
var b = sleep();
の段階ではPromise内処理は実行されませんがa,b共にPromise格納
var _a=await a;のタイミングでawait Promise
次いでvar _b=await b;await Promise
だと思っていましたが
＞遡ってのawaitは不可
つまり一度変数に格納した場合はrun1のようにはならず、非同期で_a,_b時にPromise内処理がされる
ということでしょうか

run2のようなパターンはあえてそういう処理として使っていいのか、それとも
基本的に変数とかに置かずにawait Promiseした方がいいのか
まだちょっとよくわかりませんがスッキリしました
ありがとうございます
581 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 15:33:49.12 ID:DtRySdf10.net]: runのパターだと非同期ではあるが直列動作
run2はsleepとawaitの間に�
582 名前：ﾊの処理を置いたり並列的な動作ができる どっちがいいかはケースバイケース []: [ここ壊れてます]
583 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 15:41:31.50 ID:VcAQVTiir.net]: そもそもそんな使い方するな
584 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:13:33.28 ID:RNh01PsRM.net]: 同期関数の使い方や処理タイミングはともかく、run2(20)としておきながらコンソールに10と出るのはおかしい
585 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:25:28.50 ID:ZaiWDhWv.net]: asyncとawaitのくだりでついでにもひとつ質問です
function sleep(x) {
return new Promise(resolve => {
setTimeout(()=>resolve(),x*1000);
});
}
async function run1(){
console.log("run1 start");
await sleep(5);
console.log("run1 end");
}

async function run2(){
console.log("run2 start");
await sleep(2);
console.log("run2 end");
}
function run(){
run1();
run2();
}
run();

これはrun1(),run2が非同期処理されて
狙った意図になりました
そこで今度はrun1()が処理しきったあとにrun2()を処理したい
つまり、run1 endと表示されてからrun2 startが表示されて
みたいな同期処理をしたいなと思いました
コールバックすれば簡単なのでしょうがせっかくなので
awaitとか活用した感じで書いてみたくrun1のとこにPromiseを返したりしてみましたが無限ループでブラウザが固まりました
何かいい案はありますでしょうかよろしくおねがいします
586 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:32:40.17 ID:ZaiWDhWv.net]: 改めてやってみたらできました
おそらくブラウザがフリーズしたのはrunとrun1を間違えてたようです
成功したのはこれです↓
こんな感じで合っているのでしょうか

async function run(){
await new Promise(resolve=>{
resolve(run1())
});
run2();
}
run();
587 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:40:03.87 ID:DtRySdf10.net]: asyncな関数はPromiseを返すので
async function run(){
await run1();
run2();
}
588 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:46:15.37 ID:ZaiWDhWv.net]: >>573
！
なるほど
なんかわかってきた気がします・・！
ありがとうございます
589 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 17:13:19.06 ID:VcAQVTiir.net]: 他人がみてわからん書き方すんなよ
590 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 17:41:45.59 ID:ZaiWDhWv.net]: やりたいことはざっくり>>571を例にすると
run1やrun2は非同期、同期どちらでも使えるようにしておいて
awaitするときは同期、しないときは非同期
という感じなのですが
他人からみてわかりにくいですかね・・？

もちろんrunの名前と中身によりますが
run1();
run2();
↑これは非同期だろうな
await run1();
console.log("途中");
await run2();
console.log("最後");
↑awaitついてるから同期だろうな
みたいに直感的にフローがわかるように思うのですが
もしかしてバグ生みそうな何かがあるのでしょうか
591 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 17:44:55.70 ID:ZaiWDhWv.net]: 補足
run1,2自体は非同期ではない？ですね
run1,2内のawaitの部分が非同期なだけであって
そこら辺、中身みないとわかりにくいですかね
592 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 18:31:46.85 ID:TKJ0fISW0.net]: >>571-572
回りくどい処理しか見えなくて、その書き方をする意図の理解に苦しむ
run1とrun2をPromise化してPromise.all()ではダメなのか？
593 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 20:13:47.31 ID:ZypCz9jZa.net]: コールバック関数入れ子呼び出し地獄
↓
Promise then数珠繋ぎ地獄
↓
async await
と書き方が変わって来たのでPromise thenとasync awaitを混ぜて書くのはおかしい。
使いやすい方を使えば良いと思うけど非同期処理で取得したデータをいくつも使う場合はasync awaitで書いたほうがスッキリ書けるよ。
Promise thenみたいだとthen途中まで中途半端に行コピペするミスとか起きる
594 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 20:20:09.04 ID:ZaiWDhWv.net]: >>578
ありがとうございますやってみました
function sleep(x) {
setTimeout(()=>console.log("sleep",x),x*1000)
}
function msg(n){
console.log(n)
}
function run1(){
return new Promise(resolve=>{
msg("run1 start");
sleep(3); //この非同期処理を同期処理にしたい
msg("run1 end");
resolve("run1 success");
})
}
await Promise.all([run1()]).then(result=>{console.log(result)});

がsleep(3)のとこが非同期になってしまいます・・
595 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 21:34:54.50 ID:ZypCz9jZa.net]: awaitはasync関数内でしか使えないよ
596 名前：デフォルトの名無しさん mailto:sage [2022/03/19(土) 22:45:17.97 ID:ZaiWDhWv.net]: >>581
たしかにそうでした・・
とりあえずすべてpromise化してnew Promise内にPromiseとかやってみましたが
うまくいかず・・
>>579
そういう系譜があったのですね

とりあえず現状はうまくいっているasync awaitでやってみます
ありがとうございました
597 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 07:50:06.50 ID:8bwKUIJnr.net]: もうめちゃくちゃだなw
そもそも何をしたいのかすらわからなくなった
598 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 09:48:36.58 ID:98wGNFjK0.net]: 横からすみません！
async や await は関数の頭だけに付けれる認識でしょうか
単なるメソッドの前にawaitをつけれないんですね
たとえばアラート1と2がテレコにしたくないからといって下記のような書き方は不可ということでよいでしょうか

async hoge(){
await alert("1");
alert("2");
}
599 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 11:26:58.56 ID:4y0+fo7i0.net]: >>584
async function hoge() {
await alert('1');
alert('2');
}
600 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 11:44:24.57 ID:ZsjWra1g0.net]: newmofu.doorblog.jp
このサイトなんですが、RSSはjavascriptで取得しているんでしょうか？
601 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 13:15:28.93 ID:JFBEbRfA0.net]: >>584
classメソッドはそんな感じでok
でもそのalertがwindow.alertなのだとしたらawaitは無意味
602 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 15:09:47.81 ID:98wGNFjK0.net]: >>587
えっ？つまりメソッドにもawaitはつけれるんですかね
いちいちfunctionを小分けにする必要のないこともあるんですね
603 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 17:25:10.29 ID:SwEbiGVb.net]: クラス内で実行中のメソッドを多重実行したくないとき
みなさんはどうしていますか

class hoge{
constructor(){
this.isStreaming=false;
}
stream(){
if(this.isStreaming){
console.log("実行中");
return
}else{
this.isStreaming=true;
console.log("実行");
}
const self=this;
//何か実行中...
setTimeout(()=>{self.isStreaming=false;console.log("終了")},3*1000);
}
}
var h=new hoge();
h.stream();
h.stream();
setTimeout(h.stream,5*1000);

これだと仮にstream1,2,3..と増えていったらisStreaming1,2,3...と増えていくと思うのですが
そういうのを回避するうまいやり方とかあるのでしょうか
604 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 17:38:27.19 ID:SwEbiGVb.net]: 補足　クラス内というかインスタンスで、でした
605 名前：sage [2022/03/20(日) 17:49:26.68 ID:OSPfEuDk0.net]: >>589
例えば、クロージャを作って、メソッドのステータスをクロージャ内に格納させるとか。

class hoge {
stream(){
let isStreaming = false;
return function() {
if(isStreaming){
console.log("実行中")
}else{
isStreaming = true;
console.log("実行")
setTimeout(() => { isStreaming = false; console.log("終了") }, 3 * 1000);
}
}
}
}

let h = new hoge();
stream = h.stream();
setInterval(stream ,1000);
606 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 17:56:19.09 ID:SwEbiGVb.net]: >>591
おぉ、なるほど！！
参考になります
607 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 18:00:23.47 ID:2Ue7hGfR0.net]: >>589
WeakMapでプライベートプロパティを作る
https://www.google.com/search?q=weakmap+%E3%83%97%E3%83%A9%E3%82%A4%E3%83%99%E3%83%BC%E3%83%88
608 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 18:25:56.74 ID:SwEbiGVb.net]: >>593
WeakMapオブジェクトなんてものがあるのですね
これだと大量に扱う場合は便利かもしれません
ありがとうございます
609 名前：591 mailto:sage [2022/03/20(日) 19:15:48.99 ID:OSPfEuDk0.net]: >>592
functionを引数で受け取れるようにするといいかもしれない。

class hoge {
makeStream(f){
let isStreaming = false;
return function() {
if(isStreaming){
console.log("実行中");
}else{
isStreaming = true;
console.log("実行");
f();
setTimeout(() => { isStreaming = false; console.log("終了") }, 3 * 1000);
}
}
}
}

let h = new hoge();
stream1 = h.makeStream(()=>{console.log("なんかの処理1")});
stream2 = h.makeStream(()=>{console.log("なんかの処理2")});
610 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 19:54:06.60 ID:SwEbiGVb.net]: >>595
なるほど
これなら分けて管理しつつ多重実行禁止メソッドを量産できそうですね
ありがとうございます！
611 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 22:45:44.89 ID:aLyHOWc60.net]: >>586
サイト分析なら、ここで

https://builtwith.com/
612 名前：デフォルトの名無しさん mailto:sage [2022/03/20(日) 23:28:24.98 ID:1AhGKhB60.net]: 今月くらいからyoutube動画埋め込んだページのdev toolコンソール見るとservice workerが大量のエラー吐くようになったんだが
jsでクライアント端末側でどうにかできる？
613 名前：デフォルトの名無しさん mailto:sage [2022/03/21(月) 01:01:24.11 ID:avj/Dp0k0.net]: 何かのサービスが終わったとか？
やり方が変更されたとか？
614 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 20:37:07.86 ID:0pE5eZuk.net]: var ary=["a","b","c"];
for(let i in ary){
if(i===0){ continue }
console.log(i,typeof i,"int違う・・")
}

for inの罠にハマってしまいました
こういうiも取りたいときってforEachだったり
配列のlengthとってforで回したりの方がいいんですかね？
615 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 20:55:28.38 ID:IVltSCqHM.net]: >>600
>>iも取りたいとき

何が言いたいのかさっぱりわからん
コードの目的（期待するログ表示）を明示しよう
616 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 20:55:55.62 ID:y95b8UUh0.net]: ixを用意してまわしてもいいし、オブジェクトの
entries 使ってfor ofでまわしてもいい。

正直超些細なことでどっちでもいい。
617 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 21:37:28.49 ID:puY9Jz2N0.net]: >>600
インデックス値のプロパティはString型
int型というものはない

最も、i=1のfor文で十分に読めるがね…
618 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 21:49:07.67 ID:0pE5eZuk.net]: >>601
わかりませんかね？
そんな難しいことは書いてないと思うのですが・・

>>602,603
なるほど、array回すときの何か慣習があるのかなと思い質問しました
600例のary程度ならfor(let i in ary){
i=i-0;であえて数値に変換するか、if(i==0)にするか
とかしようと思っていましたが素直に
for(i=1;i<ary.length;i++)的な書き方で行こうかなと思います
ありがとうございました
619 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 22:04:46.78 ID:puY9Jz2N0.net]: >>604
疎な配列を考慮する場合、for文とhasOwnPropertyを併用する必要がある

配列でfor-in文を使うと他で拡張されたプロパティも拾うので、理由がなければお勧めしない
keysやentriesからsliceしてfor-ofでも良い
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/keys
620 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 22:09:38.34 ID:puY9Jz2N0.net]: keysやentriesからfor文の方がスマートか
621 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 22:40:29.47 ID:0pE5eZuk.net]: >>605-606
なるほどいろんな書き方がありますね
配列の値回すだけの目的にfor-in文だとトラブルとかパッとみ可読性落ちる気もするので辞めといたほうが良さそうですね
ありがとうございました
622 名前：デフォルトの名無しさん mailto:sage [2022/03/24(木) 22:56:29.50 ID:I4v/4Eugr.net]: for-inは非推奨
623 名前：デフォルトの名無しさん mailto:sage [2022/03/25(金) 00:35:38.75 ID:St3aQ5GC0.net]: >>608
for-inは仕様上、非推奨じゃない
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in

prototype拡張したコードを考慮してないコードでバグを誘発させるだけ
https://www.google.com/search?q=for-in+prototype%E6%B1%9A%E6%9F%93
理解して使う分には問題ないが、コーディング規約で縛られていれば使えないし、チーム内に初心者が一人いるだけでバグを作り込むリスクがある

Object.keys() 等の他のプロパティ列挙機能で要件を満たせるなら、for-inを使う理由はない
要件を見直してみれば、ほとんどの場合にfor-inを使う必要がないことが分かるはずだ
624 名前：デフォルトの名無しさん mailto:sage [2022/03/25(金) 02:03:31.28 ID:Yg2YvIk20.net]: if (++score == 10)
if (score == 10)ならばわかるのですが、
ここに++が加わることでどのような意味になりますか？
625 名前：デフォルトの名無しさん mailto:sage [2022/03/25(金) 02:20:07.52 ID:IB939EjQM.net]: >>610
評価前にscoreの値が+1される

インクリメント (++) - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment
626 名前：デフォルトの名無しさん mailto:sage [2022/03/25(金) 03:35:53.60 ID:Yg2YvIk20.net]: >>611
ありがとうございます！
627 名前：デフォルトの名無しさん mailto:sage [2022/03/25(金) 22:15:14.80 ID:mxqYNiam0.net]: async/awaitのことですが

await hoge();

としたときに、hogeが実行される前に何かを待つのか、
それともhogeが実行されその完了を待つのか、
どちらでしょうか

それと、promiseを返す関数かそうでないかはどうやって見分けますか
628 名前：デフォルトの名無しさん mailto:sage [2022/03/26(土) 00:51:31.77 ID:m2MNxml2M.net]: async関数は記述は普通の関数だけどPromiseを返す関数。awaitは完了を待つ
629 名前：デフォルトの名無しさん mailto:sage [2022/03/26(土) 08:38:54.66 ID:gURe/O9Rr.net]: awaitは「あ、待って」って覚えるとよい
630 名前：デフォルトの名無しさん mailto:sage [2022/03/26(土) 09:09:03.44 ID:KPWAIzDZa.net]: 完了を待つには待つけど
何を以て完了とするかはそれぞれの関数が決めること
見分ける方法は無いしそもそも得体の知れない関数を使っちゃ駄目
631 名前：デフォルトの名無しさん mailto:sage [2022/03/26(土) 10:06:13.85 ID:PyuIzITI0.net]: こんにちは>>613です
蒸し返しですみませんが
awaitをつける行じたいがapiなどの重い処理なんですかね
それともawaitはthenのような意味で処理を待つ行なんですかね
つまりawaitは待つ側なのか、待たされる側なのか、という質問です
632 名前：デフォルトの名無しさん mailto:sage [2022/03/26(土) 10:17:45.12 ID:m2MNxml2M.net]: awaitは非同期処理の完了を待つ。非同期処理を順次実行する時に使う。
処理待ちでブラウザが無反応にならないようにする目的ならsetTimeoutとかsetIntervalとかWeb Workers使うんじゃないかな
633 名前：613 mailto:sage [2022/03/26(土) 11:57:59.24 ID:PyuIzITI0.net]: >>617で書いた、「待つ側」と「待たされる側」てのは同じ意味でしたねw
待つ側なのか、待たせる側なのか、という質問です
634 名前：デフォルトの名無しさん mailto:sage [2022/03/27(日) 05:19:16.05 ID:FEuFUFUF0.net]: >>581
Top-level Await
従来、JavaScriptのawaitはasync function内でしか使えなかったが、
今後はasync functionの外、top levelでもawaitが使えるようになる
ES2022より
635 名前：デフォルトの名無しさん mailto:sage [2022/03/27(日) 15:29:56.04 ID:M7t4c+zh.net]: クロージャーであるsetter,getterを持つクラスを作ったのですが
クロージャーをセットするときにパラメーターを渡したいとき、どうすればいいのでしょうか

class Hoge{
constructor(){
this._f=null;
}
set f(f){
this._f=f();
}
get f(){
return this._f;
}
}
const h = new Hoge(10,20);
h.f = function(){
let r=0;
return {
sum:(a,b)=>(r+=a+b),
r:()=>console.log(r)
}
}
h.f.sum(1,2);
h.f.sum(3,4);
h.f.r(); // 10

↑はこれで良いのですが、例えば
h.f = function(m){
let r=0;
return {
sum:(a,b)=>(r+=(a+b)*m),
r:()=>console.log(r)
}
}
みたいにパラメーターmを渡したいです
しかし、setterには引数１つしか渡せないので詰みました。
かと言って
f(f,prms={}){ this._f=f(prms) }
get f(){}
はできません
setter,getterを使わずに、一時保存的な変数を増やしてゴリゴリ書くしかないでしょうか
つづく
636 名前：デフォルトの名無しさん mailto:sage [2022/03/27(日) 15:32:25.21 ID:M7t4c+zh.net]: つづき>>621
苦肉の策として、h.fに配列を渡すことにしました。
が、、コレジャナイ感が・・
しかし正解がわからないのでこれで良いのかどうかすらわかりません。
何か別にスマートな書き方はあるのでしょうか

class Hoge{
constructor(){
this._f=null;
}
set f(ary){
this._f=ary[0](ary[1]);
}
get f(){
return this._f;
}
}

const h = new Hoge(10,20);

h.f = [function({m=1}){
let r=0;
return {
sum:(a,b)=>(r+=a+b),
r:(msg)=>console.log(msg,r*m)
}
},{m:0.5}];

h.f.sum(1,2);
h.f.sum(3,4);
h.f.r("(1+2+3+4)*0.5 = ");
637 名前：デフォルトの名無しさん mailto:sage [2022/03/27(日) 18:02:56.87 ID:tt2ZDA7G0.net]: >>622
setterに関数を渡すのではなく、クロージャを渡すのではだめ？

class Hoge{
constructor(){this._f=null}
set f(f) {this._f = f}
get f() { return this._f}
}

const h = new Hoge()

h.f = (m => {
let r=0;
return {sum: (a,b) => r+=(a+b)*m, r:() => console.log(r)}
})(3);

h.f.sum(1,2);
h.f.sum(3,4);
h.f.r()
638 名前：デフォルトの名無しさん mailto:sage [2022/03/27(日) 18:23:49.57 ID:M7t4c+zh.net]: >>623
いえ全然アリです
個人的に
function hogeclosure1({m,n}){return ()=>}
function hogeclosure2({m,n}){return ()=>}
var prms1={m:1,n:2};
var prms2={m:11,n:22};

h.f(hogeclosure1,prms2);
な書き方がしたいなと思ったのですが（prmsの精査や加工をクラス側で処理できるので）、

h.f=hogeclosure1(prms);
検討してみます
ありがとうございました
639 名前：デフォルトの名無しさん mailto:sage [2022/03/27(日) 18:42:46.38 ID:V2wsdbVLM.net]: >>621
関数を返す関数を使う
部分適用でググって
640 名前：デフォルトの名無しさん mailto:sage [2022/03/27(日) 19:22:43.75 ID:tt2ZDA7G0.net]: >>622
setterに関数を渡すのではなく、クロージャを渡すのではだめ？

class Hoge{
constructor(){this._f=null}
set f(f) {this._f = f}
get f() { return this._f}
}

const h = new Hoge()

h.f = (m => {
let r=0;
return {sum: (a,b) => r+=(a+b)*m, r:() => console.log(r)}
})(3);

h.f.sum(1,2);
h.f.sum(3,4);
h.f.r()
641 名前：デフォルトの名無しさん mailto:sage [2022/03/29(火) 22:07:09.61 ID:wVAC/++3.net]: 頭がこんがらがってくる事象に遭遇しました

var arr=[[1,2,3],[4,5,6],[7,8,9]];
function hoge(){
function h(arr){
var res=[];
for(var i=0;i<arr.length;i++){
var _d=arr[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
return (arr)=>h(arr)
}
var ho=hoge();
console.log(ho(arr.concat()));//1回目
console.log(ho(arr.concat()));//2回目

１回目、２回目
共に.concat()でディープコピーしたデータを渡したはずなのですが
arr[i][1]=arr[i][1]*2のとこでなぜか前回のデータが反映されてます

クロージャーだから・・？という何となくしかわからないのですが
そうならないためにarr.concat()したのにな？？？という感じです。
for文でvar _d=arr[1].concat()としてやるともちろん１回目も２回目も同じ結果になります。
ただ、arr[1].concat()しなかった場合も、そもそも渡したarrがarr.concat()なので
function hに渡され処理した結果も独立のデータになりそうな気がするのですが、なぜなんでしょうか？？
642 名前：デフォルトの名無しさん mailto:sage [2022/03/29(火) 22:19:49.44 ID:wVAC/++3.net]: 補足です
改めてクロージャー無しでやってみたら

function hoge(){
var res=[];
for(var i=0;i<arr.length;i++){
var _d=arr[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
var arr=[[1,2,3],[4,5,6],[7,8,9]];
console.log(hoge(arr.concat()));//1回目
console.log(hoge(arr.concat()));//2回目
console.log(arr);

これもまた変更されてました・・
643 名前：デフォルトの名無しさん mailto:sage [2022/03/29(火) 22:22:32.33 ID:wVAC/++3.net]: 連投すみません
>>628はhoge()で引数とってないのでおかしいですね
こうでした↓

function hoge(data){
var res=[];
for(var i=0;i<data.length;i++){
var _d=data[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
var arr=[[1,2,3],[4,5,6],[7,8,9]];
console.log(hoge(arr.concat()));//1回目
console.log(hoge(arr.concat()));//2回目
console.log(arr);
644 名前：デフォルトの名無しさん mailto:sage [2022/03/29(火) 22:37:48.87 ID:wVAC/++3.net]: 自己解決しました
.concat()ディープコピーかと思ったらシャローコピーでした・・

hoge(JSON.parse(JSON.stringify(arr)));
で行けました・・
645 名前：デフォルトの名無しさん mailto:sage [2022/03/31(木) 02:46:41.93 ID:MFrlKIWw0.net]: すみません。
初心者なんですが、@などのデコレータ？の意味が調べてもよくわからないんですけど教えてくれませんか？

[ 続きを読む ] / [ 携帯版 ]

read.cgi ver5.27 [feat.BBS2 +1.6] / e.0.2 (02/09/03) / eucaly.net products.
担当:undef