+ JavaScript(ECMAScript)質問用スレッド vol.123 + [無断転載禁止]©2ch.net

**デフォルトの名無しさん** · 2016/12/21(水) 21:56:53.30

プログラマ板の趣旨にあわせてブラウザ限定ではなくサーバーサイドJavaScriptや
トランスパイラなどの関連技術の話題も取り扱うように変わりました。
ECMAScriptの言語仕様の話題。最新ECMAScriptによるモダンな書き方、Promiseやasync/awaitを
使った非同期プログラミング。ES2015、2016、2017等の最新ECMAScriptをブラウザで今すぐ使う方法、
ビルド環境やbowerやnodeのパッケージを使う方法等、モダンなJavaScript環境についての幅広い話をしましょう。

ECMAScript対応実行環境一覧（ブラウザやbabelを含む）
http://kangax.github.io/compat-table/es5/
http://kangax.github.io/compat-table/es6/ （＝ es2015）
http://kangax.github.io/compat-table/es2016plus/
http://kangax.github.io/compat-table/esnext/

JavaScriptとは？
もともとMozillaの前身のNetscapeが作った言語であり本来のJavaScriptはFirefoxの実装のみです。
JavaScriptの正式な仕様名はECMAScriptです。ですが一般に使われているとおり
ChromeやEdgeで使う言語もJavaScriptとしてこのスレでは扱います。
Firefox等のJavaScript実装は最新のECMAScriptに準拠しています。

※DOMはブラウザが提供しているものでありJavaScript（ECMAScript）の範囲外です。
なのでDOMを使ったプログラミングは原則としてこのスレの対象外です。
DOMはwindowオブジェクト（ブラウザのホストオブジェクト）経由で
参照するもので、window自体、window.document、window.Workerなどです。
これに関する話題はWeb制作板の下記のスレに移動してください。

+ JavaScript & jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1467906819/
jQuery 質問スレッド vol.7
http://echo.2ch.net/test/read.cgi/hp/1478055094/
+ JavaScript の質問用スレッド vol.131 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1478053599
前スレ + JavaScript(ECMAScript)質問用スレッド vol.122 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/tech/1472401404

**デフォルトの名無しさん** · 2022/06/22(水) 20:50:56.89

varをletに置換
new Array("",""..,)は["",""...]にするかnew Array(11).fill("")
Promiseチェーンが書きにくいならasync/await使うとか
今回は書き捨てコードだから気にしなくていいけどdocument.writeとかは非推奨

**デフォルトの名無しさん** · 2022/06/22(水) 21:17:23.95

>>400
・javascriptとは直接関係ないけど、各種の「名付け」が雑過ぎて読みにくい(max_loop→MAX_PARALLEL_FETCH、など)
・厳格モード('use strict';)を使おう
・varは祟りの元。letを使おう
・hasan_detaile_get()には、あらかじめ分割したplaceを渡した方がシンプルになる(endをjson.lengthで代替)
・detail.phpのfetch結果からのデータ抽出は(substringではなく)match結果の分割代入で良さそう(正規表現を事前定義しておいて利用する)
・何度もブラウザで実行するコードの場合は「ブックマークレット化(各種エスケープが必要)+結果をクリップボードに反映」がオススメ

**デフォルトの名無しさん** · 2022/06/23(木) 12:55:36.14

401、402　
コメントありがとうございます
指摘内容自体がいまいち理解できてない部分もありますが調べてみる

**デフォルトの名無しさん** · 2022/07/20(水) 11:10:33.10

https://www.google.com/search?q=javascript&newwindow=1&sxsrf=ALiCzsYVTXuOX_Koud_rGUMyTDgKxJQ1pg%3A1658281669093&ei=xV7XYu6BBfHN2roP0dujqAg&ved=0ahUKEwiu-MrOrIb5AhXxplYBHdHtCIUQ4dUDCA4&uact=5&oq=javascript+%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE+%E3%81%8D%E3%82%8A%E3%81%A8%E3%82%8A&gs_lcp=Cgdnd3Mtd2l6EAMyBggAEB4QBDoHCAAQRxCwA0oECEEYAEoECEYYAFCaBljzCmDCDWgBcAF4AIABbIgBtwKSAQMxLjKYAQCgAQHIAQrAAQE&sclient=gws-wiz

⬆のグーグルのURLから検索ワードのみ抽出したいんだけどどうすればいいですか？

var query = decodeURI(url.match(/q=.*&?/))

とやってみたのですが ⬇のように&newwindow以降の全てがついた状態で抽出されてしまいます
q=javascript&newwindow=1&sxsrf=ALiCzsYVTXuOX_Koud_rGUMyTDgKxJQ1pg%3A1658281669093&ei=xV7XYu6BBfHN2roP0dujqAg&ved=0ahUKEwiu-MrOrIb5AhXxplYBHdHtCIUQ4dUDCA4&uact=5&oq=javascript+正規表現+きりとり&gs_lcp=Cgdnd3Mtd2l6EAMyBggAEB4QBDoHCAAQRxCwA0oECEEYAEoECEYYAFCaBljzCmDCDWgBcAF4AIABbIgBtwKSAQMxLjKYAQCgAQHIAQrAAQE&sclient=gws-wiz

**デフォルトの名無しさん** · 2022/07/20(水) 11:51:09.39

const url = new URL("https://～;")
const params = new URLSearchParams(url.search)
params.get('q')

**デフォルトの名無しさん** · 2022/07/20(水) 12:33:39.55

>>405
こんな事できるようになってたんですね
しらなかったです

**デフォルトの名無しさん** · 2022/07/20(水) 16:16:19.89

これ便利だね、すげー

**デフォルトの名無しさん** · 2022/08/05(金) 16:27:44.94

window.print()を使ってAndroidとiOSから印刷かける時に、cssの@media printで指定したデザインが適用されません
PCからはデザインが適用されているのですが…

**デフォルトの名無しさん** · 2022/08/05(金) 17:22:51.04

onbeforeprintとonafterprintで解決しました

**デフォルトの名無しさん** · 2022/09/14(水) 10:34:12.60

JavaScriptでマルチバイトの文字列をカウントするのってどうするのが適切なのでしょうか？

特定の文字数で長文を折りたたみ/展開させたいと考えています
調査すると注意ポイントとして文字列の組み合わせとかサロゲートキーとか（同じ注意点かも）Intl.SegmenterはFirefox対応していないとか、網羅的に注意記述のある記事が見つからなくてどのような選択をすればよいか分かりませんでした

対象ブラウザは厳密に決まっていないので古いものであれば切ってしまっても構わないと考えていますが、
Chrome,Edge,Firefox,Opera,Safariの最新には対応していてほしいです

標準的なカウントライブラリでもありそうなのですが、それすら見つけられてない状況です
ご教示お願いします

**デフォルトの名無しさん** · 2022/09/14(水) 14:15:41.41

サロゲートペア程度なら[...'文字列'].lengthでいける模様
絵文字の合成も考慮するとなると別の方法を考えないとだけど

**デフォルトの名無しさん** · 2022/09/14(水) 15:13:51.29

>>410
zwjや異字体セレクタが実行環境において"正しく"使われている前提であれば、入力文字列の「zwjとそれに続く任意の1文字、FVS、SVS、IVS」を空文字に置換したstrを [...str].length すれば、表示と一致する文字数が得られるはず

zwjなしに結合する「地域指定用(国旗指定用)のアルファベット」に対応したい場合は、上記置換に加えて「2連続の同アルファベット」を任意の1文字に置換するといい

**デフォルトの名無しさん** · 2022/09/14(水) 16:18:42.24

zwjですか
また新しい考慮ポイントがｗ

頂いた情報を元に調査したところ
https://github.com/flmnt/graphemer
で分割/文字数のカウントを実施してslice（）で表示文字数を制限できそうです

助かりました
ありがとうございました

**デフォルトの名無しさん** · 2022/09/14(水) 16:22:54.92

あ、微妙にダメかも...
https://github.com/flmnt/graphemer/issues/3

**デフォルトの名無しさん** · 2022/09/15(木) 01:00:37.64

リガチャーとかもあるので、まあ描いて長さ測った方が確実だと思うよ。

**デフォルトの名無しさん** · 2022/09/15(木) 05:57:34.81

>>415
ブラウザ上の描画（？）を制限したいのだからそれが一番正しい気がするけどやり方がわからんかった
どんなキーワードで調べると良い？

**デフォルトの名無しさん** · 2022/09/15(木) 07:54:26.97

こういうアプローチかね
https://www.w3docs.com/snippets/javascript/how-to-calculate-text-width-with-javascript.html

**デフォルトの名無しさん** · 2022/09/15(木) 08:18:21.60

目的が「文字数のカウント」ではなく「1行テキスト要素の表示幅を一定にしたい」ってことなら、そんな処理を書かずともCSSで要素サイズを指定or制限すれば良いだけ
要素末尾端については a) text-overflowとwhite-spaceで省略表示、b) mask-image(chromium系は-webkit-mask-image)でフェードさせる、のいずれかを充てれば文字が見切れることもなくなる

**デフォルトの名無しさん** · 2022/09/15(木) 08:47:23.29

>>417-418
ありがとう
XY問題なやつだったみたいですね

頂いたアドバイスを元に調査し直してみます

**デフォルトの名無しさん** · 2022/09/15(木) 13:01:04.75

スマホでタッチしてその場で指を離したときにtouchendとmouseupのどちらも反応するけど
mouseupが反応するのはバグなのでしょうか？
タッチしながら指を移動させてから指を離す場合はtouchendのみでmouseupは反応しませんでした。

**デフォルトの名無しさん** · 2022/09/16(金) 01:15:41.14

スマホでmousedownイベントは発火した？

**デフォルトの名無しさん** · 2022/09/16(金) 13:37:36.12

スマホのタッチ操作でmouse系イベントが反応するのがおかしいって
言ってるなら歴史的経緯からしょうがないんじゃないの？としか
そうでないならもう少し詳しく説明してくれないと

**デフォルトの名無しさん** · 2022/09/16(金) 14:54:53.25

>>420
toutchendとmouseupそれぞれのリスナーの登録先要素は同一ってこと?

**デフォルトの名無しさん** · 2022/09/17(土) 17:40:09.60

結局なんでバグだと思ったのか分からずじまいか

**デフォルトの名無しさん** · 2022/09/17(土) 18:45:19.49

>>421
しました
>>423
event_list = ["mouseup","touchend"];
for(let n=1;n<=event_list.length;n++){
element.addEventListener(
event_list[n-1],
function(e){
alert(event_list[n-1])
}
);
}
のようにやりました

**デフォルトの名無しさん** · 2022/09/17(土) 18:53:13.89

>>425
nousedownが発火したならmouseupも発火するのが当然だと思うけど
mousedownが発火したのもバグだと思ってるの？

**デフォルトの名無しさん** · 2022/09/17(土) 21:37:01.55

ブラウザ上で音を合成するのに Web Audio を試してるところなんだけど、AudioContext の createBuffer で取得したバッファに波形を作り出して再生することはできた。
ただこれだと最初にバッファ長を決めないといけなくて、音の長さが有限になっちゃう。
途切れることなく延々と波形合成と出力をしたいんだけど、どうやればいい？
出力バッファの残りが少なくなったらコールバックで追加データを補充するような作りにできると都合がいいけど、とりあえずヒントになりそうなメソッド名だけでも助かる。

**デフォルトの名無しさん** · 2022/09/17(土) 22:15:56.60

ググったらそれっぽいデモが出てきたけど参考にならないだろうか
https://weblike-curtaincall.ssl-lolipop.jp/portfolio-web-sounder/webaudioapi-basic/demos/demo-08
解説はこっち
https://weblike-curtaincall.ssl-lolipop.jp/portfolio-web-sounder/webaudioapi-basic/audio

そしてデモの一番最後にmouse系イベントとtouch系イベントをUAによって切り替えてる処理が書いてあって
バグかどうかはともかく同時にリスナー登録するべきではないのだろうということで>>420の件も片付きそう

**デフォルトの名無しさん** · 2022/09/17(土) 22:33:23.87

>>426
タッチのときは
event_list = ["mousedown","touchstart"];で登録して
スマホだとtouchstartのみ発火でmousedownは発火しませんでした。
PCのクロームでF12キー押してスマホモードで確認しました
>>428
同時にやらない方がいいのですか

**デフォルトの名無しさん** · 2022/09/17(土) 23:30:53.36

>>429
サンプル作ってみた
https://jsfiddle.net/ju1af0zk/
PCだとmousedownとmouseupのみが発火
Chromeのスマホモードとスマホ実機はそれに加えてtouchstartとtouchendも発火したけど
君の方でも試してもらえる？

**デフォルトの名無しさん** · 2022/09/18(日) 12:49:02.81

>>430
スマホモードでタッチして１秒以内に指を離すと
mousedown,touchistart,mouseup,touchend全て発火ししましたが、
タッチしてから１秒以上経って指を離すとtouchstartとtouchendのみ発火でした。

**デフォルトの名無しさん** · 2022/09/18(日) 13:29:46.60

>>431
１秒以上押下でmouse系が反応しないのはタッチとマウスの操作性の違いを考慮しての挙動と思われる

>>429でmousedownが発火しなかったのはおそらくalertを使用していたのが原因
マウスやキーボードのイベントハンドラのデバッグでalertを使用すると後続のイベントに影響が出るので
consoleなどに置き換えた方がいいと思う

で、>>420のスマホでもmouseupイベントが反応するのはバグか？という問いに対しては
スマホがtouchイベントにしか反応しないとmouseイベントで書かれたページを操作できなくて困る
そのことに対する救済措置でありバグではないと推測するがどうだろうか

**デフォルトの名無しさん** · 2022/09/18(日) 14:53:23.29

そう短タップをクリックとみなすためのものだよ
ただし短タップ判定のためmousedown/mouseup/clickはtouchstart/touchendより若干ラグがある
touchstart/touchendで処理した際にマウスイベント発火させたくないならpreventDefaultする方法がある

**デフォルトの名無しさん** · 2022/09/18(日) 19:49:26.31

>>432-433
なるほど、そういうことですね
ありがとうございました

**デフォルトの名無しさん** · 2022/09/19(月) 10:20:03.23

そもそもそんなメジャーなプロダクトをちょっと触っただけで発生するような現象を
バグだと疑ってかかるのはいかがなものかという話

**427** · 2022/09/20(火) 01:26:00.73

>>428
うまくいった！
BufferSource.start には再生開始時刻を指定できるから、適当な時間で分割したバッファを開始時刻をずらして start しておくことと、
BufferSource 再生終了時イベント onended で新たなバッファを追加していけばいい。

**デフォルトの名無しさん** · 2022/09/20(火) 07:14:05.18

触ったことない領域だったから的外れなものを紹介しちゃったかなと思ってたけど
役に立ったようなら何より

**デフォルトの名無しさん** · 2022/09/25(日) 18:19:36.24

#test{
width:80%;
heigh:auto;
}

このような記述のcssがあった場合cssからwidthやheightを取得したいです
この場合widthが80%、heightっがautoと表示されればＯＫです

**デフォルトの名無しさん** · 2022/09/25(日) 18:37:13.46

getComputedStyle()使えば良いのでは？

**デフォルトの名無しさん** · 2022/09/25(日) 20:48:47.27

>>439
それだとpx値に変換されてしまいました。
cssに書いてあるそのまんまの値を取得したいんです。

**デフォルトの名無しさん** · 2022/09/25(日) 20:54:57.74

element.getAttribute(style)とか？

**デフォルトの名無しさん** · 2022/09/25(日) 21:56:43.82

>>441
それでやっても取得できませんでした

**デフォルトの名無しさん** · 2022/09/25(日) 22:13:33.47

>>442
ちなみに、それができたとして何をしようとしてるの？

**デフォルトの名無しさん** · 2022/09/25(日) 22:34:13.70

CSS ファイルを読み込んで、パースするのは？

**デフォルトの名無しさん** · 2022/09/25(日) 22:55:14.37

>>438
適当だけどこんな感じで
https://jsfiddle.net/fk9wvacy/

**デフォルトの名無しさん** · 2022/09/25(日) 23:38:35.06

>>443
widthが固定値か相対値かで処理を分けたいからです
>>444-445
それで取得できました

**デフォルトの名無しさん** · 2022/09/26(月) 17:39:21.17

>>445
同じファイルにある場合はそれでcssRulesを取得できたんですけど
外部ファイルに置いたcssをlinkタグで読み込んだ場合は
cssRulesが取得できませんでした。
外部ファイルのcssのcssRulesを取得するのは無理なんでしょうか？

**デフォルトの名無しさん** · 2022/09/26(月) 18:32:01.21

どういう環境でどういうコードを実行してどういう現象が発生したのかが分からないと適切なレスを返すのは難しいよ

おそらくは↓にあるようなコードからCSSにアクセスする際の制限ではないかと思うけど
https://qiita.com/querykuma/items/930b20758b06c31d2af5

**デフォルトの名無しさん** · 2022/09/26(月) 21:43:25.19

>>448
それでした
ありがとうございました

**デフォルトの名無しさん** · 2022/09/26(月) 23:37:36.30

VSCode の拡張機能では、

open in browser では、ローカルファイルアクセスになる。
この場合、CORS など、ブラウザの色々な制限がある

file:///C:/Users/Owner/Documents/test/index.html

一方、Live Server では、
自分のPC 内にサーバーを立ててから、そこから配信されるので、テストしやすい

http://127.0.0.1:5500/test/index.html

**デフォルトの名無しさん** · 2022/10/12(水) 22:10:27.46

var str = "calc((100% - 50px) / 2)";

calc()で囲まれた部分を取り出すにはどうやったらいいですか？
(100% - 50px) / 2と表示されればＯＫです

**デフォルトの名無しさん** · 2022/10/12(水) 23:59:28.98

>>451
// calc()で囲まれた文字列（マッチしなかった場合はnull）
console.log((str.match(/(?<=calc\().+(?=¥))/) ?? [])[0]);

**デフォルトの名無しさん** · 2022/10/13(木) 12:45:47.55

>>452
ありがとうございます

**デフォルトの名無しさん** · 2022/10/17(月) 11:14:15.53

「初めてのJavaScript 第3版」を読んでます
訳者コメントで日本語識別子について触れてます
let 現在の温度 = 16;
let 目標温度, 部屋1 = "会議室A", 部屋2 = "ロビー";
↑
こういうのです。日本語話者には分かりやすくていいんじゃないかと好意的な感じですが...

> let 渡辺 = { age: 25 } ;
> 渡邊.age
Uncaught ReferenceError: 渡邊 is not defined
こんなん混乱の元だと思うんですがどうなんでしょうね？
日本限定のサービスなら結構使われてたりするんでしょうか

**デフォルトの名無しさん** · 2022/10/17(月) 13:25:44.34

なんでもかんでも日本語識別子にはせんよ
業務専門用語満載のエンティティを相手にしなきゃいけなくて
いちいちそれっぽい英訳やローマ字にするよりは日本語そのままの方がマシって状況で
仕方なく使うぐらい

**デフォルトの名無しさん** · 2022/10/17(月) 13:34:49.01

日本語の変数は流石に使わないｗ

**デフォルトの名無しさん** · 2022/10/17(月) 13:50:05.73

ありがとうございます、やっぱそうですよね

**デフォルトの名無しさん** · 2022/10/17(月) 14:20:57.28

>>454
それ、今 ID にマルチバイト使用したいって案件で泣いてるｗ
正規化が糞めんどくさい

**デフォルトの名無しさん** · 2022/10/17(月) 18:34:01.49

cssのtransform:scaleで縮小した場合にできる余白を削除してくれる
フレームワークやライブラリってありますか？
なかったら独自で余白の削除しなければならないですか？

**デフォルトの名無しさん** · 2022/10/17(月) 21:07:02.94

>>458
何のIDか分からんけど値がマルチバイトになるだけならこの話題と関係ないような気がするが

**デフォルトの名無しさん** · 2022/10/17(月) 21:59:29.32

>>460
識別子として渡邊を渡辺と正規化するかどうかって話だよ
アルファベットですらユニコード対応しようとすると糞めんどくさい

**デフォルトの名無しさん** · 2022/10/17(月) 22:25:07.48

つまり値としての"渡辺"と"渡邉"を別のものとするのか同じものとしてどちらかに寄せるかみたいな話？
確かに>>454は例として渡辺を出したけどもあくまで変数名やプロパティ名として
日本語を使用する際の問題点の一例として挙げただけであって
本質的には別の問題だと思うぞ

**デフォルトの名無しさん** · 2022/10/20(木) 19:32:12.82

**デフォルトの名無しさん** · 2022/10/20(木) 22:22:36.37

>>463
JSON.stringifyはArray.isArrayで配列かどうかのチェックをして、それによって挙動を変えている。
で、Array.isArrayはそのオブジェクトがエキゾチックオブジェクトかどうかを判定基準のひとつにしている。
エキゾチックオブジェクトは内部仕様でArray.constructorからしか作れない。

というのがおそらく理由。
Array.isArray(a1)===Array.isArray(a2)の結果はfalseになる。

**デフォルトの名無しさん** · 2022/10/20(木) 22:30:08.59

>>464
ありがとうございます。スッキリしました。

**デフォルトの名無しさん** · 2022/10/27(木) 16:40:09.53

let a = "0px";
let b = "1000px";
let animation = element.animate(
{
left:[a,b]
}
,
{
iterations:1,
direction:"normal",
easing:"ease",
fill:"forwards",
duration:1000
}
このアニメーションのleftを変数とするにはどうやればいいんですか？

**デフォルトの名無しさん** · 2022/10/27(木) 18:15:16.28

let name = "left";
let animation = element.animate( { [name] : [a,b] } , ...

こういうコト？仕様のどこに書かれてるか知らんけどたぶんどの環境でもいけるはず

**デフォルトの名無しさん** · 2022/10/27(木) 18:20:15.80

>>467
はい、ありがとうございます

**デフォルトの名無しさん** · 2022/10/27(木) 20:04:48.47

const left = [a, b];
const animation = element.animate({left}, ...

一般的には上記のように渡す（変数名がそのままkeyになる）ことが多いけど、そういうことではなくて?

**デフォルトの名無しさん** · 2022/10/28(金) 00:15:16.96

>>463
基本的なことだけど、

初心者は、あいまい等価演算子== を使わず、
厳密等価演算子=== だけを使うこと

型違いでバグるから、使ってはいけない。
ここは他の言語と違う

**デフォルトの名無しさん** · 2022/10/28(金) 02:45:12.29

と説教するやつがいるが、型をあいまいに扱えるのが良いところなのに。

**デフォルトの名無しさん** · 2022/10/28(金) 09:33:25.27

特徴ではあるが単純に良いところと言い切るのには賛同できんな

**デフォルトの名無しさん** · 2022/10/28(金) 11:45:54.02

ウェブブラウザで動かすには実質 JavaScript しか無いから当たらないけど、例えばサーバサイドなんかでわざわざ PHP 使って型を厳密化するのはアホらしいと思うわ。
型に拘りたいなら JAVA でも使ってろよと。

**デフォルトの名無しさん** · 2022/10/28(金) 12:52:33.08

厳格にしたくなったらtypescript使うしか無い

**デフォルトの名無しさん** · 2022/11/25(金) 18:03:09.14

ちょっとJavaScriptでも学ぼうかなと思って
「確かな力が身につくJavaScript「超」入門第2版」
この本買ったんだけど、次におすすめの本ありますか？
将来的にはReact使いたいなぁと思ってる。

ちなみにC#が使える。
書くスレ違ったらごめん。

**デフォルトの名無しさん** · 2022/11/25(金) 19:08:01.30

C#が使えるならさくっとTypeScriptの本に進んでもいいんじゃないかな

**デフォルトの名無しさん** · 2022/12/02(金) 20:10:41.79

>>475
C#使えるのなら本なんて読まずに書けばいいと思うが。
分からないことはMDN見ればいいし。

C#の方が仕様は大きい。
C#になくてJSにあるのはプロトタイプくらいだが、(俺は便利に使ってるが）
多くの連中は使わずにクラスで済ませてるから、多分何とかなるはず。

**デフォルトの名無しさん** · 2022/12/10(土) 21:47:30.61

animateでopacityを0から1.0まで１秒間で変化させる場合はopacity:[0,1.0]でduration:1000に設定すればいいけど
ただのaという変数を１秒間で0から1.0まで変化させるのはanimateではできないんでしょうか？
setIntervalしかないんでしょうか？

**デフォルトの名無しさん** · 2022/12/14(水) 18:42:18.97

JS変数のaならJSでやらないと無理。
animateはCSS。

**デフォルトの名無しさん** · 2023/01/15(日) 23:42:31.69

どなたか教えてください。
document.getElementById("hoge").value = "fuga"
とか、JQueryで
$("#hoge").val("fuga")
とかで設定された値の変更を検知するにはどうすればいいのでしょうか？
changeイベントとmutation observerを試してみましたが、どちらも検知できませんでした……。

**デフォルトの名無しさん** · 2023/01/16(月) 02:00:11.79

自分で変えたなら
$("#hoge").val("fuga").change()
とでもすれば？

**デフォルトの名無しさん** · 2023/01/16(月) 03:10:53.27

>>475
モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)、
じゃけぇ(岡田拓巳)、2021

Udemy の人気講師。
仕組みに、重点を置いた本

**デフォルトの名無しさん** · 2023/01/16(月) 03:14:40.59

その要素のvalue の変化をキャッチする、イベントは無いの？

**デフォルトの名無しさん** · 2023/01/16(月) 03:43:59.55

タイマー仕掛けて目的の値を監視するのが確実なんじゃないかね
更新前の値を適当なコレクションに保存しといて
俺はブラウザのイベント発火は基本信用してないからそうやってる

**デフォルトの名無しさん** · 2023/01/16(月) 09:45:36.03

みなさんありがとうございます。
>>481
ライブラリからの変更を検知したいんです。それと要件に開発者ツールのコンソールとかから値変更されたのを検知するってのがあるので困ってます。
>>483
そのイベントがchangeイベントだと思ってましたが、スクリプトでの変更は検知してくれませんでした。
>>484
それしかないんですかね……。大掛かりな変更になりそうだ。

**デフォルトの名無しさん** · 2023/01/16(月) 10:59:57.65

>>485
valueのgetter/setterをフックする
const target = document.getElementById("hoge");
const origHTMLInputElementValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
Object.defineProperty(target, "value", {
get: function() { return origHTMLInputElementValue.get.call(this) },
set: function(value) {
origHTMLInputElementValue.set.call(this, value);
console.log(value, this);
}
});

**デフォルトの名無しさん** · 2023/01/16(月) 15:36:49.57

>>480
>changeイベントとmutation observerを試してみましたが、どちらも検知できませんでした……。
書き方の問題かブラウザが古いかどっちかじゃないの？
特にmutation observerはきちんと設定してないと動かない

**デフォルトの名無しさん** · 2023/01/16(月) 16:09:07.89

強いてイベント発火で値変化見るならonblur

**デフォルトの名無しさん** · 2023/01/16(月) 16:10:05.71

>>486
ありがとうございます、この方法で解決できました！
inputエレメントが持っているvalueプロパティのsetメソッドを書き換えている、という理解でよろしいでしょうか？こんな方法があったなんて。
こちらは通常入力の変更は検知できないようなので、changeイベントと併用することになりそうです。
>>487
もう一度見直してみようと思います。inner HTMLは検知できたんですがoption周りをいろいろ試してみます。
ひょっとして、mutation observerで検知できるのはarrributeなのでvalueプロパティの変更は検知できないのかと思いました。開発者ツールで見てると、スクリプトから値変更するとブラウザ上は値が変わっているのにinputタグのvalueは変わっていなかったので。

**デフォルトの名無しさん** · 2023/01/16(月) 16:32:10.86

>>489
>mutation observerで検知できるのはarrributeなのでvalueプロパティの変更は検知できないのかと思いました。
これっぽいね
俺が検知してたのはsetAttributeしてたわ

あとはinputイベントを試してみるとか

**デフォルトの名無しさん** · 2023/01/16(月) 21:23:27.64

>>489
横だが486は個人的にはオススメしない。
ネイティブオブジェクトの拡張は大体ろくに動かない。
おま環だけで使うならご自由にだが、大体嵌ることになる。(から俺だったらやらない)
意味は486の通りフックだが、本来はデイジーチェインすべきなのでHTMLInputElement.prototypeのところはtargetが正しい。
(ただしプロトタイプを自前で辿る必要があるが)

が、問題は
> こちらは通常入力の変更は検知できないようなので
つまりGUIから変更した場合、setterを呼ばずに直接変更されるわけだが、
ネイティブの場合は大体これで、拡張される可能性を考慮されてないから、setterがそもそも探索されない。
オブジェクト指向の実装としては間違っているが、現行のブラウザがそうなってるのだから致し方なし。
結果、それは偶々動いているだけで、今後何らかの最適化が為された場合、
或いは現行でもJITの最適化の状況によって動作の違いがあり得る。

と言っても意味不明だろうが、要は、安定したものを作りたければ止めとけ。

**デフォルトの名無しさん** · 2023/01/16(月) 21:24:34.09

多分そもそも論、
> ライブラリからの変更を検知したいんです。それと要件に開発者ツールのコンソールとかから値変更されたのを検知する
が間違っている。
> changeイベントだと思ってましたが、スクリプトでの変更は検知してくれません
はJSの仕様だから、そのライブラリが実際に使えているのなら、
ただ単にDOMに対してvalueの変更だけでいけるはずであり、このためには

・jQueryみたいに毎回毎回DOMから値を引っ張ってくる
・shadowDOMみたいに元々getter/setterを挿入出来る構造になってる
・ライブラリ内でdispatchEventしてくれてる(この場合はユーザーはvalueの変更だけすればいい)

のどれかが必要で、そのライブラリの方針に合わせてきちんとやるべき。
また、後者(要件に…以降)はそんなの必要ないから用意されてないのであって、
JSは現在GUIのデファクトスタンダードになりつつあり、必要な物は全部一通り揃ってるから、
一通りも分かってない君みたいな奴が普通の人がやらないことをやろうとしてる時点で、
大体やり方を間違ってる。初心者あるあるだが。
要件定義した奴もJSの使い方を分かってないはずだから、完全に例の「顧客が本当に欲しかったもの」状態になってるはず。
もう一度仕様/要件を詰めた方がいいと思うよ。

と言ってもこちらも意味不明だろうが、要は、要求仕様をもう一度詰め直すべきだよ。
このままだと多分、使い物にならない何かが出来るだけ。

**デフォルトの名無しさん** · 2023/01/16(月) 22:57:18.94

>>480
＞$("#hoge").val("fuga")
の場合、val()関数を弄るという手法も無くはないかも
お仕事では勝手に使ってはいけない、モンキーパッチ
あくまでも参考として書いて置く

var orgFnVal = $.fn.val;
$.fn.val = function(...args) {
var result = orgFnVal.apply(this, args);
if($(this).is('#hoge'))
console.log('val() しました',this, args);
return result;
}

**デフォルトの名無しさん** · 2023/01/16(月) 23:29:59.94

それは意味的にはjQuery経由だけに効くprototype拡張であって、
なら480には生JSもあるのだから
直接 Object.defineProperty(HTMLInputElement.prototype,'value', ...) の方がマシだと思うけど。

ただこれらは禁じ手だし、そもそも何故禁じ手なのか理解出来ない奴に教えるべきものでもない。
親切のフリして余計に遠回りさせるのはどうかと思うけどね。
俺は知ってるアピールなら、競プロとかの馬鹿界隈でやれって話でさ。

**デフォルトの名無しさん** · 2023/01/16(月) 23:58:14.87

知ったり試したりした上で取捨選択することで
各人の技術が洗練され、成長できる

**デフォルトの名無しさん** · 2023/01/17(火) 00:20:02.34

input要素のvalue属性は、input要素の値を指定する属性

テキスト入力欄などにおいては初期入力値、
チェックボックスやラジオボタンにおいては選択した時にだけ送信する値、
送信ボタンなどにおいてはボタン名を表す

change イベントは <input>, <select>, <textarea> 要素において、
ユーザーによる要素の値の変更が確定したときに発行されます

input イベントとは異なり、
change イベントは要素の値 (value) が変更されるたびに発生するとは限りません

value属性、changeイベントを勘違いしているのでは？
初心者あるある

仮想DOM のVue.js みたいなReactive を使うか、
Ruby on Rails の作者DHH の会社・Basecamp 社製の、規約ベースの実DOM のStimulus を使うとか

Rails 7 からはHotwire(HTML over-the-wire)で、JavaScript を使わずに、Reactive になったけど

**デフォルトの名無しさん** · 2023/01/17(火) 00:31:52.31

>>495
俺はそうとは全く思わないけど。
お前ら今でもIEデハーとかやる気なのか？

一通りも知らない初心者は、まず一通りオーソドックスにやる方法を学ぶべきで、
既に「やるべきではない」と(大多数にとって)結論が出ているものは学ぶ必要すらない。時間の無駄だ。
これに同意しないのも自由だが、それにしても、
まずは一般的手法で一通り出来るようになってからにするべきだよ。

とはいえ平行線だろうからこの話は終わりでいいが、
普通は必要もないことを初心者に実装させる事自体がかなり間違ってて、
それはそもそも発注元がJSに対して理解が全くなく、要求仕様自体がおかしいからだというのが俺の見立て。
初心者はこの辺の相場が分からないから、そこをサポートすべきであって、
余計な迷路を提示するのはどうかと思うけどね。

ついでに言っておくと、496も無視しとけ。
496はこの板ならどこにでも現れるRubyカスで、言ってることはデタラメばかりだから。
てゆうかさ、プロパティか属性かを区別してるときに、それは喧嘩売ってるだけだよな。

**デフォルトの名無しさん** · 2023/01/17(火) 10:28:52.70

大山鳴動して鼠一匹

**デフォルトの名無しさん** · 2023/01/17(火) 11:03:18.91

上から目線長文のなんと醜いことよ

**デフォルトの名無しさん** · 2023/01/17(火) 11:05:57.32

長文と言うより分節区切りの問題みたいだな、中学の現国