+ 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/ >>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の中身が実行されていくということだけだ 次に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とかあるようですが
どれを使うのが良いのでしょうか？ >>257
ライブラリに機能を求めるというよりは
効率を求める意味で使用した方がいいよ >>260
機能の2と速度の3みたいな
あとはライブラリスレとかで聞いてね >>258
その頃はまだ実装されたばかりだし、Promiseのなんちゃってポリフィルと違って、
状態を外に見せないかつメモリリークを起こさないかつ継承可能にするため
内部的にWeakMapと同等のものを用いてるのと、継承可能やPromise Likeの受け入れとPromiseとの区別の処理なんかでどうしても簡素ななんちゃってPromiseよりは遅くなる可能性がある arrow関数式で
a => a+1
と式を書いた時にa+1が返ってくるのは分かりますが
a => a=a+1
と代入文を書いても、a+1が返ってくるのは何故でしょうか？ 最後に評価したものをreturnとするから
この場合はaに代入した値がa+1だから クライアントサイドで、JavaScriptのみでSMTP使ってメール送信できますかね？
情報が古いのですが、ActiveXかなんか使ってIEなら出来るようですが、
ChromeとかFirefoxとかでも可能な、普通のJavaScriptのAPIがあればそれでやりたいです。
SMTPサーバを指定して、ログインIDやパスワード入れて使うのを想定してます。
どう考えてもセキュリティ上厳しいような気はしますが。
サーバサイドでやると、どうしてもリクエストが多くなるため、
スパマー扱いされて、サーバのIPがSMTPサーバに拒否されるおそれがあるので、
各クライアントで送信するようしたいです。 ■ このスレッドは過去ログ倉庫に格納されています
