+ JavaScript の質問用スレッド vol.143 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。 次スレは>>950 が(本スレで改善案があれば考慮して)立ててください ■規則/推奨ルール 質問者は !slip:vvvvv を名前欄に、その後は「レス番」+!slip:vvvvv ・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。 ・質問テンプレートの利用推奨。 ・質問への「答え」から解離した議論はよそでやること。 ■禁止行為 ・丸投げ質問 ・迷惑スクリプトの質問 ・オレオレ用語の使用(一般的な用語を使用する事) ・煽り、批判等の他人を不快にさせる行為 ■質問テンプレート 【環境】OS, ブラウザをバージョンと共に記入してください。 【条件】期待する回答の条件を書いてください。 【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。 【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。 【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。 【サンプルコード】現象を再現可能な最小限のコードを書いてください。 1レスに収まらないならコード投稿サイトを利用してください。 http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ ■回答者へ ・回答には多様性があります。他人の回答を尊重してください ・動作ブラウザや環境が限られる場合は、それを明記してください ・他人の回答を批判する代わりに、自分ならこう書くという例を示してください ・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い ・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです ■前スレ + JavaScript の質問用スレッド vol.142 + https://mevius.5ch.net/test/read.cgi/hp/1568622157/ >>165 そうでもない気もする 俺の身の回り限定だけど jQ以降の世代は、今のESになって盛んに脱jQを叫んでいるけど jQ以前の世代は、便利なものもあるんだけどなーと思ってる DOM1箇所いじるだけならjQueryで十分いいし使えるんだけど、 それ以上の用途だと逆に面倒でとても使ってられんからなぁ。 前に、クライアント側にもフォームのバリデーション追加してくれって話しになって 一度決まったものを作るだけならよかったものの、そっから改修で弄り始めた途端に一瞬でカオス状態になったよ。 >>162 型情報が失われるなど、あまり良くないやり方では、 JavaScript(JS)オブジェクト/JSON 文字列の変換により、新しいオブジェクトを構築するとか JS Object → JSON 文字列 → JS Object(新しいオブジェクト) Haxe のSerializer では、型情報を維持したまま、 異なる言語間でも、文字列で通信できるけど ただし、抽象クラスには対応していない >>168 それって 例えばプロパティの値が日付オブジェクトだった場合 メソッドはどうなってしまうん? JSON では型情報が無くなるから、メソッドを呼んだりできないでしょ? 単純なデータを入れるだけの使い方をして、 型情報などは、別の文書に書いておく この文書を管理する手間が掛かるから、面倒! だから各言語には、通信先のホストで、オブジェクトを再構築できる、Serializer がある 各言語のオブジェクト → 文字列で通信 → オブジェクトを再構築 >>168 json経由すんのってなんか遠回りでやだよね 結局定番らしい定番は無いってことやんね その都度適当な方法でコピるしかないのか コピペプログラマが有識者にネタを求めて質問するのが、ここの日常だから >>164 だからこそ内容の全くわかってないコピペで動かない厨が多かった >>162 非同期で良いならMessageChannelを使うのが良い もしくは標準で議論が進んでるからそれに近いポリフィルを作って使うかの2択 >>172 そのコピーすらロクにできないんだよJavaScriptは! JSのオブジェクトはJSからは参照ができない内部スロットがあるのでコピーは難しい うかつに完全なクローンが作れたらセキュリティにも影響するかもしれないし というかコピーはどの言語でも難しい問題だよ そもそも関数を値としてみるかどうかだからな 値として見るならコピーした時、それは複製されていなければいけない だけど大体の言語は値としてみなしてないだろう? 例えばアプリの特定のバージョンでオブジェクトをコピーというか データとしてファイルにシリアライズする。 そしてアプリのバグを修正したバージョンで、データを読み取る そうすると、その保存したデータに含まれる関数は バグ修正の前のものであるべきかどうか という話をすれば、コピーしたときに関数の情報はデータとして 含まれるべきかどうかという問題が難しいってわかるだろ? 保存がしたい場合は別だけど、最初から複写されることがわかっている場合は 操作対象は元のオブジェクトに必ずプロキシを噛ませて使うことにしたら良い 値に変更が及んだ場合のみそのプロパティは以後そのプロキシでキャッシュされる そうすればメソッドのコピーを考えなくても良い Windows10でGoogle Chromeを使っています。 https://blog.capilano-fw.com/?p=4063 上記の画像認識のリンクの中で 「特定の顔が誰なのかを判別する」 という項目がありますがそのプログラムの中で const detection = await faceapi.detectSingleFace(image) .withFaceLandmarks() .withFaceDescriptor(); の内容をconsole.logで出力してみるとundefindedになります。 どなたかこのプログラムを試した方いらっしゃらないでしょうか。 ちなみにhttpsをアパッチで立ち上げていて、オレオレ証明を使っています。 正確には顔認識じゃなくて、簡単な絵の画像認識をしてみたいのですが いい方法がないでしょうか。 Three.jsでレンダリングされたcanvasが、 ダウンロードバーの出現のせいで大きさが変わって困ってます。 ダウンロードの開始・終了は検知できるので その間だけ自動サイズ調整を無効にするにはどうすればよいですか。 vanilla jsは文法は覚えたくらいのレベルの次となる、上のステップに行くには何をするのが学習する上で有効ですか? おすすめの課題などがあれば紹介していただけると嬉しいです >>184 文法はバニラでなくても必要 ES2019を学べ 180です。 ごめんなさい、絵の顔を認証させようとしてしていましたが 実写の写真じゃないとダメでした。 >>185 既に文法をずっと学んでいて質問しました。 実践的なもので役立つ課題みたいなのってありますか? >>187 「ES2019の文法だけ」を覚えても仕方がない 文法以外も学習が必須 >>187 JSわかってるなら問題ないよ ドキュメントとリファレンスとサンプル見れば あーなるほどねーって使える それがライブラリやフレームワークってもんよ まあ、文法だけ覚えてるなら、課題やる前に覚えることはあるだろうね 制御構文とか、オブジェクトとか、プロトタイプとか、いくらでもある 実際jsコーディングする時って何を作るのが実践でも役立つ? 題材でよかったもんとかある? >>193 ES6以降のPolyfill SelectorsvAPIのPolyfill >>193 markdownからDOMノードへの変換気 とりあえずhtmlなり何かしらweb系を絡ませないと js使う意味なくなってpythonとかでよくねになる気がする >>187 が安易な答えを求めて、>>193 の質問をしただけ 題材だけ揃えてもあかん jsのさらに真価が発揮されるのは5G、6Gでのweb4.0時代 JSの真価は言語的に仕様が小さくて拡張性があったことだが ES6から10までの間に半分以上の可能性を消費していて 今が一番真価が発揮されている壮年期 かといって別の言語なら2030年代に革命を起こせるかというとそうではない そろそろ既存の言語の進化系ではなく、 非同期の大量のタスクを圧倒的自然で素敵に捌ける 新しい仕組みを持った言語が必要ということ async,awaitって使う頻度低くないですか・・? 俺が書いたあるプログラムは全体の行の50%にawaitが付いていた。 キュー=[await処理1,await処理2,await処理3,,,,,,]; みたいな感じでawait処理が全部終わったら、また同じ順番で再帰しつつ失敗したawait処理はスルーしたいとき 結局、await処理それぞれの”完了・成功したか否か”を保持しないといけないので、async/await使わずに async/awaitっぽく実装した処理にまとめ書いた方が短く書ける、ような気がした >>201 function foo() { async なんたら if なんたら async なんたら for なんたら async なんたら return } こんな感じ? >>200 逐次処理版Promise.allを定義しておけば、使う機会はほぼない >>203 awaitだけどまぁそんな感じ。 同期関数のコールツリーの深いところでasyncしかない関数を呼び出す必要が出てきた時 変更が大変になるから、最初からなるべくasync関数にするようにしたらそうなった。 使う頻度なんて気にしても仕方ないと思う 一般解なんてないし、自分の好きにやればいい ところでasyncとawaitの読みって えいしんく、あうぇいと、でいいんでしょうか? 投げっぱなし質問ばかりなのは、やる気がないからでしょうか? イベント発生順序について質問です 【環境】 OS: Windows10, ブラウザ: Google ChromeVersion 79.0.3945.130 (Official Build) (64-bit) 【何をしたのか】 クリック対象の要素へ4イベントを下記の順番に追加した後、これ自身または子要素をクリックしました > addEventListener("click", func1, true) > addEventListener("click", func2, false) > addEventListener("click", func3, false) > addEventListener("click", func4, true) 【期待する結果】 発生順は常にfunc2,3,1,4 (capture,bubbleの順) 上記環境下にて、この要素自身をクリックした時はfunc1,2,3,4の順に発生しました クリック対象の登録イベントがcapture,bubbleで区別されないのはjavascript共通ですか?それとも環境固有でしょうか 訂正します。期待する発生順はfunc1,4,2,3 (capture,bubbleの順)です そりゃイベント付加した要素、ターゲットがひとつ?だから普通に登録順にイベント発生しただけじゃない? > addEventListener("click", func1, true) > の順番を入れ替えて登録したらその順番で発生しそう >>214-215 ターゲットフェーズの存在を知りませんでした 分かりやすいページを教えていただきありがとうございます >213は解決しました addEventListenerの第3引数にはオブジェクトを渡しましょう >>206 じゃあ手続き型思考じゃない人はどうしてるの? - await使わずPromise.then()を使う - Promise自体使わない awaitは使うけれど、Promise.allを使ったり、より順不同でパラレルに動くようにしようということだろう 上の話のように完全に順序を守ってawaitしていってるだけなら なんか会社でJS勉強しろって言われてる者なんですけど、効率良い勉強方法ありますか? GSUITE入れるからやらないといけないみたいです >>218 どちらもある そもそも、ケースバイケースで使い分けるから一つの方法に固定しない 「たった一つの冴えたやり方」を探す人がいるが、選択肢を減らすのは悪手だと思う >>220 勉強のスケジュールをきつめに立てて 週一で進捗をチェックして、遅れたら爪を一枚剥がそう 1週目は怠けてしまうかもしれないけど 2週目からは痛みと恐怖が嫌でも勉強させてくれるよ await使うかthen使うかなんて手段の話で、思考の違いが表れるほどのものとは思えんけどな。 【環境】Android 4.4.2以上 【条件】以下の現状改善にJS(XHR)でいいのか他の方法がいいのか、道筋をまず導いて欲しい 現状 ・クライアントPCよりWEBサーバーにCSVが不定期にアップロードされる(そんな頻繁ではない) ・Android端末でWEBサーバーにアクセスし、CSVを元に作成されたページを表示する ・ページの作成はPHPで行われている ・ページの表示は数秒おき(CSVの内容で多少変動する)にリロードされる ・このページを表示するのは1台のAndroid端末のみ ・簡単な情報を表示し続けるシステム ・質問者はC/C++は分かりますが、PHP,HTML,CSSは超初級、JSを初めて触ります 改善したい点 三つ ・CSVに変動があろうがなかろうがリロードするのが無駄なので止めたい、 CSVに変動があったときだけリロードしたい ・欲を言えば変動があった部分のみ表示を更新したい(突き詰めるとPHP要らないんじゃ・・・) ・リロードされる度に、読み込み中の青いバーが画面上に表示されるのを回避したい (幸い、リロード時に画面全体が再描画されてチカチカするなどの問題は今のところありません) 考えていること ・まずXHRやfetchを使って必要最小限の「CSVが何時更新されたかどうか」という情報のみを 読み込み、ブラウザ・JSの変数にて保持しておき、これを定期的に読み込み、何時更新されたという 情報に差異が出たらリロードすればかなりマシなのでは? 以上ですが、そもそもこれで可能かどうかすら分からない次第なので、この方向でいいのか 悪いのかをご指南いただければと思いました 上記の考えで基本的に可能だとしても改善したい点が単純に全て解決できるとは思っていませんが、 改善したい点の一つ目だけでも改善できればと思っています よろしくお願いします >>220 言語は勉強するものではない 使われてるのを見聞きして使って感覚に慣れるものだ 赤ちゃんが音節を発するように、何事もまずコピペ 人間の脳の仕組みの大原則として、自分が行えない物事を理解することはできない 理解できるから行動ができるのではなくて、行動ができるから理解ができるのだと言う科学的事実は知っておくと良い まずは意味がわからなくてもそっくり真似をしてどんな要素があるかを感覚で掴むことが大事 それが苦になるようなら向いていないということ 真似をして書いて動いているのをみてから、徐々にその仕組みを覚えていく そういうイメージでやると良い >>224 サーバーから通知を送ってもらいたいということで、WebSocketを使うのが賢い どうしてもHTTPでやりたければ、なんども通信し直すのは変わらないのだけれど、 通信をできるだけ切らずに維持してサーバーからの返答を長く待つという古来からの方法があり、 それを扱いやすくしたSSE(EventSource)APIがあることにはあるが、 それは今どき川に洗濯に行くようなもので、導入コストは少々かかったとしても 素直に洗濯機を買ってWebSocketを使うことを強く進める >>226 レスありがとうございます 仰るとおり、サーバーからの通知が最善のはずだと、WEB PUSH など用語すら 分かってない状況でググり倒し、情報が多すぎで判断付かずここに駆け込んできました ソケット通信はC/C++でもやってますので何とかなりそうな気はしましたが、 サーバー側をどうすればいいのか中々分かりませんでした PHPでもいいのかな?できるかも?という程度の情報には今たどり着きましたが、、 質問で書き忘れていましたが使用しているサーバーはXserverでして、 このサーバーだとちょっと難しいような(ポートの問題がある?)情報を 見つけてWebSocketを躊躇しているところです SSEだとサーバーを問わないのかな?(分かりませんが) WebSocketやnode.jsは、ググり倒している間に訳分からないまでも見かけては いましたが、SSEは初見でした これなら最悪、やりたいことはできそうなのが幸いです 情報ありがとうございます >>224 CSV ファイルの更新時刻をどこかに保存しておいて、毎回それと比べれば、 CSVファイルが更新されたかどうか、判別できる Ruby なら、index.html.erb みたいなテンプレートに、内容を埋め込む。 ERB は、あらゆるファイルに、Rubyの式を、embedded 埋め込める <div><%= Rubyの式 %></div> または、JavaScript/jQuery のAjax で、動的に内容を変えられる 本当は、RubyのSinatra などでサーバーを作って、 CSVファイルの更新時刻をチェックする処理を作ってもらうとか、 サーバー側に、新しい処理・ルーティングを追加して、 Android からは、直接サーバー側のファイルを参照しないのが良い! 0から手を動かして作るRailsチャットアプリ【チュートリアル】 https://www.youtube.com/watch?v=WCsgcp5dg7M Ruby on Rails で、websocket を使った動画 const fizzBuzz = () => { for (var i = 1; i < 101; i++) { switch (true) { case i % 3 === 0 && i % 5 === 0: console.log('FizzBuzz'); break; case i % 5 === 0: console.log('Buzz'); break; case i % 3 === 0: console.log('Fizz'); break; default: console.log(i); } } } fizzBuzz(); fizzbuzzをやろうとして、自分は↑を書いたんですが これとくに問題ないですか? 調べてみると賛否両論(switchのtrueの箇所?)がどうのでてきて不安になり質問しました。 賛否両論と知ってるくせにとくに問題ないですか?と聞ける精神が問題だ ここはお前の漠然とした不安をケアする場所ではない 自分の行動くらい自分で責任を持って決めろ >>200 や>>220 もそうだが、複数の選択肢がある時、彼らは唯一解しか満足しない 「一概にはいえない」や「前提条件次第」という考えは彼らの頭にはない 一つの解にして、他を考えるのを止めるのが目的だから、考える過程が増えるのは彼らにとっては本末転倒なのだ というか適当に質問してるということが丸わかり 自分で難しい質問をして難しい答えが帰ってきても反応しないんだもの 実際困ってもいないくせに人の反応を見るために質問したりするイカレポンタンは害悪でしかない なんで問題ないかわからないんだろお前等 答えられないんだろ? >>231 そもそもお前(ら)が何を問題とするかだ コーディング規約でswitch(true)禁止等があるチーム開発でそれを無視して使用している、等なら無視している時点で問題になるだろうが、こんな個人のメモ書き程度のFizzBuzzで何を使おうが問題にならんと思うが。 switch(true)自体の機能に疑問があるという話なら、まずは関数化していろいろな入力を試すなどしてデバッグし、それでも疑問が残ったり問題が顕在化したら他者に協力を仰げ。 賛否両論がどうの、程度ではなく自分でもっとしっかり読んで理解しろ。 なんの記事を読んんだのかは知らんが、それすら理解していないお前が、このスレの人間に「問題無い」と断言されたとしてただ鵜呑みにするのか? 賛否両論であるということを認識した上で、それでもなお利用するのなら、なぜそれを利用する必要があったのか説明できるようにしろ。 >>235 何が問題かを決めるのは他人ではない 俺たちはお前のオカンやオトンではない 屁理屈ばかりで理由の一つも論理的に言い返してる人いないやんw >>231 switch ( 式 ) { case 値1: // 式の値が「値1」と一致した場合の処理 break; case 値2: // 式の値が「値1」と一致した場合の処理 break; default: break; } 普通、式には変数など、変動するものを使う。そして、case の方に定数。 君のは逆になってるから、変 それとコーディング規則では、 後で修正することも考えて、default: にも、break; を付けておく。 また、意思を明白にするために、fall-through, no-break のコメントも付ける switch ( a ) { case 10: // break; fall-through, no-break case 20: break; default: break; } 普通の感覚では、式に、i % 3 なんだが、 i % 5 の場合もあるから、うまく作れないw switch ( i % 3 ) { case 0: // 割り切れる break; default: // 割り切れない break; } switch を使えば、 >>231 みたいな書き方になってしまうw 今度はswitch(true)知らないやつが語りだしたかw switch(true)ってバッドノウハウ感があるよなw 「知らないんだろ?」と煽っても無駄です、のテンプレを復活させてもいい気がしてきた 煽って回答を集める乞食が多すぎる >>244 あれは使わせたくないので使わせないようにしてる あんなん使わせるならelse ifの羅列の方がずっとマシ canvasを使って、ライブラリ無しで3Dゲームは作れると思いますか? >>247 作れる作れないで言ったら確実に作れるよ 頑張れ perfectScrollBarで画面全体のスクロールバーをカスタムすることはできますか? サンプル等を見ても画面内のうちdivなど一部の要素にスクロールバーを表示させるものばかりでイメージが湧かないです overflowhiddenで全体の消してそれいっぱいにそのライブラリでカスタマイズすれば? ありがとうございます なんかそれっぽい質問が見えたので頑張って訳してみます new XMLHttpRequest()についての質問です var a = function(url){ var requestFile = new XMLHttpRequest(); requestFile.open("GET", url); requestFile.responseType = "arraybuffer"; requestFile.send(); requestFile.onload = function () { alert("b"); }; } var b = function(url){ var requestFile = new XMLHttpRequest(); requestFile.open("GET", url); requestFile.responseType = "arraybuffer"; requestFile.send(); requestFile.onload = function () { alert("b"); }; } a("x.jpg");b("x.jpg"); と実行するonloadが上書きされず"a"と"b"が表示されてしまいます XMLHttpRequest();をもう一度取得してonloadを上書きするというのは不可能なのでしょうか? 上書きしたい場合b()の内容をどういうものにしたら良いのでしょうか? ん?aとbのrequestFileの指す物が同じだと思ってるって事? >>255 同じurlでGETすればonloadも共有してるのかなって思ってましたが、違うみたいでした a()を実行した後で、b()でx.jpgのファイルがonloadされた時の挙動を変更するのが目的です ユーザーが選択した数十GBの動画データをFileとして持っているとき その時点では使用メモリとしてカウントされないのですが、 FileReaderにかけるとクラッシュしてしまいます。 例えばこの部分から100MBとか、していして読み込んでもらうことはできないのでしょうか? Streamも調べましたが、頭からは安全に取れても位置を指定して行き帰りしながらデータを読む方法がわかりません。 ファイルは、一括して全部読み込むものと、 stream で、前からバッファへ読み込みながら、処理したら、すぐに捨てるタイプのものがある。 streamは、巨大な動画ファイルに使われる streamのバッファサイズによる。 例えばブラウザで、1分前に戻ると、バッファ内にあるから、すぐに再生できるが、 10分前なら、バッファ内にないから再読み込みされる streamはランダムアクセスできない。 データがバッファ内にあれば、出来るかも知れないが ファイルを、一括して全部読み込む場合は、すべてがメモリ内にあるから、ランダムアクセスできるが、 大きいファイルは、読み込めない 使えるメモリサイズ以上を読み込むと、何かのデータが、HDD へスワップされるから、極端に遅くなる お前のうんちくは聞いてない できるならその方法を、できないかなら端的にそう言え コーデックにもよるけど、CBRの動画でないとシークしたり、突拍子の無い場所にジャンプするのは不可能ではないが難しい。 あとGoPの仕組み上、キーフレームにしかシークできない。 >>256 aのrequestFile.onloadを上書きしなさい >>261 それができねぇからわざわざaとbでやってるんだろ >>254 var a = function(url){ requestFile.onload = function () { }; } var b = function(url){ requestFile.onload = function () { }; } 上は、a 関数内の処理の定義で、 下は、b 関数内の処理の定義だから、 全く別の定義だろ。異なる! >>262 それしか方法がないから、そういわれてんだろ それが出来ねぇなら、諦めろ >>265 やってみた? どうやって、aのrequestFileを取得する? ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる