+ 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 492 名前：デフォルトの名無しさん mailto:sage [2022/02/16(水) 22:54:05.43 ID:CjOKbN9ya.net] スレ違いも守れない身勝手なクズ 493 名前：デフォルトの名無しさん [2022/02/17(木) 22:37:18.01 ID:TmsR/NWJ0.net] <input type="button" value="aaaaaa" id="test1"> <br> <input type="button" value="bbbbbb" id="test2"> <スクリプト> var id_list = ["test1","test2"]; for(let n=1;n<=id_list.length;n++){ var elm = document.getElementById(id_list[n-1]); elm.addEventListener( "click", function(e){ alert(elm.value); } ); } </スクリプト> aaaaaaボタンをクリックしてもbbbbbbと表示されてしまいます どこが間違っているんですか？ 494 名前：デフォルトの名無しさん mailto:sage [2022/02/17(木) 23:03:32.28 ID:Np/YPCaB0.net] >>482 スコープまわりの認識とか？ var を使わずに const, let 使えば意図した通りに動くはず 495 名前：デフォルトの名無しさん mailto:sage [2022/02/17(木) 23:21:36.38 ID:eqAwClgCa.net] alert (elm.value)をalert(e.currentTarget.value)に変えたればおけ 496 名前：デフォルトの名無しさん mailto:sage [2022/02/17(木) 23:28:41.09 ID:7BD8Ewk+0.net] alert(this.value) または const elm = document.getElementById(id_list[n-1]) 497 名前：デフォルトの名無しさん mailto:sage [2022/02/17(木) 23:31:46.94 ID:U/Ab4M74p.net] これから新規でスクリプト書くなら、特別な理由がない限りvarは使わずletかconstだけ使うほうが、変なミス起こらなくていいと思う 498 名前：デフォルトの名無しさん mailto:sage [2022/02/18(金) 10:44:02.23 ID:tiifqQ9V0.net] 初心者は、jQuery を使えばよい 分かりにくい、this の意味も変えてある 499 名前：デフォルトの名無しさん mailto:sage [2022/02/18(金) 11:35:27.02 ID:tiifqQ9V0.net] jQuery で、ボタンの外側・親にイベントを付けて、親で、子のイベントをキャッチできる <div id="btn-wrap"> <button class="BtnA BtnAll" value="1">A-1</button> <button class="BtnA BtnAll" value="2">A-2</button> <button class="BtnB BtnAll" value="3">B-3</button> </div> $( function ( ) { // 外側・親にイベントを付けて、親で、子のイベントをキャッチする $( '#btn-wrap' ).on( 'click', function ( event ) { const value = $( event.target ).prop( 'value' ) console.log( value ) alert( value ) } ); } ); または、共通のclass を付けて、そのクラスだけのイベントをキャッチできる // .BtnA のみ $( '.BtnA' ).on( 'click', function ( event ) { const value = $( this ).prop( 'value' ) console.log( value ) alert( value ) } ); 500 名前：488 mailto:sage [2022/02/18(金) 12:16:47.94 ID:tiifqQ9V0.net] >>488 に追加 セレクターをカンマで区切れば、A またはB でも出来る // .BtnA or .BtnB のみ $( '.BtnA, .BtnB' ).on( 'click', function ( event ) { const value = $( this ).prop( 'value' ) console.log( value ) alert( value ) } ); 501 名前：デフォルトの名無しさん [2022/02/18(金) 12:23:50.32 ID:aHWUA2kK0.net] >>483-485 やってみますありがとー 502 名前：デフォルトの名無しさん mailto:sage [2022/02/18(金) 12:38:42.82 ID:YjRRevVzM.net] イベントのバブリングを学ぶにはいい機会（丁度よい題材）だとは思うけど、「初心者に向けて」というエクスキューズでもって今時jQueryを勧める態度には悪意に近いモノを感じる 503 名前：デフォルトの名無しさん mailto:sage [2022/02/18(金) 21:37:34.77 ID:rjrdvPAWd.net] 今後廃れていくだけだもんな 新たに学習する必要はないわな 504 名前：マッチ棒 mailto:sage [2022/02/19(土) 09:29:33.08 ID:SYl7hXba0.net] こんにちはこのたびはお世話になります Javaスクリプトの質問ですが いろいろ煮詰まっておりさしあたり 変数のスコープとオブジェクトのことがよくわからないでして 変数は関数内のみのローカルありますよね でオブジェクトも var obj=new obj() といったインスタンツなら変数とおなじでローカルだったりグローバルだったりするんですかな まずは以上よろしくお願いします 505 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 09:52:37.76 ID:ApZEftHir.net] もうvarは使うな以上 506 名前：マッチ棒 mailto:sage [2022/02/19(土) 12:07:18.29 ID:SYl7hXba0.net] バーよりレッツを使うんですね承知しました。 ブラウザ画面内に表示されたDOMオブジェクトは常にグローバルなんですかね 何もかもがわからん 507 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 13:34:02.57 ID:XlinVUCj0.net] window.document.body, window.document.head など、 windowオブジェクトはグローバル windowが無くても、document.head でも同じ window.document.head == document.head //=> true 例えば、Pjax で、ページを作っている場合、 ページ遷移したように見えても、window に追加したオブジェクトは初期化されない。 そのまま残っている ページの一部分しか変更されていないから。 ページをreload していないから 508 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 16:01:34.02 ID:c/9+L37GM.net] Pjax is なに 509 名前：デフォルトの名無しさん [2022/02/19(土) 18:28:21.70 ID:fGIkG9WE0.net] >>491 むしろ悪意そのものでしょ 510 名前：マッチ棒 mailto:sage [2022/02/19(土) 18:38:03.12 ID:SYl7hXba0.net] 参考書に、Javaスクリプトにはクラスの概念はない、て書いてあるんですが もしかして情報が古い？ 511 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 18:39:00.10 ID:9/CFXaUW0.net] はい 512 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 18:43:12.48 ID:QjUSXh+yM.net] その本で勉強するのやめたら varを使ってるのもそのせいだろうし 513 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 19:02:00.92 ID:LKw+j5240.net] >>499 「クラスの概念がない」は正しい JavaScriptはプロトタイプベースでclass文は糖衣構文だからな そういう意味で書かれているのなら正しいといえるが、書籍を持ってない人が文脈を読みとれるはずもない 書籍の正しさを保証するのはその書籍を持っている人だけ 514 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 19:05:31.85 ID:s68IJWjka.net] まあvar使ってる時点でES15以前だから読む価値なしですね 時間の無駄なんでその本を投げ捨てろ 515 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 19:06:29.96 ID:LKw+j5240.net] >>499 あと、正しさを気にするなら、カナ交じり用語を使うのを止めた方がいい ・Javaスクリプト ・バー ・レッツ 516 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 21:14:26.70 ID:WPu6vt5B0.net] マジレス… 517 名前：マッチ棒 mailto:sage [2022/02/19(土) 22:06:51.12 ID:SYl7hXba0.net] こんばんはいつもお世話なります 今日でかなり学習は進みましたありがとうございます さっそく質問ですが クロッパーJSという便利ライブラリを見つけて解析しております ところが fileReaderでダイヤログを出してjpg画像なりを読んでまずは画面にプレビューしますが、 あっ間違えたのテイで再度fileReaderして別の画像を読み込むのですが プレビュー画面が前のまま変わらないのです 以上よろしくお願いします 518 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 22:16:58.88 ID:LKw+j5240.net] >>506 クロームdevtoolでソースcodeを解析してみればいいんじゃないかな ネタ品質が低くてすまん 519 名前：マッチ棒 mailto:sage [2022/02/19(土) 23:27:47.87 ID:SYl7hXba0.net] クロッパーJSの公式デモページ(エマワトソンの写真のやつ)でImport Image with Blob URLsというボタンは 何度でも写真を読み直しできるんですよ インスタンスをデストロイがカギとは思うのですが 520 名前：デフォルトの名無しさん mailto:sage [2022/02/19(土) 23:34:29.04 ID:LKw+j5240.net] >>508 デモページのソースをディフってみたら？ 521 名前：マッチ棒 mailto:sage [2022/02/20(日) 01:15:27.52 ID:vRC3RkLD0.net] クロッパーのことですけんど なかなか敷居が高いですわ インタネッツでもたくさんの人が2回目の読み込みをどうするか質問してますね 522 名前：マッチ棒 mailto:sage [2022/02/20(日) 03:05:26.93 ID:vRC3RkLD0.net] ふう、なんとかやれましたよ 大儀であつた 523 名前：日記帳 mailto:sage [2022/02/20(日) 16:34:24.33 ID:vRC3RkLD0.net] こんにちは今日も格闘しております グーグルマップのリーフレットプラグインで、写真を地� 524 名前：}に貼り付けています 複数貼った時の処理でまた壁につきあたりました 貼り付け関数で作るインスタンスが「imgovlay」なんですがその名前なら例えばimgovlay.options.cornersってやれば四つ角の座標がとれるですけんど 3枚はったあとからでは1枚目の座標が調べられんとです これはどんな工夫したらよいのやら 以上よろしくお願いします [] [ここ壊れてます] 525 名前：デフォルトの名無しさん mailto:sage [2022/02/20(日) 17:20:03.63 ID:xfffAjua0.net] 日記ならそろそろ個人ブログでも作ってやったら 前にレスくれてる人は無視、相変わらず中途半端なカタカナ表記で聞きたいこともわかりにくいし書いてるコードも貼らない 一応エスパーしとくと、配列でインスタンス全部持っておくだけでは？ 526 名前：日記帳 mailto:sage [2022/02/20(日) 17:28:08.35 ID:vRC3RkLD0.net] ジェーンスタイルというアプリでこのスッドレを見ておるますが、タグのあるコードのコピペはできないんですよ 527 名前：デフォルトの名無しさん mailto:sage [2022/02/20(日) 17:31:05.62 ID:7vowCzxS0.net] まず最初に>1-2を丁寧に見るといいよ、というか見て ideone.com/ jsfiddle.net/ 528 名前：日記帳 mailto:sage [2022/02/20(日) 17:50:37.16 ID:vRC3RkLD0.net] はい承知しました 大儀であった 529 名前：デフォルトの名無しさん mailto:sage [2022/02/20(日) 18:25:51.02 ID:hgnRPi350.net] ID:vRC3RkLD0はネタ質問と思ってる 全く面白くないが 530 名前：デフォルトの名無しさん mailto:sage [2022/02/21(月) 02:08:54.33 ID:44J1KF7y0.net] Chrome拡張機能のjsファイルを修正しようとしているんだけど （バグが出たのに作者放置で逃亡ｗ） JSファルダの中にいくつかjsファイルがあるけど、どれが最初に読み込まれるのですか？ また、グローバル変数はファイルを超えて使えますか？ 531 名前：デフォルトの名無しさん mailto:sage [2022/02/21(月) 04:36:00.42 ID:YvtULrNjM.net] >>518 まずは複数の実行コンテキストが存在することを把握するといい chromiumのmanifest V2拡張機能はこの年末にサポート終了が予定されているので、その拡張機能がV2の場合はV3に作り直すことをオススメする 532 名前：デフォルトの名無しさん mailto:sage [2022/02/23(水) 08:42:30.40 ID:EjF360bu0.net] 質問です。.cgiのページにcanvasの https://www.google.com/amp/s/torisky.com/javascript%25EF%25BC%259Acanvas%25E3%2581%25AB%25E9%259B%25AA%25E3%2581%25AE%25E7%25B5%2590%25E6%2599%25B6%25E3%2582%2592%25E9%2599%258D%25E3%2582%2589%25E3%2581%259B%25E3%2582%258B/%3famp=1を設定するにはどこのページにコード貼り付ければいいのでしょうか？全部.cgiの中で大丈夫ですか？ 533 名前：デフォルトの名無しさん mailto:sage [2022/02/23(水) 10:35:21.54 ID:EjF360bu0.net] HTML部分 <!DOCTYPE html> <html> <head> って書いてるから無理なんかな……index.htmlじゃなくて.cgi直のURLに設定したいんだけど…… 534 名前：デフォルトの名無しさん mailto:sage [2022/02/23(水) 11:28:37.94 ID:hXi3IxJ40.net] >>521 こんにちは cgiてのはperlのコトですかね perlやPHPはHTMLをまるっと吐き出せるんですよ だからjavascriptの仕掛けのあるHTMLをまず作ってみて、その内容をまるごとcgiでprint文などで出力します 535 名前：デフォルトの名無しさん mailto:sage [2022/02/25(金) 20:59:11.76 ID:zW9WpBq20.net] てｓｔ 536 名前：デフォルトの名無しさん mailto:sage [2022/02/25(金) 20:59:52.69 ID:zW9WpBq20.net] C＃からJavaScriptをコールしたいのだが、このJavaScriptは.jsファイルに入れるのではなく、 htmlファイル内に書かないといけないのかな？ 537 名前：デフォルトの名無しさん [2022/03/06(日) 20:50:59.24 ID:Ii2qDZic0.net] setIntervalでtimer1が起動中のときはtimer2を起動させないようにするにはどうやればいいんですか？ 538 名前：デフォルトの名無しさん mailto:sage [2022/03/06(日) 20:59:50.64 ID:EBMcer04r.net] >>525 setIntervalのラップ関数を作って排他制御する 539 名前：デフォルトの名無しさん [2022/03/06(日) 21:36:36.90 ID:Ii2qDZic0.net] >>526 なるほどー それとsetIntervalも戻り値は0になることはないのですか？ 540 名前：デフォルトの名無しさん mailto:sage [2022/03/06(日) 22:53:26.23 ID:SX3V4D250.net] timer の状態を調べる、属性とかは無いの？ 541 名前：デフォルトの名無しさん mailto:sage [2022/03/08(火) 21:51:27.12 ID:iL0h68YD0.net] >>528 返り値はただのNumber値 プロパティは埋め込めない 542 名前：デフォルトの名無しさん mailto:sage [2022/03/08(火) 22:09:04.89 ID:iL0h68YD0.net] >>527 戻り値は正の整数 543 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 08:20:41.91 ID:U0qNtUpH0.net] 数日前からjavascriptやらされてるんだけど質問 ajax関係の処理が例えばJqueryだと$.ajaxとかで終わった時の処理とか エラーだったときの処理とかで分かれてるじゃない？ こういうAPIへのリクエストは全部まとめたいからsuccessにreturnするfunctionにしたら 使う側では瞬間帰ってきてundefinedになってしまう・・・ asyncなんだから当たり前だと言われたらそれまでなんだけど そして毎回$.ajaxをそこら中で呼び出すことになる これってそういう言語だからあきらめろしか無い感じ？ もちろんasyncをfalseにしろという話になりそうだけどブラウザがメインスレッドでやらんほうがいいとか警告出してくるし 544 名前：デフォルトの名無しさん mailto:sage [2022/03/09(水) 08:38:01.00 ID:6ktbAzhaM.net] よく分からんけどコードが間違ってるだけな気がする 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()ではダメなのか？

---

---

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

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