+ 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/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

**Name_Not_Found** · 2018/04/28(土) 20:24:14.55

>>192
関数内からしかアクセスできない
有り無しは個人の判断、自分で判断しろ

**Name_Not_Found** · 2018/04/28(土) 20:32:01.16

>>193
いえクロージャは知ってます

>>199
じゃあアリにします
ありがとうございました

**Name_Not_Found** · 2018/04/28(土) 20:35:30.10

>>192
なしだろこんなの
意味不明

**Name_Not_Found** · 2018/04/28(土) 20:38:10.17

**Name_Not_Found** · 2018/04/28(土) 20:59:34.26

他人がどういうコード書こうと批判する気は無いけど

>だとしたら関数にstatic変数を持たせるのに都合がいいですが

これはちょっとわからない

**Name_Not_Found** · 2018/04/28(土) 21:24:58.02

>>203
hoge.foo = 1; とか、したいんじゃない？
a.foo = 1; でも出来るから意味不明だけど

**Name_Not_Found** · 2018/04/28(土) 21:52:42.23

>>204
この場合の自関数名は読み取り専用
自前でhoge.foo = 1; できるから、ではなくて
「関数にstatic変数を持たせる」という目的に、この場合の自関数名が関係しない
なので意味がわからない

**Name_Not_Found** · 2018/04/28(土) 22:19:46.07

>>205
正直に言うと、後段の部分は俺も理解してなくて、質問者本人が判断すれば良いから投げた
突っ込みどころを出せば、キリがない

- 関数名の参照はスコープからの参照だよな？Function#nameは外のスコープからも参照可能だが、関係ないよな？
- そもそも、static変数はクラスのためのものだが、どういう用途を想定してるんだ？
- つか、JavaScriptにstatic変数はないが、Java定義の認識でいいのか？
- sratic変数は外のスコープから参照可能だが、スコープ上で関数への参照が閉じ込められる性質とどう組み合わせるんだ？

**Name_Not_Found** · 2018/04/28(土) 22:27:36.73

自分はCのstaticの意だと解釈した

**Name_Not_Found** · 2018/04/28(土) 22:37:23.05

>sratic変数は外のスコープから参照可能だが

typoは無視するとして、>>192もそうだがprivateとごっちゃになっている気がする
staticはstatic

**Name_Not_Found** · 2018/04/28(土) 22:44:14.05

妄想に論理性を求めるのは無駄というもの

**Name_Not_Found** · 2018/04/28(土) 22:52:41.12

ふぅ、こんなピリピリした話をしてるなら
いつものようにjQueryの話題で盛り上がっていたほうが良いな

**Name_Not_Found** · 2018/04/28(土) 22:59:25.11

俺はSPAの実際のところが気になる

できるかどうか、難易、フレームワーク云々、以前にSPA必須な案件にまったく遭遇しない

**Name_Not_Found** · 2018/04/28(土) 23:06:03.45

普通のサイトがSPA取り入れても
違和感が出るだけだしな。

クリックしたらページが変わるだろう所で変わらないから
違う、そうじゃないって思っちゃう

**Name_Not_Found** · 2018/04/28(土) 23:23:14.82

そんなもんトランジションアニメーションさせればいいだけの話。
アドレスバーのurlも自由自在よ。

**Name_Not_Found** · 2018/04/29(日) 00:13:40.97

そこまでしてSPAにこだわるメリットがない

**Name_Not_Found** · 2018/04/29(日) 00:29:00.58

>>192
あたまよさそうだねきみ
後学のためにどういう風に使うのか具体的な事例とコードよろしく

**Name_Not_Found** · 2018/04/29(日) 12:00:52.31

>>208
そんなわけないでしょう
privateの意味分かってますか？

**Name_Not_Found** · 2018/04/29(日) 12:50:16.42

>>215
$(document).on('click', '#hoge', function f(e) {
if (!f.fadeout) {
f.fadeout = _.debounce(() => {
$('#moge').fadeOut();
}, 10000);
}
// いろいろな処理
f.fadeout();
});

こんな感じに、関数の中から同一オブジェクトにアクセスしたい場合に使います
fadeout開始するまでの待ち時間に再び呼び出された時には
前回のfadeout予約がキャンセルされるような関数を、lodashのdebounceで作っています
jqueryのdelayとstopで同じことをしようとしたのですが何故かうまくいかなかったので。
これが唯一の実装方法でないのは当然ですが、複雑さを関数の中だけに閉じ込めるのがシンプルで好みです
もっといい方法ありますか？

**Name_Not_Found** · 2018/04/29(日) 13:30:10.24

>>192で言ってることをどこでつかっとんそれ?

**Name_Not_Found** · 2018/04/29(日) 14:54:33.07

イベントは、発行/購読パターンが基本

Mediator もある。
仲介者、まとめ役、橋渡し役、管制塔

イベントキャンセルできるイベントキューのライブラリは、
オライリーの著者などの、外人が作っている

自分で作ったら、複雑すぎて大変

Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012

JavaScriptデザインパターン、Addy Osmani, 2013

**Name_Not_Found** · 2018/04/29(日) 17:08:55.60

setTimeoutの戻り値を自関数の中で管理するだけで済むように見えるんだが、こういう挙動が欲しいのではないのか？

document.getElementById('mybutton').addEventListener( 'click', function f(){
　　var delay = 3000;
　　if( ( 'timeoutId' in f ) === false )
　　　　f.timeoutId = false;
　　if( f.timeoutId !== false )
　　　　clearTimeout(f.timeoutId);
　　f.timeoutId = setTimeout( function(){
　　　　f.timeoutId = false;

　　　　/* my oparation */

　　}, delay );
}, false );

目印は別にfalseでなくてもいいが

**Name_Not_Found** · 2018/04/29(日) 17:13:42.83

>>218
何を言っているのか分かりません

**Name_Not_Found** · 2018/04/29(日) 17:15:23.82

>>221
関数「名」は、予約＆予約キャンセルの仕組みには、一切関係ないではないか
ということだと思うが

**Name_Not_Found** · 2018/04/29(日) 17:15:50.11

>>220
setTimeoutの返り値でキャンセルするっていうのは当たり前の話です
わざわざ複雑にした処理をドヤ顔で書ける神経が分かりません

**Name_Not_Found** · 2018/04/29(日) 17:16:45.71

>>223
目的の挙動はこれで合っているのか間違っているのか、だけが欲しい

**Name_Not_Found** · 2018/04/29(日) 17:17:08.29

>>222
いや、だから何？？？？
そんな話誰してないだろ？？？

**Name_Not_Found** · 2018/04/29(日) 17:18:56.35

>>224
いやだから、何でわざわざ無駄に複雑にした処理を検討しなきゃいけないの？？？
甘えすぎじゃね？？？

**Name_Not_Found** · 2018/04/29(日) 17:19:32.79

>>225
>この関数名は、関数内からしか参照できないのでしょうか？
>だとしたら関数にstatic変数を持たせるのに都合がいいですが、

「関数名」を「参照できる範囲（private性）」について、「だとしたら」で繋いでいるから

**Name_Not_Found** · 2018/04/29(日) 17:19:55.84

・・・・これ複雑か？

**Name_Not_Found** · 2018/04/29(日) 17:21:24.64

質問スレにはままあることですが
回答者に回るレベルに至っていない連中がちょっと回答者に回りすぎでは？
もう少しわきまえて下さい
分かりましたね？

**Name_Not_Found** · 2018/04/29(日) 17:21:42.89

>>226
合っているのだな

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

>>228
ええ、無駄に複雑ですね。無駄に。

**Name_Not_Found** · 2018/04/29(日) 17:28:47.28

$('#hoge').on('hoge',(e)=>{
console.log('hoge');
});

$(document).trigger('hoge');

このように上位要素でtriggerしても下位の要素で受け取ることは出来ません
上位で受け取ってコールバックするような機構が必要だと思いますが
どうやるのが定石なのでしょうか？

**Name_Not_Found** · 2018/04/29(日) 17:45:58.89

>>221
は?
何を言ってるか分からんてアホ?
>>192で言ってることをどこで使ってるか説明してって言ってるだけなんだが?
使ってないってこと?

**Name_Not_Found** · 2018/04/29(日) 17:50:40.94

>>229
バカが回答をりかいできなくて逆ギレしだすのも質問スレにはよくある

**Name_Not_Found** · 2018/04/29(日) 17:52:00.36

結局>>192をどうつかってるのか分からんだよね

**Name_Not_Found** · 2018/04/29(日) 17:52:24.38

>>232
jqueryスレへどうぞ

**Name_Not_Found** · 2018/04/29(日) 17:54:55.27

> 関数外部からhoge();
> としたらエラーになります

こことかpublic/privateの話だよね

**Name_Not_Found** · 2018/04/29(日) 18:17:39.97

>>235
192はアホすぎて使いようがいない印象をうける
だからこそどうやって使うのかにはかなり興味あるのだがそれは示せないだろう

**Name_Not_Found** · 2018/04/29(日) 18:19:11.61

>>232
意味が分からん。

$(document).trigger('click')ってやったら、
HTMLに含まれる全てのボタンやリンクに対して
クリックされたというイベントを発動させたいのか？

**Name_Not_Found** · 2018/04/29(日) 23:26:04.99

>>217
たしかにどこが複雑なのかも分からん
我流じゃなくて関数型の勉強したほう良いと思う

**Name_Not_Found** · 2018/04/30(月) 02:27:12.24

うっせかす
俺より底辺共が生意気言うなぼけ

**Name_Not_Found** · 2018/04/30(月) 07:42:58.80

簡潔で非ライブラリ依存なコードをあっさり提示されてて草

**Name_Not_Found** · 2018/04/30(月) 08:54:29.58

>>242
何の話？

**Name_Not_Found** · 2018/04/30(月) 09:26:53.31

わからんね。簡素じゃなくて冗長なクソコードなら
>>220にあるけどそれのことかな？ｗ

なにがクソかというと無駄なことしてるから。
clearTimeoutが無効な値を渡しても例外でないのは保証されてるのだから
>>220はこれだけでいい。これがクソコードである根拠
やらなくて良いことをやるのは丁寧なのではなく単に無駄なだけ

document.getElementById('mybutton').addEventListener( 'click', function f(){
　　var delay = 3000;
　　clearTimeout(f.timeoutId);
　　f.timeoutId = setTimeout( function(){
　　　　/* my oparation */
　　}, delay );
}, false );

そしてもちろんこれはライブラリを使えば、もっと簡素に実現できる

$('#mybutton').click(_.debounce(function() {
　/* my oparation */
}, 3000));

非ライブラリのコードも簡素に書けないやつが、
ライブラリよりも簡素に書けるとか言わないほうが良い
恥をかくだけだぞｗ