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

2023/12/09(土) 17:40:39.92

!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

2024/01/05(金) 09:10:31.40

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

2024/01/05(金) 09:12:10.60

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

2024/01/05(金) 09:26:22.59

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

2024/01/05(金) 09:52:24.63

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

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

2024/01/05(金) 11:11:29.09

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

2024/01/05(金) 18:15:32.86

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

2024/01/08(月) 08:24:08.50

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

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

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

2024/01/08(月) 10:20:56.34

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

2024/01/08(月) 10:51:13.68

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

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

2024/01/08(月) 13:07:07.19

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

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

2024/01/08(月) 13:58:47.00

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

2024/01/08(月) 20:55:54.87

例えば、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 );
}
} )
} );

2024/01/08(月) 21:08:17.54

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

2024/01/11(木) 09:49:12.76

子要素は含まないように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");}

);
</スクリプト>

2024/01/11(木) 10:30:37.07

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

2024/01/11(木) 10:35:49.26

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

2024/01/11(木) 13:03:40.31

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

2024/01/11(木) 14:18:15.97

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

2024/01/11(木) 14:44:36.31

先ほどは手元にソースコードがなかったので即席で質問してしまいました。
やりたいことはテーブル部分でタッチムーブしたときブラウザのスクロールを禁止にしたいのですが、
テーブルにあるスライダーまでロックされて動かせないようになってしまうので、
スライダーを除外したテーブル部分の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(); //ブラウザのスクロールを禁止にする
}
);
</スクリプト>

2024/01/11(木) 15:08:55.09

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

2024/01/11(木) 16:34:13.87

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

2024/01/11(木) 22:20:25.19

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

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

2024/01/11(木) 22:41:54.15

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

2024/01/13(土) 03:22:15.94

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

2024/01/13(土) 11:42:05.46

↓あたりにどうぞ
JavaScriptフロントエンド総合 Part.11
https://mevius.5ch.net/test/read.cgi/tech/1660898820/

Vue vs React vs Angular vs Svelte Part.11
https://mevius.5ch.net/test/read.cgi/tech/1660969032/

2024/01/14(日) 17:21:53.60

ありがとうございます

2024/01/26(金) 17:25:13.36

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

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

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

2024/01/26(金) 19:57:32.14

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

2024/01/26(金) 20:11:15.77

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

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

2024/01/26(金) 20:12:23.71

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

2024/01/26(金) 21:41:55.02

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

2024/01/26(金) 21:48:25.16

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

2024/01/28(日) 11:39:44.53

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

2024/01/28(日) 19:30:17.30

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

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

2024/01/28(日) 20:16:55.07

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

2024/01/28(日) 23:52:21.72

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

2024/01/29(月) 01:34:06.63

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

2024/01/30(火) 09:12:09.86

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

2024/01/30(火) 11:06:06.79

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

2024/01/31(水) 00:18:29.61

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

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

2024/01/31(水) 08:00:03.26

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

2024/02/03(土) 01:34:02.49

>>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が優れてて代替出来るから不要になったという話では無い

2024/02/03(土) 06:58:45.76

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

2024/02/03(土) 10:15:49.25

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

2024/02/03(土) 10:49:13.33

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

2024/02/04(日) 02:28:25.82

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

2024/02/04(日) 03:05:45.75

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

2024/02/04(日) 05:18:25.36

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

2024/02/04(日) 07:00:09.01

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

2024/02/04(日) 10:50:30.37

そうだね
node.jsでJavaScriptはサーバサイドだけじゃくてデスクトップアプリでも使われている
代表格はVScode(node.js+Electron)がある
Webpackもnode.jsだし
身近なところでは汎用掲示板ビューアSikiがnode.js+ElectronでJavaScriptだね
　　　

2024/02/04(日) 12:44:47.52

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

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

2024/02/04(日) 12:55:11.06

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

2024/02/04(日) 23:16:57.06

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

2024/02/05(月) 09:44:15.86

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

2024/02/05(月) 15:57:34.49

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

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

2024/02/05(月) 18:19:30.64

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

2024/02/05(月) 19:17:51.68

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

2024/02/06(火) 07:31:11.51

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

ならnativeでよくね？

2024/02/06(火) 14:51:45.98

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

2024/02/06(火) 15:07:15.20

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

2024/02/07(水) 01:01:55.81

YouTube 動画で見たけど、

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

2024/02/07(水) 10:23:32.40

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

2024/02/11(日) 13:06:38.03

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

2024/02/11(日) 14:27:08.42

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

2024/02/11(日) 21:47:35.74

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

2024/02/11(日) 23:27:36.16

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

2024/02/12(月) 12:55:25.07

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

2024/02/12(月) 15:27:53.80

もうネット使うなよ

2024/02/12(月) 15:53:51.52

Access でいいよ

2024/02/17(土) 10:17:04.46

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

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

2024/02/17(土) 10:48:07.30

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

2024/02/17(土) 14:57:51.18

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

2024/02/17(土) 15:05:36.03

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

2024/02/17(土) 17:54:57.60

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

2024/02/17(土) 18:56:27.31

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

2024/02/19(月) 18:24:10.88

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

2024/02/20(火) 00:12:35.13

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

2024/02/20(火) 12:26:48.30

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

2024/02/20(火) 12:38:34.44

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

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

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

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

2024/02/28(水) 10:59:38.09

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

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

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

2024/02/28(水) 11:00:05.73

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

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

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

2024/02/28(水) 11:09:45.91

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

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

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

2024/02/28(水) 11:10:03.68

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

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

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

2024/02/28(水) 11:34:49.79

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

2024/02/28(水) 12:19:36.32

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

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

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

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

**質問者** (ｽｯﾌﾟ Sdfa-RtHD [1.72.9.18]) · 2024/02/28(水) 18:05:41.24

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

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

2024/02/29(木) 00:27:46.28

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

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

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

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

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

**質問者** (ﾜｯﾁｮｲ 23e7-MEMs [118.87.46.101]) · 2024/03/01(金) 23:06:30.38

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

**質問者** (ﾜｯﾁｮｲ 23e7-MEMs [118.87.46.101]) · 2024/03/01(金) 23:23:12.37

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

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

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

2024/03/02(土) 00:10:12.99

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

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

**質問者** (ﾜｯﾁｮｲ 23e7-MEMs [118.87.46.101]) · 2024/03/02(土) 11:13:20.78

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

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

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

**質問者** (ﾜｯﾁｮｲ 23e7-MEMs [118.87.46.101]) · 2024/03/02(土) 11:46:08.42

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

2024/03/02(土) 12:45:11.55

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

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

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

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

2024/03/02(土) 12:47:42.36

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

2024/03/02(土) 12:52:06.03

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

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

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

2024/03/02(土) 13:00:31.15

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

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

customListBox.size = 25
customListBox.selectIndex = 99

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

2024/03/02(土) 14:29:55.91

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

2024/03/02(土) 15:39:45.46

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

**質問者** (ﾜｯﾁｮｲ 572e-lvv7 [118.86.90.123]) · 2024/03/03(日) 22:00:44.67

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

2024/03/04(月) 10:08:20.56

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

2024/03/05(火) 18:22:59.72

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