JavaScript の質問用スレッド vol.125
レス数が1000を超えています。これ以上書き込みはできません。
!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 一旦、要素 tDate_elem を取得しておいてから、
その textContent に値を設定する。
つまり更新
const tBody = ItemList.item(i).textContent;
const tDate_elem = ItemDate.item(i) // 要素
const tDate = tDate_elem.textContent;
console.log( tDate ); //=> 0000
const replaceDate = tBody.split("*")[1];
console.log( replaceDate ); //=> 2023.08.15
tDate_elem.textContent = replaceDate; // 設定
表示
おはようございます*2023.08.15
2023.08.15
ごきげんよう*2023.08.20
2023.08.20 >>900
それはもう質問に答えたというよりデバッグと修正を代行したのであってこのスレの主旨には合わない
おそらく他の人もそういう認識だからこの件に口を出さないんだと思うよ jQuery なら、もっと簡単
$( function ( ) {
$('.tx-body').each(function (index, elem) {
const tx_body = $(elem);
console.log(index + ': ' + tx_body.text());
const replaceDate = tx_body.text().split("*")[1];
console.log(replaceDate);
// tx_body 要素の次の兄弟で、tx-date クラスがある要素。絞り込み
const tx_date = tx_body.next('.tx-date');
console.log(index + ': ' + tx_date.text());
console.log('tx_date.length: ' + tx_date.length); // 0 or 1
// 該当する要素があれば設定する。つまり更新
if (tx_date.length === 1) {
tx_date.text(replaceDate);
}
});
} ); chrome拡張どう作ったらいいのでしょう？
こんな感じではリダイレクトが連続してしまってだめでした
urlsのフィルターの仕方、もしくはリダイレクトをせずにそのURLにアクセスする方法が分かれば解決できるとは思うのですが・・・
//aaa.com/xxxx/ へのアクセスを aaa.com/abc/xxx/ へ変換したい (以下は動作しない)
chrome.webRequest.onBeforeRequest.addListener(
function(details)
{
if (details.url.match(/abc/))
{
return {}; //←ここを書き換える方法が分かればいける
}
else
{
details.url = details.url.replace(/aaa.com/g,"aaa.com/abc");
return {redirectUrl: details.url };
}
},
{
urls: [ "*://aaa.com/*/" ], //←ここを書き換える方法が分かればいける
},
["blocking"]
); そこ見てどうすればいいのか分からないからここに来た・・・ return detail.documentUrl
とか？ return detail.documentUrl;
return {redirectUrl: detail.documentUrl};
どちらもダメ。リダイレクトのURLを返すことになるから、リダイレクトの無限ループに入っちゃう
それなら、リダイレクト止めればいいじゃんって思うんだけど
return {cancel: true};
のようにするとナビゲーション自体が止まってアクセスできなくなっちゃう 無限ループしてるって事は条件分岐失敗してるんじゃないの？
console.logデバッグでもしてみたら？ >>903
リダイレクト後のurlに?foo=barとかクエリ文字列付けてみるとかは？
これでフィルタにかからなくなるみたい
もちろんこれでサーバが誤動作起こさないのが前提だけど サイト内にフォームが設置してあるページが複数あります
お問い合わせ、新規登録、ログイン、パスワードリマインド、などです
一時的に inputタグを入力不可にしたのですが
querySelectorAll("input,button").forEach( e => e.disabled = true );
複数あるページのうちお問合せだけは入力できるように、
現在は下記の効率の悪い記述になっています、、
document.querySelectorAll("#contact input, #contact button").forEach( e => e.disabled = false);
それぞれのページの<body>に idを付与していてそれで判別しているのですが
<body id="contact">
<body id="login">
<body id="remainder">
もっとスマートにお問い合わせページだけ入力できる
ヒントをお願いできませんでしょうか？ 【環境】windows10 chrome 最新版
【何をしたのか】開発ツールコンソール上でサンプルコードを実行すると
条件文が undefined にもかかわらず if 文内 console.log(1) が実行される
【エラーメッセージ】なし
【期待する結果】 なぜこうなるのか理由が知りたいです
【サンプルコード】
console.log(localStorage && (localStorage.getItem('deck')));
if(localStorage && (localStorage.getItem('deck'))) console.log(1)
if(undefined) console.log(2) >>912
console.log(localStorage && (localStorage.getItem('deck')));
の結果は本当にundefined？、undefinedの上の行に何か表示されてるよね？ >>911
下記セレクタでイケるはず（問い合わせページ以外でinput要素とbutton要素を抽出）
body:not(#contact) :is(input, button) >>912
下記のログ出力はどうなる？
console.log(localStorage.getItem('deck') !== undefined ? 'バカめ!!よく確認しろ!!' : 'undefined です'); >>913
コンソール出力結果は
undefined
1
undefined
です
>>915
バカめ!!よく確認しろ!!
undefined
になります getItemは該当キーに対する値がなければundefinedではなくnullを返すのでlocalStorageが存在していれば
console.log(localStorage && (localStorage.getItem('deck')));は
null
undefined
と出力される
undefinedの上が空行になってるならdeckに対する値が入ってる
それが空文字ならfalsyなのでconsole.log(1)は実行されない
truthyな不可視文字(例えば改行コード)が入っていればconsole.log(1)も実行される
inspectやencodeURIで中身に何が入ってるか確かめればはっきりさる あー わかりました
"undefined" っていう文字列がすでに入っちゃってたみたいです
丁寧に回答いただいてありがとうございました！ ウキキ🐒
input セレクタで解決しましたカッコイイ記述ありがとうございます >【何をしたのか】開発ツールコンソール上でサンプルコードを実行すると
>条件文が undefined にもかかわらず if 文内 console.log(1) が実行される
不可解な挙動に遭遇したとき、自分が何か勘違いしてないかまずそこを疑ってみようという教訓
あとtruthyやfalsyな値の取り扱いは慎重に if(rd41.value){
dofn()
}
これが正しく実行されないのですが（暴走するというか、意味不明な実行結果が現れます）、if文の中で関数の呼び出しは出来ないのでしょうか？
もしそうなら、このコードを正しく動作するように書き換えることは出来ますか？ 質問です
下記のURLは音楽サイトJangoの再生ページURLです
https://www.jango.com/stations/400536192/tunein
https://www.jango.com/stations/397649609/tunein
https://www.jango.com/stations/272072365/tunein
これらのページをブラウザで開いた時に出てくる水色のメッセージ
パネルをJavaScriptで閉じる方法を教えてください
Jango plays unlimited music for free and with no commercials.
というメッセージの右隣にある[×]マークをクリックしたいのですが
document.getElementsByClassName("MuiAlert-action")[0].click()
では上手くクリックすることができませんでした document.querySelectorAll(“.MuiDialog-container,.MuiBackdrop-root”).forEach(e => e.remove()) >>926
早速ありがとうございます
ただ、注意深くコピペして実行させたのですが
残念ながらメッセージパネルは閉じられませんでした document.querySelector(".MuiSnackbar-anchorOriginTopCenter").remove() ブラウザ上の全然関係ない場所をクリックして自己解決しました
document.elementFromPoint(1, 1).click()
根本的な問題から逃げたようで悔しいですけどｗ >>925
誰一人解決できなかったのか？
すまん、俺もわからんｗ 名前付き引数としてプロパティをもつオブジェクトを引数にする場合のJSDocの書き方ってどう書くのが正しいのでしょうか？
ネットで調べて以下の画像のように書くと、VSCodeで関数の説明で表示される時にプロパティ側の日本後説明部分が表示されません。
http://imgur.com/xhSQcMc.png
構文のほうには型は反映されてるので読み込めてはいるようなのですが… source = ['いぬ=ドッグ', 'ぬこ=猫咪', 'キャット=にゃんこ', 'ねこ=キャット', 'わんこ=小狗', '老鼠=ねずみ', '小狗=ドッグ', 'マウス=ねずみ', '猫咪=キャット']
これを
result = [['いぬ', 'ドッグ', 'わんこ', '小狗'],
['ぬこ', '猫咪', 'キャット', 'にゃんこ', 'ねこ'],
['老鼠', 'ねずみ', 'マウス']]
これに集計するにはどうしたらいいですか canvasでarc関数でx:100,y:100の位置に青で塗りつぶした半径3の円を描いたんですが
これと同じ位置に同じ半径で同じ色で塗りつぶした円を描くと四角形ぽくなってちょっと大きくなって表示されます。
背景を塗りつぶして１回目に描いた円を一度消去してから２回目の円を描いても同じでした。
文字の場合でも同じ位置に同じ文字を重ね書きすると太くなっちゃいました。
どうすればちゃんと同じ位置に同じ物を描いても太くならないようにできますか？ >>933
競技プログラミングのスレで聞いて！
これは、UnionFind で、3つの木になる
UnionFind は、プログラミング・コンテスト・チャレンジブック(蟻本)に載っている alertのテキストをコピペする方法とかってご存知ありませんか？
どなたか知恵をお貸しください >>939
alertのテキストをコピーするには、通常はウェブページ上でalertが表示されている状態で、テキストを選択して右クリックし、"Copy"や"コピー"を選択する方法があります。ただし、ウェブサイトのalertはJavaScriptで生成されるもので、そのテキストを直接コピーする方法は制限されていることがあります。可能であれば、そのテキストを手入力でコピーすることができます。 検索すれば？
コピーを防ぐ方法は、幾つかある
ブラウザのF12 ボタンの開発者ツールで調べるとか >>936
亀だけど
fill()が複数回呼ばれると円が太るみたい
ctx.arc(100, 100, 3, 0, Math.PI * 2);
ctx.fill();
ctx.arc(100, 100, 3, 0, Math.PI * 2);
ctx.fill();
でなく、
ctx.arc(100, 100, 3, 0, Math.PI * 2);
ctx.arc(100, 100, 3, 0, Math.PI * 2);
ctx.fill();
でやると円が太らなかったよ console.log()のlogってどういう意味ですか？
printとかputじゃなくてlogで出力って珍しいですね consoleオブジェクトのログ情報を出力するためのlogメソッド… …どこまで信じたらいいの？
>>947
ありがとうございます const arr =Array(3).fill([]);
arr[1].push(0);
console.log(arr);
この場合arrは[[], [0],[]]になっていることを期待するのですが実際には[[0], [0], [0]]となっています
まったく納得いかないのですがなぜですか >>953
fillがそういう仕様なんですね
納得です
ありがとうございました 変数宣言の際に、letよりconstを積極的に使うべき、とされているのはなぜでしょうか？
後で値を変えられるletの方が便利だと思うのですが JSにかかわらず変数は使ってる道中に値変換したり変数使いまわしてるとエラーの種になりやすいし、それを防止するのが大きいかな
配列やオブジェクトの値はconstでも変えられるし
昔はそういうごちゃごちゃ動く変数のトレースするのもプログラム組むやつの能力ってされてたなぁ コードを上から読んでいく時にconstだとこの値は後から変わることがないと決めつけて読むことができる
letだとどこかで書き換えられるのに注意しながら読まないといけない 可読性の部分が大きいよね
varで変数定義しているクソコードなんかリファクタリングしたくないだろ？ constで最初から定義した後にそれが動的な値だった場合タイプエラーを起こしてからletに書き換える事はあるけど最初からletで定義しちゃうと後々constに書き換えた場合もしそれが動的な値ならプログラムそのものが動かなくなって新たなるバグを生むでしょう？
最初は縛りを強くしておいて後から緩めるはあるけど逆はないですよ 条件によって const の値を変えられるようになるといいんだけどな。
簡単なのなら参考演算子でやれるけど。 >>961
よくわからないけどそれってconst使う意味あるの？ 察するに初期代入時に場合によって違う値を入れたいということだろう
三項演算子を出してるし 答えてくれた方々ありがとうございました
積極的にconstを使っていきたいと思います >>962
うまい例になってるかわからないけど、何かのプロパティに値が入ってたらそれ、無ければデフォルト値を const に入れたいとか、この条件がもっと複雑になった感じとか。
あるいは、何かの基準座標を const に入れたいけどその値は一発では求まらないとか。
単にこれだけなら中間的な変数を使って値を求めて、最後に const に代入するって手もあるだろうけど、中間的な変数はスコープから追い出したいのにできないよね。
const x;
{
let a, b, c;
:
x = a + b * c;
}
みたいにできれば a b c はスコープから追い出せるけど、実際は
let a, b, c;
:
const x = a + b * c;
ってやらざるを得なくて、x が存在するスコープから a b c を追い出せない。
この計算を function に切り出せよと言うかもしれないけど、できればそうすりゃいいけどどこにでも適用できるというわけでもない。 調べてみると苦肉の策で↓みたいな書き方が紹介されてたけど可読性考えるとどうだろうね
const x = (() => {
let a, b, c;
:
return a + b * c;
})(); 欲しいのはただのブロックなのに関数として書かなければならないというのが余計なことをやらされている感はある。 >>966
処理の結果として複数の const、例えば x y を求めたい時は、その書き方でも難があるよね >>970
その場合はタプルで受け取るようにすれば問題ないよ
const [x, y] = (() => {
let a, b, c;
:
return [a + b * c, a * b + c];
})(); >>971
ああ、それが現状の最適解な気がするね。
後で汎用関数化したくなっても対応しやすいし。
まあ >>968 みたいな感覚はあるし、関数としてのコストも気になっちゃうけど。 const num = 1;
とした時、numはCやJavaのint型と違って、1という値のオブジェクトを参照している
という理解でよろしいでしょうか？
(numという名前でラベリングされたメモリ領域には、1そのものではなく
数値オブジェクトへの参照値が入っている？) >>973
1 はプリミティブ値。
Object型ではない。 >>974
レスありがとうございます
分かりました
文字列('Hello World'など)もプリミティブなんですよね
どうやって内部で実装されてるんですか？ >>973
実装的には全て参照扱いだよ
ただし数値の場合は参照(ポインタ)そのものに数値を埋め込むという方法
だから全て参照だけどメモリは消費しないというハック >>975
質問が大雑把過ぎる
もっと具体的に詳しく 返信くれた方々、ありがとうございます
>>976
TOEICのスコア400点台だったので厳しいです…
>>977
参照扱いでもプリミティブ型って言うんですか？
Javaではintやdoubleなど参照を用いずにデータを記憶する型をプリミティブ型と
呼んでいたので、少し混乱しています…
>>978
すみません、以後気を付けます >>977は気にしなくていいよ
英語苦手でもプリミティブには7つの型がある、ぐらいは読めるだろう
あと日本語のページがないか調べるぐらいはしよう
https://developer.mozilla.org/ja/docs/Glossary/Primitive >>979
そもそもそんなことを気にしてどうするの？
何がしたくての質問？
ぶっちゃけ表向き気にするべきなのは、その変数 a を別の変数 b に代入して、b を操作したら a まで同じように変わるのかどうかだけだと思うよ。 >>980
分かりました
ありがとうございます
>>981
レスありがとうございます
うーん、まあこだわりとでも言いましょうか…
個人的にはそこまで知っておくことは無駄ではないと思います >>975の質問なんかは明らかに自分のスキルや理解力に不相応なことを知ろうとしてない？
それを知ろうとするのはもっと力を付けてからがいいと思う >>982
実装を知る以前に仕様は理解してる？
「仕様書のここをどうやって実装しているか、を知りたい」なら誰かしら答えるかもしれないが、そのようなレベルにも見えない
仕様を理解せずして、実装を理解するのは無理 >>984
乗っかって補足すると、同じ仕様の実装なんて何通りもあるのよね。
そこであえて実装を知りたいというなら、その理由も書く方が間違いないよね。 レスありがとうございます
遅くなってすいません
>>983
そうですよね
まあ単純に、文字列である以上、変数用に確保したメモリ領域内に簡単には収まらない
だろうなと推測したんです
でも不変な値なら参照使わなくても収まるのかな
>>984
微妙です
入門書を読んで間もないレベルです
>>985
分かりました
まあ実装って言い回しが大仰でした
参照を使ってあるかどうかを特に知りたかったんです そのレベルを気にする人はもうフレームワーク作るレベルだろう >>982
あ、ややこしい書き方してすまん
単にuint64_tが値の参照でオブジェクトの場合はポインタが入ってて
整数の場合はそのまま使ってると言うことを言いたかっただけ
typedef uint64_t JsValue;
JsValueが「値」を指す参照
JsValue obj = createObject(); // Object
JsValue smi = createSmi(); // Small Integer
こうすることでオブジェクトも数値も同じように扱える
V8もJSCも全部これ レスありがとうございます
>>987
そうなんですかね
>>988
内容がハイレベルですね >>986
入門書を読んで間もないレベルなら、口が避けても「仕様を理解した」とは言えない
実装を覚えるのは仕様書を読めるようになった後だろう
https://262.ecma-international.org/14.0/ 素人な質問で申し訳有りません。
下記のスクリプトで何故か関数丸々出力されてしまうのです。
テキストでは改行が多すぎる為、投稿出来ないため画像で申し訳有りません。
下のグレーのフォントが出力結果です。
出力指定していないので、何も出力されないはずなのですが…。
https://i.imgur.com/tJnx1oK.jpg >>991
画像でコート見るのはしんどいので、>>2のサイト使って現象が再現するコードを掲示してほしい >>991
どうでもいいけど関数名の付け方にセンスないな
コメントもつける意味がないゴミ
変換ならconvertとかにすりゃいいのに… /や:が入ってるのを明示してるのはコメントとして意味があるだろう classのインスタンスで#プライベートメソッドにアクセスする方法ってないんでしょうか？ >>992
サイトの使い方がいまいち分からず試してましたが、サイトでは症状が再現できず想定通りの挙動でした。これは作ってるアプリ側に原因があるのでしょうかね。
mementoというdbアプリだったのですが。
>>993
自覚はあります。プログラムに興味を持ち練習はじめなので勘弁してやってください。思いつかないんですorz >>998
>>991を実行してる環境について書いてくれないと
コードで見えてる部分以外については知りようがないんだから
あと関数名を思いつかないならAIに候補を挙げさせるのはアリ
続きが必要なら次スレにどうぞ レス数が1000を超えています。これ以上書き込みはできません。
