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

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 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] すみません。 初心者なんですが、@などのデコレータ？の意味が調べてもよくわからないんですけど教えてくれませんか？ 646 名前：デフォルトの名無しさん mailto:sage [2022/03/31(木) 14:54:28.12 ID:K6LuIPS40.net] javascriptって、キャッチされなかった例外が最終的に集約されるハンドラってある？ .NETのDispatcherUnhandledExceptionみたいなやつ ググってみたけど、window.unhandledrejectionくらいしか見つからんかった これって名前的にpromiseのrejectを実装してないときにしか使われんよね？ 647 名前：デフォルトの名無しさん mailto:sage [2022/03/31(木) 16:49:24.25 ID:QdDep3ZF0.net] onerror 648 名前：デフォルトの名無しさん mailto:sage [2022/03/31(木) 23:41:59.53 ID:K6LuIPS40.net] �dクス 調べてみるとonerrorだとpromiseのrejectはハンドリングしてくれないっぽいね onerrorとunhandledreject両方を使うのがいいんかなぁ awaitでrejectしたときってどっちにハンドリングされるんだろ？明日実際に試してみるかー 649 名前：デフォルトの名無しさん mailto:sage [2022/04/01(金) 15:19:09.19 ID:PU7Zi1lY0.net] 非同期は文脈が異なる・異世界だから、通信できない 通信不能な物に対しては、timeout ぐらいしか、やりようがない 650 名前：デフォルトの名無しさん [2022/04/02(土) 18:01:02.86 ID:3Re6Hfed0.net] スクロールバーがスクロール量500を超えたら画像を徐々に濃くして表示、500より少なかったら画像を徐々に薄くして非表示にするのってどうやるんですか？ スクロール方向で場合分けしてスクロールバーが500を 651 名前：またいだかどうか判定して setIntervalを使ってopacityで濃くしたり薄くしたりするしかないんですか？ [] [ここ壊れてます] 652 名前：デフォルトの名無しさん mailto:sage [2022/04/02(土) 18:43:50.54 ID:YPKLSNfQ0.net] スクロール位置で判定すれば？ scrollTop だったかな？ 653 名前：デフォルトの名無しさん mailto:sage [2022/04/02(土) 21:11:08.49 ID:YAja5EWm0.net] >>636 https://developer.mozilla.org/ja/docs/Web/API/Document/scroll_event 654 名前：デフォルトの名無しさん mailto:sage [2022/04/03(日) 15:30:48.81 ID:oIYvxJGU0.net] 奇抜なアイデアでもググると出てきてしまう昨今ですが あっと驚く理不尽な処理はありませんか 棺桶あけたら自分が中にいましたみたいな 655 名前：デフォルトの名無しさん mailto:sage [2022/04/03(日) 22:20:40.81 ID:apGbIMaW0.net] >>639 挙動は仕様書に書かれているため、仕様を理解すればするほど驚く機会は少なくなる 普段から勉強をせず、プログラミング系サイトを巡回すれば、「あっと驚く理不尽な処理」に出会える可能性を高められるだろう (まともな技術者なら自らの無知を恥じるべきだろうが) 656 名前：デフォルトの名無しさん [2022/04/09(土) 18:27:31.25 ID:d8bX3KTm0.net] ページをスムーズに移動するときscrollToを使いますが これみたいにelementをスムーズに移動させる関数はありますか？ 657 名前：デフォルトの名無しさん mailto:sage [2022/04/09(土) 19:11:11.85 ID:NsLa5u+dr.net] jsでスムーズは無理なのでcssでやってくれ 658 名前：デフォルトの名無しさん [2022/04/09(土) 19:46:32.17 ID:mW5Jyv0xM.net] GSAPとか使えば楽に動かせる 659 名前：デフォルトの名無しさん [2022/04/13(水) 09:13:53.65 ID:Qi5auZGwM.net] <div id="test"> <a href="aaa.html"></a> <a href="bbb.html"></a> </div> このdivの中にあるhrefを全て取得するには どうやったらいいんですか? aにidやclassはつけないものとします。 660 名前：デフォルトの名無しさん mailto:sage [2022/04/13(水) 09:24:08.70 ID:j7E4iT5n0.net] >>644 https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator https://developer.mozilla.org/ja/docs/Web/CSS/Type_selectors 661 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ b602-9+GH [119.106.222.232]) mailto:sage [2022/04/14(木) 06:34:43 ID:hMI8sVN30.net] document.querySelectorAll 662 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ b72f-jtTv [218.220.251.107]) [2022/04/14(木) 12:38:00 ID:VhBZ5PIH0.net] document.querySelectorはいま流行りなんですか？ document.getElementByIdしか知らなかったけど。 663 名前：デフォルトの名無しさん mailto:sage [2022/04/14(木) 13:03:41.45 ID:e+FW9n+1r.net] 流行りっていうかもうかなり昔からあるけどな 664 名前：デフォルトの名無しさん mailto:sage [2022/04/14(木) 13:53:57.95 ID:AzvcwCnH0.net] 流行りで決めるスタンスは分からんが、ノード検索系は既に成熟してる感ある xpathはなぜか最新仕様が実装されないけど 665 名前：デフォルトの名無しさん mailto:sage [2022/04/15(金) 10:18:55.82 ID:sZWwv8hr0.net] javascriptって初心者向けと言われているけど、難しいよね？ 666 名前：デフォルトの名無しさん mailto:sage [2022/04/15(金) 11:05:45.21 ID:DZhoNVLD0.net] 初心者向けと言われてるのを知らない 667 名前：デフォルトの名無しさん mailto:sage [2022/04/15(金) 12:40:06.63 ID:28sm60Uu0.net] >>650 環境構築の敷居が低いだけ 668 名前：デフォルトの名無しさん mailto:sage [2022/04/17(日) 12:45:46.17 ID:lD7JO0wI0.net] javascriptの勉強中です。 Wordでコード試作してEdgeのコンソールにコピペしたら、クォーテーションやダブルクォーテーションのある行で必ずエラーになります。 どうもwordで書いたことが問題らしいです。 同じコードを色んなファイル形式で書いてからコンソールで検証した結果、 ・最初からコンソールに直接書くと、正常に作動 ・テキストドキュメントに書いてコンソールにコピペすると、正常に作動 ・最初からコンソールに書き込んだものをwordにコピペして、フォントを適当に変えた後、コンソールにコピペすると正常に作動 ・wordに書いたコードをコンソールにコピペするとクオーテーションのある行でエラーになる。 ・wordで書いたコード(そのままコンソールにコピペするとエラー)の全てのクォーテーションに、コンソールに書いたクォーテーションを上書きコピペ(元の書式を保持)すると、コンソール上で正常に作動するようになる という検証結果になりました。 試作コードをwordじゃなくテキストドキュメントで作るようにしてからは、今のところ問題は起きていないです。 で、質問なんですが、 どうもword形式で書いたクォーテーションやダブルクォーテーションは、内部的に問題がありそうなのですが、理由を詳しく知っている方はいますか? あと、編集や保存が楽なテキスト形式でコードを試作したいとき、みなさんは何を使ってますか? 669 名前：デフォルトの名無しさん mailto:sage [2022/04/17(日) 12:49:32.71 ID:U+v/j1Oq0.net] 文字コードやないんか？ 670 名前：デフォルトの名無しさん mailto:sage [2022/04/17(日) 12:51:06.49 ID:U+v/j1Oq0.net] エディタはvscodeつかったらいいよ 671 名前：デフォルトの名無しさん mailto:sage [2022/04/17(日) 12:55:31.73 ID:TTO+H6Xx0.net] ブラウザにいれてるviolentmonkeyのエディタ使ってる 672 名前：デフォルトの名無しさん mailto:sage [2022/04/17(日) 13:05:51.20 ID:k8OFv/xgr.net] wordうんたらはネタだろ 673 名前：デフォルトの名無しさん mailto:sage [2022/04/17(日) 17:04:07.98 ID:lD7JO0wI0.net] >>654 それだ…!! 「"」で確認してみたけど、まったく同じキーで入力したのに Wordで入力…レフトダブルクォーテーション、文字コードは201C、文字は「“」 コンソールで入力…ダブルクォーテーション、文字コードは0022、文字は「"」 全く同じ入力方法、フォントも同じ。見た目もそっくりだけど、200%に拡大したら確かに違う文字ですた。 >>655、>>656 ありがとん。 vsコード持ってるから今度からそっちにしてみます。 >>657 それがネタじゃないんだな(泣)。 トライアンドエラーでコード構築の練習をしたかったので、楽なソフトでコードを書きたかったんよ。 wordならダブルクリックで立ち上がるし、字も見やすい大きさに拡大できるし、採用しなかったコードも適当にストックできて、楽そうだなぁ、と…。 まさか文字コード違いで問題が起きるとは想像もしなかったにゃ。 674 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ d98b-Ckae [210.228.102.1]) mailto:sage [2022/04/17(日) 17:51:02 ID:pn/ClTGJ0.net] >>658 それWordのオートコレクト機能 オフにできたと思う でも普通にvscode使う方がいいよ 675 名前：デフォルトの名無しさん mailto:sage [2022/04/17(日) 18:12:43.66 ID:lD7JO0wI0.net] >>659 オートコレクト機能、そんなのもあるのか!! 了解しますた。 まぁvscodeの方が無難よね。間違いないです。 676 名前：デフォルトの名無しさん [2022/04/17(日) 18:15:32.20 ID:xdoWfkC30.net] 何気にwordでコード書いてる人みたのネット上ですら初めてかもしれん 677 名前：デフォルトの名無しさん mailto:sage [2022/04/19(火) 02:49:01.33 ID:tGbJiwG70.net] >>644 jQuery で、id="test" 直下・子(a, c)と子孫(b)を取得した <div id="test"> <a href="a.html"></a> <div><a href="b.html"></a></div> <a href="c.html"></a> </div> $( function ( ) { function get_a( selector ) { return $( selector ).map( function( ) { return $( this ).attr( 'href' ); } ); } const children = get_a( '#test > a' ) const descendants = get_a( '#test a' ) console.log( children, descendants ) } ); 出力 ['a.html', 'c.html'] // 直下・子のみ ['a.html', 'b.html', 'c.html'] // 子孫 678 名前：デフォルトの名無しさん mailto:sage [2022/04/19(火) 10:51:06.57 ID:9fIYs0Yt0.net] proxyってどうやってfor inやforEachすればいいですか 679 名前：デフォルトの名無しさん mailto:sage [2022/04/20(水) 13:31:39.60 .net] https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind ↑でbindのメリットを考えてみたのですが const module2 = {x:333} const hogeGetX = unboundGetX.bind(module2); console.log(hogeGetX()); xの値を変更しつつmoduleのgetXはそのまま使える、 みたいなことでしょうか？？ 680 名前：デフォルトの名無しさん [2022/04/24(日) 03:36:46.70 ID:G77ToU3y0.net] JavaScript初心者なんですが、marindeckっていうTwitterクライアントアプリでとあることがしたくて下のコードを書いて実行したんですがcan't create variable duplicate "title"ってエラーが出てしまいました。調べてみたらwebkitが悪いらしいんですが解決方法が分からなくて困ってます。titleを変えたら次はheaderが駄目になって、headerを変えたらitem、最終的にはtitleのところがエラーになります。constをletやvarに変えても駄目でした。どうすればいいでしょうか？ コード(他の部分は長いので載せてません) const header = document.querySelectorAll(".column-heading"); const title = document.querySelectorAll(".column-heading,.column-title-edit-box"); const item = document.querySelectorAll(".md-navbar-item"); 681 名前：デフォルトの名無しさん mailto:sage [2022/04/24(日) 04:03:59.22 ID:oRZQtxTd0.net] 変数名を手当たり次第変える 682 名前：デフォルトの名無しさん mailto:sage [2022/04/24(日) 06:03:31.51 ID:8Psb/90zM.net] >>665 スコープを切る (function() { const header = … })(); 683 名前：デフォルトの名無しさん mailto:sage [2022/04/24(日) 07:36:29.99 ID:zeaUlF5d0.net] >>664 よくあるのは、無名のcallback 関数のthis が、window を指してしまうのを避けるために、bind する。 setTimeout( function( ) { this.count++ }.bind( this ), 100 ) この場合、thisをthatに代入して使うのも簡単。 const that = this setTimeout( function( ) { that.count++ }, 100 ) ES2015では、アロー関数も使える。 setTimeout( ( ) => { this.count++ }, 100 ) だから最近は、bind する事も減った JavaScript は、thisの変動が非常に難しい。 thisが何を指しているのか分からない それで、jQuery の$( this ) がよく使われる 684 名前：デフォルトの名無しさん [2022/04/24(日) 15:54:46.75 ID:G77ToU3y0.net] >>666 >>667 スコープを切る方法で行けました！お二人ともありがとうございました 685 名前：デフォルトの名無しさん mailto:sage [2022/04/25(月) 18:54:55.48 ID:J2rghl7a0.net] JavaScriptでwebアプリを作るにはNode.jsを使うのでしょうか？ 686 名前：デフォルトの名無しさん mailto:sage [2022/04/26(火) 02:37:55.71 ID:JTn9J4710.net] Ruby on Rails でも当然、Node.js を使う。 ただし、Rails 7, Elixir のPhoenix 1.6 からは、脱webpack でesbuild に変わったけど それでも開発環境では、webpack-dev-server も使うし、 VSCode, Node.js, npm/npx, yarn, タスクランナーのGulp/npm-scripts なども必須 687 名前：デフォルトの名無しさん [2022/04/29(金) 21:50:48.52 ID:ZLykNYRC0.net] window.addEventListener( "load", function(){ 処理 } ); これだとページ全体のhtmlと画像の読み込みが完了してから実行するみたいですが 画像の読み込みは完了しなくてもhtmlだけ読み込んだら実行とするようにするにはどうすればいいですか？ 688 名前：デフォルトの名無しさん mailto:sage [2022/04/29(金) 21:55:56.96 ID:u+oETHzl0.net] DOMContentLoaded 689 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 0910-6Jp9 [180.12.82.129]) mailto:sage [2022/05/01(日) 18:51:12 ID:oQCfhHaq0.net] >>673 ありがとうございます 690 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 0910-6Jp9 [180.12.82.129]) mailto:sage [2022/05/01(日) 18:55:01 ID:oQCfhHaq0.net] let e = new Event('scroll'); window.dispatchEvent(e); window.addEventListener( "scroll", function(e){ alert("スクロール"); } ); スクロールバーでスクロールしなくてもスクロールイベント内の処理を実行したいんだけど このようにやってもスクロールと表示されませんでした。 どうやればいいんでしょうか？ 691 名前：デフォルトの名無しさん (ﾃﾃﾝﾃﾝﾃﾝ MM6b-WFod [133.106.196.99]) mailto:sage [2022/05/01(日) 19:09:09 ID:LZNxkfFyM.net] 単に処理順の問題じゃねぇの 692 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 0910-dnm2 [180.12.82.129]) mailto:sage [2022/05/01(日) 19:47:26 ID:oQCfhHaq0.net] >>676 スクロールバーを動かしたときとプログラムを実行したときの どっちでも動くようにしたいので 上ではalertだけど実際はもっと長い処理です 693 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 7b01-z2li [111.188.124.89]) mailto:sage [2022/05/01(日) 19:50:41 ID:MBePrVzJ0.net] >>675 window以外でscrollイベントが発火してる可能性 694 名前：デフォルトの名無しさん (ﾃﾃﾝﾃﾝﾃﾝ MM6b-WFod [133.106.196.99]) mailto:sage [2022/05/01(日) 19:58:27 ID:LZNxkfFyM.net] >>677 いやじゃなくてリスナー登録する前に発火させてるから 695 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 7b01-z2li [111.188.124.89]) mailto:sage [2022/05/01(日) 20:01:30 ID:MBePrVzJ0.net] ああ、>>679が正解だな 要件を誤認してた 696 名前：デフォルトの名無しさん mailto:sage [2022/05/05(木) 20:35:17.57 ID:ouaPcFFk0.net] >>677に限らんが、質問投げっぱなしの奴ばかり

---

---

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

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