+ JavaScript の質問用スレッド vol.129 + [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。 >>2-6 のテンプレを読んだ上で質問してください。次スレは>>950 が>>2 のテンプレ案(本スレで改善案があれば考慮)を元に立ててください ■規則/推奨ルール ・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止) ・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。 ・質問テンプレートの利用推奨。 ・質問への「答え」だけでなく「意見」を出しても良い。 ■禁止行為 ・丸投げ質問 ・迷惑スクリプトの質問 ・オレオレ用語の使用(一般的な用語を使用する事) ・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事) ・回答者同士のレスは原則禁止(>>6 を参照) ・ライブラリの話題の投稿(>>6 を参照) ■質問テンプレート 【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4) 【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。 【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用) 【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。 【サンプルコード】現象を再現可能な最小限のコードを書いてください。 1レスに収まらないならコード投稿サイトを利用してください。 http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ 〜〜略〜〜 var gameFinished = true; for(var no=0;no<acesStackArray.length;no++){ var tmpLeft = getleftPos(acesStackArray[no]); var tmpTop = getTopPos(acesStackArray[no]); var tmpDivs = acesStackArray[no].getElementsByTagName('DIV'); if(leftPos>=tmpLeft-70 && leftPos<=tmpLeft+70 && topPos>=tmpTop-100 && topPos<=tmpTop+100){ var topDivTarget = getTopDiv(cardMoveTarget); if(topDivTarget!=acesStackArray[no]){ var cardTypeThis = divs[0].id.substr(0,1); var numericIDThis = divs[0].id.replace(/[^\d]/g,''); if(tmpDivs.length==0){ if(numericIDThis==1){ divs[0].style.left = '0px' divs[0].style.top = '0px' acesStackArray[no].appendChild(divs[0]); return; } }else{ var destDiv = tmpDivs[tmpDivs.length-1]; var cardTypeDest = destDiv.id.substr(0,1); var numericIDDest = destDiv.id.replace(/[^\d]/g,''); if(cardTypeDest==cardTypeThis && numericIDDest==(numericIDThis-1)){ divs[0].style.left = '0px'; divs[0].style.top = '0px'; destDiv.appendChild(divs[0]); return; } } } } if(tmpDivs.length<13)gameFinished=false; } if(gameFinished){ alert("クリアメッセージ"); } ----コードここまで---- tmpDivsがきちんと処理されていないのかと思い数字を弄ってみたところ問題はなかったようで、 ゲーム終了そのものの処理の位置が悪いのでしょうか。 よろしければ修正案をご教授ください。 >>751 jQuery + 必要ならLodashを使うのが良いよ >>749 finishCardを呼び出してる所がondblclickのみになってる これではダブルクリックでカードを右上に送ったときのみにしか判定されない >>753 finishCardを参照するマウスイベントを追加することで解決いたしました! 助言ありがとうございます! historyのpushStateでURL(A)を登録し、 replaceStateで遷移先のURL(B)に書き換えた場合、 戻るボタン押下でURL(A)になりますが、ページ自体が切り替わってくれません。 どうしたら切り替わりますか? >>757 そんなことを細かく説明できるような人はここにはいません。 >>759 勉強がてらちょっと調べてみたけど、どれ使ってもルーティングは自分で実装しないといけないらしい history.pushState(null,null,location.href); history.replaceState(null,null,新しいURL); は定番で addEventhandler('popstate',function(e) { e.preventDefault(); if(戻るボタン) { history.back(); }else{ history.forward(); }}) 戻るボタンか進むボタンの判定はよくわからなかったわ >>762 ルーティングって何を指してる? 普通に考えればSPAのフレームワークであれば、 URLのパスに対応するメソッドを定義するだけで、 History APIを使う必要はなくなるはずだけど >>763 SPAのルーティングってMPAでいう画面遷移のイメージ コンテンツ部分のみを切り替えるSPAはコンテンツ部分を切り替えてもURLは同じなので、 そこをうまいこと変えてくれるんじゃない? アドバイス欲しいです。 javascriptを使ってウェブサイトのページに簡易検索機能を組み込む作業を行っています。 ・データはサーバーサイドで加工してから保存。 ・ブラウザのjavascriptで検索。 ・検索対象のデータはAjax通信で取得されます。 ・var ajaxfile=[]; この変数に数万数十万件のデータが格納されます。 ・指定のキーワード1つのみで検索。 ・データが大量にあるためできるだけ素早く検索する必要があります。 ・一致するデータの変数番号を全て保存します。 記述例など教え頂けると助かります。Ajaxの記述は完成しているので不要です。 数万数十万って格納するだけでめっちゃ時間かかるし その時点で「できるだけ素早く」の要件満たさないんちゃうか 汎用的な検索ならArray.find()やろうけどこれも遅いやろし ×Array.find() 〇Array.filter() >>764 なんかずれてる気がするんだけど? コンテンツの一部分だけを変えるのはAjax コンテンツの一部だけを変えるから、動きが快適になる だけどAjaxだとコンテンツを変えてもURLは変わらないから F5で更新したりしたら状態が戻ってしまう。 それじゃ使い勝手が悪いので、コンテンツの一部だけを変えつつも URLとページの内容を正しく結びつけるために History APIを使うってのがSPAなんだけど? 端的にいうとSPAはコンテンツが変わるとURLも変わるもの >>765 これで試して負荷がかかるようら別な方法を書き直すよ そのときは遠慮なく言ってくれ var ajaxfile=[]; var Keyword="検索キーワード"; var cnt=0,gaitou=[]; var ken = ajaxfile.length; for(i=0;i<ken;i=i+1){ if(ajaxfile[i].indexOf(Keyword) != -1){ gaitou[cnt] = i; // 該当番号の記録 cnt = cnt + 1; } } >>770 そのhistoryAPIを使うまでがspaのルーティングだと思ってたわ 実際angular routerだとそこまでやってくれるしね >>772 そうだよ。フレームワークがHistory APIを使う。 一般開発者は気にしなくていい。 単にURLとどのアクションが対応するかを 定義するだけ。それがルーティングの設定 カンマで区切られたデータを連結するときにできるだけ速い実行方法が知りたいです。 var marmp=["嘉","羹","鶏"]; var renketsu=marmp[0]+marmp[1]+marmp[2]; var marmp.toString(); var imax=marmp.lengths; for(i=0;i<imax;i++) renketsu += marmp[i]; marmp変数に格納された文字列データが大量にあると仮定 その場合連結するときにどのような書き方をすれば高速な処理ができますか? 例の3つは遅いとされているので別な方法がありましたら教えて欲しいです。 連結はライブラリ通した特殊な書き方をしない限りネイティブ記述では実行速度に影響はありませんよ。例え100Mバイトのデータでも既に格納されている変数なら実行速度は計測不能の0ミリ秒だよ。 var renketsu = marmp.join(','); この記述方法が無難ですわ >>775 https://jsperf.com/string-concatenation/47 Chromeでやった結果 var foo = str1; foo += str2 + str3 + str4; が一番早く var foo = arr.join(''); が一番遅かった。 Firefoxでは var foo = str1; foo += str2; foo += str3; foo += str4; Edgeでは、 var foo = str1; foo += str2 + str3 + str4; 何が言いたいかわかるかい? できるだけ速い方法を知るためには、 ブラウザとそのバージョンを限定しないとダメということ 質問する側であれば、あるブラウザのこのバージョンで速い方法は なんですか?って聞かないとダメ。 違うブラウザ、違うバージョンでは当てはまらない。 そういう無意味な質問を、あんたはしているってことだよ。 JavaScriptではユーザーの環境によって速いコードは変わってくるのだから そういうのにこだわるのは時間の無駄。 速度なんて問題が起きてから対処すれば良いものと心得よ。 実行速度よりも開発速度のほうが重要 1時間分の給料を使って、0.01ミリ秒改善しました?それで誰が喜ぶと思う? だからこそ>>776 は、遅いjoinを使った方法が無難だとかいているわけ。 で重要な開発速度をメインにすえると、ライブラリを使って開発速度を 改善できるならば、使ったほうが良いという答えになるわけ。 ライブラリを使うとその分のオーバーヘッドが必ず入って確実に(僅かに)遅くなるが それよりも開発速度が重要だからライブラリがあるわけだよ。 joinの方が宣言的かつ非破壊的にスッキリ書けて好き >>779 それには同意。関数型(風)に書く方がメリットが多く、 今のトレンドだし、だからjQueryやlodashが人気 >>778 大量に、と言ってるんだし、0.001msでも速くするシチュエーションってあるんじゃないの? 夜間バッチとか。 >>781 10時間かかる処理が1分早くなって 何の意味もないでしょw >>776 ライブラリ通すと遅くなり話になりませんでした。 jointも試したのですが、他にも良いものがあればと思い書き込みしました。 >>777 試してもらったのにすみません。 >>var foo = str1; foo += str2 + str3 + str4; 一斉連結できないと意味がないので使えないです。 >>778 説明ありがとうございます。 求めているのは実行速度が正解で開発速度ではありません。 扱うのはどのブラウザでも問題ないです。 >>781 まさにこれです。 14台のパソコンで非同期分散処理を行っていて連結の部分で苦戦している状況です。 > ライブラリ通すと遅くなり話になりませんでした。 だからそりゃそうだろ。 ライブラリは開発速度を上げるものだって いってるだろ >>783 > 14台のパソコンで非同期分散処理を行っていて連結の部分で苦戦している状況です。 苦戦? ボトルネックになっているかどうかを調べてないってことか。 話しにならんな。文字列連結のやり方を変えた所で 0.0001%も差は生まれない。 だいたいJavaScriptの話だったよな? どのブラウザでも問題ない? 14台のパソコンのブラウザで非同期分散処理? どうやら墓穴ほったようだな。 お前の目的なんて手に取るようにわかる >>783 += これは速度優先のときは絶対に使ってはいけない地雷記述です。 +=はjoinとかより早いぞ jsperfで調べてみろ 同じ変数に格納されているなら>>776 のfor使わないやり方で良いんじゃないのか? 実行速度計ったことないから何とも言えないけどforで一つずつブンブンまわすより速い気がする。 >>788 b=b+a[i]; //for内での最速連結 Array.prototype.push.apply(a,b); //forの手前でキャッシュを作ると更に速くなる b+=a[i]; // 遅い ] 大量のデータ処理が必要かつ速度優先ならそもそもJSでやるべきじゃなくね >>782 大量データってあるからね。 俺そういうのはGoで書いてたりする。 でもまぁ、JSを使わなければいけないという状況ならベストは尽くすかな。 14台の連結処理なら、14台の中で自分の分は自分でまとめられないの? まとめた結果をつなげるのは14台で済むと思う。 あと、文字列オブジェクトをつなげるとつなげたタイミング新しい文字列のインスタンスができるから、もったいないかと。 でも一発では重すぎるなら、marmpのサイズを分割して、多段にjoinかけるほうが無難かなぁ。 let arrbufL=[]; let arrbuf=[]; marmp.forEach(e=>{arrbuf.push(e); if(arrbuf.length>10000){arrbufL.push(arrbuf.join(','));arrbuf=[];} }) let result=arrbufL.join(','); 件数によったら、reduceの方が早いかな。 reduce(function(p, c){ return p+','+c; }).substring(1); 一般のPCのメモリに乗る程度、たとえば32GBだと メモリの転送速度から考えると2〜5秒程度だからな。 大量のデータが何テラバイトあるのか?という 質問に答えてもらおうか? jestって気軽にtestがかけるのが便利なんだけど ベンチマーク機能みたいなのが見当たらない。 jest使って気軽にベンチマーク取れるのってないかな 自作するしかないか? >>792 いちいち新しい文字列のインスタンス作るようなことは今はやってなくね? 真っ先に最適化の対象になってるだろう >>802 自明なのは中身が文字列ってことだけでしょう? 中身が文字列だから速いはずという 想像で、ものを言ってますよね? >>803 前段はそうだが、意味はちょっと違う。 中身が文字列以外が入っていない、要は、左辺が必ず文字列で、右辺もリテラル(を代入だけしたもの)だから。 キャストが起こらないし、単にコンカチして捨てても問題ないから最適化がかけられる。 だから、俺じゃないが誰かが言ってるように、forみたいなループで回す事には向いてない。 初回が文字列であること、途中が文字列であることが全部わかってりゃ最適化かけようもあるけど。 結局、+=するものに(''+hoge)みたいなまじないを書くはめになるぞ。 >>804 いやいや、だから何なのさ? って話 それはあくまで想像上の話でしょ? 計測しなければ本当のことはわかりませんよね? 今の話の速度に関しては自明じゃないですよね? (一言「はい」と言ってください) >>804 for使わないのを>>792-793 が提示してるが、そもそも関数呼び出し自体重い処理だよね 関数を使わないことで最適化される事もあるし いくら否定する論理を展開したところで机上の空論なんだよね 実測を否定するなら実測で否定しろ >>804 別に俺は速いと遅いとも言ってないんだよ。 単に自明である部分と 自明でない部分をはっきりさせましょうと 言ってるだけ。 "use strict"; function a() {} Object.seal(a); a.b = 1; // これはエラー var c = a.b; // これをエラーにする方法はありますか? え? var hoge と 書くところを var hage って書いても 動くでしょ? どんな根拠で間違いだってわかるのさ? >>812 "use strict"; var hage; hoge=1; これは動きません >>813 そりゃそうだろうね。 定義されてない変数に代入できないというルールなんだから で、何をエラーにしたいって? エラーにしたいルールを言いなよ >>805-807 いいえ。 単に計測しなければ、ではない。実装を理解してからね。 計測した?V8だとoptimizeされないよ、現に。 だから、もっと多いデータでやりなさい。出来れば、処理系が文字なのか数字なのか悩むデータ混ぜて。 関数呼び出しは重くないよ。中で変数を作らなきゃそれこそ早い。変数作るととたんに遅くなるけどね。 >>807 に関して言えば、自明でないのはお前が能力不足だからだよ。 >>816 だから自明じゃないでしょって話をしてるんだが? 自明っていうのは俺だけは知ってるって意味じゃないんだよ? 他人も知らなければ自明じゃない。 それにどうやってEdgeの実装を理解するんだ? お前MS内部の人間か? >>814 存在しないプロパティへのアクセスがエラーになるようにしたいです >>817 Edgeの話なんかしてないよ。 このスレではV8の最新版の 話をするってことは自明でしょ? >>809 Object.defineProperty で b プロパティを設定しておき、getterでthrow new Error >>820 a.c と a.d と a.e と ・・・ と a.zzzzzzzzz を エラーにするにはどうすればいいですか? >>821 Proxyでトラップしてthrow new Error 未定義のプロパティ参照発覚の為だけに行う対策としてはコストが高いと思うけどね >>822 具体的にどういうコードを書くんですか? >>817 Edgeの実装ってChakraCore眺めたらだいたいわかんじゃん? 知らなさすぎるだろ。 ってかお前の言ってる検証って、アメリカ人に「こんにちは」って言ったら「コンニチハ」って返事してくれたから、この「アメリカ人は日本語がペラペラに違いない」と判断するような、 単なる(しかも失敗してる)計測だよ。 もう少し考えてやったり話したりしろよ。 >>824 自明なんですよね? ソースコード読まないとわからないなら 自明ではないですね >>825 え?どういう事? それで自明でなければ、「インスタンスは別生成される」「いや最適化が効く」「+=では必ずしも効かない」って流れの 「最適化が効く」も、勘違いですらなく単なる思い込みだってこと? 最初から話は変わっていません。 どういうコードであるかは関係なく、 速度というのは実行してみなければはっきりとしたことはわかりません なぜならCPUのキャッシュや分岐予測や投機的実行などにより 単純に実行速度を予測するのが不可能だからです。 だからどんなコードでも実行速度は自明ではないのです。 >>827 お前、上がってるテストを全否定してるぞ。 投機的実行やパイプラインのストールまで考えたらとても悩むだろうけど、それ以前に悩んでほしいのが JITが効くか、最近のなら逆にJIT/AOT出来ないと判断されるかするかって話になって、 そりゃなぜかというとデータ形に保証がないからが一番デカいんじゃん。 あるコードだけの(厳密な意味での実行)時間は自明ではないかもしれないが、 あるコードとあるコードとの時間差は自明だよ。 希望的観測(≒思い込み)を許さず、明らかになっていない事を不定とするならなおさら。 だから見た目無意味に文字列と足したりするんじゃん。 噛みつきたいのはわからんでもないが、知らない事があったなら一旦引き下がって勉強して来たほうがいいんじゃねえかな。 犬でも無いんだから。 >>828 いや、だから自明とかいってないで、 実行結果で語りましょうという話。 すでに実行結果は出てる。 反論があるならば、反論のための実行結果を貼りましょう。 >>828 > あるコードとあるコードとの時間差は自明だよ。 自明ではないから、ブラウザによって 同じJavaScriptのコードでも大きな時間差が 生まれているんですが? >>822 目的達成できました。ありがとうございます コストは最初からデバッグ用なので特に問題無いです 達成できたというのなら、 そのコードを書くべきでは? 嘘っぽい >>833 ほとんど答え書いてもらってるようなものですが "use strict"; function a() { this.b = 3; return Object.seal( new Proxy( this, { get (t,p) { if (p in t) return t[p]; else throw new Error(p+" deny"); } })); } var c = a(); c.b; // OK c.c; // これはエラー c.d = 1; // これもエラー a()にnewつけ忘れました そのままだとchromeでクラッシュするので気をつけてください 流石にjQuery Mobileを使うくらいならBootstrapを使った方がよさげだよね最近だと >>837 そもそもjQuery MobileとBootstrapは目的が違ってる。 jQuery Mobileはウェブサイトをスマホのネイティブアプリのように 見せるJavaScriptのフレームワークとして作られた。 jQueryを内部で使っているだけで、jQueryとは根本的に違うもの 開発された当初は「ウェブサイトをスマホアプリっぽくしたい」という 要望がでるかと思われたがそうはならなかった。スマホアプリっぽく するよりも(ウェブの技術を使って)スマホアプリを作ったほうが良いとなった。 ただしウェブサイトをスマホでもみることは普通に行われており、 スマホで見た時に見やすく最適化したいという要望はでた。 そこで作られたフレームワークがBootstrap Bootstrapはダイアログなどの一部の機能にjQueryが使われているが メインの機能はCSSをベースにしている。だからCSSフレームワークと呼ばれている。 俺はブログやニュース系のような文章メインのものをウェブサイト、 ゲームやGmailなどのJavaScriptが重要な意味を持っているものをウェブアプリ と区別して呼んでたりするが、ウェブアプリが適しているものは数が少なく 大部分がウェブサイトだと思っている(そしてそれは事実だろう) ウェブアプリが作りたいのならJavaScriptのフレームワークを使うのが良いだろうが 大部分のウェブサイトはJavaScriptフレームワークは不要でjQueryのようなライブラリで十分だと思っている。 JavaScriptのフレームワークを使うと、ウェブサイトの作り方がJavaScriptベースにガラッと変わってしまうからだ。 いい方向に変わるのではなくて面倒な方向に変わる。jQueryであれば知っての通りHTML+CSSの作り方は変わらない。 そしてスマホ対応したいのであれば、BootstrapのようなCSSフレームワークを使えば良い。 >>840 わかることをあえて説明することで、 意図的に変な方向に話を持っていこうとする輩を牽制し、 俺が持っていきたい方向の誘導しているんだよ。 >>841 つまり意図的に変な方向に持っていこうとする輩だと言うことか。 この人、プログラム板でも暴れてる人じゃないかな 触らぬ神に何とやら >>843 今度から気づいたら今みたいに一言言うんじゃなくて 何も言わずにスルーしてくれると助かる IEはオフライン環境でローカルストレージの読み書き処理はできないですか? ローカルストレージもセッションストレージもIEデフォルト設定ではローカル環境で使用できないはず。 >>846 Apacheサーバを立てれば出来ると思うよ new Blobで生成したオブジェクトブロブをnew Blob以外の方法で結合させるにはどうすれば良いですか ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる