+ JavaScript の質問用スレッド vol.133 +

**Name_Not_Found** · 2018/04/16(月) 00:09:43.45

JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。

■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです

**Name_Not_Found** · 2018/04/22(日) 09:45:50.26

>>98
前段
>>29からずっとNaNがdoubleがって言ってるやつが、>>29でこう書いてる
>なんか勘違いしてるみたいだけど、NaNも立派なdouble型の数値だよ
「NaNも（中略）数値だよ」

後段
php -r "var_dump(NaN);" // Notice: Use of undefined constant NaN と共にstring(3) "NaN"を出力
php -r "var_dump(NAN);" // float(NAN)を出力

**Name_Not_Found** · 2018/04/22(日) 09:54:15.00

>>99
ああ、ごめん
型の話と勘違いしてた
>>59,93,98までが自分で他は知らない

**Name_Not_Found** · 2018/04/22(日) 09:58:40.77

>>100
その>>59からして変なんだがどういう認識で>>59を書いたんだ？

・>>59がレスしている>>44は、doubleかどうかではなく数値かどうかを問題にするもので、
　　まさにNaNを数値と言う>>29に対するレス
・NaNの扱いやNaNの発生なんて言語ごとの定義次第だが、なぜかJSスレでphp.netのURLを持ってくる

**Name_Not_Found** · 2018/04/22(日) 10:09:51.60

>>101
元の>>6がPHPだし、double型といってるからphp.netを持ってきた

JavaScriptの話をするなら、NaNはNumber型で非数値(数値型で非数値)
型名称と非数値の性質の名前の混乱が起きやすいのはどの言語でも同じでそういう話かと思ってた

**Name_Not_Found** · 2018/04/22(日) 10:15:10.60

>>102
これ「文字列をintにキャストしようとしたときjsだと頭が非数値文字列ならNaNになる、phpだと0になる、どっちが直感的か」の話だろ
NaN周りの仕様持ち出すならjsのじゃないと意味ないし
どんな頭してんだ

**Name_Not_Found** · 2018/04/22(日) 10:16:02.86

ああまあ、言いすぎた
ただの勘違いだったんならそれでいい、すまん

**Name_Not_Found** · 2018/04/22(日) 10:25:06.40

>>104
こちらもすまんかった

**Name_Not_Found** · 2018/04/22(日) 12:12:56.46

お前ら全員謝れ

**Name_Not_Found** · 2018/04/22(日) 12:26:53.36

ごめんなすって

**Name_Not_Found** · 2018/04/22(日) 13:01:05.56

結局NaNがdoubleだってソース誰も出せてねぇじゃんw

**Name_Not_Found** · 2018/04/22(日) 13:07:31.37

doubleマックのソースなら

**Name_Not_Found** · 2018/04/22(日) 13:42:51.83

console.log( (typeof 1) );
console.log( (typeof 1.0) );
console.log( (typeof 1.1) );
console.log( (typeof NaN) );

結果は全部 number
jsではintやlongint、float/doubleみたいな型分けが無く、全部number型に押し込められてて実質全部double
なのでNaNも実質double

頭ではわかる気がする
けど、そうすると整数扱ってたつもりが浮動小数点数にありがちな誤差が生じて……みたいなことは、ないの？

**Name_Not_Found** · 2018/04/22(日) 13:48:06.96

typeof null
オブジェクトｗｗｗｗｗ

**Name_Not_Found** · 2018/04/22(日) 17:04:26.83

typeof ""
ストリングwwwww

typeof {}
typeof []
オブジェクトwwwww

typeof (()=>{})
ファンクションwwwwww

**Name_Not_Found** · 2018/04/22(日) 17:39:44.09

型といえば関数型プログラミングとオブジェクト指向型プログラミングってどっちがいいの?

**Name_Not_Found** · 2018/04/22(日) 17:42:29.17

オブジェクト指向は全体の構造を司るもの
わかりやすく言えばクラス

関数型は処理を司るもの
わかりやすく言えばメソッド

だから両方組み合わせるのが良い

**Name_Not_Found** · 2018/04/22(日) 18:06:55.47

>>108
https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type
>>The Number type ...... representing the double-precision 64-bit format IEEE 754-2008 values ......
https://tc39.github.io/ecma262/#sec-terms-and-definitions-number-type
>> set of all possible Number values including the special “Not-a-Number” (NaN) value ......
https://tc39.github.io/ecma262/#sec-terms-and-definitions-nan
>> number value that is an IEEE 754-2008 “Not-a-Number” value

**Name_Not_Found** · 2018/04/22(日) 21:47:05.72

MDN にもあるね、倍精度浮動小数点数だって
https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures#Number_type

**Name_Not_Found** · 2018/04/22(日) 21:48:13.24

倍精度浮動小数点数があるなら
3倍精度浮動小数点数とか
4倍精度浮動小数点数とかあるの？

**Name_Not_Found** · 2018/04/22(日) 23:10:10.68

ごまかすなまず謝れ

**Name_Not_Found** · 2018/04/23(月) 00:19:04.20

これが勉強になった
https://ja.wikipedia.org/wiki/NaN

**Name_Not_Found** · 2018/04/23(月) 00:20:35.95

IEEE 754では、NaNの表現について、指数部は全て1とし（これは無限大と同じ）、無限大の場合は仮
数部の全てを0とするのに対し、NaNは全0以外の任意のビット列としている。他に、先頭の符号
ビットで正負の区別がある。また、NaNの種別としてquiet NaN (qNaN) とsignaling NaN（sN
aN）があり、例外を投げる場合について違いがある。

**Name_Not_Found** · 2018/04/23(月) 01:21:54.08

position:absolute;でブロック要素を自由に動かす
みたいな手法ってまだ生き生きしていますか？
例えば、div要素で小窓作ってD&Dで動かすみたいな作業です。

なぜこんな質問をしたかというと、３年くらいjs事情から離れていたので
もしかしたらブラウザから万能小窓を呼び出せるような機能が追加されたりしてないかな
と思ったからです
要は、alert窓の万能版（htmlタグも解釈できるし、呼び出したタブのみでjsで情報の授受ができる、など）みたいな
やはり、div要素で小窓作ってcssで操作というのが基本でしょうか？

**Name_Not_Found** · 2018/04/23(月) 03:20:26.98

position:absolute;でやるけどdraggable属性とd&d APIが提供するevent使って実装ずいぶん楽になったんじゃないのかな。知らんけど。

**Name_Not_Found** · 2018/04/23(月) 06:34:25.98

>>121
用途によってはdialog要素が使えるかも
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

ただ、かなり新しくてブラウザの対応も不完全だからもうしばらくはおすすめしない

**Name_Not_Found** · 2018/04/23(月) 10:50:12.67

使われなくなったイベントリスナを削除し忘れて
ずっと残っている時がありますが、使われなくなったイベントリスナを検知するにはどうすればいいですか？

**Name_Not_Found** · 2018/04/23(月) 11:00:55.36

使われなくなったことをどうやって検知するんですか？

イベントリスナが貼り付けられた要素が削除されればブラウザが勝手に開放してくれんじゃないか

**Name_Not_Found** · 2018/04/23(月) 12:54:47.97

いやそういう意味ではなく、
ソースコードの中に、もはや使われなくなったイベントリスナ追加処理のコードが残るということです
呼ばれないイベントリスナは特に問題を起こさないので、見つけるタイミングが少ないです

**Name_Not_Found** · 2018/04/23(月) 13:26:24.03

どういう意味だよ日本語が不自由すぎる

**Name_Not_Found** · 2018/04/23(月) 13:57:41.12

は？
ここまで書いて分からないということは、多分あなたには分からないのでしょうね

**Name_Not_Found** · 2018/04/23(月) 17:11:34.45

俺も意味分からんからスルーしてたw

**Name_Not_Found** · 2018/04/23(月) 17:30:05.01

コードの変更改修によって
もう使われなくなった「リスナに呼んでもらう関数」を
掃除したい

という意図にピザまん3個

**Name_Not_Found** · 2018/04/23(月) 18:07:14.70

つ grep

**Name_Not_Found** · 2018/04/23(月) 23:56:59.95

意味が分からんな
オブジェクトにもう使われなくなったプロパティが残ってるからそれを削除したい
と同じようなニュアンスか？

**Name_Not_Found** · 2018/04/24(火) 09:14:58.58

用済みになったコードを削除したいんじゃない?
次のように

{
let func = function(event){
…何かやる…
func = null;
}

element.onclick = func
}

**Name_Not_Found** · 2018/04/24(火) 09:28:46.12

「イベントリスナ追加処理のコード」だからなあ
やっぱり意味不明

**Name_Not_Found** · 2018/04/24(火) 09:28:46.27

必要なのか、不要なのかは人間様が判断しないとダメです
JavaScriptに人工知能は実装されていません

**Name_Not_Found** · 2018/04/24(火) 09:29:38.36

この流れ、もしかして一休さんかな

**Name_Not_Found** · 2018/04/24(火) 11:18:09.84

>>134
ワロタｗそういやそうだな

**Name_Not_Found** · 2018/04/24(火) 23:38:54.58

型情報って物理的にはどういう風に保持されてるの?

**Name_Not_Found** · 2018/04/25(水) 03:53:37.54

物理的にメモリをですね

**Name_Not_Found** · 2018/04/25(水) 22:33:55.34

>>28お願いします

非アクティブになってるタブをアクティブにしたいです。
非アクテヒブになるとジャバスクリプトも停止するので無理なのでしょうか?

**Name_Not_Found** · 2018/04/25(水) 23:58:24.98

テルアビブ
ひでぶ

**Name_Not_Found** · 2018/04/26(木) 00:12:45.00

なにがしたいのかよくわからない
ブラウザのタブをアクティブにしたいの？
だとしたらコンテンツからでは無理だよ

**Name_Not_Found** · 2018/04/26(木) 00:44:57.34

配列のreduceメソッドが何も減らないのになぜreduceなんて名前になってるかわからなくてイライラするので
理由を教えて下さい

**Name_Not_Found** · 2018/04/26(木) 01:02:32.10

>>143
reduceを一般的な使い方で使ってないのだろう

ここにも書いているが
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

reduceは配列（複数の値）をどんどん消費していって
最終的に一つの値にするからreduceなんだよ

**Name_Not_Found** · 2018/04/26(木) 01:44:47.41

>>144
蓄積変数ある以外forEach とかわらんやん
使った配列の中身が減っていくならまだ分かるけど減らんし
forEachWithAccumlatorVersionSpecialArrayMethodって名前にすべき
reduceなんておかしいわ

**Name_Not_Found** · 2018/04/26(木) 01:46:38.21

関数型にforなんてものはありませんよ？

**Name_Not_Found** · 2018/04/26(木) 01:47:57.22

>>142
例えば指定した時間になるとタブをアクティブにするとかです

**Name_Not_Found** · 2018/04/26(木) 05:52:06.81

>>146
?

**Name_Not_Found** · 2018/04/26(木) 07:53:27.15

>>143
(整理して)変える
https://ejje.weblio.jp/content/reduce

**Name_Not_Found** · 2018/04/26(木) 13:16:29.47

map
射影。1対1

reduce
蓄積変数・accumulator に畳み込む。多対1
SQL のgroup by

**Name_Not_Found** · 2018/04/26(木) 13:50:57.93

>>149
なるほど。
勉強なった。

**Name_Not_Found** · 2018/04/26(木) 21:23:45.17

>>122-123
なるほど
HTML5APIに便利なのがどんどん追加されてるみたいですね
dialog要素とかUI系ライブラリが対応すればまさに、という感じでした
ありがとうございました

**Name_Not_Found** · 2018/04/27(金) 13:14:02.46

null と undefinedの違いと使い分け方をおしえて

**Name_Not_Found** · 2018/04/27(金) 14:44:46.29

基本undefinedは自分で使うな

**Name_Not_Found** · 2018/04/27(金) 16:01:01.79

lodashのdebounceを使う時は

const f = _.debounce(()=>{
console.log('debounce');
},1000);

function hoge(){
f();
}

hoge();
hoge();

のように呼び出す関数の外で定義しておかないと、
前回のキャンセルが出来ませんが
呼び出す関数の中でdebounceを定義する方法はありますか？

**Name_Not_Found** · 2018/04/27(金) 16:35:33.80

画面遷移のあるSPAはフレームワークを使った方がシンプルに作れると思いますが
一番シンプルなSPA用JavaScriptフレームワークは何ですか？

**Name_Not_Found** · 2018/04/27(金) 17:36:44.71

SPAは意識高い系の営業がよく使いたがるな
それだけ

**Name_Not_Found** · 2018/04/27(金) 19:24:30.41

アプリがSPAになるのはごく当然のことだと思いますが・・

**Name_Not_Found** · 2018/04/27(金) 20:08:32.39

開発がものっそい面倒になるけどメリットが見合わない印象

画面内の一部の要素をajaxで動的に変更するだけで十分で、複数ページ分の機能を丸ごとjsで面倒見るメリットがない
みたいな状態でほんとにSPA必要なんか？ってのが多いというか

**Name_Not_Found** · 2018/04/27(金) 20:40:13.55

一番普及してるものが一番シンプルやろ
面倒くさいのは普及しない
つまりReact

**Name_Not_Found** · 2018/04/27(金) 20:42:38.61

SPAって何のことかとおもってググったけど雑誌のことか。
すれち。

**Name_Not_Found** · 2018/04/27(金) 20:54:27.67

>>155
何をしたいのかさっぱり分からん。
どうせやりたいことはこれだけだろ？

const hoge = _.debounce(()=>console.log('debounce'), 1000);

hoge();
hoge();

**Name_Not_Found** · 2018/04/27(金) 20:56:23.36

>>159
SPAは、ウェブアプリ、例えばGmailやGoogle Mapのようなものには必要
ウェブサイトには必要ない。jQueryで十分

**Name_Not_Found** · 2018/04/27(金) 21:07:56.21

実際に使っているかどうかと必要かどうかは別だろう

**Name_Not_Found** · 2018/04/27(金) 21:09:31.76

訂正

SPAは、ウェブアプリ、例えばGmailやGoogle Mapのようなものには必要かもしれない
ウェブサイトには必要ない。jQueryで十分

**Name_Not_Found** · 2018/04/27(金) 21:10:14.58

SPAはウェブアプリには必要かもしれないが
実際には殆ど使われていない

**Name_Not_Found** · 2018/04/27(金) 21:26:15.72

要するに金を搾り取るための道具・査定を低くするための道具としては優秀

**Name_Not_Found** · 2018/04/27(金) 21:47:26.10

自分が出来る・分かる→必要！重要！
自分が出来ない・分からない→不要！[自分が知ってるもの]で十分！
なんて言うんだっけこういうの？

**Name_Not_Found** · 2018/04/27(金) 21:50:42.00

防衛機制の合理化だね。
酸っぱいブドウはその一例。
また英語圏では「Sour Grapes」は「負け惜しみ」を意味する熟語でもある。

手に入れたくてたまらないのに、人・物・地位・階級など、努力しても手が届かない対象がある場合、その対象を「価値がない・低級で自分にふさわしくない」ものとみてあきらめ、心の平安を得る。

**Name_Not_Found** · 2018/04/27(金) 21:55:29.34

と他人事のようにいうことで、心の平安を得る

**Name_Not_Found** · 2018/04/27(金) 22:02:39.21

loadashとかしらん超初心者だけど挑戦という体で

var func1 = () => {
console.log('debouce1')
}
var func2 = () => {
console.log('debouce2')
}
const f = (func) => {
return _.debounce( ()=>{
return func()
}, 1000)

var hoge = (fun) => {
f(fun);
}

hoge(func1);
hoge(func2);

**Name_Not_Found** · 2018/04/27(金) 22:09:35.70

const hoge = (function() {
　const f = _.debounce(()=>console.log('debounce'),1000);
　return function() {
　　f();
　}
)();

hoge();
hoge();

**Name_Not_Found** · 2018/04/27(金) 23:54:54.66

>>162
いや、例を合理化されても困るんですが。
知りたいのは呼び出す関数の中でdebounceを定義する方法はあるかどうかです
全部debounceでくるめるのなら最初からそうしてます

**Name_Not_Found** · 2018/04/28(土) 00:41:00.47

簡単なSPA なら、jQuery Mobile, Vue.js

Angular, React, Electron などは、複雑

**Name_Not_Found** · 2018/04/28(土) 01:50:40.01

>>173
よくわからんけど
addEventListenerに対するremoveEventListenerを考えたらいいんじゃないかな

**Name_Not_Found** · 2018/04/28(土) 02:11:36.03

結局、SPAとは1pのフロントで全部やる利点が欠点よりも明らかに大きいんですか？

「1pにできてファイル数少なくなるから管理が楽」
なんて抜かした阿呆は知ってるけど

**Name_Not_Found** · 2018/04/28(土) 02:31:47.46

ファイルは逆に多くなるだろうなｗ

**Name_Not_Found** · 2018/04/28(土) 02:48:12.61

(フロントに)一極集中させたがったり
ファイル数を少なくしたがる層が一定数いるけど、なんでなのかね

**Name_Not_Found** · 2018/04/28(土) 10:45:21.43

デプロイは楽だな

**Name_Not_Found** · 2018/04/28(土) 10:50:18.65

自動化するんだから数ではなにも変わらないと思うが？

**Name_Not_Found** · 2018/04/28(土) 10:58:27.81

難しいからspaクソ言うてる勢が自動デプロイ環境なんて整えるわけないよね。
いまだにftpでポチポチやってるに１票ｗｗ

**Name_Not_Found** · 2018/04/28(土) 11:12:49.88

ん？ SPAって最終的に1ページになるだけで
ソースコードは普通に複数のファイルになるぞ

そしてビルド環境必須だから当然整えてるし、
それができる人ならデプロイ環境も整えられる

**Name_Not_Found** · 2018/04/28(土) 11:18:14.92

index.htmlとbundle.jsの２ファイルになるわ

**Name_Not_Found** · 2018/04/28(土) 11:26:13.26

SPAって別にビルド環境必須ではないぞ
別にサイトのうち多くのデータを１つのページで扱わないといけないこともないし
例えば２ページ間の遷移をajaxで行えばそのページはSPAと言える

もうちょっとSPAっぽくしたければ、
Nodeのようなアプリケーションサーバとpjax使えば非常に簡単に作れる

**Name_Not_Found** · 2018/04/28(土) 11:28:56.98

何度も検索するようなページではSPAにすれば通信が減る
とか書いてるサイトがクソほどあって失笑
お前検索をクライアントサイドに閉じ込められると思ってんのか
検索結果部分だけ動的に更新させりゃ済むだろが

**Name_Not_Found** · 2018/04/28(土) 12:28:48.67

> 検索結果部分だけ動的に更新させりゃ済むだろが

それ検索結果の表示ページに遷移しないんだからアプリかどうかは知らんがシングルページじゃん

> お前検索をクライアントサイドに閉じ込められると思ってんのか

クライアントサイドに閉じ込められるかどうかはspaうんぬんと関係ないぞ。
クライアントサイドをどう作るかであって、サーバサイドと連携するしないやどうやるかは別の話で関係ない。

**Name_Not_Found** · 2018/04/28(土) 12:47:29.15

>>186
アホ丸出しか
通信が減るかどうかの問題だぞ
クライアントで完結するか？しないだろ、どうやってもxhrが挟まるだろ

**Name_Not_Found** · 2018/04/28(土) 12:48:46.96

ajaxっていつからSPAって名前に変わったんですかねえ…

**Name_Not_Found** · 2018/04/28(土) 12:54:10.63

SPAなんて単なる概念でしょ
ムキになりすぎ

**Name_Not_Found** · 2018/04/28(土) 13:59:36.52

ぶっちゃけ提唱されたけどほとんど馴染まないまま消え去っていってる最中だからな

**Name_Not_Found** · 2018/04/28(土) 16:48:58.11

>>188
ajaxとSPAは別物ですよ
外部との通信を必要としないSPAもありますし

**Name_Not_Found** · 2018/04/28(土) 16:53:28.57

let a = function hoge(){
console.log(hoge);
}

a();

このような形で関数内から自分自身を参照出来ますが
関数外部からhoge();
としたらエラーになります
この関数名は、関数内からしか参照できないのでしょうか？
だとしたら関数にstatic変数を持たせるのに都合がいいですが、
関数名を使ってstatic変数を持たせる方法はアリなのでしょうか？

**Name_Not_Found** · 2018/04/28(土) 18:36:40.24

何がしたいか知らんけどクロージャ

var f = (n) => {
var count =n
return ()=> {
return ++count;
}
}

var f1 = f(1);
var f100 = f(100);

f1() //2
f100() //101
f1() //3
f100() //101

**Name_Not_Found** · 2018/04/28(土) 18:43:04.99

>>172のパクリ？

**Name_Not_Found** · 2018/04/28(土) 19:06:05.21

アンカくらいつけろよ無能

**Name_Not_Found** · 2018/04/28(土) 19:34:59.86

あんか（行火）は炭火、電気ヒーター、化学発熱体等を内蔵した
一人用可搬型の採暖用保温具。布団などに入れ直接手足に当てて
暖をとる暖房器具である。地域や世代によっては
「こたつ」「足炬燵」と呼ばれることもある。

**Name_Not_Found** · 2018/04/28(土) 19:45:59.98

はいはいおもしろいおもしろい

**Name_Not_Found** · 2018/04/28(土) 20:15:25.53