+ 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/05/18(金) 06:19:08.20

const には「再代入不可」以外の意味はないからね
プロパティの更新も禁止したいなら
Object.defineProperty とか Object.freeze

**Name_Not_Found** · 2018/05/18(金) 17:21:46.36

>>558-560
use strict宣言ではvarの代わりにconstを使う、みたいなのを見たのでてっきり変数宣言の主軸なのかと思っていました
>>561
なるほど（エラーは設定しないといけないみたいですが）そういう関数があるのですね

**Name_Not_Found** · 2018/05/18(金) 18:58:08.98

constを基本にするのは別に悪いことじゃないよ
必須かと聞かれると自分はletばかりだけど

**Name_Not_Found** · 2018/05/18(金) 19:35:55.40

TDZのクソ挙動が気に入らないのでvarです。
functionスコープで特に問題ない。
大規模開発するなら使うけど。
しないなら必要ない。不便なだけだぞ。

**Name_Not_Found** · 2018/05/18(金) 21:06:39.05

それ本当にTDZの挙動に不満持ってるのか？
再宣言禁止で
let a = hoge
と次の
a = fuga
が揃わないとかならまだ少し分かるが
定義場所前でのundefinedを期待する必要性なんてまず無いだろう

**Name_Not_Found** · 2018/05/18(金) 23:26:18.45

TDZは重宝してる

**Name_Not_Found** · 2018/05/19(土) 02:25:49.15

fromってどういうとき使うの・・？

var arr=['kyoto','oosaka'];
console.log(Array.from(arr, n=>`${n}-fu`).join(", "));
console.log(arr.map(n=>`${n}-fu`).join(", "));

mapでいいじゃん・・みたいな

**Name_Not_Found** · 2018/05/19(土) 02:34:37.26

配列風オブジェクトを配列に変換したい時に使う

**Name_Not_Found** · 2018/05/19(土) 13:30:15.68

[...配列風オブジェクト]でいいじゃん

**Name_Not_Found** · 2018/05/19(土) 17:23:00.70

>>569
配列風オブジェクトにスプレッド演算子が使えるとは限らないんだが

実際にEdgeでNodeListにスプレッド演算子は使えない。
古いChromeとかも使えないようだ。

**Name_Not_Found** · 2018/05/19(土) 18:31:51.94

古いブラウザ持ち出したらfromも使えないじゃん

**Name_Not_Found** · 2018/05/19(土) 18:36:57.78

fromはpolifilでできる
スプレッド演算子はbabelで使えるようになったとしても
NodeListでは使えない

**Name_Not_Found** · 2018/05/19(土) 18:55:29.64

だったらアロー関数もletもconstもトレイリングカンマも使うなよ

**Name_Not_Found** · 2018/05/19(土) 19:12:45.53

ぶっちゃけ必要が無い限り使わんなあ

**Name_Not_Found** · 2018/05/19(土) 19:38:52.11

>>573
babelで変換可能なものは使うよｗ

**Name_Not_Found** · 2018/05/19(土) 21:28:56.72

>>572
Symbol対応していればポリフィル可能だよ

NodeList.prototype[Symbol.iterator] ≒ Array.prototype.values
だから

**Name_Not_Found** · 2018/05/19(土) 21:32:49.32

>>568
iterableでない配列likeオブジェクトに対応できない

**577** · 2018/05/19(土) 21:35:39.93

>>577は>569宛

**Name_Not_Found** · 2018/05/20(日) 14:37:34.10

そういうツッコミは感心しないな
この靴は山を登るときに使う
いや、エベレストに対応できない
みたいな

**Name_Not_Found** · 2018/05/20(日) 16:43:05.57

熊の毛皮はあんまり寒いと役に立たないらしい。そういうときは犬の毛皮を使うそうだ。
なんだ、熊の毛皮つっかえねーな

**Name_Not_Found** · 2018/05/20(日) 17:29:49.09

じゃああんまり寒いと熊、絶滅しちゃう？

**Name_Not_Found** · 2018/05/20(日) 18:13:12.78

>>579
この場合は、Array.fromは不要というニュアンスへの反論だからおかしくはないと思うが

**Name_Not_Found** · 2018/05/20(日) 19:21:02.36

>>581
熊には体脂肪という毛皮をサポートするものがあるから大丈夫

**Name_Not_Found** · 2018/05/20(日) 19:37:28.85

俺にも脂肪はたくさんついているが？

**Name_Not_Found** · 2018/05/20(日) 20:40:15.97

髪の毛がついてないから寒さに弱いんだよ

**Name_Not_Found** · 2018/05/21(月) 18:45:07.49

暇つぶしに姉妹スレもよろしくおねがいします

+ JavaScript のお題用スレッド +
https://mevius.5ch.net/test/read.cgi/hp/1526666703/

**Name_Not_Found** · 2018/05/21(月) 21:14:25.17

スマートホン
スマフォ

**Name_Not_Found** · 2018/05/21(月) 21:18:23.96

セマフォ

**Name_Not_Found** · 2018/05/21(月) 23:41:14.10

全くの初心者ですが、
便利なウェブサービスを作りたくてJavaScriptを勉強しはじめました。

質問ですが、
ブログによく貼ってある、
カエレバ、ヨメレバってJavaScriptでできているのですか？

**Name_Not_Found** · 2018/05/22(火) 00:58:13.06

カエレバ.comそのものがどうやってできている、という意味なら
カエレバは、amazonや楽天などそれぞれのアフィリエイトパーツのルール（やテンプレート）に則った
アフィリエイトリンクを生成するサービス　>>589

カエレバ利用者がブラウザからアフィID情報など打ち込んだとき
動的にアフィリンクを生成する処理部分で、少なくともJavaScriptが使われている
（ようはjavascriptを使った穴埋め問題）

あとは各サイトのテンプレートを一旦kaereba.comのサーバーサイドで処理のため
ここではphpが使われてるぽい
仮に、アフィIDによって商品IDそのものもが変わってしまうなら
各サイトへリクエストする必要がある
（ただほとんどのアフィリエイトパーツは穴埋め問題みたいなテンプレだろうが）

穴埋め問題だけなら、フロントエンドだけのjavascriptで実現できるし
極端に言えば個人使用なら文字通りテキストエディタで穴埋め問題すればいいだけ

もしリクエストする必要があるなら
・各サイトのレスポンスがクロスサイトに対応している、ならjavascriptだけで可能
・対応していなければ、phpやNode.jsみたいなサーバーサイドでの処理が必要
・対応しておらずサーバーサイドも嫌なら、ブラウザなどフロントエンドの設定を変える
など、この辺りがポイント

**Name_Not_Found** · 2018/05/22(火) 01:28:37.89

質問ですが、
ブログによく貼ってある、
ビックカメラ、ヨドバシってJavaScriptでできているのですか？

**Name_Not_Found** · 2018/05/22(火) 02:24:52.55

質問ですが頭によく貼ってある

**Name_Not_Found** · 2018/05/22(火) 02:26:11.46

地毛にきまっとるだろーが

**Name_Not_Found** · 2018/05/22(火) 02:51:33.73

JigeScript

**Name_Not_Found** · 2018/05/22(火) 04:52:54.78

Selectionオブジェクトでは
始点をanchor、終点をfocusと呼んでいます
anchor＝碇なのは、選択開始部分を「そこに留める」ことからの発想だと思います
そう考えると、必ずしも始点が前、終点が後ろにあるとは限らないってことですよね？
文字選択というものは一般的にそうですし。
一方Rangeオブジェクトでは始点をstart、endと呼んでいます
この場合は始点が前、終点が後ろ（あるいは始点＝終点）と保証されているということでしょうか？

**Name_Not_Found** · 2018/05/22(火) 05:11:56.81

>保証されている
少なくとも仕様ではそう。
例えば start を end より後に設定しようとすると end も変更される

**Name_Not_Found** · 2018/05/22(火) 05:20:24.05

>>596
そうなのですね
ありがとうございます

**Name_Not_Found** · 2018/05/22(火) 06:06:14.54

そもそもLtoRとRtoLが交じってることもある文字列で頭と尾を一般に定義することは出来ない
一応の挙動は決まっていても人間の尺度で保証されていると考えると痛い目にあうぞ

**Name_Not_Found** · 2018/05/22(火) 07:11:24.49

> そもそもLtoRとRtoLが交じってることもある文字列で頭と尾を一般に定義することは出来ない

どちらでも、頭は上で、尾は下だろ。

**Name_Not_Found** · 2018/05/22(火) 07:16:35.64

RtoLって言っても、要素の前後関係が変わるわけではないのでは？
たとえばrangeの先頭から末尾まで舐める処理は、LtoRだろうがRtoLだろうが同じように動作しますよね

**Name_Not_Found** · 2018/05/22(火) 09:08:41.33

いずれにしても、見た目上は左が前で右が後だけど、ここでいわれる「前」と「後」は前(previousSibling) と後(nextSibling)？
DOMノードレベルとブラウザに描画されるレベルでは、前後の定義が変わるのでは？

**Name_Not_Found** · 2018/05/22(火) 10:44:30.80

RtoLで２要素跨いでる場合はどういう順番になるんだろう

**Name_Not_Found** · 2018/05/22(火) 13:28:48.90

>>601
なに言ってるんだ？先に現れたのが前だろ

**Name_Not_Found** · 2018/05/22(火) 13:35:57.83

先って？

**Name_Not_Found** · 2018/05/22(火) 14:05:37.24

メモリアドレスの小さい順だが？

**Name_Not_Found** · 2018/05/22(火) 19:04:47.97

ファイルにしろDOMにしろ本質的にはシーケンシャルなのですよね

**Name_Not_Found** · 2018/05/23(水) 03:23:27.09

チェーンの数を動的に変更したいのですがどうすればいいでしょうか。
func(){
hoge.a().a().a().a();
}

このa()をfunc(1)のときは１回で実行結果が
hoge.a();

func(2)のときは３回で実行結果が
hoge.a().a().a();

みたいにやりたいのです

**Name_Not_Found** · 2018/05/23(水) 03:25:33.12

もちろん
func(n){
switch(n){}
}
的なのは考えましたが
例えばnが大きくなると大変になりそうなので

**Name_Not_Found** · 2018/05/23(水) 03:26:21.53

訂正>>607
＞func(2)のときは
func(3)のときは

でした

**Name_Not_Found** · 2018/05/23(水) 03:55:47.58

再帰でなんとかするほうが良くね

**Name_Not_Found** · 2018/05/23(水) 05:46:05.97

>>607
単純なループで良い
難しく考える必要はない

func(n){
　var o = hoge;
　for (var i = 0; i < n; i++) {
　　o = o.a();
　}
　return o;
}

**Name_Not_Found** · 2018/05/23(水) 06:41:36.97

難しく考える必要はない
せっかくJSを使ってるのだからこれでいい
eval( 'o'+'.a()'.repeat(n) )

**Name_Not_Found** · 2018/05/23(水) 07:44:19.05

難しく考える必要はない
単純にreduceでいい

func(n) {
Array(n).fill().reduce(acc => acc.a(), o);
}

**Name_Not_Found** · 2018/05/23(水) 08:00:17.68

いろいろ間違えた

function func(n) {
Array(n).fill().reduce(acc => acc.a(), hoge);
}

**Name_Not_Found** · 2018/05/23(水) 09:59:42.66

でもreduceってIE9からしか使えないしな。
fillとか存在の意味が分からんし

そんなに一行で書きたいなら

func(n){
　for (var i = 0, o = hoge; i < n; i++) o = o.a()
}

**Name_Not_Found** · 2018/05/23(水) 10:00:58.23

func(n){
　var o = hoge, while (n--) o = o.a();
}

**Name_Not_Found** · 2018/05/23(水) 10:41:20.18

そんなこと言ってもIE9なんてもはや気にしてないし。
サポート切れて喜んでたじゃんお前ら。

**Name_Not_Found** · 2018/05/23(水) 10:44:54.81

fillが嫌ならこんなのでもいいぞ。

function func(n) {
[...'.'.repeat(n)].reduce(acc => acc.a(), hoge);
}

**Name_Not_Found** · 2018/05/23(水) 11:07:15.87

またbabelをつかわないといけないようなコードを

**Name_Not_Found** · 2018/05/23(水) 11:54:18.14

またIE9おじさんか

**Name_Not_Found** · 2018/05/23(水) 13:16:49.98

hoge.b = function(n){
for(var i = 0; i < n; i++){
this.a();
}
return this;
};
?

**Name_Not_Found** · 2018/05/23(水) 13:24:02.79

>>618
ドット好き過ぎｗｗｗ

**Name_Not_Found** · 2018/05/23(水) 13:24:51.85

>>614
単純とはいえない
reduce使いたいが為に配列をわざわざ生成して、生成した配列を捨ててる

**Name_Not_Found** · 2018/05/23(水) 13:28:22.51

>>615
MSは既にIE10以下を切り捨ててるけど、あなたのサポート対象はどこまで？

**Name_Not_Found** · 2018/05/23(水) 13:29:46.91

>>623
>>612は良いのか？ダブスタじゃん？

**Name_Not_Found** · 2018/05/23(水) 13:40:34.36

>>625
>>612は生成した文字列を捨てずに活用してるから、なくはないんじゃないかな
Function() の方がいいとは思うけど

どこがダブルスタンダード？

**Name_Not_Found** · 2018/05/23(水) 15:33:43.75

ハァ？じゃあ配列も活用してるだろうが…
ちょっと考えておかしいと思わんかな

**Name_Not_Found** · 2018/05/23(水) 16:28:17.99

Rangeの端を指す用語は何でしょうか？
isPointInRangeのようなメソッド名があるのでポイントでいいでしょうか？

**Name_Not_Found** · 2018/05/23(水) 19:23:02.55

>>627
配列は繰り返し処理だけの為に生成されていて、「値」が使われてない
n回繰り返すために配列を生成するのは無駄、単純ではない
>>612は文字列を引数にしなければならないのだから、これ以上は省略しようがない

それから、「言及してない＝許容」という考え方もおかしい
一つ指摘したら、全レスをチェックして、スルーしたレスは許容するのが当然なのか？
逆にいえば、あなたは>>612以外は認めてると？

**Name_Not_Found** · 2018/05/23(水) 19:30:24.54

無駄がどうのと言ってるわりにevalはいいの？基準がよくわからんな

**Name_Not_Found** · 2018/05/23(水) 19:41:34.25

reduceでn回繰り返すために配列を生成するのは無駄、単純ではない

forでn回繰り返すために一時変数を生成するのは無駄ではない、単純

主観じゃん。forに慣れてるだけ。

たしかに無駄になるコストはforのための一時変数の方が配列より低いと思うよ。
でもそのわりにevalは認めちゃってるし…
基準がさっぱり分からない。
メモリリソースなのか、
CPUリソースなのか、
はたまたコードの見た目（単純に見える）なのか？
一番目と二番目は数字で語れるだろうけど、三番目なら主観だよ。
あなたがforに慣れてるだけ。
関数型言語の人に聞いたら違う答えが帰ってくるんじゃないかな。

**Name_Not_Found** · 2018/05/23(水) 20:11:41.21

正直ここまで不格好でない例が無い
ひょっとしたらeval例が一番なくらい
でもやろうとしていることが不格好だから仕方ないとも思う
やっぱりメソッド中で必要な処理だけforで回したり再起にするのが良いと思う

**Name_Not_Found** · 2018/05/23(水) 20:24:18.46

不格好ってことは三番目の「コードの見た目」だったようだね。主観。

**Name_Not_Found** · 2018/05/23(水) 20:58:45.37

多分それは悪い意味で言ってるんだと思うが
主観的見た目こそ超絶大切なことだと考えてる勢には通じないと思うぞ

今回の例みたいなのは動くだけなら猿でも書けるんだから
でも自由な文化のJSではどの方法が適当なのかなんて自明ではない
でもだからこそ、ロジック以外の部分で拘って研究して論争する価値があるんだと思うよ

そうして可能性を捨てずに色々試して皆で議論して良くしていこうっていうのがWebだから

**Name_Not_Found** · 2018/05/23(水) 21:38:25.82

不恰好を定義できない、不恰好でない例も出せない無能はほっとけ

しいていえば見た目は読みやすさ・理解しやすさに繋がるか？

**Name_Not_Found** · 2018/05/23(水) 21:50:06.14

自演ワロタｗｗｗ

**Name_Not_Found** · 2018/05/24(木) 00:21:59.91

あたま湧いてるのか？

**Name_Not_Found** · 2018/05/24(木) 00:26:16.72

　彡⌒ミ
(´･ω･`) また髪の話する・・・？

**Name_Not_Found** · 2018/05/24(木) 00:34:23.64

>>631
>>625のダブスタも相当主観だと思ったが、どういう意味だったんだ？

**Name_Not_Found** · 2018/05/24(木) 00:44:50.20

で、どれが一番早いの?

**Name_Not_Found** · 2018/05/24(木) 00:51:08.88

>>631
reduceは配列の要素から一つの値を作るものだと考えている
要素を使わず、代入処理だけのためにreduceを使うのであれば、始めから代入処理だけの機能を使うのが理にかなっている

後な、俺が主張してるのは単純か複雑か
reduceを使うためにArray()で配列を生成し、走査可能にする為にする為にfill()で値を初期化、という理屈を初心者が理解できるとは思えん

対するeval()は善し悪しはともかく、機能理解はreduceよりも容易だと思うね
個人的にはevalを全く使わんし、eval is evil、eval <<< Function
ローカル変数破壊は御法度だし、式呼び出ししなければ安全でないのは頂けないが、それは別の問題だ
evalがコードを実行できる関数ぐらいの理解は初心者にも出来る

**623** · 2018/05/24(木) 01:01:04.14

ついでだからいうが、>>623では言及していなかった>>612を引き合いに出して、ダブスタといわれても困る(>>625)
なぜか俺が「>612が良い」と主張しているように誤解されているが、そんなことは一言もいってない
たまたま、>612が俺のいう「単純とはいえない」に該当しなかったから弁明する形になっているが、本意ではない
同様に、俺が言及しなかった他のレスも「良い」と主張しているわけではない(言及しなかったものを勝手に決めつけられても困る)

**Name_Not_Found** · 2018/05/24(木) 05:39:56.28

>>641
> reduceは配列の要素から一つの値を作るものだと考えている
それも使い方の一つだが、
オブジェクトを渡して、そのオブジェクトのメソッドを
複数回メソッドを呼び出すためにも使う

**Name_Not_Found** · 2018/05/24(木) 06:21:47.69

つまるところ、
歯ブラシは、俺の尻に突っ込むためにも使う
ということである

**Name_Not_Found** · 2018/05/24(木) 07:08:33.91

eval を使うと、納品できない

そこからシステムに侵入されるから、損害賠償請求される。
危険なことを知っていて、使っているから

**Name_Not_Found** · 2018/05/24(木) 07:11:09.43

>>643
ずいぶん、限定的な使い方だな

**Name_Not_Found** · 2018/05/24(木) 07:29:41.51

>>643
reduce使う必要ないのでは？

let i = 4;
while (i--) obj.a();

**Name_Not_Found** · 2018/05/24(木) 07:33:39.28

evalって書いたのはどう見てもネタでしょ

**Name_Not_Found** · 2018/05/24(木) 07:42:21.61

システムに侵入てお前のカツラシステムか何かか

**Name_Not_Found** · 2018/05/24(木) 07:51:46.41

>>647
それをreduceでやるのがカッコイイんですよｗ
素人には読めない。プロだけがわかるコード

**Name_Not_Found** · 2018/05/24(木) 08:29:12.55

それより>>647が提示したコードがいろいろヤバい

**Name_Not_Found** · 2018/05/24(木) 08:40:44.25

関数型っぽい書き方の方がイケてることに異論はありませんが
パフォーマンスではforやwhileの方が勝ります
ループ中で繰り返し呼び出されるような処理では、
やはりforやwhileで書きますよね？

**Name_Not_Found** · 2018/05/24(木) 08:46:04.44

パフォーマンスならforで書く。
ボトルネックにならないならforEachで書く。
書きやすいし読みやすいから。

**Name_Not_Found** · 2018/05/24(木) 08:51:16.54

比較して見ると、複雑な箇所が分かりやすいかもね

let i = 4;
while (i--) obj.a();

for (let i = 0; i < 4; i++) obj.a();

for (let v of [4,3,2,1]) obj.a();

[4,3,2,1].reduce(()=> obj.a());

**654** · 2018/05/24(木) 08:52:58.45

>>654は下にいく程、複雑化する
for-ofがforよりも良いという人はおそらくいない
reduceも機能の無駄遣い

**Name_Not_Found** · 2018/05/24(木) 08:54:28.60

>>647
おいおい、
obj.a();obj.a();obj.a();obj.a();
と
obj.a().a().a().a();
は全然ちがうんだが。
reduceの動作理解した上での批判ならまだしも、それじゃお前が理解できないものを僻みで批判してるだけじゃん。

**654** · 2018/05/24(木) 08:58:01.88

>>656
>>643に言及してるんだけど、流れが読めない人？

**Name_Not_Found** · 2018/05/24(木) 08:59:09.95

>>654
おいおい、
obj.a();obj.a();obj.a();obj.a();
と
obj.a().a().a().a();
は全然ちがうんだが。
お前が書いたやつは全部
obj.a();obj.a();obj.a();obj.a();
になる。
お題は
obj.a().a().a().a();
お前のだとアキュムレータ使ってないからそれこそreduceの意味まったく無い。
初心者か？
はじめてのjavascriptからやり直したら？

**654** · 2018/05/24(木) 09:00:38.95

>>658
>>657

**Name_Not_Found** · 2018/05/24(木) 09:04:01.46

obj.a();obj.a();obj.a();obj.a();
の場合はreduceの意味まったく無い。
なぜならforEachで十分だから。
初心者がお題勘違いしたのを流れだとか言って誤魔化してるだけ。

**654** · 2018/05/24(木) 09:08:43.13

いや、>>643を言葉通りに受け取れば、>>647も>>654も問題ないでしょ
>>625のダブスタといい、なぜ言外に定義していることがあると思いこむのかね