+ 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/ 普通に
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内のコールバック関数が呼び出した時だから」 >>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の中身が実行されていくということだけだ ■ このスレッドは過去ログ倉庫に格納されています
