+ 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/ >>115
いや、それは誰でも知ってるだろ
同列に扱っているから、定期的に関数を呼び出す処理を前提に質問していると思ったんだよ
それぐらい読み取ってくれ >>116
同列に扱ってなんかいないだろ
setIntervalが誤差でずれていく
setTimeoutが誤差でタイムアウトする時間がずれている
違う話だろ >>117
質問者の下記一文は読んだか？
> 秒数カウントする（何回も呼ぶ）ものとかだと特にそんな感じがします
これを実装する為には setTimeout を再帰呼び出して setInterval と似た振舞いにしなければならない
ここで、setTimeout と setInterval ではインターバルの取り方が違うだろ
要件次第でどちらを選択するかが決まる
目的に合う実装は一つしかないはずなのに、setTimeout と setInterval を一緒くたに問題視するのは違うだろ だな、setTimeout と setInterval の特性ぐらい勉強してね 特性の違いは理解してるように読めるけどな
読解力の問題か 情報が正しいのなら、自演云々はどうでもいい
煽りは害悪 >>119
では、>>115の回答が全てなのか？違うだろ？
回答で全てを語っているなんて誰も言ってない
>>120
知ってる もう不毛な議論な気がする
回答にイチャモンをつけるのが正義みたいな風潮は何とかならんのかな
否定するなら、さらに良い回答で塗りつぶすぐらいの気概がある方が健全だと思う
彼は言葉は悪いけど、回答しているだけ非難だけしている人より数段マシだよ 【環境】Win7-Pro，Chrome60.0
【何をしたいのか】NumLockキー状態の監視
リロードや何かの操作（イベント）の際のNumLockキーの状態を監視したいです。
例えば、リロードしたとき console.log("NumLockキーはOFF"); とかの出力をしたいです。
何か案はありますか？ console.log("NumLockキーは"+event.getModifierState("NumLock")?"ON":"OFF"); eventはkeydownとかのKeyboardEventじゃないとgetModifierState()生えてないからリロードの時とかは無理だな あ、MouseEventにも生えてんのか。
じゃvar fresh = true;とかしといてbodyのmousemoveとかmouseoverとかのハンドラのなかにif(fresh){さっきのconsole文;fresh=false;}すればどうか。
スマホだから確認できんけど >>127-129
レスありがとうございます。 event.getModifierState("NumLock") で色々細工してみます すみません
javascriptの曖昧な型定義や柔軟性による複雑さは
ｊsDocコメントを書く事で回避できますでしょうか？ 複雑な理由はお前のコードの問題だから
JsDocどころか例え型定義があったり柔軟性がなくても
何も回避できないよ。 >>131
jsdocて単なるJavadocのポーティングでしょ？ちゃんと書いたらそれにしたがったドキュメントを自動生成してくれるにすぎない。
flow(flowtype)やtypescriptなら型検査してくれるよ。
お手軽に始めるならflowがいいんじゃない？typescriptはちょっと(週末潰すくらい)気合い要る。 ありがとうございます。
>>132
そうですね。
その場凌ぎのプロパティ追加やコールバックの嵐等、気を付けます。
>>133
そうですね。flowやtypescriptを使って安心するの良いかもです。
しかしjavascriptはアセンブラ言語みたいな扱いをされているのが
何とも面白いですね。 それはES2015が出る前の考え方だよ
今はWASMもあるし今更そういうこと言うやつは居ない <p id="hahaha"></p>
↑このpタグのみになにか処理したい場合のセレクタの書き方おしえて。
pタグ かつ id="hahaha"ってどう記述すればいい？ idってのはhtml中に1個しか出てきちゃいけないもんだぞ
pタグであるかどうかなんて関係なく#hahahaだけでいい
まぁ別にp #hahahaとかでもいいけど document.getelementbyidで取得とかは？ 普通に
document.querySelector('#hahaha');
でいいんじゃね
速度が問題になるほどかどうかだけど idひとつしかつけちゃいけないって言っても、つけたから何かエラーが起きるわけでもないし普通に2つ以上についてることもある
querySelectorでp#hahahaでいいんじゃない 関数の有無をチェックし、その関数を実行するということをやりたいのですが、
fCheckだけなら以下で済みますが
if ( typeof fCheck == "function") {
fCheck();
}
fCheckの部分を変数に入れるなどして使いまわしたい場合は、どのように書けば良いでしょうか？ >>141
そのコードの場合、fCheckに関数以外が入っている（つまりバグ）の場合に
スルーされてしまうので良くない。
if (fCheck) {
fCheck();
}
の方が良い
さらにいうなら
fCheck && fCheck();
でもよい
また予め fCheck = fCheck || function() {} などとしておけば、
fCheck(); とするだけでよくなる >>140
それはhtmlをまず直せって話だな
javascriptってあたりよそのhtmlいじるわけじゃないんでしょうし >142
なんと・・・
勉強してきます、ありがとうございました >>140
idは一意の値であるべき。
重複してたらバグと考え、エラーにならないなら重複しても良いのではという浅い考えは捨て去るべし。
idとclassの存在意義を理解しろ。 >>145>>143
いやもうすでに重複して使ってるサイトは山ほどあるんだから
そんなこと言ったってどうしようもないじゃないか id重複は DOM 的には最初の id 以外は無視され、 CSS 的には詳細度の高い class みたいなもの
自動的に validator を通すようにしとけば id重複は自然となくなる フォームはnameで区別するのだから
idは基本的に使う必要はない。 >>136,146
他サイトで重複idがあることは、自サイトで重複idを使うことの理由にはならない
「重複して使ってるサイトは山ほどある」(採用例が多い)も観測範囲によって変わってくる主観的なものだし、仮に信頼できる統計で採用例が多かったとしても、「使ってよい」かの判断は別
文法違反なんだから
https://momdo.github.io/html/dom.html#global-attributes
自分の管轄外のサイトにJavaScriptを適用するのであればどうしようもないが、そういう前提条件があるのなら質問の冒頭に付け加えるべきだし、<p id="hahaha">, <div id="hahaha"> のどちらが先に存在するのかによって変わってくる
<p id="hahaha"> が初めに来ることが保証されているのなら、getElementById
id="hahaha" が出現する順番がランダム or <p id="hahaha"> が2番目以降に出現し、<p id="hahaha"> を特定したいのならば、document.querySelectorAll('p[id="hahaha"]').forEach() 一応、付け加えておくと、ここはWeb制作板だから、何の前提もなければ、回答者は自サイトのコードを書くものと判断する
従って、「id は一意の値であるべき」の回答は正しい >>136はスレ間違えたのか？
礼も返事もないし、HTMLスレにでも行ったんじゃないか？ ローカルルールでIDの乱用はいかんよ
振り込め詐欺かよｗ うちの社内のコーディング規約ではcssのためのidは使用禁止にしてる
idはjsのために空けとくこと
cssでidって使わなくてもclassで問題ないしね
レンダリング時の速度も変わらないし
jsではid指定とclass指定では速度が全然違うからid使うようにしてる
だから同一idが複数使われることがないな
もし使うやつがいたらこの仕事やめろってぐらい異常 まあ確かに、わざわざ重複させる必要性は分からないけど
おそらくjqueryが一般化されて第二のクラスみたいに使う人が増えたんだろうな 重複して使ってるサイトなんて本当にあるのか？
繰り返しで同じパーツ吐き出す場合に
ひな形にid入れてたりするとそうなるのかもしれないけど
それはテンプレート作ったやつがアフォーだっただけやで 他人のサイトなんてグリモンスクリプトとか作ってんきゃあんまり関係ない話だけど
youtubeとかアホみたいに重複してるよ >>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
ねーよｗ
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が有効の場合のみ表示するには
１行ずつ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が有効の場合のみ表示するには
> １行ずつdocument.write('');で囲ってやる以外に方法はないんですか？
そういう時によく使われているのが
https://modernizr.com/
表示・非表示というのは見た目の問題なのでCSSでやるのが鉄則
どういう仕組かは俺が説明するよりも
modernizrを調べてもらったほうが早い
JavaScriptが有効な場合だけじゃなくて
いろんなものが有効な場合か？が判定できる。 >>209
でも例えばセレクトフォームで１を選択した場合に入力フォームを表示
それ以外は非表示っていうような条件付きの表示にしたい場合
cssだと対処できないんだよな >>210
できるよ？
「セレクトフォーム＋入力フォーム」というコンポーネントが有るんでしょ？
セレクトフォームで1を選択した時に、そのコンポーネントの状態を
変えればいいだけだよ。
JavaScriptでやるのは状態（classやdata-*）の設定だけ
見た目はCSSで制御する promiseに関する疑問です
thenメソッドに、promiseオブジェクトを返す関数を渡すと、
thenを更に後ろに書いてメソッドチェーンに出来ますが
その関数が実行されるのは前の処理が終わったタイミングのはずですよね？
thenメソッドがメソッドチェーンで実行されるのは
promiseオブジェクトが生成されるより前のはずなのに、
何でメソッドチェーンに出来るのでしょうか？ 実際に即実行されるのはthenで、thenがpromiseを返しているからだよ
thenに渡した関数はpromiseが解決するまで保持される >>212
then()が実行されるのは、「コールバック関数を呼び出した時」だから 正確ではなかったな
「then()に渡された関数が実行されるのは、Promise内のコールバック関数が呼び出した時だから」 ■ このスレッドは過去ログ倉庫に格納されています
