JavaScript の質問用スレッド vol.126
!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 >>143
ありがとうございます
TypeScriptも視野にいれてちょい調べてみます >>142
VSと比較するならWebStormじゃなきゃ辛いし
VSCodeのままでもLSPなりで魔改造すれば頑張れるやろ >>142の言うtypoが具体的にどんなのか気になる
厳しいのはCodeじゃなくてJavaScriptなのを誤解してそう JSもDataflow Proposalsが導入されたら
普通に使い続けるんだがなぁ マウスボタンを押しながらマウスを移動させてからマウスボタンを離すと
マウスボタンを離したときにmouseupだけでなくmousemoveも反応してしまうんだけど仕様ですか？
これ知らなくて動作が思うように行かなかった。 手元で試したところmouseup直後に同じ座標でmousemoveが発火してるのを確認
うまく判定して後続処理が走らないようにすれば良さそうではある >>148
mouseoverはマウスが何かの要素の上を移動すれば毎回出てくるから
マウスを持ってる限り常に垂れ流し続けるぞ
ドラッグアンドドロップを実装したいなら
イベント(関数発火)が非同期かつ大量に垂れ流しになること前提で組む必要がある
一案としては上のスコープで何個か変数を定義
mousedown -> 直下の要素を掴んでhold変数に放り込む
mousemove -> hold変数に値が入ってないなら即return、座標変数に座標情報を格納
mouseup -> 精算、hold変数と座標変数をnullにする すみません。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には無いぞ
ttps://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は不可能なことを不可能と答えないケースが多い
信用しすぎないように すいません、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]
この辺は勝手に加工しないよう運用でカバーやね
値は基本的に複製しまくってガベージコレクションで掃除してもらう
パフォーマンスチューニングで仕方なく一つの値を加工しまくる時はライブラリ化したり関数で固めたりして、メインロジックの邪魔にならないようにすること すみません。
以前から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 //=> エラー。再代入はできない！ 
