JavaScript の質問用スレッド vol.125

2022/08/07(日) 15:57:40.26

!extend:checked:vvvvvv:1000:512
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-5のテンプレを読んだ上で質問してください。次スレは>>950が>>2の「次スレの立て方」を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

■前スレ
JavaScript の質問用スレッド vol.124
https://mevius.5ch.net/test/read.cgi/tech/1636525464/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured

2022/11/20(日) 19:31:32.32

>>224
ありがとうございます

for(i=0;i<SEL.length;i++){ ～ }っていう式がコードの中にいくつも出てくるんですけど、変数iのところはそれぞれの式で変えないといけないんでしょうか？
for(j=0;j<SEL.length;j++){ ～ }とか。
関数内だけですか？
同じ変数文字が使えるのは

2022/11/20(日) 20:42:57.11

いい質問ですね
変数のスコープの問題なので試してみたらいかがでしょう？
jsのスコープをしっかり押さえると
伸びしろが変わります！

2022/11/21(月) 02:03:46.52

ありがとうございます
勉強を始めて1か月ですけど改造はわりとうまく出来るようになりました
最初は何が書いてあるのかわからないんだけど、ジーッとしつこく見てるとわかって来ますね

2022/11/21(月) 07:16:36.42

let も var も（スコープ内）再代入可能です
let i=0;

for(i=0;i<10;i++,console.log(1,i));
for(i=0;i<10;i++,console.log(2,i));
console.log('------');

for(i=0;i<10;i++){
console.log(3,i);
for(i=0;i<10;i++){
console.log(4,i);
}
}
console.log('------');

let t=0;
for(i=0;i<10;i++){
console.log(5,i);
for(t=0;t<10;t++){
console.log(6,t);
}
}

2022/11/21(月) 08:11:57.92

>>228
中腹の二重ループについて敢えてやってるなら説明が必要じゃね。

2022/11/21(月) 18:52:09.71

>>229
for(i=0;i<SEL.length;i++){}
for(j=0;j<SEL.length;j++){}
と質問されてるので入子構造なんだろうなと

2022/11/21(月) 18:58:18.92

入子じゃないですよ
ドキュメント上にアイテムが複数あって、何回も全アイテムを移動したり変形したりする必用があるので並列です

2022/11/21(月) 19:04:10.48

>>228
何回も使えるんですね
ありがとうございます

2022/11/21(月) 19:35:19.44

>>230
二重ループの外と内とで同じ i を使ってることについてよ。
敢えてやってるならどういうメカニズムでどういう結果になるのか説明てあげないと分からないんじゃない？

2022/11/21(月) 20:09:25.61

カスタム要素って使われてます？

2022/11/21(月) 20:10:57.61

>>232

// No 1
for(i=0;i<10;i++){
console.log(3,i);
for(i=0;i<10;i++){
console.log(4,i);
}
}
console.log('------');

// No 2
let t=0;
for(i=0;i<10;i++){
console.log(5,i);
for(t=0;t<10;t++){
console.log(6,t);
}
}

No1とNo2の違いは分かりますでしょうか？
一度コードを実行してみてください

No1のfor文の繰り返し１回目は、i=0です
次にNo2のfor文では、i=1から始まります
その後No2のfor文が繰り返しされi=10までカウントされNo1のfor文繰り返しに戻ります
その時、i=10になっているので、No1のfor文は終了になり、for文を抜けます

入子構造のインクリメント演算子では同じ変数を使うときには要注意ですね

2022/11/22(火) 17:55:58.75

>>235
ありがとうございます
なかなか難しいですね
勉強を続けます

2022/11/22(火) 17:58:38.56

今日はこういう発見がありました
当たり前と言えば当たり前なんですが
https://i.imgur.com/xkx4UUX.jpg

2022/11/22(火) 18:07:50.06

let、constどころかvarすら使えない（使わない）のであればPythonにでも行ったほうがいいんじゃない？

2022/11/22(火) 18:52:57.26

>>238
adobeスクリプトですがvarは使えます
他人のスクリプトを改造してる段階で、potisionで正しく並べられていなかったのでgeometricBounds[3]にしたと。
adobeのソフトはJavaScriptでないと動きません

2022/11/22(火) 19:10:38.94

セミコロンも入って無いし、あまりお手本としては良くないかも
でもこの人のadobe スクリプトが一番わかりやすいので

2022/11/22(火) 19:40:30.69

何を制御してるのか知りませんけれど
お好きなように言語を選んで
お好きなようにコードを書けばいいと思います
楽しく好きなように自由に！ですね

JSを使う場合の注意点ですけど
古いJSとの互換性を保つため
JSは結構複雑怪奇な言語になりつつあります

変数の取り扱いはどこ言語でも慎重に設計しますけど
JSの変数とスコープはちょっと特殊なので
制御系でJS扱うのなら注意したほうがって思います

2022/11/23(水) 01:04:55.03

推奨しない書き方はほぼESLintで弾けるだろ

2022/11/23(水) 14:55:32.43

ドキュメント内の全てのテキストフレームを選択するのは、

var txtObj = activeDocument.textFrames;
for (var i=0; i<txtObj.length; i++){
txtObj[i].selected = true;
}

で、ここからそれらを変形させたりしていくんですけど、
ドキュメント内全てでは無くて、最初に選択したものの中から
さらにテキストフレームのみを選択するにはどう書けばいいのでしょうか？

var sel=activeDocument.selection;
　　var txtObj = sel.textFrames;
for (var i=0; i<txtObj.length; i++){
txtObj[i].selected = true;

これでは、var txtObj = sel.textFrames;でエラーが出ます。

ドキュメント内の選択したものの中のテキストフレームのみを選択しないと、
ドキュメント内の全てのテキストフレームが変形されてしまいます。

2022/11/23(水) 15:35:10.48

var sel=activeDocument.selection;
for (var i=0; i<sel.length; i++){
if(sel[i].typename != "TextFrame"){
sel[i].selected = false;
}
}

これで出来ました。
お騒がせしました。

2022/11/23(水) 15:52:37.80

JavaScriptの一般的な文法とかの話はともかく、adobe固有の問題はここで聞くべきではないよ

2022/11/24(木) 09:02:34.19

>>244
>>245の言うとおり、もはやここで聞く内容ではない。
adobe forumで聞いた方がいいけど、
レベル的にまだネットで調べれば簡単に答えが見つかる内容だから
なるべく自分で調べたらいいと思う。

2022/11/24(木) 13:05:30.40

一般的なJavaScriptってgeometricBoundsとか使いませんか？
長方形の座標を得るメソッド

2022/11/24(木) 13:16:11.58

>>247
同じアドビでもindesignとillustratorではgeometricBoundsのx,y値の順番が異ってたり、
もはやアプリごとの話題になってくる。

2022/11/24(木) 13:35:39.39

>>247
使えません
それはadobe固有のものです

2022/11/24(木) 15:52:34.09

>>248
>>249
そうなんですか

水平垂直はわりと簡単に出来るけど、斜めになると数学の三角関数勉強しないといけないって…
道は険しそう…

2022/11/25(金) 03:26:14.01

$.Deferred()って分かりにくい。

2022/11/25(金) 17:44:10.29

配列内の数字が1つでも違ってたらtrueというのをif文で書きたいのですが、どう書けば良いのでしょうか？

例えば[6.356, 6.356, 7.482, 6.356]はtrueで、[6.356, 6.356, 6.356, 6.356]はfalseです。
配列内の数字の個数は決まっていません。
if(～){return;}の～の部分が知りたいのですが…
（違う数値が混じっていたら終了(return)したい）

2022/11/25(金) 18:01:34.82

配列内の数値が全部同じならtrue，というのを書いてみてください
ところで浮動小数点数には誤差がつきものなので
「だいたい同じ」を意味する処理を書く必要があります

2022/11/25(金) 18:03:10.25

>>252
配列の変数名がlだとして、
len(set(l))が1より大きかったら違う値が入ってる

2022/11/25(金) 18:10:27.64

そんな丁度いいオブジェクトがあったんだな

2022/11/25(金) 19:20:10.26

>>252
var a = [6.356, 6.356, 7.482, 6.356];
if (new Set(a).size != 1) return;

全部同じならSetのsizeは1になるはずだから

2022/11/25(金) 19:30:19.48

>>254
エラーが出ますが、間違っていますか？

var I=[72.356, 72.356, 72.356, 72.356, 72.356];
If(len(set(I))>1){
alert("違う値が入っています");
}
alert("全部同じ値です");

2022/11/25(金) 19:45:09.62

setってES2015(ES6)で導入されたって書いてありますね。
自分の環境では使えないんだと思います。
let()もたぶん…

2022/11/25(金) 20:02:47.41

len も set もそんなメソッドは定義されてない
>>256 は最近のブラウザなら動くはず

2022/11/25(金) 20:09:20.31

このコードではダメですか？

var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;

例外が出るでしょうか？

2022/11/25(金) 20:09:23.18

lenとかsetってpythonじゃ？

2022/11/25(金) 20:15:54.07

>>261
lenはpythonみたいです
setはES2015(ES6)で導入されたらしいです

}が抜けてました。

var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;
}

です

2022/11/25(金) 20:59:13.75

念のため指摘しておくが、Setとsetは別もんだぞ
確かにどっちもES2015で策定されてるが
Set が重複なしの集合
setはアクセサプロパティの構文で使われるやつ

2022/11/25(金) 21:07:08.32

>>252
var a = [6.356, 6.356, 7.482, 6.356];
if (a.join('').replace(RegExp(a[0], 'g'), '')) return;

falsyな値が入らないならこれでも

2022/11/25(金) 21:13:53.78

>>257
すまん、完全にPythonスレと勘違いしてたわ
申し訳ない

2022/11/26(土) 00:06:05.14

>>264
うーん、質問者のスキルし対して相応な解決策とは言い難いものを薦めるのはいかがなものかと・・・

2022/11/26(土) 02:18:08.00

もうこれで出来ましたよ
var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;
}

Setもsetも使えませんでした
ES2015に対応してないので

2022/11/26(土) 03:19:46.82

正規表現もいつか挑戦してみたいな

2022/11/26(土) 08:13:04.83

>>260
まあたいして変わらんけど -1 とか +1 とかがちょっと気になるので俺なら

for(var s = 1; s < I.length; s++){
if(I[0] != I[s]) return;

ってするかな

2022/11/26(土) 10:42:13.14

>>269
こっちの方が断然いいですね
ありがとうございます

2022/11/26(土) 11:15:10.62

>>264
var a = [6.356, 6.356, 7.482, 6.356];
if (a.join('').replaceAll(a[0], '')) return;

replaceAll使えればもっと短くなった

2022/11/26(土) 11:30:07.40

>>252
var a = [6.356, 6.356, 7.482, 6.356];
if (a.some(elem => elem != a[0])) return;

こっちのほうが分かりやすいか
「もし、aのいずれかの要素がa[0]と異なる時、returnする」と読み下せる

アロー関数が使えない環境の場合は
if (a.some(function(elem) {return elem != a[0];})) return;
になる

2022/11/26(土) 11:52:31.88

if( I.find( v=> v != I[0] ) ) return;
なんてのも

2022/11/26(土) 17:10:15.31

eval()でダイアログに計算式が入力出来るね

2022/11/27(日) 04:24:45.22

ごく基本的な事だが、あいまい等価演算子 == などを使うな

厳密等価演算子 === などを使え

2022/11/27(日) 04:40:17.42

>>275
なんで？

**275** (ﾜｯﾁｮｲ 214f-emCW [180.0.191.133]) · 2022/11/27(日) 13:33:33.93

型違いの比較を考えるのは無理

obj_1 == obj_2
の場合の、双方の型の組合せ爆発を考えないといけないから

obj_1が配列で、obj_2がオブジェクトとか、その逆とか

こういうのを考えるのが無理なので、事前に型が決まる、TypeScript が出来た

2022/11/27(日) 13:49:08.40

もしも使ってはいけないのなら
そんな演算子がなぜ実装されているのでしょうね

2022/11/27(日) 13:57:27.72

>>277
ツッコミどころがちらほら
>obj_1が配列で、obj_2がオブジェクトとか、その逆とか
これがtrueを返すケースある？

>>278
使ってはいけないということはない
バグの温床になりやすいから避けた方が賢明という意味合い
goto使うなとかと同じ話

2022/11/27(日) 13:58:48.05

>>277
だれがそんな組み合わせを考えるの？
コンパイラとかの話？

2022/11/27(日) 20:28:50.54

>>277は組合せ爆発とかTypeScriptとか言い出す前にまずこれを10回読んだ方がいい
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality

2022/11/27(日) 20:57:46.07

>>281
そいつrubyガイジという名前の有名な糖質だから相手しないほうがいいよ

2022/11/27(日) 22:26:59.14

>>282
あーあれか
Rubyの話ししてないから気づかなかった

2022/11/28(月) 01:09:53.30

var DSP = prompt("ポイントを移動させる距離を入力してください（" + "" + R1[RUL] + "）", RULfn(SUB, "pt", R1[RUL]));
if(!DSP || isNaN(DSP)) return false;

プロンプトに入力される数字を＋2やー3など数字に＋かーが必ず付いたものに限定したいのですが、何と書けばいいでしょうか？
if(～)return false;の～の部分です
数字のみは不可です(＋かーが必ず付いていないと)
2行目を変更しても3行目として追加しても、どちらでもいいです

2022/11/28(月) 02:25:56.20

>>284
この式で、先頭が - または + で始まり、1文字以上の数字が末尾まで並んだ文字列の場合に真になるはず。

DSP.match(/^[¥-¥+]¥d+$/)

そうじゃない文字列を判別したいなら ! で否定すればいい。

2022/11/28(月) 11:12:07.95

>>285
ありがとうございます。
やってみます。

2022/11/28(月) 11:50:30.77

/^[\-\+]\d+$/.test(DSP)
のほうが返り値がtrue/falseだからifの条件の用途ではより適切だと思う

2022/11/28(月) 11:58:03.03

>>287
これをそのまま
if(～)return false;の～の部分に入れたのでいいのですか？

2022/11/28(月) 13:15:50.86

>>288
>>285 も言ってるけど、!付けてな

2022/11/28(月) 14:05:28.49

>>289
ありがとうございます。

2022/11/28(月) 16:27:54.36

2022/11/28(月) 16:54:53.78

>>291
ということを十数文字の文字列で表せる正規表現というのは本当に便利だな

2022/11/28(月) 19:15:12.40

>>291
すごいですね
普通に書くとこれだけ必要なのか…

**291** (ﾜｯﾁｮｲ 214f-emCW [180.0.191.133]) · 2022/11/28(月) 19:27:13.32

Ruby なら、もっと簡単に書ける

def checkNumberString ( inputString )

inputAry = inputString.chars # 文字列を配列にする
return false if inputAry.length < 2 # 2文字未満

firstChar = inputAry.shift # 1文字目を取り除く

case firstChar
when "+", "-" # 処理なし
else
return false # 1文字目が、+/- ではない場合
end

# 2文字目以降のすべてが、数字かどうか
zeroToNine = ( '0'..'9' )
res = inputAry.all? { |char| zeroToNine.include?( char ) }

return res
end

testAry = %W(#{} + -0 +019 🌕には𩸽 -9🌕には𩸽)
#=> ["", "+", "-0", "+019", "🌕には𩸽", "-9🌕には𩸽"]

p results = testAry.map{ |str| checkNumberString( str ) };
#=> [false, false, true, true, false, false]

2022/11/28(月) 20:48:23.47

いよいよ正体現したか
都合の悪いツッコミは無視して頼まれてもいないのにRubyの押し売り

>>293
そんなわけで以降こいつはスルーで

2022/12/04(日) 21:34:23.67

条件A、B、Cがあってどれか1つがtrueの場合だけ動作させたいのですが、動作させない場合returnするif文はどう書けば一番シンプルなんでしょうか？

A…true、B…false、C…false
A…false、B…true、C…false
A…false、B…fslse、C…ture
の3つの場合だけ動作させます

それ以外をreturnさせるif文です

2022/12/04(日) 21:49:59.33

動作させたい3つの場合、それぞれ違う関数にジャンプさせて違う処理をさせたいです。
switch文の方が良いのでしょうか？
それでどれにも当てはまらない場合、defaultでreturnとすれば

2022/12/04(日) 21:52:00.92

>>296
複数 true は return ってこと？

2022/12/04(日) 21:58:26.26

if(!(A or B or C))return 0;

2022/12/04(日) 21:59:32.16

X = (A ? 1 : 0) + (B ? 1 : 0) + (C ? 1 : 0);
if (X != 1) return;
if (A) funcA()
else if (B) funcB()
else funcC();

2022/12/04(日) 22:00:38.95

switch((A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)){
case 1:
// Aの処理
break;
case 2:
// Bの処理
break;
case 4:
// Cの処理
break;
default:
return;
}

2022/12/04(日) 22:13:43.95

if (a + b + c != 1) return

2022/12/04(日) 22:16:21.90

flag=true;
if(A and flag)[a();flag=false;]
elseif(B and flag)[b();flag=false;]
elseif(C and flag)[c();flag=false;]
elseif(!(A or B or C) and flag)[return 0;]
else[error();]

2022/12/04(日) 22:21:13.15

>>296
「一番シンプル」と思い描いている条件をもう一段ブレイクダウンするとどうだ？
コードが短いのがいいのかわかりやすいのがいいのかはたまた直行性が高くて
条件の追加やメンテが楽なのがいいとか。

2022/12/04(日) 22:24:22.10

難しいよね
昔はコードを短く、処理負荷を軽くするのかウィザードと呼ばれたけど
今は他人にも自分にも分かりやすく、整備性があるのかとかも大事

2022/12/04(日) 22:28:43.81

a=true ; b=false ; c= false;

([a,b,c].reduce((s,e) => s+e, 0)!=1)

2022/12/04(日) 22:29:04.47

>>304
それではわかりやすいのでお願いします

2022/12/04(日) 22:29:51.99

>>299
これだったら1行ですか

2022/12/04(日) 22:31:41.03

>>302
これが単純でわかりやすいかな？

2022/12/04(日) 22:33:49.28

>>308
一行で書きましたが、それぞれの処理が
できない書き方になりますね

2022/12/04(日) 22:34:59.34

>>301
これにしようかな？
(A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)の部分の意味を教えてください

2022/12/04(日) 22:48:27.13

([false,false,false].filter(e=>e)).length→
0
([false,false,true].filter(e=>e)).length
→1

([false,true,true].filter(e=>e)).length
→2

([true,true,true].filter(e=>e)).length
→3

2022/12/04(日) 22:59:38.08

>>311
A ? 1 : 0 は三項演算子、A が真なら 1に、偽なら 0 になる？
| はビット毎の or

A, B, C ⇒ (A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)
---
F, F, F ⇒ 0
T, F, F ⇒ 1 // Aのみ
F, T, F ⇒ 2 // Bのみ
T, T, F ⇒ 3
F, F, T ⇒ 4 // Cのみ
T, F, T ⇒ 5
F, T, T ⇒ 6
T, T, T ⇒ 7

2022/12/04(日) 23:14:59.45

こんな所で質問するくらいなら、if文3行書けば良いだけなんだし
自分で考えてない事を後から見ても分からないのだから無意味なんだよね

2022/12/04(日) 23:40:58.37

スマホで画像をフリックしてフリックした方向に画像を滑らかに移動させて
徐々に移動速度が落ちて止まるようなのはどうやって作ればいいですか？

2022/12/05(月) 02:12:30.53

>>313
ありがとうございます
なかなか難しいですね

2022/12/05(月) 12:51:22.46

3つの条件の組合せ爆発が起こる、2 ^ 3 = 8 通りだから、かなり難しい

普通は、条件の組合せ爆発は起こらない

例えば、1～10 の内のどれか1つを選択する場合など。
もし、1を選んだら、2～10は選ばれない。
排他条件になるので単純

君の条件は排他条件ではないので、
すべての組合せ爆発が起こるので、かなり難しい

2022/12/05(月) 13:04:08.86

冗長なコードを書いても処理に1秒もかからない
何百行もある市販のプログラム書いてるわけじゃないし
これでいいのかな？

2022/12/05(月) 13:28:02.61

組み合わせ爆発言いたいだけだろ。
組み合わせ数自体は多くなるけど、組み合わせる操作そのものは組み合わせる数に単純比例。
3入力なら3回の組み合わせ操作で8通りの結果が得られ、今回のケースならその組み合わせのうち3種に反応するだけのこと。
100入力なら100回の組み合わせ操作で1.27x10^30通りの結果が得られ、その中の100種に反応するだけのこと。

2022/12/05(月) 13:31:45.80

既に幾つも正解や技法が出てるしな

2022/12/05(月) 15:12:43.50

大袈裟に語るバカが現れてワロタｗ

2022/12/05(月) 20:09:24.63

>>315
自作でやるならtouchmoveイベントかなあ
でもライブラリを探して使う方がはるかに簡単
フリック　ライブラリ　とかで検索して好きなの使えばいいと思う

2022/12/05(月) 20:58:33.57

んでいろんなライブラリを寄せ集めてページサイズが JS だけで MB単位になるのね

2022/12/05(月) 22:13:18.07

すいません。
各<button>要素のkeyクラスに対して、背景色をつけたい。

[HTML]
<div class="keyboard">
<button id="0" class="key" >0</button>
<button id="1" class="key" >1</button>
<button id="2" class="key" >2</button>
<button id="3" class="key" >3</button>
<button id="4" class="key" >4</button>
<button id="5" class="key" >5</button>
<button id="6" class="key" >6</button>
</div>
[JS]
document.getElementsByClassName("key").style.backgroundColor = 'skyblue';

これでエラーがでるのだが。何が勘違いしていますでしょうか？