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

2021/11/10(水) 15:24:24.80

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

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

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/

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

2022/01/17(月) 21:02:08.36

>>351
IntersectionObserver

2022/01/17(月) 23:24:28.34

「javascript スクロールしたら表示」で検索！

jQuery のscrollTop() を使うのかな？

2022/01/17(月) 23:52:07.20

>>352-353
どうもです。

>>353
一応それやってみてるんですけど、その方法だと対象のセレクターが複数ある時に使えなくて・・・

2022/01/18(火) 16:54:34.98

ユーゲンガルグ関数がわからん。

2022/01/18(火) 17:00:08.36

めちゃくちゃ素人質問で申し訳ないんだけど複数のbuttonがある状態で押されたボタンのvalue要素を取得する事ってできる？
他との問題でボタンにidを付与出来ないからclassとnameを使ってなんとかしようとしてたんだけどサッパリわからん……

2022/01/18(火) 18:05:16.94

>>356
event.target.value

2022/01/18(火) 18:14:12.29

>>356
this.value

2022/01/18(火) 19:33:28.72

javascriptでマウスクリックできますか？

2022/01/18(火) 20:52:58.76

>>359
ボタン等の特定要素にはclickメソッドがある
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/click

clickイベント発火でよければ
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent

2022/01/18(火) 22:37:22.43

>>354
>対象のセレクターが、複数ある時に使えなくて

HTML,CSS,Javascript　スクロールしたらふわっと表示(jQueryなし）
https://notetoself-dy.com/javascript-scroll/

このサイトでは、すべてのup クラスが付いた要素を、
1つずつループして、show クラスを付けている

<div class="up op">表示1</div>
<div class="up op">表示2</div>

2022/01/20(木) 21:45:57.61

javascriptで特定のクラス内の文字列をカットしたいです。
.containerの子要素である、.textをターゲットにしたいです。

しかし、container外にも.textがある可能性も考えられます。
ターゲットをcontainer内に絞るには、どんな関数を組めばいいでしょうか？
https://jsfiddle.net/bgegg/gf324bha/2/

2022/01/20(木) 22:05:50.35

function textCutting(selector) {
const limited_number = 7;
document.querySelectorAll(selector).forEach(node => {
node.textContent = node.textContent.trim().substr(0, limited_number);
});
}

textCutting("#container > .text");

2022/01/21(金) 19:52:13.30

>>363
ありがとうございます。返信忘れてました。

引数にcontainerを入れておきたいのですが、クラスである場合もあります。
クラスかidどちらでも取ってこれる関数ってありましたか？

2022/01/21(金) 19:59:06.53

>>364
釣りなのか?

2022/01/21(金) 20:07:10.92

>>364
コードの関数名でぐぐって調べないからそういう質問がでてくる >querySelectorAll

2022/01/21(金) 20:35:43.67

そうでした　すみません

上の例でいうselecterは親要素のセレクタのことだったんですね

2022/01/21(金) 21:49:18.45

一次配列をmatchメソッドみたいに正規表現で検索して、適合するすべての値を返すのってどう書けばいいんですか？

[ あ,い,う,え,お,あか,いし ]　←この配列を/[あい].*?/で検索して[ あ,い,あか,いし ]みたいな結果を得たい
joinメソッドで文字列化してmatchメソッドつかわずに「一次配列を検索」したいんです

2022/01/21(金) 21:55:09.36

>>368
["あ","い","う","え","お","あか","いし"].filter(s => /[あい].*?/.test(s));

2022/01/21(金) 21:57:35.84

>>368
filterとtest

2022/01/21(金) 22:12:34.42

>>369
>>370
おおおお！ありがとうございます助かりました

2022/01/22(土) 14:09:45.81

要素内から複数の要素（例えば同じクラス名を持つ要素）などを取ってくる場合、htmlcollectionとnodelistのどちらを使うんでしょうか？
どちらということはなく、nodelistの下位にある構造がhtmlcollectionかなとも考えています。

2022/01/22(土) 14:12:22.41

>>372
liveかそうでないかを意識すれば、どちらでも良い
プロパティ、メソッドも少し違う

2022/01/22(土) 14:44:09.28

https://ideone.com/vndbec
https://i.imgur.com/8k3fQ2F.jpg

まず親要素を取り、その後子要素にアクセスしようとしたんですが、foreachは使えないみたいです。
childrenが配列になっていないからかなと思うんですが、インスペクタ見ると配列にはなっているようですが、なぜでしょうか？

>>373
ではhtmlcollection使うことにします。なんとなくとっつきやすかったので。

2022/01/22(土) 14:58:17.72

>>374
HTMLCollectionは配列じゃない
forEachも持ってない
使えるメソッドとプロパティを確認すること

2022/01/22(土) 15:34:49.54

childrenに格納されているhtmlCollectionにはforEachメソッドがないので、下記のように書く必要がある
[...children].forEach()

2022/01/22(土) 15:50:34.18

>>375
nodelistに使うものですよね。ありがとうございました。

>>376
ふつうにlengthとってforで回してもいいんですよね。
ソッチのほうが直感的にわかりやすいかなと。

2022/01/22(土) 15:56:19.54

>>376
これは何という記述ですか？
ただの、配列化でしょうか？

2022/01/22(土) 16:13:03.92

>>378
スプレッド構文

2022/01/22(土) 16:45:48.19

>>379
どうも、見慣れない記述だったので。
こういうのはふつうにforループ回したほうがわかりやすいんでしょうか？
javascript特有の記述というのが難しくて

2022/01/22(土) 16:57:04.97

特別な理由がない限り、letやforの利用を控えることをオススメする
無意味な状態や副作用をできるだけ排除する構成を心がけよう

2022/01/22(土) 17:05:10.48

>>380
あなたは「何を使うべきか」よりも「どんな機能なのか」を把握することから始めた方が良い
NodeListとHTMLCollectionの選択でHTMLCollectionを選択したかと思えば、HTMLCollectionを理解してないから使いこなせない
理解する前に選択するからそうなる

俺はHTMLCollectionではfor文を使ってるが、特徴を理解していれば何の問題もない
NodeListならfpr-ofを使ってもよい
理解さえしていれば、自ずと選択が出来る
NodeList、HTMLCollection、スプレッド構文、..,etc を理解してから悩むべきだ

2022/01/22(土) 17:07:49.25

×　NodeListならfpr-ofを使ってもよい
○　NodeListならfor-ofを使ってもよい
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of

2022/01/22(土) 17:17:07.24

>>381
普通のforで回すよりfor...inとかfor...ofで回した方が要素すぐ扱えて記述少なくて済むのは置いといて
letはvarより使わない方が良いの？
それともforのインデックス用の i を使わない方がシンプルで良いという限定的な条件での話？

2022/01/22(土) 17:27:40.96

>>381
副作用の話は俺も分からなかった
for文に副作用があるとは思えないが

2022/01/22(土) 17:37:01.92

>>384
現状のvarは「互換性のために残されている」のであって、利用禁止が大前提
その上で、どうしてもconstにできない特別な理由がある場合にだけletを使うってこと

さらにその延長で、forについても使わずに済むなら使わない方が良いってこと

2022/01/22(土) 17:56:17.90

letもforもどんどん使いなさい

2022/01/22(土) 17:59:22.62

理由不明な禁止ルールを受け入れるようになると、赤の他人の意見を鵜呑みにしておかしなことになるからお勧めはしない
非推奨理由を読んで、受け入れるか判断するのがいいと俺は思う

2022/01/22(土) 19:12:13.08

>>386
なるほど了解。
普通のforで回して処理するよりsomeとかreduceとかのほうが何の処理しようとしてるかわかりやすいしね。
varはブロック内からでもグローバル変数になるからどこから変数内容変更されてるか分かりにくくなり易いから良くないね

2022/01/22(土) 19:44:53.36

>>382
はい

2022/01/22(土) 19:52:02.18

ややこしいのでfor文使うようにします(´・ω・`)、、、

2022/01/22(土) 19:57:06.18

あっ、for of いいですね。
htmlcollectionでなぜforeachが駄目なのか謎ですが。

2022/01/22(土) 20:26:37.27

vscodeについて質問です。
javascriptの補完は完全ではないのでしょうか？
以下のコードのtextContentの部分は候補に出ません。

https://ideone.com/VWu28k

2022/01/22(土) 20:44:09.65

ここはvscodeスレじゃない
一応答えておくとjavascriptは動的型付けなので常に補完が出る訳じゃない
そういうのを求めてるならtypescriptを使う

2022/01/22(土) 20:47:52.03

今回は「使えないみたいです」って聞き方ではないのねw
MDNをよく読んだ上で、実際にどう動くのかをブラウザのコンソールで繰り返し施行するといい

2022/01/22(土) 21:59:01.76

>>392
HTMLCollectionはArrayのPrototypeを持ってないからforEachはつかえない。
HTMLCollectionでforEachを使いたいなら、Array.Prototype.forEach.callとか。

2022/01/23(日) 09:03:46.77

>>396
どちらも配列だと思うんですが、なぜhtmlcollectionだけ使えないのかが分かりません

2022/01/23(日) 09:04:54.18

javascriptを書くとき、関数名などに続けて波括弧を書いたほうがわかりやすいと思いますか？

function func(){

console.log("hoge");

}
以下のようにしたほうが構造が分かりやすくないですか？

function func()

{

console.log("hoge");

}

2022/01/23(日) 09:10:19.94

JavaScriptで配列とはArrayのこと
"配列っぽい"ことと"配列である"ことは全然違う

逆に聞くけどどうやって両方配列であると判断したの？

2022/01/23(日) 09:20:24.21

>"配列っぽい"ことと"配列である"ことは全然違う

初めてやる人にはそんなこと思いもよらないだろうしな

2022/01/23(日) 09:21:45.33

>>394
そういうものなのですか。
補完が出ないとちと不安で

2022/01/23(日) 10:15:35.55

>>398
配列とは new Arrayもしくは [] のこと
new ArrayでforEachを使えるのはプロパティ参照時に Array.prototype.forEachを参照するから
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
プロトタイプチェーンを理解すべき
https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

2022/01/23(日) 10:16:08.20

>>399
いわんとすることは分かるが、厳密にはArrayは配列ではない
new ArrayをArrayと書くと誤解を招く
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

2022/01/23(日) 11:26:44.19

>>399
https://youtu.be/sg6pJzAZbqk?t=1504

2022/01/24(月) 05:35:59.89

>>362
.container の子要素(子孫を含めない・直下のみ)である、.text は、.container > .text

親と子を、別々に取得するなら、jQuery で、

<div class="aaa">
<div class="xxx">ああ</div>
<div class="yyy">いい</div>
<div class="xxx">うう</div>
</div>

<div class="aaa">
<div class="xxx">111</div>
<div class="xxx">222</div>
</div>

const parents = $( '.aaa' )
// 子の中で、xxx クラスのものだけを取得する
const children = parents.children( '.xxx' )

children.each( function( ) {
console.log( $( this ).text( ) )
} );

これで、ああ・うう・111・222 が表示されて、
「いい」だけは表示されない

初心者は、素のJavaScript(JS)で書かずに、jQueryを使った方がよい。
JSで書くと、可読性も悪いし、バグってばかりで時間を損する

2022/01/24(月) 07:11:58.20

ハゲは、素のjQueryで書かずに、Javascript(JS)を使った方がよい。
jQueryで書くと、プログラミングの本質が理解できていないままだし、ハゲてばかりで毛を損する

2022/01/24(月) 17:37:07.00

初心者こそjQuery使わずに書くべき

2022/01/25(火) 18:13:09.23

element.addEventListner(
"click",
function(e){
clearInterval(timer_id);
var timer_id = setInterval(test_func,1000);
}
);
このようにクリックしたとき前回起動したsetIntervalを削除して
新しいsetIntervalをセットしたいんだけど、前回のtimer_idが取得できないのでうまくいきません
どのようにすればできますか？

2022/01/25(火) 18:53:59.98

>>408
handleEventプロパティを持つオブジェクトにタイマーidを保存する

2022/01/25(火) 20:54:59.74

JavascriptってJavaより簡単って聞いたけど、html絡んでくるから難しくないですか？

2022/01/25(火) 21:56:30.40

>>408
下記のようなグローバルオブジェクトを定義しておいて、その要素として保持しよう

const timer = {}:

2022/01/25(火) 22:43:16.96

>>409>>411
できましたありがとー

また質問だけどsetIntervalとwindow.scrollByを使って自動スクロール中に
手動でスクロールするとclearIntervalで自動スクロールを止めるようにしたいんだけど
自動スクロールも手動スクロールもaddEventListner("scroll",function(e){})が発動して
区別をつけることができないんだけどどうすればいいですか？

2022/01/25(火) 23:01:22.01

>>410
WebAPI使わなければいいんでない？

2022/01/26(水) 01:23:00.34

>>412
e.isTrusted で区別できるかも

2022/01/26(水) 12:30:28.07

>>414
やってみたけど自動でも手動もでtrueだったので判別できませんでした

2022/01/26(水) 12:40:07.38

>>412
自動スクロール中のフラグを作成して、フラグ管理すれば良い

2022/01/26(水) 13:12:16.31

>>412
wheel, mousedown、keydownイベントで止めるとか

2022/01/27(木) 11:57:20.38

>>417
mousedownはオート・スクロール・モードのことか
https://atmarkit.itmedia.co.jp/fwin2k/win2ktips/759autoscroll/autoscroll.html

2アクション必要だから、モード検知がやや複雑化しそうだな…

---
自動スクロールを検知して、自動スクロール以外を手動スクロール扱いする方向で考えてた
これなら、キーバインド変更されても対応出来る

2022/01/29(土) 02:18:01.02

oninput="value=value.replace('；','1')"

置換元が特定の全角記号（￥：；＠等）の場合、置換先の文字が2回入力されます。
書き方の問題ですか？回避方法はありますか？

chromeとedgeで発生しました。
ieでは発生しませんでした。

2022/01/29(土) 03:13:10.90

KeyboardEvent.isComposingで変換中か判定したらいい

<input id="test">

const elm = document.querySelector("#test");
elm.addEventListener("keyup",(e)=>{
if(!e.isComposing){
elm.value =
e.target.value.replaceAll("；","1")
}
})

2022/01/29(土) 09:47:04.60

>>410
JavaScriptは初心者向けの簡易言語。

2022/01/29(土) 23:21:16.05

一応入門書を一通り終えたのでelectronでGUI作ろうと思ったら、予想以上に難しくて挫折した。
electron使いの人いる？
いたらどれだけのレベルにならないと作れないか教えて。

2022/01/30(日) 00:53:12.46

>>419
Node.js で実行したら、1回しか置換されない

inText = 'あい；；ab；；12';
outText = inText.replace('；', '1');

//=> あい1；ab；；12

2022/01/30(日) 02:04:42.24

>>422
俺はelectron使いじゃないけど今本屋に並んでる2022年3月号の日経ソフトウエアでElectronでデスクトップアプリ開発特集載ってたよ

2022/01/30(日) 12:10:56.23

>>420
これだと普通に置換できますね

>>423
環境によるんですかね

結局こうしました。半角の数字と半角のコロンだけ表示。
.replace(/[０-９：]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/[^\:\d]/g,'').replace('::',':');
最後に[::]→[:]
変なやり方だと思うけど:を二回使う事は無いのでとりあえずOK

replaceどうのこうのではなくて、oninputが2回実行されてるみたいです。
oninput="value=value + 'あ'"
特定の全角記号だと「；あ；あ」、全角英字なら「；あ」

2022/01/30(日) 12:57:51.16

querySelector
で帰ってきたelementのメソッドでcloset()だとRoot方向にしか検索できませんがchild方向にelementを検索する方法はありますか？

2022/01/30(日) 13:01:07.63

chiled方向に検索するのがquerySelectorじゃないのですか？

2022/01/30(日) 13:06:33.56

>>427
documentだけじゃなくてelementに対してもquerySelectorメソッドつかえるんですね。ありがとうございます

2022/01/30(日) 13:12:27.53

>>428
必要としてるのは :scope か？
https://developer.mozilla.org/ja/docs/Web/CSS/:scope

2022/01/31(月) 12:50:53.75

excelの配列数式などでAND OR の代わりに * + 等を使ったりしていましたが
javascriptの条件式のなかに&&の代わりに*を使った場合、
違いはありますでしょうか。
*だと左辺がtrueであっても右辺も評価するなどするのでしょうか。

2022/01/31(月) 13:20:30.75

>>430
そんなもん手元のコンソールに打って直接確認した方が早いと思うけど、そうしたくない理由でもあるの?

2022/01/31(月) 13:34:41.41

だってただの乗算・加算なのだから一連の計算全部しないと結果は出せないもの
文字列だった場合バグの温床になりかねないので素直に論理演算子使っとけ

2022/01/31(月) 15:13:48.28

ありがとうございます

2022/02/01(火) 14:41:29.69

> if(undefined){console.log("undefined is true");} else {console.log("undefined is false");}
undefined is false
undefined

> if(!undefined){console.log("!undefined is true");} else {console.log("!undefined is false");}
!undefined is true
undefined

> if(true+console.log("exec")){console.log("true"); }else{console.log('false')}
exec
false
undefined

> if(console.log("exec")*console.log("exec2")){console.log("true"); }else{console.log('false')}
exec
exec2
false
undefined

論理演算子的な打ち切りはしてないね。普通に算術演算子だわｗ

2022/02/01(火) 14:46:27.83

普通に手打ちしてたら、空白とかクォートとかセミコロンの打ち方に全然整合性ないでやんの、俺ｗ

**231** (ｽｯｯﾌﾟ Sd33-aqeu [49.98.171.121]) · 2022/02/04(金) 16:32:44.06

■質問テンプレート
【環境】Android10 F-51A
Chrome 93.0.4577.62

【何をしたのか】セーブ（サンプルコードの一番下の方で実行）を2回以上実行すると、ロード出来なくなる。

【エラーメッセージ】出ません。

【期待する結果】セーブ、ロードが正常に行われるようにする。

【サンプルコード】
https://ideone.com/BJQ4qV

懲りずにお邪魔します。
解決案など思いついた方いらっしゃったら、よろしくお願いします。

今回でアドバイスを得られない、あるいは私の理解が及ばなかった場合、ココナラなどの利用も検討しています。
解決案は知らんけど、有償で良いならこのサイトがおすすめ、みたいな情報も頂けたら嬉しいです。

2022/02/04(金) 17:05:32.54

全然見てないしよくわからんけど、なんでセーブとロードを繰り返してるの？

2022/02/04(金) 17:14:57.96

>>436
1. 非同期の基礎を勉強する
2. コールバックAPIをPromisifyしてawaitする

2022/02/04(金) 17:20:39.40

>>436
書き込み、読み込み後にデータベースを閉じてないから2回目のdeleteDatabaseが出来ずに永遠に待ってる
データベースである必要ないならストレージ使えってば

**231** (ｽｯｯﾌﾟ Sd33-aqeu [49.98.171.121]) · 2022/02/04(金) 17:21:33.29

>>437
最初のセーブでは、ロード成功するんです。
2回目のセーブをすると、ロードに失敗するんです。
一度目の処理では成功してるけど、二度目で失敗してるのを見て貰うために、今回のコードでは繰り返しにしました。

2022/02/04(金) 17:22:14.91

まず変数はletかconstを使って明示的に宣言する

あと非同期処理の勉強をした方がいい
url先のコードは処理が行われる順番を考慮してない
コードで例示すると
consｔ elm ＝ｄocument.querySelector("#input")
ｌet ｍail;
elm.onｉnput = (e) ＝> {
mail = e.target.value;
}
console.ｌog(mail);
みたいなコードを書いてる
oninputはすぐに呼び出されないのに先にmailを参照しているからバグる
他にも色々ありそうだけど自分がパッと見つけられた間違いはこれだけ
(文字が全角になってるのはCloudflare対策)

2022/02/04(金) 17:23:09.66

変数の宣言方法と変数のスコープについても学んで下さい
”use strict”;使うように

**231** (ｽｯｯﾌﾟ Sd33-aqeu [49.98.171.121]) · 2022/02/04(金) 17:27:11.67

>>439
実現出来るかわからないのですが、理想通りに事が進むと、主にマップデータで結構容量食いそうで心配なんです。
そういう心配事は取っ払ってから制作したいもので。転ばぬ先の杖って言うんですかね。

**231** (ｽｯｯﾌﾟ Sd33-aqeu [49.98.171.121]) · 2022/02/04(金) 17:27:20.65

みなさま

**231** (ｽｯｯﾌﾟ Sd33-aqeu [49.98.171.121]) · 2022/02/04(金) 17:28:39.30

失礼しました。

予想以上に早く、また親切にアドバイスして頂けて嬉しいです。

本当にありがとうございました。

**231** (ｽｯｯﾌﾟ Sd33-aqeu [49.98.171.121]) · 2022/02/04(金) 17:36:54.98

今回躓いたところは完璧に解決しました。

皆様、本当にありがとうございます。

2022/02/04(金) 17:37:47.88

>>443
ライブラリ使えって散々言われてたじゃん
使いたくないとか言ってたけど今ライブラリ使ってないプログラムなんてほとんどないぞ

2022/02/04(金) 23:04:44.52

eval関数なしで
テキストボックスに入力されている
5*6*4+56/24のような計算をするにはどうすればいいでしょうか？

2022/02/04(金) 23:19:30.94

再帰下降構文解析でググれ

2022/02/05(土) 00:01:28.09

eval is evil

2022/02/05(土) 15:51:37.55

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

ググって見たんですが、かなり難しいですね、知らないコードも多くて挫折しそうです