+ 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/ この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サーバに拒否されるおそれがあるので、
各クライアントで送信するようしたいです。 >>266-267
ありがとうございます
言われてみればそうですね
値を返すので、JavaScriptの代入は文ではなく式ということになるのでしょう
=を代入演算子と呼んでますし Storybookを使ってreact componentを作ってるんですが
ダミーデータとして文字列とか適当に毎回入力するのが面倒なんですが
ダミーデータ自動生成ライブラリってないですかね？ >>272
自己レスです faker.jsってありましたね。 >>268
この辺とか
ttp://artemyankov.com/tcp-client-for-browsers/ firebaseはオフラインになっていても後から同期してくれるのがメリットですが
この機能に任せられるのって、
編集がバッティングする可能性がない場合だけですよね？
チャットアプリなんかは、ただ追加しあうだけなので問題になりませんが
同じアイテムを同時に編集できる場合や
階層構造を変更できる場合、
時間差同期によってデータが不整合をおこして恒久的に破壊されかねないと思います
そういうことはトランザクションを使えば避けられるのではないかと思いますが
そうなると使えるのはオンラインの時だけになりますか？ >>275
なるほど
宣言代入はそういう挙動をするんですね
考えたことなかったです
ありがとうございます ttp://qiita.com/Layzie/items/465e715dae14e2f601de
これありますけどnew Stringで作られたのは文字列じゃないんだから
typeofで型チェックしても問題ないと思いますけど違いますか？
const a = 'a';
const b = new String('a');
console.log(a == b); // true
console.log(a === b); // false
console.log(a); // a
console.log(b); // [String: 'a']
console.log(typeof a); // string
console.log(typeof b); // object >>278
それは、他の言語だとそれは当然のようにstringのはずので、その感覚とずれるというお話なのだ
ちなみにjsはいろんなところで型が他の言語とずれていて、型チェックが妙に難しくなっている
もしjs以外使ったこと無いなら
＞これありますけどnew Stringで作られたのは文字列じゃないんだから
＞typeofで型チェックしても問題ないと思いますけど違いますか？
これ以外に言いようはないと思うし、それはそれで良いことだと思う
ただjsの型は他言語とは大きく違うということは覚えておいたほうが良い > ちなみにjsはいろんなところで型が他の言語とずれていて、型チェックが妙に難しくなっている
他の言語とはなに？
どのように難しいの？ >>281
一般的に使用者の多いvba、webで親和性が高くあってほしいはずのphpで比較してみる。cも昔使ってたけど型の詳細忘れた、スマン
javaは詳しくないので知らん
配列。普通arrayだけど、jsはobject。何の配列でもobjectになる。objectの配列もobject。これが大体一番厄介なパターン。
まぁそれはlengthで分かるけど、とにかくnullがやばい。jsではundefindで名前が違うだけかと思えば、そうでもない。nullも存在する
未定義はundefind //了解
domで該当なしがnull //はい
var undefind=1; //！？！？！？！！？
console.log(undefind); //！？！？！？！！？
http://tokidoki-web.com/2014/12/javascript%E3%81%AEnull%E3%81%A8undefined%E3%81%AE%E5%8C%BA%E5%88%A5%E3%81%A8%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E3%82%84%E3%82%93%E3%82%88/
http://d.hatena.ne.jp/mindcat/20100512/1273683917
http://qiita.com/jkr_2255/items/cfce9b4419d5de32ba2b
色々といったけど、objectとundifendだけだったね。まぁこの2つはマジでやばいってことだけ覚えておいてほしい vbaとphpが特殊なだけでは？
Cだったらどうなる？ >>283
特殊といえば言語は全部特殊。言語にはそれぞれ特徴がある。もし特徴がなければ別言語で良くね、になる
使用者の多いvba、phpはデファクトスタンダードとはいえなくとも、感覚的な基準にはなっている
ただ知る限り、未定義であるundefindに代入できる言語は存在しない 代入できなくなったから、普通の言語になったってことだね >>287
さぁ？
chrome＋google.co.jpで試したけど
undefined=1
1
だとさ console.log(undefined=1) //1
console.log(undefined) //undefined
こういう話じゃないの？ >>290
あぁごめん、そういうことだった
代入はできるけど取得はできないのか
な、なんだこれ… 'cloneNode' in document // true
document.hasOwnProperty('cloneNode') // false
どうしてですか？ cloneNodeはdocumentではなくNodeの持つプロパティであって
hasOwnPropertyは継承元まで遡らないからだよ 横だけど、以下もfalseになる。なんでだー（ﾓﾔﾓﾔｧｯ
Object.hasOwnProperty(Node,'cloneNode')
false なるほどそういうことでしたか
ありがとうございました もう一つ質問させてください
"SVGAnimatedAngle" in window // true
window.hasOwnProperty("SVGAnimatedAngle") // true
なのに
for (let i in window)console.log(i)
や
Object.keys(window)に
SVGAnimatedAngleが含まれない出力されないのは何ででしょうか？ "use strict"; undefined = 1; // error!
はい >>291
違う
代入はできていないけど、
式の返り値は当然右辺の物を返す
例えばobj.setというセッターが合ったとして、
a = obj.set = 1 というのがあったら
obj.setの状態と関係なくaは1になるのが自然でしょ、
つまりx = yの式は例外が起きない限り必ずyを返す >>294
使い方が間違っている
Node.prototype.hasOwnProperty('cloneNode') >>296
列挙不可に設定されているから
Object.getOwnPropertyDescriptor(window,'SVGAnimatedAngle').enumerable //false >>300
なるほどそうことでしたか
列挙可と列挙不可の両方取得する方法ってないですかね？ Object.getOwnPropertyNames(target)
↓
Object.getOwnPropertyNames(target.__proto__)
↓
Object.getOwnPropertyNames(target.__proto__.__proto__) >>278
>new String('a');
まぎらわしいから、なるべく、文字列リテラルを使う ■ このスレッドは過去ログ倉庫に格納されています
