JavaScript の質問用スレッド vol.126 ->画像>2枚

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　https://plnkr.co/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

■次スレの立て方
本文一行目に「!extend:checked:vvvvvv:1000:512」と書いて、>>1-5のテンプレの「前スレ」「関連スレ」を最新化して立ててください。

■JavaScriptスレの現状
元々はWeb制作板が本スレでしたが、ライブラリ信者に荒らされ、プログラム板に避難所として本スレが立てられました。
Web制作板の本スレは荒らされてから次スレが立っておらず、重複スレの消化のみとなっています。
実質的に本スレは存在しない為、質問者はWeb制作板、ブログラム板のどちらのスレで質問しても問題ありません。

■関連スレ(Web制作板)
JavaScript の質問用スレッド vol.126 (重複スレの消化)
http://2chb.net/r/hp/1439005423/
JavaScript ライブラリ総合質問所 vol.5
http://2chb.net/r/hp/1465399470/
jQuery 質問用スレッド vol.7
http://2chb.net/r/hp/1466750494/

■各種仕様
◆ECMAScript
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
https://262.ecma-international.org/13.0/ (ECMAScript 2022)
◆HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/ (HTML Living
Standard)
https://momdo.github.io/html/ (HTML Living
Standard日本語訳)

テンプレここまで

内容は前スレ踏襲

テンプレの範囲ぐらい修正しとけばよかったかな

前スレで日付変換の関数で質問していた者です。

開発環境としましては、AndroidのmementoというDBを制御するために、Javascriptの使用が可能なので、試しに勉強してみようと思った次第です。

コードエディターや>>2記載のサイトでは正常動作をしていることから、開発環境に問題があると判断しました。ただそうなるとDBと合わせて使用できるメリットが無くなるので代替手段を模索しているところです。

成功例(日時が２つ表示)


失敗例
(consolelogに対応しないため、コメントアウトしていますが、関数が結果に出力される。何も表示されないはず。)


コードエディター
https://play.google.com/store/apps/details?id=com.rhmsoft.code

memento
https://play.google.com/store/apps/details?id=com.luckydroid.droidbase

const date1 = new Date('2021/01/01')
const date2 = new Date('2022/02/02')
const stDate = dateToYyyymmdd(date1);
const stTime = timeToHhmm(date1);
const edDate = dateToYyyymmdd(date2);
const edTime = timeToHhmm(date2);

console.log(stDate + stTime + " " + edDate + edTime)

// DateをYYYY/MM/DD文字列に変換する
function dateToYyyymmdd(date){

let n = date.getFullYear().toString();
n = date.getFullYear().toString() + "/";
n +=
(date.getMonth()+1).toString().padStart(2, "0") + "/";
n +=
date.getDate().toString().padStart(2, "0") + "_";
return(n);
}

// DateをHH:MM文字列に変換する
function timeToHhmm(time){
let n = time.getHours().toString().padStart(2, "0") + ":";
n += time.getMinutes().toString().padStart(2, "0");
return(n);
}

申し訳有りません。
サービスでの稼働は確認出来たのですが、共有方法が分からないので、連投になってしまいましたが、直接描かせていただきました。

>>10
よくわからんけどそもそもその環境は関数定義して呼び出すとかできるの？
全体を関数として扱って最後の戻り値を文字列として解釈してるとかそういうノリではなく？

>>10
https://wiki.mementodatabase.com/index.php/JavaScript_field
>but only the result of the last operation will be entered into the field.
とあるから最後の文の値が結果値として採用される
だからtimeToHhmm関数自体が結果になっている

修正したければコードの最後に
const result = stDate + stTime + " " + edDate + edTime
などと追加すればその値が結果値として採用されるんではないだろうか

>>11,12
まさに仰るとおりでございました。
最後に出力文を置くことで正しく稼働を確認できました。
改めて調べようが足らなかったことを痛感しました。正直自分の中に『これ、なんかバグってるのかな…』などと考えてしまってた所もありましたが、単に仕様であったことに恥ずかしさとプラットフォーム開発者に申し訳ないですね。
wikiもしっかり読み込んで改めて勉強しなおしてみます。
本当にありがとうございます。
長々と失礼しました。

nullとundefinedはどう違うのでしょうか？

>>14
型も値も何もかも違う

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

単純に、nullは「空」、undefinedは「未定義」と理解しておけばいいでしょうか？
うーんでも、空だから未定義であるとも言えるし、未定義だから空とも言える気もします
難しく考え出すとハマりますね…

まず「空」とはなんぞや、「未定義」とはなんぞやってところから勉強してみたら？

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

自分なりに少し調べてみたら、
undefinedは「これから何かしらの値が入る余地があるがまだ定義されていない」
nullは「値が入りようがないから空」
という違いがあるみたいですね

意味的には別物だというのは納得できた？

>>19
はい、それなりに理解出来たと思います
ありがとうございます
JSでは、undefinedに比べるとnullの登場頻度はかなり低いみたいですね

設計ミスだから使い分ける必要はなく
外部とのやりとり以外にnullは使わないと統一した方が問題でにくいし楽

配列の宣言はvar list=[];
オブジェクトの宣言var obj={};
配列の配列の宣言は var list=[[]];
ではオブジェクトの配列の宣言はどうすればいいですか？
var obj={[]};のようにしてもできませんでした。
obj["aaa"][0]=100;
obj["bbb"][1]=200;
のように値を入れたいです。

配列のオブジェクトって言った方が正しいのかわからないけど
とにかく>>22のように代入したいんです

[[]] 配列を入れ子にしても1番目の要素を[]に初期化しているだけで
配列として使いたい場合に必要な手順ではない
仮に1番目を[1,2]、2番目を[3]にしたい時に操作が変わってしまうので邪魔なだけ
配列は空のまま [] で十分

あとconst/letじゃなくvarで書くスタイルは古い
参考にした情報があるなら忘れよう
更新もせずずっと放置しているなら害悪でしかない

let obj = {};
obj["aaa"] = [100];
obj["bbb"] = [undefined];
obj["bbb"][1] = [200];

obj["bbb"][1] = 200;

const obj = {
aaa: [100],
bbb: [, 200]
};

>>23
そこがあやふやだからどう宣言すればいいかも分からないんだと思う
君が宣言したいものは「配列をメンバーに持つオブジェクト」だよ

>>24-28
ありがとうございます

オブジェクトのkeyにelementを使うのは不具合になりますか？
const element = document.getElementById("test_id");
const element2 = document.getElementById("test2_id");
let obj ={};
obj[element] = 200;
obj[element2] = 300;というような感じです
一応動作はしたけどやらないほうがいいんですか？

>>30
本当に期待通りに動いてるかしっかり確認した？

const element = 何々
で、elementがオブジェクトなら、キーに使ってはならない。
primitive なら、キーに使える

この表記は、constがついていても、
そのオブジェクトの中身・内容は変えられるから、
本当の意味のconstではない

Ruby では、オブジェクトをfreeze すると、浅い第1階層で変更できなくなる。
変更できなくなった部分に、次の第2階層のオブジェクトがあれば、そこは変更できる！

だから完全に深い階層まで、再帰的にfreezeしないと、
本当の意味でfreezeにならない

>>20
undefined はユーザーが作り出せないものだから、
普通は空を表すのに、null を使う

Rubyのnil と同じ

>>30
MapやWeakMapを使おう

>>31
確認したら期待通りに動きました

>>31-33
ありがとうございます

>>34
>>30のあとに
console.log(obj[element]);
と書くと何が表示されると思う？

あ、これだけだと前提が足りないか
test_idもtest2_idもdivタグだとする

>>16
実用的はそれらは同値だと判断した方が良い
少なくともコード上分けるメリットはゼロ

JavaScriptで関数を変数に代入できると聞いて、
物理学で万物が粒子だけでなく波としての性質も合わせもつと聞いたときと同じくらいの衝撃を受けました。
どうもこのJavaScriptで関数を変数に代入できるという考えがしっくりこないのですが、どう考えれば受け入れられますか？

>>38
関数定義の構文
function f() {...}
は関数オブジェクトを変数 f に代入してるだけなので
g = f
としたら g() で同じ関数呼べるし
f = 123
と再代入したら f() で関数呼べなくなる
f = () => {...}
これで関数定義できることからもわかる

>>38
Arrayだろうが関数だろうが変数に格納されてる値はポインタで
値を使う時に自動的にデリファレンスされてると思っとけばいいんじゃね

最近の言語ならどれも同じようなことできるけどね

>>38
実態からはかけ離れるけど、メソッドが1個しかないオブジェクトの特別な扱いだと捉えるとどうだろう？

関数を変数に代入できるというのは、C言語のような古いものでも関数ポインタという形で実現してる。
関数はそのコードがメモリ上に配置されていて、関数の呼び出しはそのメモリのアドレスにジャンプするという形で行われるけど、そのジャンプ先のアドレスを変数に入れる感じ。
JavaScript ではクロージャって概念でもっと高度だけど、代入された変数には結局その関数の在りかが紐づけられてる。

やろうと思えば各要素に関数の入った配列を作れるってことが

LISP→Scheme→Javascriptという歴史的経緯があるのでそこから理解すると判りやすいかも
コードはLISPにとってはただのリストというデータ表現でしかなかったのでコードを変数に代入するというのはとても自然な事だった
Schemeでレキシカルスコープが定義され一般的なクロージャの形になった
括弧だらけの構文は一般受けしないのでCっぽい構文のJavascriptが生まれた
ざっくり書けばこういうわけです

>>43
分かりやすいかなぁw

挙がってる各言語を知ってる人はなるほどと思うかもしれないけど
そうでないならただの遠回りな気が

>>39-41は代入できますって以上の説明はできてないし
ショックを受けた38が知りたいのはそういう事じゃないんだろう
Coders at WorkによればJavaacript設計者のブレンダン・アイクはSICPとSchemeの崇拝者で、
最初のアイデアはNetscapeブラウザにSchemeを持ち込むことだったとの事だよ
まずはSICPでも読むといいんじゃないの

起源が知りたいわけじゃないと思うよ…

別に関数を変数に代入できるのはJavaScriptが初とか唯一ってわけじゃないからそこを掘り下げてもね

>>47-48
起源というかね、こういうのは歴史的経緯を辿って理解した方が判りやすいという話よ
君らのつまらんレスを読むよりはずっとね
Javascriptでやってる事は関数のポインタとはわけが違うんだから

>>49
それは絶対にない>わかりやすい

歴史を追いかけられるくらい論理的に文章組み立ててくれないか？

>Javascriptでやってる事は関数のポインタとはわけが違うんだから

LISPが違うのはわかるけどJavaScriptは関数ポインタとそんなに違うんだっけ？

>>49
賛同されなかったからつまらんレスとか言い出すのは大人げないよ

>>52
だいぶ違うぞ
クロージャって言葉知ってる？
定義された場所のローカル変数を参照できるの
そしてローカル変数がクロージャによってキャプチャされたら
その変数はクロージャが死なない限りずっと保持される
これは関数ポインタとは訳が違う
そしてそれこそがscheme信者のアイクが取り入れたかったもの
クロージャじゃないなら関数ポインタと大して変わらんっちゃ変わらん

>>54
関数がクロージャを形成するかどうかと
関数を受け渡すときに関数へのポインタを使ってるかどうかは直交した別の問題
実際どのJavaScriptエンジンも関数へのポインタを使って変数への代入や関数の受け渡しを実現している

C言語はクロージャをサポートしないのでC言語の関数ポインタを使ってもクロージャにはならないのは当たり前

もう少し言えば関数を受け渡し可能にするためのスコープ解決の仕組み/ルールと受け渡す際に関数へのポインタを使ってるかどうかは別の問題

別スレで見かけたトンデモ記事書いてる人だと思うけどレキシカルスコープの話と第一級関数の話とレキシカルスコープを使ったクロージャによって第一級関数を実現する話を混同してるんじゃないか

Schemeはレキシカルスコープを使ったクロージャという考え方を広く普及させた言語ではあるがレキシカルスコープや第一級関数はScheme以前の昔から実現されてたものだし
レキシカルスコープを使ったクロージャもScheme以前の昔からあった考え方

Schemeが初めてレキシカルスコープを定義したかのように書くのはやめよう

>>56
ちょっと指摘させてもらうと
誰も起源の話なんてしてないよ

>>56
いや別に起源とかはどうでも良くて関数ポインタとは違うよって話をしてるだけなんだけど

>>57
>>43がしてるでしょ
この人同じように間違ったことをあちこちで書いてるから指摘しただけ

彼は命題論理が理解できなくて、120年前の古文書まで読み返して、それでも分からなくて200年前の哲学書まで遡った結果、今でも命題論理が分かってないって人間だから、彼の歴史的経緯を遡れば理解しやすくなるって主張は実は彼自身によって反証されてたりする

>>38 が分かりやすかったかどうか答えてくれれば解決だな

さっぱり分からん

おっIP同じやし38本人やん
まあそうだよな。あの説明でわかりやすく人間なんておらんやろ

クロージャは第一級市民関数。
関数外のローカル変数などの文脈を取り込む。
つまり、スコープがゆるい

一方、Ruby の関数はスコープがきつくて、
関数外のローカル変数を通さないので、第一級関数ではない。
ただし、ブロックはブロック外のローカル変数を通すから、クロージャ

他に、レシーバーとメソッドを持ち運ぶ、メソッドオブジェクトもある

>>38,62
何がどうわからないのか、を詳しく説明してくれ。
具体的なところがさっぱり分からん。

そりゃそもそもLISPやSchemeを全く知らない人だったんでしょ
分かりやすくなる要素なんて1ミリもないわな

struct Closure {
struct Env env;
struct Function func;
};

Closureの最もシンプルな実装
Envはキャプチャしたローカル変数を保持する環境
Functionは関数ポインタやらを保持してるオブジェクトだと思ってくれ
たったこれだけのことに過ぎない
関数ポインタにenvが追加されただけのものだ

クロージャやレキシカルスコープがどうやって実現されてるかという質問なら[[Environment]]のことを教えてあげるのはいいと思うけど
そういう話は誰もしてないからねぇ

結局のところ>>38の問題って関数は変数に代入できないものだっていう固定観念を他の言語に持ち込んでるところだと思う

プログラミング言語なんて所詮ヒトがそれぞれの都合で作ったものであって言語が違えば考え方や常識も違う
そこを理解して他の言語の固定観念を持ち込まないようにしないとこの先もしっくりこないこと、受け入れられないことだらけだろう

関数を変数に直接代入できないCの系譜の言語が最も広く普及してるから
そういう言語をやってきた人が関数を変数に直接代入できる言語に初めて接したら>>38のように驚くのは極々自然のこと

何が固定観念なのかなんてそれが覆るまで分からないんだから固定観念を持ち込むなとか言っても何の役にも立たないよ

今回のことで固定観念だったと気づければそれでいいと思うよ
そうすれば次からは疑ってかかることができるわけだし

糞長い式が真値のときだけ変数に代入したくて
if (糞長い式) {
X = 糞長い式
}
と書いてるんですが糞長い式を一度で済ますにはどうしたらいいですか

>>72
いますぐ糞をして寝ることだ。
糞!

X = 糞長い式 ? 糞長い式2 : X;

Y = 糞長い式
if (Y) {
X = Y
}

2回評価したくないときもあるし>>75

https://docs.python.org/ja/3/whatsnew/3.8.html#assignment-expressions
そこまで糞長くないならセイウチ演算子

X = 糞長い式 || X;
わかりやすい>>75でいいと思うわ

カルノー図やクワイン・マクラスキー法で書けないほど複雑だと
どうにもならない
if else if else にうまく展開するか
switch 文をうまく使うとかかなあ

質問させていただきます。

タグの属性onclick等で設定したイベント処理では
処理側の関数ではeventオブジェクトを参照出来ないのでしょうか？

色々探してるのですが見つけられなくて・・・よろしくお願い致します。

>>79
onclick属性のイコールの右側にある値は無名関数をそのままラップしたもので、eventオブジェクトはその関数の第一引数に渡される
つまり<タグ onclick="func(arguments[0]);">とすれば取得できる

>>79
引数で渡されてくるけど？
HTMLのタグの中に書く事例では意味も解らずその引数を省略しているのが多い

それより、今どきはHTMLと分離した、こっちの書き方がおすすめ
https://developer.mozilla.org/ja/docs/Web/API/Element/click_event

>>79
onclick属性値の中でもeventは使える。
<p onclick="console.log(event);">

ところで、「処理側の関数」とは？

ブラウザの開発者ツールにあるデバッガをつかえば気づける
止めたところの環境が丸見えになるから

例えば、jQuery なら、これで5つのキーのkeydown をキャッチできる

$( function ( ) {
$( 'body' ).keydown ( function( e ) {
switch( e.key ) {
// 32:空白、37:←、38:↑、39:→、40:↓
case " " :
case "ArrowLeft" :
case "ArrowRight" :
case "ArrowUp" :
case "ArrowDown" : console.log( e.key );
}
} )
} );

<button onclick="hoge(this)">ってやると意図しない動きすることあるからルールで禁止してるところもあるよね

子要素は含まないようにelementを取得するにはどうすればいいですか？
これだとテーブルの中のフォームをスライドさせてもalertが表示されてしまいます。
子要素は含まないテーブルのみのelementを取得することはできますか？


<table style="width:500px;height:300px;background:#ffff00" id="aaa">
<tr><td><input type="range" style="width:inherit"></td></tr>
</table>

<スクリプト>
const elm = document.getElementById("aaa");

elm.addEventListener(

"mousedown",
function(e){alert("www");}

);
</スクリプト>

何をやりたいのかがわからない説明
とりあえずプログラムを意識せずに
やりたいことの要件を日本語でよろしく
　

function(e){
// input要素以外をクリックした場合の処理
if (e.target.tagName !== 'INPUT') {
alert("www");
}
}

>>87
子要素を除外したelementを取得したいってことっす
>>88
ありがとうございます試してみます

それ、バブリングを意識しないとダメかもよ

先ほどは手元にソースコードがなかったので即席で質問してしまいました。
やりたいことはテーブル部分でタッチムーブしたときブラウザのスクロールを禁止にしたいのですが、
テーブルにあるスライダーまでロックされて動かせないようになってしまうので、
スライダーを除外したテーブル部分のelementだけ取得できれば上手くできるのでは？と思ったから先ほどのような質問をしてしまいました。
ようするにブラウザのスクロール禁止にするけどスライダーは動かせるようにしたいんです。

<table style="width:500px;height:300px;background:#ffff00" id="aaa">
<tr><td><input type="range" step="1" min="0" max="10" value="1"></td></tr>
</table>

<スクリプト>
const elm = document.getElementById("aaa");

elm.addEventListener(
"touchmove",
function(e){

e.preventDefault(); //ブラウザのスクロールを禁止にする
}
);
</スクリプト>

よく分からんが、cssでそんなのがあるな
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior

>>91
preventDefault()をstopPropagation()に変えるだけでいいかもしれない
この場合は多分preventDefault()はいらない

clickやmousedownに仕込む話したど思ったのでバブリングを指摘したけれど
スマホの場合にスライダー操作でスクロールしちゃうのを止めたい場合の話なら別問題
スクロールはブラウザ側の仕組みでDOMのイベントバブリングを止めてもダメ
それとターブルじゃなくて、スライダーをtouchmoveしたときにスクロールを止めたいのじゃないですか

要件としては
スライダーのtouchstartでブラウザのスクロール機能を無効にして
スライダーのtouchendでブラウザのスクロール機能を有効に戻す
スクロールの有効・無効は、スクロール要素のcssのスタイルで制御できるので、JavaScriptでstyle要素のoverflowYまたはoverflowXを'hidden'または'auto'と値を切り替える

>>93
ありがとうございます。
スライダーのelementにe.stopPropagation()をしたらスライダーを動かせるようになりました
>>94
ありがとうございます。試してみます。

すいません、vueの質問はここでいいですか？

↓あたりにどうぞ
JavaScriptフロントエンド総合 Part.11
http://2chb.net/r/tech/1660898820/

Vue vs React vs Angular vs Svelte Part.11
http://2chb.net/r/tech/1660969032/

ありがとうございます

WebフロントエンドでのJavaScriptを勉強中です
「jQueryでできることは素のJSでもできるのがほとんどになったから、jQuery不要」という話しが出てきますが、
エレメントの操作などで、素のJSだと記述する文字が長く、jQueryだとすごく短く書けるので、それだけでも十分便利と感じています。

document.querySelector('selector')
⇒　$('selector')

jQuery不要の場合、効率良く書くために代わりに何を使っているのか気になります。
大型のフレームワークとかでしょうか？フレームワーク使うと、ここのエレメントの参照・操作などはもはや不要になるのでしょうか？

jQueryの技術覚えてもjQueryにしか使えない。素のJS技術はどんなフレームワーク使っても役に立つ

>>99
コード補完機能（任意のスニペット呼び出しを含む）のある現代のエディタではその全てをキータイプする必要は無いし、どうしても短く書きたいならショートハンドを定義すればいい
たとえば、5ch互換掲示板ビューアであるブラウザ拡張機能「read.crx 2」では、同拡張機能の共同メンテナの方が作成したjQueryライク（互換ではない）なショートハンドライブラリ「shortQuery.js」が使われてる（だいぶ前にいわゆる「脱jQuery」のお供として導入されたハズ）

なんにせよ、初心者が今からjQueryを学ぶのは悪手

素のjs分からずにjquery使えるわけないだろ

>>99
その通り
ReactやVueに代表されるような昨今のフレームワークは開発者がDOMを直接操作しない

そう思ってるとこんなん当然知ってますよねみたいなノリでevent処理とかrefとか出て詰むゾ

>>99
jQueryの現在はHPフロントエンジニアさんが
抱負なライブラリでHPに花をそえるために使っているだけ
ウェブアプリ屋さんはjQueryが邪魔くさい時があるので使わない
どの分野を目指すのかが決まっているなら
その分野で何が主流なのかを見極めたほうがいい

動的に作られる特定の要素にだけイベント追加するのがラク

jQueryがバニラJSに勝ってる唯一の点だけど、そういう処理を入れるくらいDOMの操作使ったアプリ作るなら他のフレームワークのほうが良いだろう

ゆうて古から続くjqueryの資産はいたる所にあるから、読めることくらいは出来ないとな
難しいもんではないんだし

>>106
バニラでも祖先ノードでmatches(selectors)を使えば対応可能なので、それほどjQueryに優位性はない気がする。
それから、jQueryはバブリングフェースのみ対応という弱点がある。
バブリングしないイベントタイプに関してはaddEventListener()に優位性がある。

他から持ってきたコードが指すjQueryが最近のじゃなくて
だれが互換性担保するのってのが一番困る
jQueryを直接つかう分には検証できるけど
依存しているライブラリは採用せんでほしい

jQuery使いの人は行き当たりばったりな人が多い
jQueryライブラリファイルの読み込みが沢山あってなんじゃこりゃみたいな

jQueryが出た頃はSelectors APIもなかったからな
行き当たりばったりというより昔の標準APIが貧弱でライブラリに頼るしかなかった

jQuery は短く書けるので、ちょっとしたデモには良い。
でも、React, Vue.js では使わない

Bootstrap も、5 からは使わない。
popper.js に変わった

>>110
しかもバージョンがところどころ違ったり読込先や仕方が違ったりする

>>99
■jQueryの良さは健在だが……
機能のある程度はES2015で代替出来るが
jQueryの良さは健在、そこはお前さんの言ってる通り

それとは全く別の話
手続き型的な手法でDOMを触ってるのが前時代的

■DOMを触るのが不味い理由
DOM作り直しは要素の改ざんな訳だ
DOMを更新するためには、探索して選択、それを作り変えるの2ステップがあるけど

別の機能がDOMを消したり書き換えたら
見つけられなくてエラー出るかも知れないよね？
選択できても改ざんされてて加工出来ずにエラー吐くかも知れないよね？

担保するのは全て貴方の目視テスト
10機能作ったら10x9の90通りのマトリックステスト作ってね
このように機能を作る度にnの2乗みたいなテストを目視でさせられる
全部で100機能作りましょうとかなるとありえん無理

■代替はJSフレームワーク
HTML作るテンプレートエンジンでsmartyやBlade、pugとか色々あるけど
あんな感じでDOMを生成する何かを用意しておいて
JS内で変数が変更されたのを検知して、勝手に新しいDOMツリーを作り直して嵌め込んでくれよって思わん？

その思想で作られてるのがReactやVue、Angular等のJSフレームワーク
JSフレームワークが用意した「変数の変更通知を行う」お作法を覚えて動かすとDOMが常に最新のあるべき姿になる

これによりDOM操作回りはJSフレームワークという外部の業者が全て責任持ってやってくれる
俺達はDOMの元であるテンプレートを読み込ませたら
ただ変数がちゃんと正しい値になってるか？を保証すれば完璧に動作するよね

変数書き換えたら常にあるべき姿のDOMに書き換わるシステムに、jQueryで改ざんし始めると衝突して邪魔になる
次のDOM更新でjQueryが書き換えた内容そっくり消えるしな

だからこれからのWeb開発にjQueryは不要なんだよ
決してES2015が優れてて代替出来るから不要になったという話では無い

変数更新してるだけに見えて、別処理が勝手に動くというのも実はアレだけどな
今はリアクティブが流行してるからそこにケチつける風潮ないけれど

>>99 (ﾜｯﾁｮｲ 4d7c-MQtI [122.212.16.94])
これだけ回答をもらって無反応か
最近の質問者はこういう人が多いな

反応欲しいなら知恵袋にしとけって

JavaScriptで作れるプログラムって、webブラウザ以外になにかありますか？
全然ユーザーがいないのはダメだけど
ある程度需要がありそうな用途

>>118
WebブラウザとWebページを区別できるようになろう

でもまあwebブラウザが全てではあるよね
他に出番無いし

今はNode.jsでサーバ側もJSってこともある

CSSもHTMLも生で書くのは平成だしな
普通SASSやらPugやら使うだろ
JSだってWebpackやらBrowserify越しに使うやろ

まぁNode.jsじゃトランスパイル遅いから
GOやRustのツールに置き換える流れにはなってるが
じゃあ最初からCやGO、Rustでやれば良かったよねとはならないフットワークの軽さがNode.jsにはあるからな

Rustで書いたJSトランスパイラは速いけどRust自体のコンパイルは遅い

あることをローカルマシンでやりたくて、Python入ってっから、それでやろうとしたらできなくて（いや正確にはすごく遅い）Node.jsになってしまった。何かは言わない。

node.jsの良さはJavaScriptでプログラミングできる事
Electron使えばUIもHTMLで書けるので便利
なれたらJavaScriptでデスクトップアプリを書くのが楽しくなった

>>126
Electronはファイルがデカいから
俺が何か作る時はCLI一択だわ

対話的な物作る時は
Tauriで作ってみたいなぁと思う

>>118
Visual Studio Codeがjavascriptで作られている

vscodeが糞な理由が分かった気がした

ElectronとAngularで作られてるシステム見させてもらったんだけど、reactに書き換えるって言ってたな

ならnativeでよくね？

reactとreact nativeって書き換えが必要なの？
ゴミかな？

>>0127
TauriはWebViewなので
Electronの様にWebRequestを簡単に操れない
Rustに拘らないのなら
使い慣れた開発言語でWebViewを組み込んだ方が手っ取り早い

YouTube 動画で見たけど、

北米では、Flutter よりも、React Native が多いらしい

JavaScriptで書ける環境の話から
かなり脱線気味

業務がWebアプリなのは危険だと言い出した管理職がいて
Electronでチャチャとデスクトップソフト風にしたら
仕事が早いとお褒めいただいたw
何も変わっちゃいなんだけれどそれはナイショ

危険だという懸念が素人の無理解から来てるだけなのか妥当な懸念なのか分からないから何とも言えんな
前者なら悪くない回避策

ブラウザのアドインに情報吸われる危険性は下がるね

まあ一般的に考えて危険やな
その認識は正しいさすが管理職

管理職が正しい
どんなに堅牢なシステムでも狙われたら終わり
だから今はクラウドじゃなくてオンプレ回帰してる

もうネット使うなよ

Access でいいよ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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



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

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

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



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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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で実現したいのですが、無理ですよね？

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

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

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

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

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

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

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

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

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

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

customListBox.size = 25
customListBox.selectIndex = 99

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

test

test

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

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

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

>>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を使いましょうという風潮が比較的早く出来た

constは直訳すれば定数だが

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

>>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 //=> エラー。再代入はできない！

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

お願いします。
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後には削除されている期待通りの結果になるのですが
どんな理屈なのかわかりません。

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

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

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

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

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

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

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

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

id を別な文字に変えると

全ての波【電磁波】で下記の症状が起きる
理由は電磁波が強いために起こるか電磁波が通過すれば磁気が生じて鉄分が振動して間接的に鼓膜などが振動する
マイクロ波聴覚効果を用いた音声伝送に関する検討
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

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

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

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

>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: '太郎' } ]

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

卒業しなくていい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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();
})();

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

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

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

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

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

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

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

📕は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 👤

const str = "[aaa,bbb,ccc],[ddd,eee,fff],[ggg,hhh,iii]";
という文字列を[]で囲まれた部分を取り出して配列にしたいんだけど
どうやればいいですか？
aaa,bbb,cccとddd,eee,fffとggg,hhh,iiiの３つの要素を持つ配列ってことです

外側を［］で囲んでeval

aaaとかbbbとかの形式によってはJSON.parseで良くないか

const str = "[aaa,bbb,ccc],[ddd,eee,fff],[ggg,hhh,iii]";
str.split(",");

// こうか？
const str = "[aaa,bbb,ccc],[ddd,eee,fff],[ggg,hhh,iii]";
str.replace("[","").replaceAll("],","").replace("]","").split("[");

// こっちか
const strArray = "[aaa,bbb,ccc],[ddd,eee,fff],[ggg,hhh,iii]";
// 角括弧で囲まれた要素を二重引用符で囲んでJSON形式に変換
const jsonFormattedStr = strArray.replace(/(\w+)/g, '"$1"');
// JSON.parse()を使って配列に変換
JSON.parse(`[${jsonFormattedStr}]`);
// [ ["aaa", "bbb", "ccc"], ["ddd", "eee", "fff"], ["ggg", "hhh", "iii"]]

久々にプログラミングしてるのですが、今のjavascriptって即時関数の中にコードを書くのが普通なんですか？
昔javascript触ってた時はそういうのなかったので

JSは15年くらい前から無名関数使い倒す文化だと思うけど

2005年頃には即時関数を使い倒す文化が確立されてたぞ
むしろ2015以降は代替手段ができたからQuick and Dirtyなコードじゃなければ即時関数の利用シーンはかなり減ってる

letとconstができたから即時間数なんてもういらない

個人的には 1) その場限りのコールバック、2) 一連の手続きの中で中間変数（説明変数含む）が多くなるケース、で即時関数をよく使う
後者は「結果の局所化」及び「意図と実装の分離」の効果をサクッと得られる

即時関数は即時実行関数式(IIFE)の略で無名関数とは違うと思うんだけど>>251は無名関数について書いてない？

すまん。俺が無名関数とか言い出したから良くなかったんだろうと思う

そもそも、基本的に関数なんていらん。
ほぼ全部、変数は、グローバル変数で宣言し
とにかく、サブルーチンは
イベンリスナー系を除いて不要だよな

てゆぅかさ、goto文がないようだし、
goto文のラベルの代わりに
無名じゃない関数
(モビロン引数はなし∵全部グローバル変数)

これが、無限年後のJavaスクリプトの常識だぜ
てか、無名関数廃止して、gotoとラベルを
無限以内に復活しようよ

これで、ド初心者の人気Ｎｏ．ワン言語、確実

>>241
Ruby のJSON.parse なら、

require 'json'

# 改行を削除する。削除しなくても同じ結果
json_str = <<'JSON'.delete( "\n" )
[ {"あ":[{"い":1}, "x"]},
[] ]
JSON

p json_obj = JSON.parse( json_str )
#=> [{"あ"=>[{"い"=>1}, "x"]}, []]

スクリプトの問題とは微妙に話が違いますが、
tampermonkeyじゃなくてgreasemonkey使っている人いますか？
firefoxで使ってるんですが、
greasemonkeyだと自作スクリプトって簡単にはインストールできないですよね？
zipに固めないとインストールできないと思うのですが、
みなさんはどうやってるんでしょうか？

JavaScriptのwindow.openで第2引数にウィンド名を指定して画面を開きます 続いて全く同じ引数で同じ画面をwindow.openで開いてるのに別ウィンドウで開いてしまいます
broadcastchannelを使っている画面でこのような事象が見られるように思えるのですが、broadcastchannelを使っている画面はwindow.openで第2引数を指定しても別ウィンドウで開いてしまうのでしょうか
因みに関連ウィンドウは全て同オリジンでウィンドウ名は半角空白も含まれない半角英文字のみです

開いたウインドウにナビゲートするのではなく?

>>258
同じurl window.nameのページが普通に別ウィンドウで開いちゃいますね

>>259
単なるロジックバグでした
お騒がせしました

EchoAPIはVS Code環境に素晴らしい追加で、APIテストが超楽になった！

画像の読み込みが完了したら動作するのはできたけど、動画の読み込みが完了したら動作するのは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("画像の読み込み完了");

}

>>262
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
video要素で発生するイベントはloadではなくloadeddataやloadedmetadata

>>263
そうなんですか
ありがとうございます

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は嫌いですか❓

釣りネタつまらん

>>265
好きとか嫌いとかで決めるものではない

letの無いIEやHTAで開発する場合var宣言が必要だから好きとか嫌いとかではない
つまり古いブラウザのjavascriptでも動かしたい場合必然的にvarだらけになる

JS初心者です。Electron使用しています。
カウントダウンで3→2→1と表示させようとした時、Foｒ文で組もうとすると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)

setTimeout の第2引数をiを使って変えればいい
iが3→2→1と減っていくなら、例えば1000*(4-i)とか

>>270
ありがとうございます。動きました。
また別の問題出てきましたが、それはそれでPromiseとか勉強してちょっと頑張ります。

ウチュ〰人からのお告げという事にしてほしいが
//絶対位置指定∵動かすために
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　をコーディング
　する事が必要ぢゃ　

>>269
setInterval使え
インターバルに間に合わない可能性のある処理をするならsetTimeoutを再帰しろ

ループごとに必要もなくinsertAdjacentHTMLなんかするな
値を書き換えれば十分だろ
視覚効果を狙ってるならCSSアニメーション使え

>>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)

なお、こんなコーディングして
エライ人に怒られても、
気にしちゃダメ在る。

>>274
それは質問ではないな
質問スレは日記を書く場所ではない

>>274 ちょっと前の自分へ返答
var x7 = 1;
var x7 += 2; //var再宣言・再代入OKだろ

は❌var x7 += 2;となった
やっぱvarも使っちゃダメだよな。てなワケで
今のところは、274が大正解

👤コールバック地獄(ファンクション地獄)
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

>>277の自作自演は、>>269様のご質問内容により閃いた
文学作品である。そしてこれは、
async await promise を実装したjavascriptエンジン
v8 の機能が以下にヤバイ位スゴイかを暗に物語ってる
複雑なCSSアニメーションより
javascriptでの任意の要素をアニメーション簡単に
実装できることを暗示してる。

上記文学作品を閃かせてくれた弐六九様へ感謝したい
THANK YOU FOR 269

👤ま、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文組合せよう。
👤🤡　それ検討したが挫折　バイバイ

💃(←初登場:ナゾの女性　という設定)
あら、これ再帰プログラム❓
信じられなーーい。ありえなーーい。

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

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でアニメーションやれ。

>>277-281
質問スレにいつまで居座るつもりなのかね

あっそうだ、setTimeout の再帰はおいておいて
setInterval というのも在るのか。それは、時間がないから
そろそろ、オイトマとするtimeにするかも知れない
ま、再帰しなしsetTimeoutで、かつ async promiseは使用しない
のが、一番バッチリという感触。今は。では、またいつか。５日ではないいつか
(^_^)/~　👤🤡🥳💃一同　実は同一人物だけど(⁠・⁠_⁠・⁠;⁠)

ふと、どうでもヨイ疑問が湧いた。

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)
}

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

てか、どっち に しようかな。
てか、どっち の 仕様がいいのかな。
てか、どっち を 使用しようかな

>>284
ChatGPTに聞いてみたけど、全部は掲載できないので結論だけ転載

1. 「時間」を基準にして明示的に処理を進めたいなら t
2. 「ループ回数」を基準にするのが直感的なら n
個人的にはtの方が汎用性が高く、特に時間管理が重要なケースでは使いやすいと思います。

1. 可読性
tを使ったコードでは、時間そのもの（1000, 2000, 3000）が直接書かれており、「時間に基づいた処理」という意図が明確。
一方、nを使ったコードでは、「ループの回数を基準に処理」していることが読み取れる。
一般的には、「時間を意識した処理」ならt、「回数を意識した処理」ならnを使ったほうが直感的です。

2. 精度と誤差
setTimeoutは指定した時間で必ず正確に実行されるわけではなく、若干の誤差が発生します。どちらもこの点においては同じですが、**tの方が「時間の計算結果が直接書かれているため誤差の発生ポイントが少ない」**という印象を受けます。
例えば：
1000 * n // 計算で導出
1000, 2000, 3000 // そのまま指定
上記の違いから、誤差を気にするならtの方が直接的で分かりやすいです。

3. メンテナンス性
tのコード
時間間隔を変更したい場合、初期値・上限値・増加値だけを変更すればよく、スケール感の変更がしやすい。
nのコード
「1000を掛ける」という計算式が直接書かれているため、変更時に計算式部分にも目を配る必要がある。

一般常識があるやつならtを使うメリットなんて一つも無いと分かるはずなんだがChatGPTはいまだにこんな意味のない回答するんだな

俺の使ってるChatGPTと同じとは思えない

ChatGPT君はわりと利用者に忖度した回答するので、利用者次第で馬鹿にもなる

いや、質問をそのままGPTにペーストしたよ
利用者の意見なんて1つも入れてない

質問の仕方に利用者の知識量とか思考が入り込んで、ChatGPTはそれに応じた回答をする。回答のレベルは質問のレベルに合致する

それはそうだけど、正確性からそんなに大きく逸脱はしてないでしょう
というか、客観的に大多数に正しいと思われる解決法を提示してくれるから助かる
無料のは今だに嘘が混じってる事が多いんだけど、有料のPlusは結構正確になった
参照してる知識量が無料のものの何倍もあるみたい

外国のサイトにある動画から字幕を抜き出したくて色々試したけど上手く行かなかった（www.francetvinfo.frというとこ）
でもffmpegだとあっさり成功した
もしJavaScriptに詳しければffmpegというツールに頼らず抜き出せたのだろうか？
chatGPTに聞くとDOMで作成してるみたいな答えが帰ってきたので字幕作成はJavaScriptで行っているのかなと思った
今字幕抜き出せた喜びとツールに頼った悔しさが入り混じってるけど皆なら自力で抜き出せた？

失礼します。
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)

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

そもそも不可能である場合、不可能であると断言して頂けると幸いです。

:last-of-typeとか:last-childとかで出来るけどそういうの知らなくても”配列の長さ-1”くらいは思いつこうよ

> 296
つまりあまたはわたしをアホとおっしゃるのですか?

💩

>>295
hoge[hoge.length-1].insertAdjacentElement("afterend", elemDiv);

test

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

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

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

>>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を使いましょうという風潮が比較的早く出来た

constは直訳すれば定数だが

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

>>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 //=> エラー。再代入はできない！

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

お願いします。
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後には削除されている期待通りの結果になるのですが
どんな理屈なのかわかりません。

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

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

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

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

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

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

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

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

id を別な文字に変えると

全ての波【電磁波】で下記の症状が起きる
理由は電磁波が強いために起こるか電磁波が通過すれば磁気が生じて鉄分が振動して間接的に鼓膜などが振動する
マイクロ波聴覚効果を用いた音声伝送に関する検討
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

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

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

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

>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: '太郎' } ]

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

卒業しなくていい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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