+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©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/ >>155 なんでそこでjQueryがでてくるのかわからんのだけど? jQueryのセレクタは条件が揃えばquerySelectorAllを使うわけで 重複したIDの挙動はDOM APIと同じだよ >>157 何しれーっと嘘ついてるの? idの数が多いから嘘がバレないと思った? googleがvalidなhtml書いた試しなんてないじゃん プログラム上の利便性優先でルールなんてお構いなしでなんでも使う 検索エンジン握ってるだけあってどんな糞みたいなHTMLでも最上位に来るし SEOなんて考慮する必要がないからやりたい放題 >>154 俺の場合、JavaScriptからでも極力IDは使用しないようにしている。 なぜならコンポーネントという考えでDOMを扱ってるから。 通常コンポーネントは複数存在する。だからIDではなくクラスを使用しなければいけない。 大抵の処理はこのコンポーネントの中で閉じてしまうのでIDの出番がない。 コンポーネント化した要素同士をつなぐときにはIDでいいっちゃいいんだけど、 IDでやっちゃうとコンポーネント間が密結合になってしまう。 だからイベント等を使って関節的に通信するようにする。 そうするとIDを使ってつなぐ必要は殆ど無くなる。 速度に関して言えば、classが遅くても今のブラウザは高速で 実用上問題が発生したこともないので考えるだけ無駄だと思ってる もしclassを使って遅くなるとしたら1ページ内のタグが多すぎ IDを使ったほうが良いと思える場所は、ページの区別だな。 bodyにidを振る。だからページ内でユニークになるのではなくサイト内でユニークになる。 何のためかというと、特定のページだけに特殊なcssやjavascriptを割り当てたい時。 通常はコンポーネント化するから必要なのだが、まあ極稀に想定外の自体で 特定のページだけ緊急に修正しなければいけないとかで便利なのよ id 2文字 name 4文字 class 5文字 これ結構重要 >>162 今見たけど52個ぐらい使われてるIDあった YouTubeの内容はブラウザとかによって変わるかも >>165 ねーよw idを使ったせいで保守が100倍大変になる事はよくある 絶対にclassがいい IDを使うのはページ内アンカー用のみ >>164 リンクアンカーにはどうしても必要にならないか? >>168 > リンクアンカーにはどうしても必要にならないか? なるけど、それJavaScriptのためのIDじゃないよね? そうだなあ そもそもJS使うのにIDを多用するようになったのって クエリセレクタが使えるようになる以前に 人にJSを説明するようなコードが無駄に煩雑にならんように getElementByIdを多用してたからみたいな側面あるし >idを使ったせいで保守が100倍大変になる事はよくある >絶対にclassがいい idを使うようなケースをclassに置き換えたところで それは一意なclass名を持つclassになるだけであって むしろ5文字になる分保守は面倒になるだけだろ >>172 逆じゃね? idで済むものをclassに置き換えるのは楽だけど classで出来る重複はidでは不可能なので大変、つー話では? >idで済むものをclassに置き換えるのは楽だけど より制約が強いのはidのほうであって idで済むという表現はおかしい idじゃないと出来ないからidにしてると考えるべき >>174 それはそうだろうけど そういう話じゃないんじゃない? ま、htmlの話だし、出来ればなんでもいいってことで、 そろそろ次の話題頼むわ。 初心者なんですが、皆様に質問です。 スマホサイトでonclikで表示させたサイトを一番後ろで表示させたいのですが、どのように記述 すればよいですか? 今使用しているのは <script> function openWin2() { window.open('http', 'bbb', 'left=50,top=0,width=520,height=650'); window.open('http', 'aaa', 'left=50,top=0,width=520,height=650'); subWindow.blur(); return ture; } </script> foucusを使うといいよ!との助言を前に他のサイトで頂いたのですが、何度やってもうまくいかず。。。 >>180 メインとなるウインドウを開かせると同時にバッグラウンドで広告ウインドウを開かせようという腹か 迷惑スクリプトの類だな ついにmodule importがchromeに実装されたな 主要ブラウザ全ての実装されたら切り替えていっても良いのかね dynamic importは? こっちのほうもあくしてくれ あれdefault exportされたやつ扱うのがクソ面倒なのどうにかなった? イベントの処理を考えると JavaScriptも内部に複数のプロセスみたいなものを持っていると思うんですが JavaScript内部のプロセスみたいなもののことを何と言いますか? いや、そういうことじゃないんです OSでいうスレッドやプロセスに相当する 複数の「処理の流れ」をJavaScriptは内部で持ってますよね? 知りたいのはそれの名前です イベントループでググってみましたが、ちょっと違う感じがします イベントが発生すると、 それまでの処理は中断されて 適宜イベントリスナが呼び出されたりしますが 知りたいのはそのおのおのの処理の流れの名称です イベントループというのはイベントを実現するための全体のメカニズムのことですよね >>194 イベントリスナかな? Javascriptならイベントハンドラのほうがしっくり来るか。 JS 言語としてのスレッド的なものは 「promise の実装は実装依存とする」 みたいに定義されていないんじゃないか? >>189 ,191 そもそも、イベントはマルチスレッドではないのだが JavaScript実装は様々な仕様の集合体であり、用語は各々の仕様書の中で完結する つまり、全仕様に通用する用語はない > 複数のプロセス それまでの処理は中断されて 前提の部分から間違ってるので、思ってるものが見つからないのは当然 >>194 イベントはアプリケーションに依存するタスク通信の確立 それに対してイベントハンドラでサブルーチンを処理する javascriptが有効の場合のみ表示するには 1行ずつdocument.write('');で囲ってやる以外に方法はないんですか? 無効の場合は<noscript></noscript>でまとめて囲えるので簡単だけど >>201 appendChild, insertAdjacentHTML document.write() を使うと、<HTML> 部分が、一択すべて削除されてから、 JavaScript でページが作られるから、 普通、document.write() を使わない このhonya1だけをいじりたいのですが、何か方法ありませんか? jqueryセレクターで色々やったんですが出来ませんでした <div> honya1 <p>honya2</p> </div> こんな感じだったりもします <div> honya1 <p>honya2</p> honya3 <p>honya4</p> </div> >javascriptが有効の場合のみ表示する で、なんでdocument.writeだけと思ったのかは謎だが 出力処理それしか知らんかったってことか? innerHTMLでも使っときゃいいんじゃね >>203 >>206 ほとんどの参考書は出力はdocument.writeで教えているけど >>203 タイミングによるだろ 使わないのは確かだが >>201 > javascriptが有効の場合のみ表示するには > 1行ずつdocument.write('');で囲ってやる以外に方法はないんですか? そういう時によく使われているのが https://modernizr.com/ 表示・非表示というのは見た目の問題なのでCSSでやるのが鉄則 どういう仕組かは俺が説明するよりも modernizrを調べてもらったほうが早い JavaScriptが有効な場合だけじゃなくて いろんなものが有効な場合か?が判定できる。 >>209 でも例えばセレクトフォームで1を選択した場合に入力フォームを表示 それ以外は非表示っていうような条件付きの表示にしたい場合 cssだと対処できないんだよな >>210 できるよ? 「セレクトフォーム+入力フォーム」というコンポーネントが有るんでしょ? セレクトフォームで1を選択した時に、そのコンポーネントの状態を 変えればいいだけだよ。 JavaScriptでやるのは状態(classやdata-*)の設定だけ 見た目はCSSで制御する promiseに関する疑問です thenメソッドに、promiseオブジェクトを返す関数を渡すと、 thenを更に後ろに書いてメソッドチェーンに出来ますが その関数が実行されるのは前の処理が終わったタイミングのはずですよね? thenメソッドがメソッドチェーンで実行されるのは promiseオブジェクトが生成されるより前のはずなのに、 何でメソッドチェーンに出来るのでしょうか? 実際に即実行されるのはthenで、thenがpromiseを返しているからだよ thenに渡した関数はpromiseが解決するまで保持される >>212 then()が実行されるのは、「コールバック関数を呼び出した時」だから 正確ではなかったな 「then()に渡された関数が実行されるのは、Promise内のコールバック関数が呼び出した時だから」 >>213 thenに渡した関数がpromiseを生成して返さなければいけないと思っていたのですが そうじゃないんですね でもthenメソッドがpromiseを生成するにしても promiseはコンストラクタ内で非同期処理をすぐに実行するので 生成された時点で非同期処理が走ってしまうような気がします 内部動作が謎です・・ >>215 いや、それは分かってるつもりです・・ >>204-205 要素配下のテキストを取得/設定するには?(text/html) http://www.buildinsider.net/web/jqueryref/004 >>216 >非同期処理をすぐに実行するので すぐには実行しないだろ。 キューに入れるだけだろ Promiseコンストラクタやthenメソッドの振る舞いが、プロミスの本質を示してると考えるからそうなる それらの関数はたまたまそういう振る舞いになっているだけであって、 もっと言えば便利で都合のいいように置かれているだけであって、 それらはプロミスの概念を為すための必然な設計ではないし、 Promiseコンストラクタがこういう挙動をするから、thenがどうこうだとか、プロミスってこういうものと言えるものではない PromiseコンストラクタはPromiseコンストラクタの挙動をして便利にプロミスを作り、 プロミスからはthenメソッドがthenメソッドの挙動をして便利にプロミスを作るというだけのこと そこを難しく考える必要は全くない >>216 それが分かっているなら、「then()が呼び出された時」と「コールバック関数が呼び出された時」が同じではないことも分かると思うのだが >>217 見たのですが、それはただの$(ele).text()と$(ele).html()の紹介なので 教えてもらって恐縮ですが求めているものとは違うようです 改めて>>204-205 分かる方いたらお願いします >>220 $("<div>honya1<p>honya2</p></div>").contents().get(0).textContent = "honya3"; あ、jQueryならcontents()でもいいか >>220 $('div').contents()[0].replaceWith('ここを変更'); idなりclassなりつけとけよ htmlが不変ならいいけど CMSとかでget0)とかで取るのはバグの原因 >>221 >>224 contents() まさにこれです! ドンピシャです、contents() 凄い便利 長年悩んで来たことだったんで目から鱗です ありがとうございました 同じプリミティブ型の値が与えられたら同じオブジェクトを返すようなことは可能? typeof(MyObject(5)) === "object" と MyObject(5) === MyObject(5) のどちらもtrueになって欲しい オブジェクトを一時的に保存しておくのは無しで 保存しちゃダメならインスタンスが同一にならないから無理じゃね? >>229 そういうことをしたいがためにFlyweightパターンがある訳だが実装を制限するなら知らん ユーザー名とデータを紐付けた上でWeakMapでキャッシュさせたかったのですが自前で実装することにします ありがとうございました >>233 >>229 で言ってるオブジェクトをWeakMapのキーにしたいのか? だったらやめとけ 保存しない(変数に入れて持つこともしない)なら無理だ それにWeakMap自体サポートしてるブラウザ少ないし、仕様固まってないからサポートしてても変更されるかもしれん そんなもの使ったらトラブルのもとだぞ >>229 これってImmutable.jsでできんじゃないかな。 いや、Immutableは内部で保持してる >>229 は「一時的に保存しておくのは無し」ってことなので保持しちゃダメ なので不可能 >>229 無理なんだが、その要件でなぜObject型が欲しいのかが謎 プリミティブ型とリファレンス型の違いを覚えた後に、設計から考え直した方がいい https://jser.info/post/77696682011/es6-promises/ >then の返り値(*1)に対してもthen (next-then)で処理を追加することができる。 >next-then に設定されたコールバックは >*1の値がsettles (succeeds/fails)になった時に呼ばれる と言うことなので、 thenが生成するpromiseのコンストラクタには thenに渡したonFulfilledとonRejectedをラップした関数が渡される その関数は、親promiseのsettledな状態変化をコールバックで受け取ってから、 親promiseの変化に状態に即した処理を開始する という感じでしょうか? thenが生成するpromiseを、 単純にthenの引数でnewしただけのpromiseと思っていたので、 「???」となっていましたが、もう少し複雑なものなのでしょうね なんかPromiseで悩んでいるようだな? 話の流れを読まずに語るぞ まず一番Promiseっぽくない使い方だな function foo() { Promise.resolve(0) .then(function(zero) { return 1; }) .then(function(one) { return 2; }) .then(function(two) { return 3; }) .then(function(three) { return 'end'; }) .catch(function(e) { console.log(e) }); console.log('start') } 最初に実行されるのは start の部分だ。 なぜならPromise.resolveっていうのは内部で setTimeoutを使っている・・・からだと思えばいい。 そして、Promise.resolve(0)をスタートに、 関数が上から順番に実行されていくわけだ。 戻り値は次の関数の引数になるぞ ここで言いたいのは、上から順番にthenの中身が実行されていくということだけだ 次にPromiseを使うが意味がない使い方の例を示すぞ function foo() { Promise.resolve(0) .then(function(zero) { return Promise.resolve(1); }) .then(function(one) { return Promise.resolve(2); }) .then(function(two) { return Promise.resolve(3); }) .then(function(three) { return Promise.resolve('end'); }) .catch(function(e) { console.log(e) }); console.log('start') } 動きとしては一緒だ。だけど戻り値が単なる値ではなく Promiseオブジェクトになったということだ。 これは>>239 と全く同じ動きをする。 というよりthenが引数の関数を呼び出すだろ? その戻り値がPromiseオブジェクト以外なら、 内部でPromise.resolveを実行して Promiseオブジェクトに変換しているわけだ。 次にもうちょっとマシな例を示すぞ function foo() { Promise.resolve(0) .then(function(zero) { return new Promise(function(resolve, reject) { resolve(1) }; }) .then(function(one) { return new Promise(function(resolve, reject) { resolve(2) }; }) .then(function(two) { return new Promise(function(resolve, reject) { resolve(3) }; }) .then(function(three) { return new Promise(function(resolve, reject) { resolve('end') }; }) .catch(function(e) { console.log(e) }); console.log('start') } >>240 では関数が呼ばれたら、すぐにPromise.resolve()を 呼び出してPromiseオブジェクトを返していたが、 今回はnewでPromiseオブジェクトを返す例だ。 new されたPromiseオブジェクトは引数の関数を実行する。 引数の関数はすぐにresolveする。 これも全く同じ動きをする。 では最後にクイズだ function foo() { Promise.resolve(0) .then(function(zero) { return new Promise(function(resolve, reject) { }; }) .then(function(one) { return new Promise(function(resolve, reject) { }; }) .then(function(two) { return new Promise(function(resolve, reject) { }; }) .then(function(three) { return new Promise(function(resolve, reject) { }; }) .catch(function(e) { console.log(e) }); console.log('start') } このようにしたらどうなるだろうか? 答は、エラーはでないが次に進むことはない処理になる。 .thenの引数の関数は、たしかにPromiseオブジェクトを返している。この関数自体は問題ない。 だが、そのPromiseオブジェクトはresolveもrejectも実行しないから 次に進むことはない。そこで止まってしまう。 逆にすぐにresolve()するのではなくsetTimeoutでも何でもいいが 何かの処理の後にresolve()するようにすれば・・・? そう、非同期で実行される処理が終わってから 次に進むわけだよ。 せっかく無料で公開してくれてんだからazuのpromiseの本でも読みなよ firebaseについて勉強中です サーバーのアクセスに必要なパラメータがソースで丸見えになりますが これを使って他人にデータをいじられる可能性はないのでしょうか? それはそうなんですが認証させる部分も丸見えなのが気になります ソースをコピーして他のサイトを立ち上げたら、 そこからも普通にデータベースを操作出来てしまうような? >>246 やればいい 本当に知りたければセキュリティを本気で学ぶ必要がある 一応言っておくと、その観点は結構いい線いってる しかし当然のようにその観点からの攻撃はちゃんと守られている (下手なアップデートで攻撃され放題になることもある) 偉そうに言ってるけど、俺はその辺無理と思ってフレームワークに逃げた口だ >>246 認証してアクセス権が無ければ読み書き不可に出来るし 書き込みは可能だが変更は不可能にする事は出来るし キーを知らなければアクセス出来ないようにも出来るし あるキーをデータに含んでないと書き込めないようにも出来る 面倒ではあるがやりようによっては大体のことが出来るぞ >>247-248 対策の方法はあるんですね ではこのまま勉強していきます ありがとうございました function wait(ms){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(); },ms); }); } wait(1000).then(()=>{ console.log('done'); }); こんな感じの指定した時間待つだけのPromiseを提供しているユーティリティーライブラリで いいのがあれば教えて下さい >>250 bluebirdのPromise.delay http://bluebirdjs.com/docs/api/promise.delay.html 残念なことに標準のPromiseは基本的な機能しか 提供しないとされてしまったので、より実用的なものが ほしければライブラリに依存しなくてはいけない >>250 じゃないですが、setTimeoutではなく setIntervalを使って定期的にPromiseが 発動するようなものはないですか? >>253 promise は根本から一度限りのイベント用にあるもの setInterval じゃだめなのは何故? そういう用途ならEventEmitterでも使った方がいいんじゃない kanto.htmlの中で saitama.jsとchiba.jsとtokyo.jsとyamanashi.js を読み込んでるのだけど、 yamanashi.jsを外したいのだが、kanto.htmlのどの部分でyamanashi.jsを使ってるのか分からなくなってしまった。 どこの部分でyamanashi.jsを使ってるのか特定する方法はありますか? Chromeなどのデバッグツールとか何でもよいので、何か方法があれば教えてください。 >>251 ライブラリにあるものはライブラリを使った方が保守性が上がりますし ライブラリの他の機能も視野に入ってくるのがいいです >>252 ありがとうございます 見てみます >>256 デバッグして、yamanashi.js の中の、すべての関数に、break point を張って、 どこから呼ばれたか確かめる >>255 EventEmitterは2とか3とかあるようですが どれを使うのが良いのでしょうか? ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる