+ 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/ 次に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');
まぎらわしいから、なるべく、文字列リテラルを使う jqueryで
複数の対象に同じイベントリスナーを付けるにはどうすればいいですか？ $関数の引き数に、複数の対象にマッチするセレクタを書けばいいだけ
jQueryはそもそも複数の対象に同じイベントリスナーをつけるもの。
対象が1個しかないとか、まったくない（0個）の場合もあるけれど、
それはたまたまそうなっただけで、コード的には複数の対象に
マッチしたと仮定して書くのが良い。 ありがとうございます
クラスを設定してonしました フレームワークとか使うとwindowオブジェクトが汚されてしまうんですが
汚された後から汚されてないwindowオブジェクトを取得する方法を教えてください 何のためにかによって方法は変わってくるが
iframeのcontentWindowを取ればいい virtual domっていうのは
const a = [
1,
2,
];
const e = [
document.createElement('div'),
document.createElement('div'),
];
e.textContent = a[0];
e.textContent = a[1];
document.body.appendChild(e);
というコードを用意して
何らかの形でa[1]を更新したらe[1]のtextContentを書き換えるって理解でいいですか？
reactが重いのはデータ毎にDOMをメモリに記録してるからですかね？ 同じディレクトリにあるjsonファイルを
JavaScriptから読み込むにはどうすればいいのでしょうか？ >>310
そんな単純ではない
多くの場合DOMと１：１で対応する様な独自ツリーを持っていて
その変更がある程度たまった時点で
必要最低限の変更をDOMに反映させることで
抽象化と同時にパフォーマンスを確保している
それが重いというのは使い方が間違っているか、
使い所が間違っているだけ (() => {
'use strict';
let i = 1;
const f = () => {
let i = 2; // Error - 'i' is already declared in the upper scope. (no-shadow)
i = 22;
console.log(i);
};
i = 11;
f();
console.log(i);
})();
eslintでチェックすると6行目でError - 'i' is already declared in the upper scope. (no-shadow)
が出るんですがこれはダメな書き方なんでしょうか？ jQuery みたいに、一々、DOM にアクセスしないから速い。
一々、DOM から、CSS クラスの状態を取得して、コーディングしなくてもよい
ただし、速いと言うことは、メモリを大量に使う。
ブラウザの状態を、自分のメモリ内に持つため
常に、速さ・メモリ使用量は、反比例する >>315
それは、そういうルールなんだろ
eslint のルール一覧表でも見れば？
自分で、好きなルールも設定できるだろうし
君や会社・使うツール、次第 メモリ1GBの環境でreact使われているサイト開くと重い
特にqiitaのトップページ >>315
文法的に問題はないが、例えばlet i = 2; を記述し忘れたとしても動いてしまって二回22が出力されてしまうだろ？
そういった事を防ぐために同じ変数を使わないようにしようって事
オプションで文法的に間違いではないならエラー出ないようにも出来るし全部許可してしまうことも出来る 指定した要素の文字列を選択状態にするにはどうしたらいいですか？
フォーム部品はjqueryでselect()すればいいですが
普通のdivの中の文字列を選択したいです >>320
createRange()でレンジを作って
selectNodeContents()にdivを放り込んでレンジの範囲を決めて
getSelection()でセレクションオブジェクト作って
addRange()でさっき作ったレンジをどーん！ >>316
DOM操作をしないから速いと言ったほうが正確だろ
DOM操作をするのはjQueryだけではない
通常のブラウザのDOM APIを使ってもDOM操作になる。
>>310
一般的にブラウザのDOM APIというのは遅い。（jQuery関係なく）
もちろんReactでも最終的にはブラウザのDOM APIを呼び出すのだが、
ブラウザのDOM APIは遅いので必要最小限の呼び出し回数になるようになっている。
というのは内部の仕組み
ブラウザのDOM APIは知っての通り機能貧弱でデータバインディングなどの機能がない。
また仕様が決まってるから、拡張することもできない。
Virtual DOMを使うことで、ブラウザのDOMの制限に縛られない
独自機能のDOMを作ることができる。イベントハンドラの拡張や
データバインディングなどの機能も組み混むことができる。
データ的にはJavaScriptのデータだからブラウザ無くてもVirtual DOMを使うことができるし
ブラウザいらないのでテストも容易になる。
だけどVirtual DOMの段階ではただのデータなのでそれをブラウザのDOMに反映する必要がある。
その時、ブラウザの表示内容を全部クリアして遅いDOM APIを使ってレンダリングするのは遅くなるから
差分だけを反映させましょう。というのが内部の仕組み
だけどDOM APIは遅いが、そんなにDOM APIの呼び出し回数が多くないようなサイトの場合は
速いというより遅くならない仕組みと言っても言いすぎじゃないと思う（ただしメモリは食うから重くなる）
Virtual DOMを使うということはブラウザのDOM APIを使わないということだから学習コストは高い。
これからは、そもそもDOM APIを呼び出す必要がないサイトはjQuery
学習コストを払ってもReact（や他フレームワーク）を使う理由があればフレームワークの
二極化になると思う。どちらにしろDOM APIを直接呼びだす時代は終わったかな。 Virtual DOMでもDOM API使っているのでは？
Virtual DOMというのはライブラリであってそういう仕様があるわけじゃないでしょ > Virtual DOMを使うということはブラウザのDOM APIを使わないということだから学習コストは高い。
この部分はプログラマがという意味
プログラマがReactなどを使ってVirtual DOMを使うということは
ブラウザのDOM APIを使ったプログラミングをしないということである。
要はReactなどを使えば document.getElementById とか
使わなくなるってことよ。 select要素の選択アイテムをjqueryで変更し、
設定しておいたonchangeイベントを発火させるにはどうすればいいのでしょうか？ Reactの内部の仕様はともかく自作のタグが作れる感覚は楽しい。
どっちかというとreduxの理解のほうが学習コスト高め。 自作のタグなんてstylesheet書くだけでいいんやで google保守大変そうだな
元ソースも相当汚いだろあれ Workletも揃い始めてきたし、メニーコアの時代はまだ遠いけど
ゆくゆくは要素毎にレイアウトとペイントを数十のコアで分担するようになるだろうな
だから今の仮想DOMフレームワークにしても、そこのところ混み合っていないものを選んで慣れておいたほうが良い vueとかreactってShadow DOMを使ってるわけじゃないんですね Shadow DOMは例えば配布するようなコンポーネントを作る際
使われる環境のCSSなど変に影響されることを防ごうという趣旨のものだからね
HTMLを部品として扱う際のカプセル化の方法だから >>334
> ゆくゆくは要素毎にレイアウトとペイントを数十のコアで分担するようになるだろうな
要素毎に何の処理をしてるっていうんだい？
要素なんて殆どは動きが何もないただの絵だろう？ let a = 100;
let a = 200;
だとエラーになるのに
let a = 100;
if (1){
let a = 200;
}
だとエラーにならないのは何故ですか？ ■ このスレッドは過去ログ倉庫に格納されています
