+ 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/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
ありがとうございます

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

2022/02/06(日) 14:13:43.12

>>448
https://qiita.com/mori-bito/items/8cd64dab6527a6e93355

2022/02/07(月) 07:37:13.78

グッドモーニングショーで未だにファックス使ってコロナ集計してやんのｗって言ってましたけど
特定サイトで入力した個人情報や体調情報などをQRコード化して読み取りパスを設定し
その情報を診療所などで携帯で読み込むと、自動的に院内システムと保健所など供給機関にJSONで送情されるようなの
あっという間にできそうなんだけど
セキュリティ面感がなければ2時間くらいでできそう

2022/02/07(月) 08:42:42.57

>>453
院内システムは普通インターネットに疎通していない。
Drがインターネット使うのも全部、画面のみ転送のリモートデスクトップ。

2022/02/07(月) 08:56:33.13

単機能のシステムなら出来そうだけど
あれもこれもと仕様が膨れ上がって予算もウン十億になり
最終的に使い勝手の悪いガラクタになるのがオチ
https://wedge.ismedia.jp/articles/-/22205?layout=b

2022/02/07(月) 12:51:27.00

規格を統一するのが難しい

医療機関は、各SIer でバラバラだろ

2022/02/08(火) 06:39:24.19

先進諸国ってシステム規格は統一してるん？
なんで日本だけファックスよ？

2022/02/10(木) 18:43:10.54

firefoxを使ってるんですが
マウスのソフトウェアの左クリックの連射機能を使うことがあって
その際にリンクやボタンを多重クリックを避けたいので
特定のエレメントにイベントリスナーでクリックするとstyle.display = 'none'にするようにしたんですが
これが実際に多重クリックになってるかどうかは
どのように判断すればよろしいのでしょうか
ブラウザの開発ツールなどで簡単にわかる方法ありますでしょうか？
それとももう一度同じエレメントにイベントリスナーでクリックした場合
カウンターにインクリメントさせてconsole.logがいいのでしょうか
(この方法も正確に取れているのかは私にはわかりません)

2022/02/11(金) 20:34:20.02

質問させてください

let ar={a:{a1:1}};
console.log(a1); // ①　a1 is not defined

let {a:{a1}}=ar;
console.log(a1); // ②　1

a1を出力したのですが、
①は未定義
②は１が出力されています

どうして①と②の出力結果が異なるのでしょうか？

2022/02/11(金) 20:42:04.99

>>459
オブジェクトの分割代入されるから。

2022/02/12(土) 11:33:13.66

>>459
①のa1はグローバルレキシカルを参照したけど定義されていなかった
②のa1はグローバルレキシカルを参照したらオブジェクトとして登録されていたのでvalueを返した

②は{a:

2022/02/12(土) 11:55:49.55

>>459
>>460が書いてるように3行目は分割代入なんだけど
特にオブジェクトデストラクチャリングと呼ばれる機能
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring

3行目でaとa1という変数が定義される
それ以前はa1という変数が定義されてないからundefined

とりあえずstrictモードを使いましょう

2022/02/12(土) 23:28:01.59

何で理解していないのにこんな書き方して分かりませんって質問しているのだろうかｗ
目的は？

2022/02/13(日) 11:28:11.91

>>462
3行目のaは変数じゃない

2022/02/15(火) 16:00:20.18

JavaScript の配列の要素をすべて削除する
https://qiita.com/niwasawa/items/89e86c0fd85ad4591e1c

arr.length = 0 じゃダメなの？

2022/02/15(火) 16:55:47.25

arr = null
もしくは
arr = []
じゃダメなの？

2022/02/15(火) 20:35:06.19

>>465
いいと思うが、そう思ったなら本人に伝えればいいのに

あと、teratailスレのは誤投稿か？
https://mevius.5ch.net/test/read.cgi/tech/1630107050/304

2022/02/15(火) 20:41:42.47

自分は arr.length = 0 を使う

>>466
arr が let ならそれでもいいけど、const の場合は再代入出来ない

2022/02/15(火) 21:08:32.51

>>468
constなのに長さ0にしちゃっていいの？

2022/02/15(火) 21:10:50.44

>>469
constが禁止するのは再代入
プロパティ変更は禁止しない

2022/02/15(火) 22:48:45.41

>>470
そういう意味ではなく
constで定義している配列の長さを0にするってことは変更不可として定義してる配列なのになぜか0になってるというバグを生みやすいんじゃないか？

2022/02/15(火) 23:01:49.17

>>471
「変更不可」と「再代入禁止」の区別を付けられるようになろう
君のその認識こそ、不具合を生み出す原因になるよ

2022/02/15(火) 23:03:26.68

別に変更不可って意味でconst使わなくないか？

2022/02/15(火) 23:07:54.82

やっぱjavascriptは欠陥言語だよな
定数とオブジェクトでconstの使い方変わるし

2022/02/15(火) 23:20:36.81

ワロスｗ

2022/02/15(火) 23:24:11.41

草

2022/02/15(火) 23:54:38.03

笑

2022/02/15(火) 23:54:58.40

いや

大爆

2022/02/16(水) 00:38:29.63

欠陥言語か？cのconstと同じでは？

2022/02/16(水) 12:21:54.58

Ruby でも、入れ物と各要素は別。
shallow copy と同じ。動的言語は全てそう。
deep copy, deep freeze などは、誰かが作る必要がある

入れ物をフリーズしても、各要素は変更できる

ary = %w(a b).freeze

ary[ 0 ].upcase!
p ary #=> ["A", "b"]

だから、入れ物と各要素の両方を、フリーズする必要がある

ary_2 = %w(x y).map( &:freeze ).freeze
ary_2[ 0 ].upcase! #=> エラー。変更できない！

2022/02/16(水) 22:54:05.43

スレ違いも守れない身勝手なクズ

2022/02/17(木) 22:37:18.01

<input type="button" value="aaaaaa" id="test1">
<br>
<input type="button" value="bbbbbb" id="test2">

<スクリプト>

var id_list = ["test1","test2"];

for(let n=1;n<=id_list.length;n++){
var elm = document.getElementById(id_list[n-1]);

elm.addEventListener(
"click",
function(e){
alert(elm.value);
}
);
}
</スクリプト>

aaaaaaボタンをクリックしてもbbbbbbと表示されてしまいます
どこが間違っているんですか？

2022/02/17(木) 23:03:32.28

>>482
スコープまわりの認識とか？
var を使わずに const, let 使えば意図した通りに動くはず

2022/02/17(木) 23:21:36.38

alert (elm.value)をalert(e.currentTarget.value)に変えたればおけ

2022/02/17(木) 23:28:41.09

alert(this.value)
または
const elm = document.getElementById(id_list[n-1])

2022/02/17(木) 23:31:46.94

これから新規でスクリプト書くなら、特別な理由がない限りvarは使わずletかconstだけ使うほうが、変なミス起こらなくていいと思う

2022/02/18(金) 10:44:02.23

初心者は、jQuery を使えばよい

分かりにくい、this の意味も変えてある

2022/02/18(金) 11:35:27.02

jQuery で、ボタンの外側・親にイベントを付けて、親で、子のイベントをキャッチできる

<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>

$( function ( ) {
// 外側・親にイベントを付けて、親で、子のイベントをキャッチする
$( '#btn-wrap' ).on( 'click', function ( event ) {
const value = $( event.target ).prop( 'value' )
console.log( value )
alert( value )
} );
} );

または、共通のclass を付けて、そのクラスだけのイベントをキャッチできる

// .BtnA のみ
$( '.BtnA' ).on( 'click', function ( event ) {
const value = $( this ).prop( 'value' )
console.log( value )
alert( value )
} );

**488** (ﾜｯﾁｮｲ c62c-bORD [153.136.94.40]) · 2022/02/18(金) 12:16:47.94

>>488
に追加

セレクターをカンマで区切れば、A またはB でも出来る

// .BtnA or .BtnB のみ
$( '.BtnA, .BtnB' ).on( 'click', function ( event ) {
const value = $( this ).prop( 'value' )
console.log( value )
alert( value )
} );

2022/02/18(金) 12:23:50.32

>>483-485
やってみますありがとー

2022/02/18(金) 12:38:42.82

イベントのバブリングを学ぶにはいい機会（丁度よい題材）だとは思うけど、「初心者に向けて」というエクスキューズでもって今時jQueryを勧める態度には悪意に近いモノを感じる

2022/02/18(金) 21:37:34.77

今後廃れていくだけだもんな
新たに学習する必要はないわな

2022/02/19(土) 09:29:33.08

こんにちはこのたびはお世話になります
Javaスクリプトの質問ですが
いろいろ煮詰まっておりさしあたり
変数のスコープとオブジェクトのことがよくわからないでして
変数は関数内のみのローカルありますよね
でオブジェクトも
var obj=new obj()
といったインスタンツなら変数とおなじでローカルだったりグローバルだったりするんですかな
まずは以上よろしくお願いします

2022/02/19(土) 09:52:37.76

もうvarは使うな以上

2022/02/19(土) 12:07:18.29

バーよりレッツを使うんですね承知しました。
ブラウザ画面内に表示されたDOMオブジェクトは常にグローバルなんですかね
何もかもがわからん

2022/02/19(土) 13:34:02.57

window.document.body, window.document.head など、
windowオブジェクトはグローバル

windowが無くても、document.head でも同じ

window.document.head == document.head
//=> true

例えば、Pjax で、ページを作っている場合、
ページ遷移したように見えても、window に追加したオブジェクトは初期化されない。
そのまま残っている

ページの一部分しか変更されていないから。
ページをreload していないから

2022/02/19(土) 16:01:34.02

Pjax is なに

2022/02/19(土) 18:28:21.70

>>491
むしろ悪意そのものでしょ

2022/02/19(土) 18:38:03.12

参考書に、Javaスクリプトにはクラスの概念はない、て書いてあるんですが
もしかして情報が古い？

2022/02/19(土) 18:39:00.10

はい

2022/02/19(土) 18:43:12.48

その本で勉強するのやめたら
varを使ってるのもそのせいだろうし

2022/02/19(土) 19:02:00.92

>>499
「クラスの概念がない」は正しい
JavaScriptはプロトタイプベースでclass文は糖衣構文だからな

そういう意味で書かれているのなら正しいといえるが、書籍を持ってない人が文脈を読みとれるはずもない
書籍の正しさを保証するのはその書籍を持っている人だけ

2022/02/19(土) 19:05:31.85

まあvar使ってる時点でES15以前だから読む価値なしですね

時間の無駄なんでその本を投げ捨てろ

2022/02/19(土) 19:06:29.96

>>499
あと、正しさを気にするなら、カナ交じり用語を使うのを止めた方がいい

・Javaスクリプト
・バー
・レッツ

2022/02/19(土) 21:14:26.70

マジレス…

2022/02/19(土) 22:06:51.12

こんばんはいつもお世話なります
今日でかなり学習は進みましたありがとうございます
さっそく質問ですが
クロッパーJSという便利ライブラリを見つけて解析しております
ところが
fileReaderでダイヤログを出してjpg画像なりを読んでまずは画面にプレビューしますが、
あっ間違えたのテイで再度fileReaderして別の画像を読み込むのですが
プレビュー画面が前のまま変わらないのです
以上よろしくお願いします

2022/02/19(土) 22:16:58.88

>>506
クロームdevtoolでソースcodeを解析してみればいいんじゃないかな
ネタ品質が低くてすまん

2022/02/19(土) 23:27:47.87

クロッパーJSの公式デモページ(エマワトソンの写真のやつ)でImport Image with Blob URLsというボタンは
何度でも写真を読み直しできるんですよ
インスタンスをデストロイがカギとは思うのですが

2022/02/19(土) 23:34:29.04

>>508
デモページのソースをディフってみたら？

2022/02/20(日) 01:15:27.52

クロッパーのことですけんど
なかなか敷居が高いですわ
インタネッツでもたくさんの人が2回目の読み込みをどうするか質問してますね

2022/02/20(日) 03:05:26.93

ふう、なんとかやれましたよ
大儀であつた

**日記帳** (ﾜｯﾁｮｲ 3301-BRhT [126.241.27.53]) · 2022/02/20(日) 16:34:24.33

こんにちは今日も格闘しております
グーグルマップのリーフレットプラグインで、写真を地図に貼り付けています
複数貼った時の処理でまた壁につきあたりました
貼り付け関数で作るインスタンスが「imgovlay」なんですがその名前なら例えばimgovlay.options.cornersってやれば四つ角の座標がとれるですけんど
3枚はったあとからでは1枚目の座標が調べられんとです
これはどんな工夫したらよいのやら
以上よろしくお願いします

2022/02/20(日) 17:20:03.63

日記ならそろそろ個人ブログでも作ってやったら
前にレスくれてる人は無視、相変わらず中途半端なカタカナ表記で聞きたいこともわかりにくいし書いてるコードも貼らない
一応エスパーしとくと、配列でインスタンス全部持っておくだけでは？

**日記帳** (ﾜｯﾁｮｲ 3301-BRhT [126.241.27.53]) · 2022/02/20(日) 17:28:08.35

ジェーンスタイルというアプリでこのスッドレを見ておるますが、タグのあるコードのコピペはできないんですよ

2022/02/20(日) 17:31:05.62

まず最初に>1-2を丁寧に見るといいよ、というか見て
http://ideone.com/
http://jsfiddle.net/

**日記帳** (ﾜｯﾁｮｲ 3301-BRhT [126.241.27.53]) · 2022/02/20(日) 17:50:37.16

はい承知しました
大儀であった

2022/02/20(日) 18:25:51.02

ID:vRC3RkLD0はネタ質問と思ってる
全く面白くないが