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

2023/12/09(土) 17:40:39.92

!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.125
https://mevius.5ch.net/test/read.cgi/tech/1659855460/

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

2024/02/12(月) 15:27:53.80

もうネット使うなよ

2024/02/12(月) 15:53:51.52

Access でいいよ

2024/02/17(土) 10:17:04.46

VBAとC#でちょくちょくアプリ作ってる程度のもんなんですけど
最近VS Code使ってjavascriptの勉強始めたわけですよ
デフォルトの環境で扱ってる限り、typoの指摘が甘くて気づくのに時間かかってしまってつらいです
Visual StudioでC#つかってるとかなり丁寧に指摘してくれるんで助かるんですが
Codeはその辺厳しいですね

Code Spell Checkerを入れてみたんですけど、よさそうな対策は他にありますか？

2024/02/17(土) 10:48:07.30

JSはデフォだとどんなパラメータも持ちうるのでtypoを機械的に見つけにくい言語。
なのでjsdocゴリゴリ書く（もっとやるなら@ts-checkも）かTypeScript使うと良いよ

2024/02/17(土) 14:57:51.18

>>143
ありがとうございます
TypeScriptも視野にいれてちょい調べてみます

2024/02/17(土) 15:05:36.03

>>142
VSと比較するならWebStormじゃなきゃ辛いし
VSCodeのままでもLSPなりで魔改造すれば頑張れるやろ

2024/02/17(土) 17:54:57.60

>>142の言うtypoが具体的にどんなのか気になる
厳しいのはCodeじゃなくてJavaScriptなのを誤解してそう

2024/02/17(土) 18:56:27.31

JSもDataflow Proposalsが導入されたら
普通に使い続けるんだがなぁ

2024/02/19(月) 18:24:10.88

マウスボタンを押しながらマウスを移動させてからマウスボタンを離すと
マウスボタンを離したときにmouseupだけでなくmousemoveも反応してしまうんだけど仕様ですか？
これ知らなくて動作が思うように行かなかった。

2024/02/20(火) 00:12:35.13

手元で試したところmouseup直後に同じ座標でmousemoveが発火してるのを確認
うまく判定して後続処理が走らないようにすれば良さそうではある

2024/02/20(火) 12:26:48.30

>>149
ありがとうございます
そうしてみます

2024/02/20(火) 12:38:34.44

>>148
mouseoverはマウスが何かの要素の上を移動すれば毎回出てくるから
マウスを持ってる限り常に垂れ流し続けるぞ

ドラッグアンドドロップを実装したいなら
イベント(関数発火)が非同期かつ大量に垂れ流しになること前提で組む必要がある

一案としては上のスコープで何個か変数を定義

mousedown -> 直下の要素を掴んでhold変数に放り込む
mousemove -> hold変数に値が入ってないなら即return、座標変数に座標情報を格納
mouseup -> 精算、hold変数と座標変数をnullにする

2024/02/28(水) 10:59:38.09

はじめて、質問させていただきます。

今やってることはリストボックスの行を以下で選択しています。

document.getElementById('xxxx').selectedIndex = n;

PC版ブラウザではうまくいきました。しかし、モバイル版ブラウザでは1行のドロップダウンリストになってしまいます。

https://ja.stackoverflow.com/questions/34627/html%E3%81%AEselect%E3%81%AEsize%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E3%82%821%E8%A1%8C%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C

それで、以下のjqueryの　$("select").fixForSafariMobile(true);　を使ったところ、表示はドロップダウンリストからリストボックスになりましたが、上のselectedIndexが動作しなくなりました。

https://github.com/sylvain-hamel/safarimobile-multiline-select/blob/master/src/safarimobile-multiline-select.js

https://github.com/sylvain-hamel/safarimobile-multiline-select/blob/master/experiments/experiments.html

2024/02/28(水) 11:00:05.73

はじめて、質問させていただきます。

今やってることはリストボックスの行を以下で選択しています。

document.getElementById('xxxx').selectedIndex = n;

PC版ブラウザではうまくいきました。しかし、モバイル版ブラウザでは1行のドロップダウンリストになってしまいます。

https://ja.stackoverflow.com/questions/34627/html%E3%81%AEselect%E3%81%AEsize%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E3%82%821%E8%A1%8C%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C

それで、以下のjqueryの　$("select").fixForSafariMobile(true);　を使ったところ、表示はドロップダウンリストからリストボックスになりましたが、上のselectedIndexが動作しなくなりました。

https://github.com/sylvain-hamel/safarimobile-multiline-select/blob/master/src/safarimobile-multiline-select.js

https://github.com/sylvain-hamel/safarimobile-multiline-select/blob/master/experiments/experiments.html

2024/02/28(水) 11:09:45.91

はじめて、質問させていただきます。

今やってることはリストボックスの行を以下で選択しています。

document.getElementById('xxxx').selectedIndex = n;

PC版ブラウザではうまくいきました。しかし、モバイル版ブラウザでは1行のドロップダウンリストになってしまいます。

https://ja.stackoverflow.com/questions/34627/html%E3%81%AEselect%E3%81%AEsize%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E3%82%821%E8%A1%8C%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C

それで、以下のjqueryの　$("select").fixForSafariMobile(true);　を使ったところ、表示はドロップダウンリストからリストボックスになりましたが、上のselectedIndexが動作しなくなりました。

https://github.com/sylvain-hamel/safarimobile-multiline-select/blob/master/src/safarimobile-multiline-select.js

https://github.com/sylvain-hamel/safarimobile-multiline-select/blob/master/experiments/experiments.html

2024/02/28(水) 11:10:03.68

はじめて、質問させていただきます。

今やってることはリストボックスの行を以下で選択しています。

document.getElementById('xxxx').selectedIndex = n;

PC版ブラウザではうまくいきました。しかし、モバイル版ブラウザでは1行のドロップダウンリストになってしまいます。

https://ja.stackoverflow.com/questions/34627/html%E3%81%AEselect%E3%81%AEsize%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E3%82%821%E8%A1%8C%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C

それで、以下のjqueryの　$("select").fixForSafariMobile(true);　を使ったところ、表示はドロップダウンリストからリストボックスになりましたが、上のselectedIndexが動作しなくなりました。

https://github.com/sylvain-hamel/safarimobile-multiline-select/blob/master/src/safarimobile-multiline-select.js

https://github.com/sylvain-hamel/safarimobile-multiline-select/blob/master/experiments/experiments.html

2024/02/28(水) 11:34:49.79

すみません。5個書き込まれてしまいました。すみません。

2024/02/28(水) 12:19:36.32

>>152
そもそもjQueryは時代遅れだから
ReactなりVue.jsなりのJSフレームワーク覚えて移行しろ
理由は>>114

誰が作ったか分からん動くかも全く保証されてないし、10年前からもうメンテすらされてない
fixForSafariMobileなんてプラグインなんて持ち出してきて
意図通りに動きませんとか動くわけないし、アドバイス出来る訳ない

プラグインの作者は神様でも何でもない
俺らとそう変わらない腕前の奴が少しの善意と承認欲求で作ったコード片でしかない

どうしてもjQuery+プラグインでやりたいならその作者のsylvain-hamelさんにでも聞くか
GitHubで公開されてるコードを全て読んでちゃんと理解して手直ししなよ

**質問者** (ｽｯﾌﾟ Sdfa-RtHD [1.72.9.18]) · 2024/02/28(水) 18:05:41.24

レスありがとうございます。昔からあるjsやjQueryは今は時代遅れなんですね。
ただ、今回は15年動いているものの改修作業なんです。
fixForSafariMobileはjQueryソースからselectboxからlistに変換するということはわかりました。

$("selectTarget").selectValue(ul, val)で、できそうだと思ったのですが、ulで何を渡すかまでは来ました。
valからulを検索して取得してからこれなんですかね？

2024/02/29(木) 00:27:46.28

>>158
なるほどなぁ、なら何とかツギハギで頑張ってパッチするわけか

んで、.selectValueで出来そうだと思いました！って言われても
そんなメソッドjQueryには無いぞ
ttps://api.jquery.com/

何らかのライブラリなりで
jQueryのメソッドを拡張・追加すれば実現出来るが
それを何の前提知識も無く「どうやって使えば良いですか？」と言われても何もアドバイス出来んぞ

jQueryはもう相当うろ覚えだが
.valメソッドとかを使うんじゃなかったか？
セレクトボックスは動きが特殊だから.valで動かんかったら他のメソッド探してみろ

jQueryの公式ドキュメントを読め
JavaScriptの話ならMDNをちゃんと読め
そうとしか言えんわ頑張れ

**質問者** (ﾜｯﾁｮｲ 23e7-MEMs [118.87.46.101]) · 2024/03/01(金) 23:06:30.38

いろいろとありがとうございます。

**質問者** (ﾜｯﾁｮｲ 23e7-MEMs [118.87.46.101]) · 2024/03/01(金) 23:23:12.37

やりたいこと
・プログラムのデバッガみたいなステップ実行ができるWEBで作成されたものを改修。
・スクロールしていくので、複数行リストボックスで現在行を選択表示して、実現。PC版では動く。
・しかし、モバイル版では、html形式の複数行リストボックスは１行のドロップダウンリストBOXになってしまう。

どうもこれは、モバイルの仕様なようで、実現するのは不可能ぽい。
過去にある人がjqueryで、モバイルで複数行リストボックスみたいな事は実現しているが、これはあくまでも表示のみで選択は不可。
・複数行リストボックスをリスト型で実現している。なので、Val()でも、スクロールして、選択表示できない。

ほかの方法で考えた方が良いですかね？ただ、改修なので、別のフレームワークに変えるのは無理ですね。

2024/03/02(土) 00:10:12.99

sizeが指定されているSELECTタグのdisplayをnoneにして消す
代わりに自分でsize分だけのリストなりボタンなりを追加する

これをjsでモバイル表示のときだけ実現すりゃいいんじゃない

**質問者** (ﾜｯﾁｮｲ 23e7-MEMs [118.87.46.101]) · 2024/03/02(土) 11:13:20.78

>代わりに自分でsize分だけのリストなりボタンなりを追加する
>これをjsでモバイル表示のときだけ実現すりゃいいんじゃない

レスありがとうございます。

データが100行あります。
今、複数行選択リストボックス(select size=25)では、25行表示できるエリアがあって、75行が隠れています。
99行目のListをスクリプトで選択（人間は選択しません。見てるだけです。）したら、自動的にそこまでスクロールしてくれます。
リスト（ul,li）ではスクロールまでしてくれず、隠れてしまって、実現はできないと思うのですが...

**質問者** (ﾜｯﾁｮｲ 23e7-MEMs [118.87.46.101]) · 2024/03/02(土) 11:46:08.42

<html>
<select id='now_exe_prg_row' size=25>
<option value="1">プログラム1行目</option>
<option value="2">プログラム2行目</option>
:
<option value="100">プログラム100行目</option>
</select>

<js>
$('now_exe_prg_row').val('99')

これをlistで実現したいのですが、無理ですよね？

2024/03/02(土) 12:45:11.55

無理じゃない
jsでdom操作はいくらでもできる
ul liでoptionのような動作をするカスタムのリストボックスも作成可能でcssフレームワークではよくつかう手法

そういうカスタムのWebComponentを作るといいよ

selectから情報をひっぱってきて外観をul liでカスタムコンポーネントを作り、liのクリックイベントリスナーでselect要素のselectedIndexを変更すればいい

select要素はモバイル環境ではdisplayをnoneにする

2024/03/02(土) 12:47:42.36

再利用しないのならWebComponent書くまでもなくそのままjsで書けばいい

2024/03/02(土) 12:52:06.03

>>164
CSSでul > liの見栄えを調整しろ
・メディアクエリの画面横幅で適応されるCSSを切り分ける
・heightをliの25行分の高さに指定
・overflow: scrollを付けてul内でスクロール出来るようにする

CSSを見栄えを整える能力は
Webで食ってく行くならこの先ずっと使うから覚えろ

CSS2の頃はまだ「技術的にも無理です！」ってケース多かったが
CSS3までフル動員させたら「それお前が無知なだけ」ってケースばかりだぞ

2024/03/02(土) 13:00:31.15

仕事で受けてるのならこのくらいできないとヤバいぞ

カスタムコンポーネントにすれば

customListBox.size = 25
customListBox.selectIndex = 99

みたいに設定できるようにメソッド追加すると便利

2024/03/02(土) 14:29:55.91

無理にiOSでも同じUIにする必要ないのと違う
ぐるぐる回るドラム式がiOSのSafari流でかっこいいじゃんと褒め殺せば
林檎ユーザー特有の優越感をくすぐりOKもらえる気がする

2024/03/02(土) 15:39:45.46

>>164
細かい要件が分からないけどただそれっぽく表示するだけならこんなのでいいんじゃないの？
jsfiddle.net/sj3xkrad/1/

**質問者** (ﾜｯﾁｮｲ 572e-lvv7 [118.86.90.123]) · 2024/03/03(日) 22:00:44.67

皆さんレスありがとうございます。今日休みで明日から参考にさせていただきます

2024/03/04(月) 10:08:20.56

Bootstrap, Tailwind, Bulma などに、
使えそうなコンポーネントは無いの？

2024/03/05(火) 18:22:59.72

質問で、
chrome.tabs.query({}, function(tabs) {
で全タブを取得した各タブに関して、
そのタブのwindowType（appとかnormalなど）って取得できますか？

2024/03/05(火) 18:47:33.98

>>173
個別のtab.windowIdから引けるハズ

もっとも、はじめからwindow.getAll()を使った方がいいとは思うが

2024/03/06(水) 10:35:08.32

>>174
お、できた！
ありがとう！

ネットでtabs.WindowTypeってのが載ってたので、それで惑わされてた…

2024/03/06(水) 10:42:44.31

>>174
取得した各tabに対して取得したかったので、
chrome.windows.get()を使いました。

2024/03/29(金) 14:50:19.65

非同期処理を同期処理から呼び出すラップ関数を作りたいのですが方法がわかりません
AIに聞いたら次のコードが返ってきましたが、当然awaitが使えないので失敗します
-------------------------------
//非asyncな呼び出し元から、asyncメソッドを呼び出し、結果が帰るまで待って返却する
function FromSyncToAsync() {
const result = await [値を返すだけの非同期な関数]();
return result
}
-------------------------------
調べても呼び出し元をasyncにする方法しかみつかりません…

2024/03/29(金) 15:40:17.46

これはエラーはおきないけど失敗。戻り値がpendingになりました
-------------------------------
function SyncToCallAsync(){
return getWasmFileLastModified().then((result) => {
// 結果を返却
return result;
});
}
-------------------------------

2024/03/29(金) 16:32:26.02

>>177
残念ながら不可能
一度非同期の世界に入ると
同期処理の世界には戻って来られないぞ

・非同期処理から値を受け取る箇所はPromise値を返す関数にする
・前処理や後処理を含めて色々やってくれる関数をasync関数で定義する
・極力此処の関数やクラスメソッドは小さくして、関係ない値を持たせない事で全てをasync関数にする事を防ぐ

JavaScriptという言語がイベント駆動やイベントループ前提で作られてる以上
こういう作りを維持し続けるしかない

まぁ、ロジックを司るデカい所は基本async関数だよ
作り直す許可を上長や顧客からもぎ取るのが仕事やね

そういう交渉が出来ないなら細かくPromise.thenで作業していくしかない

2024/03/29(金) 16:55:52.54

ありがとうございます。いくつかのAIに聞いても堂々と回答実現不能なコードばかり返してくるので困っていました。できないとわかったほうが先に進めます

2024/03/29(金) 17:39:27.22

現時点ではAIは不可能なことを不可能と答えないケースが多い
信用しすぎないように

2024/04/05(金) 21:57:54.50

test

2024/04/05(金) 21:58:17.84

test

2024/04/13(土) 22:59:37.70

すいません、Reactの質問ってここでいいですか？

2024/04/13(土) 23:23:14.15

まずスレ一覧をReactで検索するぐらいしてみたら？

2024/04/20(土) 13:04:04.45

昔、私が大学でプログラミングを習ったとき（C言語でした）には円周率など特別な値については定数にしろと言われはしましたが、その他の変数については定数にしろとは言われませんでした。
Javascriptの本を今読んでいるのですが、再代入を行わない場合にはすべて「let」ではなく「const」を使えと書いてあります。
このようなことが言われるようになったのはいつ頃からでしょうか？
私がそう習わなかっただけで、昔から言われていたことでしょうか？

2024/04/20(土) 14:12:14.37

>>186
JavaScriptはCromeやFirefox等のブラウザ作ってる所が各自で動作するエンジン作れと丸投げしてるが

仕様書にあたるECMAScriptが長い間ES5というバージョンのまま止まってた
その頃には変数宣言はvarのみだった

流石に今時のプログラミング言語にしようぜって事でECMAScriptの強化が始まり(ES6というプロジェクト)
最終的に2015年からは毎年強化した仕様を出しましょうという話になった

その最初の成果物とも言えるES2015で変数宣言としてvarの他にletとconstの2つが追加

for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i))
}

これの出力結果が4が5個連続で表示される
違和感があるが、
letのブロックスコープによって解消されてるのでvarはもう二度と使うなという風潮が出来た
(それ以外にもvarは関数の先頭で纏めて書かないと変な動きする箇所がちらほら見受けられ、コーディング規約で制限されていた)

また値がコロコロ変わる状態変数が多いと
登場人物がやたら多い粗悪な小説みたいになって作業者が困るので
「再代入禁止の変数」を求める声が元々多かった

その要望を汲んだ再代入禁止のconstも実装されたため
必要になるまで全てconstでプログラミングして、必要な箇所だけ最小限にletを使いましょうという風潮が比較的早く出来た

2024/04/20(土) 14:22:49.70

constは直訳すれば定数だが

JSのconstは再代入しちゃいけませんよってだけで
基本は普通の変数として取り扱う
配列やオブジェクト、関数、インスタンスなんかもconstで宣言出来るね

他言語のletみたいなものと考えると良い

constで宣言したオブジェクトや配列は再代入禁止なだけで、中身は普通に加工出来てしまうのも作りとして良くない

const arr = [1, 2, 3];
arr.push(4);
console.log(arr);
// [1, 2, 3, 4]

この辺は勝手に加工しないよう運用でカバーやね
値は基本的に複製しまくってガベージコレクションで掃除してもらう

パフォーマンスチューニングで仕方なく一つの値を加工しまくる時はライブラリ化したり関数で固めたりして、メインロジックの邪魔にならないようにすること

2024/04/20(土) 14:53:24.59

>>187-188
ありがとうございました。

2024/04/20(土) 21:40:49.05

すみません。
以前からJSフレーム・ワークについて
疑問を持っていたのですが
フレーム・ワークを使う人は、

1. JavaScriptに精通しているので
中規模程度のサイトなら
素のJavaScriptと_lodash等だけでも組めるが
効率が悪いのでフレーム・ワークを
その内部構造をも理解して使っている。

2. JavaScriptの基本的な仕組みと
DOM操作の基本は理解しているが
素のJavaScriptではサイトを作れないので
フレーム・ワークの仕様仕組みを理解して使っている。

の2種類に大別できると思うのですが
結局ブラウザは素のJavaScriptで動いているだけなので
「1」の技能習得に向かわざるを得ないと思うのですが
いかがでしょうか。

2024/04/20(土) 22:07:39.36

どこから突っ込んでいいのかわからなくて答えようがない

2024/04/20(土) 22:27:55.19

>>190
lodashは関数型プログラミング的な値の加工を司るフレームワークだぞ
一部だけ利用させて頂いて関数片の集合体ライブラリとして使うことも出来るがな

フレームワークは機能を提供するライブラリであると共に
大きなプロダクトを作っていく為のファイル・関数・モジュール置き場をルールで区切ってここに設置してくださいねー
こういう司書さんみたいな役割も担ってる

複数人でプロダクトを触ったり
半年後にどれどれ？と帰ってきて読み直した時にナニコレ？にならない為に
プログラミングスキルの良し悪しに限らず
適切なフレームワークがあるなら使った方が良い

フレームワークを使わん機能を作る時でも
関数やファイルを作って保管するタイミングで「このフレームワークの考え方は好きだな、同じディレクトリ名を作ってそこに保管しよう」
自然とこういう発想が生まれる

なのでフレームワークを使い分けてる人間は引き出しが多くなっていき
可読性の良いプロダクトを作る能力も養われる

結局フレームワーク無しで適当に関数やファイルを作って放り投げるばかりで
読み辛いプロダクト作ってる奴なんて3流の雑魚だよ

2024/04/21(日) 00:20:10.62

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

ご教示参考にさせて頂き
精進いたします。

2024/04/21(日) 02:22:30.51

>>186
サイの表紙のサイ本。
初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017

ECMA Script は、ES6(ES2015)で大きな改正があった。
var を非推奨にして、let/const を使う

オブジェクトの場合は、たいていconst を使う。
代入はできないが、オブジェクトの中身は更新できるから

const a = { x: 1 }

a.y = 'あ'
a //=> { x: 1, y: 'あ' }

a = 2 //=> エラー。再代入はできない！

2024/04/28(日) 21:53:35.47

スレ立てあらしスクリプト対抗age

2024/06/09(日) 04:17:47.61

お願いします。
let test = [{id: 1,name: '太郎'},{id: 2,name: '二郎'},{id: 3,name: '三郎'}];
console.log(test); //forEach実行前
test.forEach((value) => {
delete value.id;
})

console.log(test); //forEach実行後

これを実行してlogを見ると

0:{name: '太郎'}
1:{name: '二郎'}
2:{name: '三郎'}

forEach実行後だけでなく実行前の値もオブジェクトのidプロパティが削除されていたのですが理屈がわかりません。

試しに配列ではなくて配列の中のオブジェクトをconsole.logで調べると
let test = [{id: 1,name: '太郎'},{id: 2,name: '二郎'},{id: 3,name: '三郎'}];
console.log(test[0]);
test.forEach((value) => {
delete value.id;
})
console.log(test[0]);

forEach前のオブジェクトにはidプロパティが存在して
forEach後には削除されている期待通りの結果になるのですが
どんな理屈なのかわかりません。

初歩的な質問で申し訳ありませんが教えてください

2024/06/09(日) 04:55:12.99

paiza.ioで試したが再現しなかった

JavaScriptの実行エンジンがあらかじめ使いもせずすぐdeleteするような無駄な処理を削ぎ落とすとかしてるんじゃね？知らんけど

2024/06/09(日) 04:59:29.38

>>196
「JavaScript 参照の値渡し」でググれ
初歩的な事柄だろ？すぐ理解出来るだろ

2024/06/09(日) 05:22:49.71

あーjsをhtmlに直書きしてFireFox/Edgeで読み込んだら再現したわ

jsじゃなくて開発者ツールのコンソール表示の仕様だと思う
配列内のオブジェクトみたいなネストされてるモノについては、その時点の値じゃなく表示を求められた時点の値が表示されるとかじやないかな

2024/06/09(日) 06:13:08.40

>>198
ありがとうございます。
参照渡しがメモリ上のアドレスを参照してるのは知っていたのですが
初めのconsole.logをした時点ではまだ値を変更していないのに
なぜ変更後の値が表示されるのか理屈が分かりませんでした

>>197>>199
一度テキストに書いたものを貼ったので^^;お手数をおかけました
コンソール表示の仕様ですか、なんとなくですが納得できました
丁寧にありがとうございます。

2024/06/09(日) 06:25:46.35

id を別な文字に変えると

2024/06/09(日) 08:02:18.06

全ての波【電磁波】で下記の症状が起きる
理由は電磁波が強いために起こるか電磁波が通過すれば磁気が生じて鉄分が振動して間接的に鼓膜などが振動する
マイクロ波聴覚効果を用いた音声伝送に関する検討
2018/03/05
https://www.bookpark.ne.jp/cm/ieej/detail/IEEJ-ZT181039-PDF/
マイクロ波聴覚効果 Wikipedia
https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E6%B3%A2%E8%81%B4%E8%A6%9A%E5%8A%B9%E6%9E%9C
>>マイクロ波を照射された被験者は、クリック音やブザーのようなうなり音が聞こえる
早大、物質中の創発磁気モノポールに起こる集団振動現象を理論的に発見
2024/06/04
https://news.mynavi.jp/techplus/article/20240604-2958879/
理研、電子ビームの電子回折をアト秒で制御できる技術を開発
2024/06/06
https://news.mynavi.jp/techplus/article/20240606-2960578/
※電磁波も振動させれると記載あり
最低でも下記ノ電磁波の威力が必要なら行っている者全員補足されている
GPSの電波は超微弱
https://gigazine.net/news/20240421-gypsum-gps-receiver/
［２２］米国特許５８６８１００号
【ＧＰＳ位置情報を使用した動物コントロール・システム】
一例ですが年々受信機の感度は向上している
東工大、磁束集中器を用いない高感度「ダイヤモンド量子センサ」を開発
2024/06/07
https://news.mynavi.jp/techplus/article/20240607-2961238/
電磁波音波攻撃をされている部位ごとにホルモンや異常物質などの観測
パーキンソン病の原因物質、脳内の可視化に成功
2024年6月6日 0時00分
https://www.asahi.com/articles/ASS652V7RS65ULBH00GM.html

2024/06/09(日) 08:21:10.79

>>196
>>199 でも指摘のある通りconsole.logの仕様かな
オブジェクトを渡した場合、開発者ツールで見ることのできるのはそのオブジェクトの現在の状態
デバッグで delete の行で止めてみれば確認できるはず

2024/06/09(日) 16:12:58.02

単純なオブジェクトならconsole.log(JSON.stringify(hoge))とかするのも手だね

2024/06/09(日) 17:12:03.63

ここが詳しいね↓
Chrome の console.log でハマらないために
http://nmi.jp/2022-11-14-Be-careful-about-console-log-in-chrome

2024/06/09(日) 18:59:00.31

>let test
オブジェクトtest に再代入していないから、const test を使う。
内部を変更しているだけだから(破壊的変更)

配列オブジェクトtest の、内部のオブジェクトを変更している。
value は参照渡し。
内部のオブジェクトをコピー・再構築して、引数に渡すのではない！

C/C++ 以外の言語は参照渡し。
コピー・再構築せずに、現存するオブジェクトをそのまま引数に渡す

const test = [{id: 1,name: '太郎'}];
console.log(test);
//=> forEach 実行前は、[ { id: 1, name: '太郎' } ]

test.forEach((value) => {
delete value.id;
})

console.log(test);
//=> forEach 実行後は、[ { name: '太郎' } ]

2024/06/13(木) 23:54:51.41

console.log厄介だな…プリントデバッグ卒業しないと駄目か

2024/06/14(金) 00:22:57.99

卒業しなくていい

2024/07/02(火) 17:17:44.53

ループの中でwindow.openして、ポートだけが違う同じドメインの同じ画面を複数開くとchromeのタスクマネージャーでは全部同じプロセスIDでcpuコア分散してくれないのだけれどそういうものでしょうか？
最初は同じオリジンでやってたんだけどふか高くて、ポート変えて別オリジンならプロセスも変わってコア使い回してくれるかなと思ったのだけれどそうはならず、回避方法模索中です

2024/07/02(火) 20:47:10.76

詳しくは分からないけどJavaScriptのコードで関与できる部分じゃないような
まずchromeのスレあたりで挙動について質問してみたら？

2024/07/02(火) 21:33:51.40

>>210
ありがとうございます
イロイロ試したけど挙動的にwindow.openで同じドメインのページ開くと同じプロセスに囲われてしまうっぽいです
で、hostsに同じipを別ホスト名に定義してそのホスト名で呼んだら別プロセスになってくれた
気持ち悪いけど一旦これで逃げられるか検証したいと思います

2024/07/03(水) 18:29:30.68

>>211
子ウィンドウから opener で親を参照できる間柄だと CPU を分けるわけにはいかないんじゃない？

2024/07/03(水) 18:30:11.37

>>212
CPU じゃない、プロセスか

2024/07/03(水) 20:03:48.10

>>213
大元画面
→A機能群メイン画面
→B機能群メイン画面
→C機能群メイン画面

みたいな構成で大元からワンクリックでA,B,C画面がバババっと別Windowで表示のイメージで
大元とA,B,Cは親子関係いらないしA,B,C間も参照不要だから別プロセスで上げてコア分散して欲しいんだけどA,B,Cが同一プロセスになっちゃうって感じなのです

2024/07/04(木) 04:55:13.57

>>214
それらが同じドメインにあってセキュリティ上も子画面から親画面を opener で参照できちゃう間柄だから、スクリプトエンジンも同じインスタンスじゃないといけなくて同じプロセスになるってことなんじゃないかな。
間に別ドメインを挟んでリダイレクトでもするとプロセスが分かれるかもね。

2024/07/04(木) 08:37:45.29

Chromeのプロセスマネジメントの仕組みについて説明すると、Chromeは各タブや拡張機能を個別のプロセスで管理することで、ブラウザの安定性とセキュリティを向上させています。しかし、同じオリジン（スキーム、ホスト、ポートが同じ）からのリクエストに対しては、プロセスを共有することが一般的です。ポート番号が異なる場合でも、同じドメインからのリクエストは同じプロセスで処理されることが多いです。

CPUコアの分散については、Chromeのプロセスマネジメントに依存するため、開いているタブや実行中のスクリプトの数が多くても、同じプロセスで実行される場合があります。そのため、CPUコアが均等に分散されないことがあるのです。

2024/07/05(金) 09:45:00.80

acrobatで選択した単語をJavascriptに渡せないのは仕様？
api使いたいのにその前段階で躓いている

2024/07/05(金) 10:34:02.07

自己解決した。
渡せないんだねえ。
ハイライト経由で渡すんだね。
面倒くさくな。

2024/07/05(金) 10:37:09.77

ブラウザの制約を厳しくしないと
すぐクレカ番号やログイン情報を抜かれるからな

特殊な事をしたければデスクトップアプリやCLIをベースにした方が無難

2024/07/05(金) 11:02:03.90

デスクトップアプリのAcrobat DCで英文自動翻訳注釈作成機を作ろうとしてるんですけどねえ

2024/07/06(土) 16:41:04.11

acrobatというかPDFに英文箇所を翻訳したいってことだよね
acrobatでやるならプラグインでも入れないと無理なんじゃないかな
やる事の割に大変な手間だから有償だったりするね

2024/07/06(土) 19:00:07.61

>>221
Wordで簡単に出来たことがこんなに大変で驚いてる
selectionオブジェクトがないのに驚きました

2024/07/27(土) 23:26:18.23

iOSのブラウザだと指をつまむようにピンチ操作するとタブ一覧になりますがこれを防ぐ方法ってないんでしょうか
touchstart, touchmove, touchendのそれぞれでpreventDefaultしても無理でした

2024/08/11(日) 18:28:32.58

東京都の低所得者向け支援事業のページですが、
https://kurashiouen.metro.tokyo.lg.jp/login

ここのフォームに毎回手動で入れるのが面倒なんで
TamperMonkeyで入れようとしたんですが、
うまく値が入らないです。
(メアド登録すれば向こうから知らせてくるのだけどメアドを広範囲に振りまくのはなるべく避けたい)

inputタグのvalueプロパティに
値を入れてその値が画面に出ていても
そのinputにフォーカスすると消えてしまいますし、
ページのjavascriptからは正常な値が入っていると認識されていないようです。
(生年月日のselectタグも同じ)

2024/08/11(日) 18:28:49.67

最初の世帯識別番号を全部フィルしてから(全部4ケタ)
一番下の規約同意チェックボックスをクリックしないと
ログインボタンが有効にならないという動作のようです。
(チェックボックスを.checked=trueにするだけではダメ)

うまく自動で値を入力するにはどうすればいいでしょうか？
セレニウムやAutoHotKeyを使えばできるような気もしますが
できればTamperMonkeyでやりたい

2024/08/11(日) 21:08:30.34

>>224
それぞれイベント発火時に値を読み取るようなので
inputに対しては.valueに値設定したら.dispatchEvent(new Event("input"))
selectは.dispatchEvent(new Event("change"))
チェックボックスは.click()

2024/08/12(月) 18:41:31.15

>>226
できました！
ありがとうございます
なるほど

なお
チェックボックスの.click()だけはわかってたんですが、
ちゃんと書いておりませんで、すみませんです。。。

2024/08/23(金) 05:01:35.54

ここ1年くらいで本格的に学び始めたものです
数カ月前にmicromatchていう正規表現ライブラリに脆弱性が指摘されてCVEに登録されたみたいんなんですが
これ使ってるライブラリは芋づる式で全部npmでSeverity：moderateの警告が出てるはずで
その中にtypescript-eslintも入ってるので、これ使ってるフレームワークのテンプレート、
ほとんど影響受けてると思うんですが、各ライブラリのissueとか探しても全然話題になっていないみたいです。
皆、moderateくらいのセキュリティ警告はほとんど気にしないんですか？
それとも開発環境Onlyの依存関係だから？

2024/08/23(金) 16:45:00.54

>>228
botがプルリク送ってきたとて放置

2024/08/27(火) 21:06:37.83

バニラJSって流行ってんですか？

2024/08/28(水) 07:37:45.61

>>228
devDependency なら伝播はしないだろ。
npm audit で確認してみりゃいい。

2024/08/30(金) 21:40:56.02

拡張機能でページの読み込み完了時に動作するスクリプトを書いたが、
完了前に発動してしまい、
ラッセーラー、ラッセーラー

2024/09/03(火) 06:53:50.48

《言語　javascript》
for(let i = 0;i < 10; i++){
　if (i === 99999){
　　break; // とにかく脱出
　}
}
console.log("i="+i)
は、ダメである
varは非推奨らしいけど、この意味は
Ⅰ》varは、使用しないことは、推奨
Ⅱ》varは、使用は、推奨は、しない
等　イロイロな解釈の余地はあるな
by 🤡自称プロマネ

letは地球人が推奨するヤバイやつ∴
letは、宇宙人的には、使用は、🈲ずる
by 👤自称ウチュ〰人本日もモチ暴言

質問ぢゃない質問。ウチュ〰人素晴らしい
by 🥳ウチュ〰人に忖度するバカッテスタ

2024/09/09(月) 00:14:27.71

node.jsで「http://www.amecs.co.jp/solar/index.html?hlat=36.00&hlon=140.25」の
textareaの「0,0,0,0...」という文字列を取得したいです。

以下のようなコードで実行すると結果は
　Textarea value:
となり、うまく取得できません。
もし原因がわかれば教えてください。

＜コード＞
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://www.amecs.co.jp/solar/index.html?hlat=36.00&hlon=140.25');

// ページが完全に読み込まれるのを待ちます
await page.waitForSelector('#sdata');

// textareaの値を取得します
const textareaValue = await page.$eval('#sdata', el => el.value);
console.log('Textarea value:', textareaValue);

await browser.close();
})();

2024/09/09(月) 01:15:24.84

>>234
非表示になってる#sdataがもう一つ存在してそっちを拾ってるせい
セレクタを'#overLayer > #sdata'等詳細にする

2024/09/09(月) 07:40:59.09

>>235
ありがとう！解決しました

ちなみに何を見ると非表示の#sdataがあることを確認できますか？

2024/09/10(火) 01:02:40.92

>>236
ブラウザF12の開発ツールの要素タブでCtrl+Fして#sdataで検索

2024/09/11(水) 23:50:48.17

>>235
ありがとう！解決しました

ちなみに何を見ると非表示の#sdataがあることを確認できますか？

2024/09/26(木) 10:16:59.99

document.getElementById("test_id");
を使わずに
test_id.value
と、直接使うと何か問題がありますか？

2024/09/26(木) 21:22:05.89

📕はCanvasタグID 、📘はAタグID
─　─　─　─　─　─　─
🔴 = document.getElementById("📕");
🔵= document.getElementById("📘");
var 🟢 = 🔴.toDataURL("image/png");
🔵.href = 🟢;
BY 🤡　んー素晴らしい
─　─　─　─　─　─　─
オレッちのパソコン環境だと
pure な javascript のハズだけど
document.getElementById　は不要

var 🟢 = 📕.toDataURL("image/png");
📘.href = 🟢;
BY 👤　ヤバぃのかな。こんな実装
─　─　─　─　─　─　─
タグID がjavascriptのグローバル変数❓
そんなのは、教科書は、見たことは、
ナイナイナイ　在る。
てか、そぅなら、以下一行で済むぢゃん
📘.href = 📕.toDataURL("image/png");
BY 🥳
─　─　─　─　─　─　─
地球の
javascriptは超進化したのだろうか?!
BY 👤