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

2024/11/20(水) 10:44:47.45ID:0q/8r7xH0
>>258
同じurl window.nameのページが普通に別ウィンドウで開いちゃいますね
2024/11/21(木) 20:21:30.75ID:/JpQPFMK0
>>259
単なるロジックバグでした
お騒がせしました
261デフォルトの名無しさん (JP 0Ha3-/Vqe [103.151.173.94])
垢版 |
2024/11/25(月) 21:37:59.73ID:NYf/jFroH?2BP(1000)

EchoAPIはVS Code環境に素晴らしい追加で、APIテストが超楽になった!
262デフォルトの名無しさん (ワッチョイ 1755-Dj8N [2400:4151:a4a0:6500:*])
垢版 |
2024/12/07(土) 12:00:11.18ID:Hozm9f1q0
画像の読み込みが完了したら動作するのはできたけど、動画の読み込みが完了したら動作するのはimgの部分をvideoに変えてもできませんでした。
どのようにやれば動画の読み込みが完了して動作するようにできますか?

const img_elm = document.createElement("img");
document.body.appendChild(img_elm);
img_elm.src = "./test.png";
img_elm.style.position = "absolute";
img_elm.style.top = "0px";
img_elm.style.left = "0px";

img_elm.onload = function(){

alert("画像の読み込み完了");

}
2024/12/07(土) 13:15:33.00ID:UdJyqKqA0
>>262
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
video要素で発生するイベントはloadではなくloadeddataやloadedmetadata
264デフォルトの名無しさん (ワッチョイ e310-aw/E [180.12.82.129])
垢版 |
2024/12/07(土) 20:39:58.70ID:Ho+7zKXc0
>>263
そうなんですか
ありがとうございます
2024/12/14(土) 01:19:41.44ID:vTrcqbr80
var x = 1;
if (x===1){let z = 10;}
else if (x===2){let z = 20;}
else {let z = 30;}
console.log("z = " + z);

で、エラーになります。
でもlet をvarへ変更したら、
エラーにならず、z = 10 と表示された

このようなプログラミングでは
letは使うのは、いけない事のようです。
でも、何が何でもvarよりlet推奨ぽぃし
でも、そんなの無視してやはり、
推奨されてないvarで指定すべきですか?

とゆぅか、ポクはletとconstが嫌いですが
でも、ポクは、varが好きです。

皆さんは、varは嫌いですか❓
2024/12/14(土) 06:46:27.36ID:zVdiZk6o0
釣りネタつまらん
2024/12/14(土) 20:33:37.99ID:B6x89OP40
>>265
好きとか嫌いとかで決めるものではない
2024/12/23(月) 07:23:14.55ID:X/5iZgP80
letの無いIEやHTAで開発する場合var宣言が必要だから好きとか嫌いとかではない
つまり古いブラウザのjavascriptでも動かしたい場合必然的にvarだらけになる
2024/12/26(木) 11:59:20.77ID:YCJOeewg0
JS初心者です。Electron使用しています。
カウントダウンで3→2→1と表示させようとした時、For文で組もうとするとFor文が終了した一瞬で終了してしまうので以下のように一度に作動させることで解決しました。
が、もっと効率の良い組み方があればご教示頂きたいです。よろしくお願いします。
駄目だった文(3→1に飛んでしまう)
for (let i = 3; i > 0; i--) {
setTimeout(() => {
Element.innerHTML = "";
Element.insertAdjacentHTML('beforeend', i);
}, 1000)
} return

動作しているけど改善できればと思っている文
Element.insertAdjacentHTML('beforeend', 3);
setTimeout(() => {
Element.innerHTML = "";
Element.insertAdjacentHTML('beforeend', 2);
}, 1000)
setTimeout(() => {
Element.innerHTML = "";
Element.insertAdjacentHTML('beforeend', 1);
}, 2000)
setTimeout(() => {
Element.innerHTML = "";
}, 3000)
2024/12/26(木) 12:33:27.44ID:t8P1jyWN0
setTimeout の第2引数をiを使って変えればいい
iが3→2→1と減っていくなら、例えば1000*(4-i)とか
271デフォルトの名無しさん (ワッチョイ a392-/oXw [2404:7a84:8ea0:d700:*])
垢版 |
2024/12/26(木) 12:59:38.81ID:YCJOeewg0
>>270
ありがとうございます。動きました。
また別の問題出てきましたが、それはそれでPromiseとか勉強してちょっと頑張ります。
272デフォルトの名無しさん (ワッチョイ b6e0-cPla [2400:2200:634:ad7a:*])
垢版 |
2024/12/26(木) 13:44:41.88ID:rxD7DMeD0
ウチュ〰人からのお告げという事にしてほしいが
//絶対位置指定∵動かすために
XXX.style.position = "absolute";
//位置10へ動かす
XXX.style.top = 10 + "px";

( async ()=> {
for( let y=-300; y<10; y=y+10 ) {
XXX.style.top = y + "px";
await new Promise(
res => setTimeout( res, 5) );
}
XXX.style.top = "10px";
} )();

※async関数の直下、直下、直下へ
 await new Promise をコーディング
 する事が必要ぢゃ
 ただし 動作環境等による。
 でも、当方の動作環境等では、
 async関数の直下、直下、直下へ
 await new Promise をコーディング
 する事が必要ぢゃ 
2024/12/26(木) 14:00:17.69ID:31Mawuna0
>>269
setInterval使え
インターバルに間に合わない可能性のある処理をするならsetTimeoutを再帰しろ

ループごとに必要もなくinsertAdjacentHTMLなんかするな
値を書き換えれば十分だろ
視覚効果を狙ってるならCSSアニメーション使え
274265 (ワッチョイ b6e0-cPla [2400:2200:634:ad7a:*])
垢版 |
2024/12/28(土) 04:01:21.72ID:4NKxKk420
>>265 ポクはどっちも、嫌いデス
ちょっと🤏前の自分へ返信
なに、varとlet どっちが嫌いとか
なに言ってるんだ。好き嫌いの問題でない
今のポクは、どっちも嫌い。varもlet嫌い
てっゆぅか、varとかletとかconstant
とか使わなきゃヨシ (๑•̀ㅂ•́)و✧

てなワケで、翻訳アプリ作ってみたぁ

x = 2;
if (x === 1) { y = "イチ";}
else if (x===2){y = "ニッ"}
else if (x===3){y = "サン"}
else {y = " 知ら無いアル "}
console.log("y = " + y)

なお、こんなコーディングして
エライ人に怒られても、
気にしちゃダメ在る。
2024/12/28(土) 06:58:46.94ID:vWbq3x/3H
>>274
それは質問ではないな
質問スレは日記を書く場所ではない
276>>274 (ワッチョイ ebe0-AFTv [2400:2200:634:ad7a:*])
垢版 |
2024/12/30(月) 09:51:50.06ID:Yh06n1a50
>>274 ちょっと前の自分へ返答
var x7 = 1;
var x7 += 2; //var再宣言・再代入OKだろ

は❌var x7 += 2;となった
やっぱvarも使っちゃダメだよな。てなワケで
今のところは、274が大正解
277自問自答してみた (ワッチョイ 6faf-NH4A [2400:2200:438:4658:*])
垢版 |
2025/01/24(金) 06:19:41.63ID:Dgfkru+90
👤コールバック地獄(ファンクション地獄)
setTimeout(function() {
console.log(1)
setTimeout(function() {
console.log(2)
setTimeout(function() {
console.log(3)
}, 1000) }, 1000) }, 1000)
// end setTimeout×3

ちな、下記ロジックとは違うぞ
setTimeout(function() {
console.log(1)
}, 1000)  // end setTimeout
setTimeout(function() {
console.log(2)
}, 1000) // end setTimeout
setTimeout(function() {
console.log(3)
}, 1000) // end setTimeout

🤡じゃ下記ならどお!
setTimeout(function() {
console.log(1)
}, 1000)  // end setTimeout
setTimeout(function() {
console.log(2)
}, 2000) // end setTimeout
setTimeout(function() {
console.log(3)
}, 3000) // end setTimeout
2025/01/24(金) 06:29:52.53ID:Dgfkru+90
>>277の自作自演は、>>269様のご質問内容により閃いた
文学作品である。そしてこれは、
async await promise を実装したjavascriptエンジン
v8 の機能が以下にヤバイ位スゴイかを暗に物語ってる
複雑なCSSアニメーションより
javascriptでの任意の要素をアニメーション簡単に
実装できることを暗示してる。

上記文学作品を閃かせてくれた弐六九様へ感謝したい
THANK YOU FOR 269
279>>277の続編 グダグダな自問自答 (ワッチョイ 6faf-NH4A [2400:2200:438:4658:*])
垢版 |
2025/01/25(土) 04:32:37.95ID:TAq0uG+90
🥳なるぼど、もしかして、

for(let t=1000; t<=3000; t+=1000){
setTimeout(function() {
console.log(t/1000)}, t)
}
でどう❓

👤んー、恐らくは、机上では、
非同期の部分は、setTimeout内の
関数(コールバックの意)だけ、故に
それは、以下と等価

for(let t=1000; t<=3000; t+=1000){
}
setTimeout(function() {
console.log(t/1000)}, t)

然るに、机上ぢゃ、そこで
t は undefined故に動かない

🥳 でへへ、それがちゃんと
🤡 マジ❓
🥳 マジですよー❢ルンルン❢
👤 机上OKで実際はNGはよくあるが
  机上NGで実際はOKは有りえ無い
🥳 それは、机上した👤は、
  🐴🦌 かつ、
  ポクは、超天才の証明なのだァァァ
👤 ・・・
280>>277 の続編の続編 (ワッチョイ 6faf-NH4A [2400:2200:438:4658:*])
垢版 |
2025/01/25(土) 08:48:00.93ID:TAq0uG+90
👤ま、setTimeoutは使用はヨロシイぞ
 しかし、そのロジックは再帰でなく
 単なるループだ。for文のループ

🤡再帰?、再帰って地獄かもよ?
setTimeout(function() {
console.log(1)
setTimeout(function() {
console.log(2)
setTimeout(function() {
console.log(3)
}, 1000) }, 1000) }, 1000)

🥳コールバック地獄大好き
てか、再帰プログラミングて地獄なの❓

👤いや(⁠゜⁠o⁠゜⁠; アウウ いやいや(⁠・⁠o⁠・⁠;⁠)
🤡再帰的アルゴリズムとは
 for等のループ的アルゴリズムなら
 オレは、どっちも好きだ
 コールバック地獄は嫌いだし
 async proなんちゃらも嫌いだけど
👤矛盾した主張だな
🥳コールバック地獄とfor文組合せよう。
👤🤡 それ検討したが挫折 バイバイ
281>>277 の続編&#179; (ワッチョイ 6faf-NH4A [2400:2200:438:4658:*])
垢版 |
2025/01/25(土) 13:17:37.74ID:TAq0uG+90
💃(←初登場:ナゾの女性 という設定)
あら、これ再帰プログラム❓
信じられなーーい。ありえなーーい。

マジ、超本物の再帰プログラミングは、
自身の関数を呼び出すのが本物です。
スナワチ、以下の通りよ。

var cnt = 0 ; // Global変数にしてみた
setTimeout(fff(), 1000) ;
function fff() {
console.log(cnt);
cnt++;
if (cnt < 5) setTimeout(fff(), 1000) ;
}

アナタ達の再帰は、再帰とは言えません。
モチロン、asyncとかfor文は不要ですよー
async forは🈲止です。

🥳これが本物の再帰なのか
コールバック地獄と同様に、
意味がわからないコードだぜっ。
本物の再帰プログラミング嫌いです。
てゆぅか、コールバック地獄大好き

🤡めちゃくちゃコードレビュー
だからぁぁぁーーforやって
async await promise が一番ですよぉっ

👤そもそもjsvsscriptなんてやめちゃえー
で、CSSでアニメーションやれ。
2025/01/25(土) 15:30:48.00ID:e0C8gdKs0
>>277-281
質問スレにいつまで居座るつもりなのかね
283デフォルトの名無しさん (ワッチョイ 6faf-NH4A [2400:2200:438:4658:*])
垢版 |
2025/01/25(土) 16:34:31.47ID:TAq0uG+90
あっそうだ、setTimeout の再帰はおいておいて
setInterval というのも在るのか。それは、時間がないから
そろそろ、オイトマとするtimeにするかも知れない
ま、再帰しなしsetTimeoutで、かつ async promiseは使用しない
のが、一番バッチリという感触。今は。では、またいつか。5日ではないいつか
(^_^)/~ 👤🤡🥳💃一同 実は同一人物だけど(⁠・⁠_⁠・⁠;⁠)
284やっぱ過疎化防止で、また来ちゃった (ワッチョイ deaf-opVO [2400:2200:438:4658:*])
垢版 |
2025/01/27(月) 06:54:39.55ID:/Hv0VvQW0
ふと、どうでもヨイ疑問が湧いた。

for(let t=1000; t<=3000; t+=1000){
setTimeout(function() {
console.log(t/1000)}, t)
}

と、

for(let n=1; n<=3; n+=1){
setTimeout(function() {
console.log(n)}, 1000*n)
}

どっちも問題はないけど・・・
どっちが見やすい?。
誤差とかわかり易さとかの観点で

てか、どっち に しようかな。
てか、どっち の 仕様がいいのかな。
てか、どっち を 使用しようかな
2025/01/27(月) 20:38:29.10ID:DmLoR8Bu0
>>284
ChatGPTに聞いてみたけど、全部は掲載できないので結論だけ転載

1. 「時間」を基準にして明示的に処理を進めたいなら t
2. 「ループ回数」を基準にするのが直感的なら n
個人的にはtの方が汎用性が高く、特に時間管理が重要なケースでは使いやすいと思います。
2025/01/27(月) 20:44:15.26ID:DmLoR8Bu0
1. 可読性
tを使ったコードでは、時間そのもの(1000, 2000, 3000)が直接書かれており、「時間に基づいた処理」という意図が明確。
一方、nを使ったコードでは、「ループの回数を基準に処理」していることが読み取れる。
一般的には、「時間を意識した処理」ならt、「回数を意識した処理」ならnを使ったほうが直感的です。
2025/01/27(月) 20:44:38.45ID:DmLoR8Bu0
2. 精度と誤差
setTimeoutは指定した時間で必ず正確に実行されるわけではなく、若干の誤差が発生します。どちらもこの点においては同じですが、**tの方が「時間の計算結果が直接書かれているため誤差の発生ポイントが少ない」**という印象を受けます。
例えば:
1000 * n // 計算で導出
1000, 2000, 3000 // そのまま指定
上記の違いから、誤差を気にするならtの方が直接的で分かりやすいです。
2025/01/27(月) 20:46:35.01ID:DmLoR8Bu0
3. メンテナンス性
tのコード
時間間隔を変更したい場合、初期値・上限値・増加値だけを変更すればよく、スケール感の変更がしやすい。
nのコード
「1000を掛ける」という計算式が直接書かれているため、変更時に計算式部分にも目を配る必要がある。
2025/01/27(月) 21:16:45.23ID:T51mrGlF0
一般常識があるやつならtを使うメリットなんて一つも無いと分かるはずなんだがChatGPTはいまだにこんな意味のない回答するんだな

俺の使ってるChatGPTと同じとは思えない
2025/01/27(月) 21:44:29.89ID:mnVLXxyY0
ChatGPT君はわりと利用者に忖度した回答するので、利用者次第で馬鹿にもなる
2025/01/27(月) 21:56:48.37ID:DmLoR8Bu0
いや、質問をそのままGPTにペーストしたよ
利用者の意見なんて1つも入れてない
2025/01/27(月) 22:13:58.10ID:mnVLXxyY0
質問の仕方に利用者の知識量とか思考が入り込んで、ChatGPTはそれに応じた回答をする。回答のレベルは質問のレベルに合致する
2025/01/28(火) 03:33:19.87ID:7uzvZSX70
それはそうだけど、正確性からそんなに大きく逸脱はしてないでしょう
というか、客観的に大多数に正しいと思われる解決法を提示してくれるから助かる
無料のは今だに嘘が混じってる事が多いんだけど、有料のPlusは結構正確になった
参照してる知識量が無料のものの何倍もあるみたい
2025/02/06(木) 13:59:21.74ID:FTswYlc4a
外国のサイトにある動画から字幕を抜き出したくて色々試したけど上手く行かなかった(www.francetvinfo.frというとこ)
でもffmpegだとあっさり成功した
もしJavaScriptに詳しければffmpegというツールに頼らず抜き出せたのだろうか?
chatGPTに聞くとDOMで作成してるみたいな答えが帰ってきたので字幕作成はJavaScriptで行っているのかなと思った
今字幕抜き出せた喜びとツールに頼った悔しさが入り混じってるけど皆なら自力で抜き出せた?
295デフォルトの名無しさん (JP 0H96-qIVI [133.106.33.6])
垢版 |
2025/02/13(木) 12:33:25.69ID:DZyx9aKAH
失礼します。
insertBeforeでHTML要素にnodeを追加する際、複数ある要素(class)の1番最後にのみnodeを挿入したいのですが、可能でしょうか?


<div class="unko"></div> //1
<div class="unko"></div> //2
<div class="unko"></div> //3
<div class="unko"></div> //4
<div class="unko"></div> //~以下ランダムで増減


このように、ユーザーが投稿するコメントのようなランダムで増減するclass要素があり、その繰り返しの1番最後にnodeを挿入したいのですが、

hoge[0].parentNode.insertBefore(elmDiv, hoge[0].nextSibling)

これを改良して

hoge[※最後の要素].parentNode.insertBefore(elmDiv, hoge[※最後の要素].nextSibling)

とするにはどうすればいいでしょうか?

そもそも不可能である場合、不可能であると断言して頂けると幸いです。
2025/02/13(木) 13:01:37.54ID:xGLXSNfR0
:last-of-typeとか:last-childとかで出来るけどそういうの知らなくても”配列の長さ-1”くらいは思いつこうよ
297295 (ワッチョイ b149-GKZ3 [180.221.149.54])
垢版 |
2025/02/13(木) 13:14:34.23ID:8KNio/Em0
> 296
つまりあまたはわたしをアホとおっしゃるのですか?
298295 (ワッチョイ b149-GKZ3 [180.221.149.54])
垢版 |
2025/02/13(木) 13:15:37.17ID:8KNio/Em0
💩
2025/02/13(木) 13:39:50.07ID:tamKTj1t0
>>295
hoge[hoge.length-1].insertAdjacentElement("afterend", elemDiv);
2025/04/05(土) 12:51:42.18ID:7VBJ2biq0
関数定義するとき、
function funcName() { ~}

const funcName = () => { ~ }
で、関数内でthisの参照先を気にしないとすると、どっちの書き方のほうがいい、とかありますか?

なんとなくconst~で書いてたときがあるんですが、VSCodeでアウトライン表示したときに、functionで定義するとメソッドのアイコンになるけど、constで書くと変数扱いになるで他の変数と(ツリー上)区別が付きにくくなり、functionの書き方に戻しました。
2025/04/05(土) 21:28:14.07ID:sUMv9Ks50
>>300
巻き上げがあるから関数宣言はやめた方がいい
2025/04/05(土) 21:48:41.97ID:lcZxDDXa0
巻き上げがあったら困る場合だけ関数式

関数宣言のほうが
- 巻き上げがあるからトップダウンで書ける
- 名前付きの関数なのでdebugabilityが高い
ので迷ったらまずはこっち
2025/05/08(木) 23:46:11.91ID:fGnrU9Lw0
constに入れておかないと、チーターに簡単に上書き改竄されたりすんのか
2025/05/11(日) 01:02:25.07ID:N+caZpkb0
水前寺清子?
2025/05/11(日) 17:20:56.05ID:NQ286Pqc0
バイナリをいじる場合はconstとか関係ない。
2025/05/30(金) 22:49:08.32ID:1o7EfCHn0
愚痴ですが…
当方プログラミングはC言語やVBA、ほんの少しPythonを触ったことがあるぐらいのド素人です
今はサポートされてない昔の測定機器のSDKですが、dllファイルがVBAからライブラリとして読めない現象が発生
原因分からず、VBA詳しい友人にdllファイルをアンコンパイルして解析してもらうとC++で書かれているためそもそもVBAで読めないと言われました
ChatGPTにも相談すると中間Wrapper作りますよ!と言われ、紆余曲折有りながら出来上がったものをVBAで読み込んでも動作せず
諦めてダメ元で公式のサポートを頼るも、日本国内の代理店からは対応できないと断られ、やむを得ず国際電話で計測器メーカー直轄の韓国の拠点へ電話
後日メール返すとのこと
疲れた
2025/05/30(金) 22:50:16.72ID:1o7EfCHn0
ちなみに今回の対応も韓国への国際電話も自腹です(^q^)
何やってるんだろうな俺
308デフォルトの名無しさん (ワッチョイ e3b4-nntB [2400:4151:a4a0:6500:*])
垢版 |
2025/10/11(土) 20:33:48.15ID:n5gETjNc0
video_elm.addEventListener(
"ended",
function(){
alert("全て見た");
}
);
動画を再生しきると「全て見た」と出るけど
video_elm.currentTime = 0;で再生位置を最初に戻してまた再生しても
「全て見た」と出ませんでした。
このイベントは1回限りなんですか?
レスを投稿する

5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。

ニューススポーツなんでも実況