- 1 名前：デフォルトの名無しさん (ｵｯﾍﾟｹ Sr9f-tek/ [126.254.232.20]) mailto:sage [2023/12/09(土) 17:40:39.92 ID:Mnb70srnr.net]
- !extend:checked:vvvvvv:1000:512
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-5のテンプレを読んだ上で質問してください。次スレは>>950が>>2の「次スレの立て方」を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は 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
- 94 名前：デフォルトの名無しさん [2024/01/11(木) 22:20:25.19 ID:vnpK4WpS0.net]
- clickやmousedownに仕込む話したど思ったのでバブリングを指摘したけれど
スマホの場合にスライダー操作でスクロールしちゃうのを止めたい場合の話なら別問題
スクロールはブラウザ側の仕組みでDOMのイベントバブリングを止めてもダメ
それとターブルじゃなくて、スライダーをtouchmoveしたときにスクロールを止めたいのじゃないですか
要件としては
スライダーのtouchstartでブラウザのスクロール機能を無効にして
スライダーのtouchendでブラウザのスクロール機能を有効に戻す
スクロールの有効・無効は、スクロール要素のcssのスタイルで制御できるので、JavaScriptでstyle要素のoverflowYまたはoverflowXを'hidden'または'auto'と値を切り替える
- 95 名前：デフォルトの名無しさん [2024/01/11(木) 22:41:54.15 ID:bfPtSoSL0.net]
- >>93
ありがとうございます。
スライダーのelementにe.stopPropagation()をしたらスライダーを動かせるようになりました
>>94
ありがとうございます。試してみます。
- 96 名前：デフォルトの名無しさん [2024/01/13(土) 03:22:15.94 ID:bBKen2/T0.net]
- すいません、vueの質問はここでいいですか？
- 97 名前：デフォルトの名無しさん mailto:sage [2024/01/13(土) 11:42:05.46 ID:sUiBS1y50.net]
- ↓あたりにどうぞ
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/
- 98 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ ad01-1c9G [126.168.252.135]) [2024/01/14(日) 17:21:53.60 ID:vAN1c9wS0.net]
- ありがとうございます
- 99 名前：デフォルトの名無しさん mailto:sage [2024/01/26(金) 17:25:13.36 ID:2+81uqBd0.net]
- WebフロントエンドでのJavaScriptを勉強中です
「jQueryでできることは素のJSでもできるのがほとんどになったから、jQuery不要」という話しが出てきますが、
エレメントの操作などで、素のJSだと記述する文字が長く、jQueryだとすごく短く書けるので、それだけでも十分便利と感じています。
document.querySelector('selector')
⇒ $('selector')
jQuery不要の場合、効率良く書くために代わりに何を使っているのか気になります。
大型のフレームワークとかでしょうか？フレームワーク使うと、ここのエレメントの参照・操作などはもはや不要になるのでしょうか？
- 100 名前：デフォルトの名無しさん mailto:sage [2024/01/26(金) 19:57:32.14 ID:vs+8Yc4d0.net]
- jQueryの技術覚えてもjQueryにしか使えない。素のJS技術はどんなフレームワーク使っても役に立つ
- 101 名前：デフォルトの名無しさん mailto:sage [2024/01/26(金) 20:11:15.77 ID:Uafucq2BM.net]
- >>99
コード補完機能（任意のスニペット呼び出しを含む）のある現代のエディタではその全てをキータイプする必要は無いし、どうしても短く書きたいならショートハンドを定義すればいい
たとえば、5ch互換掲示板ビューアであるブラウザ拡張機能「read.crx 2」では、同拡張機能の共同メンテナの方が作成したjQueryライク（互換ではない）なショートハンドライブラリ「shortQuery.js」が使われてる（だいぶ前にいわゆる「脱jQuery」のお供として導入されたハズ）
なんにせよ、初心者が今からjQueryを学ぶのは悪手
- 102 名前：デフォルトの名無しさん mailto:sage [2024/01/26(金) 20:12:23.71 ID:Z5KyuX5d0.net]
- 素のjs分からずにjquery使えるわけないだろ
- 103 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 433e-K/rq [2400:2200:7d4:c4d1:*]) mailto:sage [2024/01/26(金) 21:41:55.02 ID:bxMKu9aD0.net]
- >>99
その通り
ReactやVueに代表されるような昨今のフレームワークは開発者がDOMを直接操作しない
- 104 名前：デフォルトの名無しさん (ﾌﾞｰｲﾓ MM43-kvtp [49.239.68.29]) mailto:sage [2024/01/26(金) 21:48:25.16 ID:KJ09lp1IM.net]
- そう思ってるとこんなん当然知ってますよねみたいなノリでevent処理とかrefとか出て詰むゾ
- 105 名前：デフォルトの名無しさん mailto:sage [2024/01/28(日) 11:39:44.53 ID:WhNL7KNN0.net]
- >>99
jQueryの現在はHPフロントエンジニアさんが
抱負なライブラリでHPに花をそえるために使っているだけ
ウェブアプリ屋さんはjQueryが邪魔くさい時があるので使わない
どの分野を目指すのかが決まっているなら
その分野で何が主流なのかを見極めたほうがいい
- 106 名前：デフォルトの名無しさん mailto:sage [2024/01/28(日) 19:30:17.30 ID:1z8oB9tQ0.net]
- 動的に作られる特定の要素にだけイベント追加するのがラク
jQueryがバニラJSに勝ってる唯一の点だけど、そういう処理を入れるくらいDOMの操作使ったアプリ作るなら他のフレームワークのほうが良いだろう
- 107 名前：デフォルトの名無しさん mailto:sage [2024/01/28(日) 20:16:55.07 ID:9hZosd/l0.net]
- ゆうて古から続くjqueryの資産はいたる所にあるから、読めることくらいは出来ないとな
難しいもんではないんだし
- 108 名前：デフォルトの名無しさん mailto:sage [2024/01/28(日) 23:52:21.72 ID:Plt7vTfv0.net]
- >>106
バニラでも祖先ノードでmatches(selectors)を使えば対応可能なので、それほどjQueryに優位性はない気がする。
それから、jQueryはバブリングフェースのみ対応という弱点がある。
バブリングしないイベントタイプに関してはaddEventListener()に優位性がある。
- 109 名前：デフォルトの名無しさん mailto:sage [2024/01/29(月) 01:34:06.63 ID:fIBxeYXl0.net]
- 他から持ってきたコードが指すjQueryが最近のじゃなくて
だれが互換性担保するのってのが一番困る
jQueryを直接つかう分には検証できるけど
依存しているライブラリは採用せんでほしい
- 110 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ f95a-w/9U [2400:4052:5062:9ff0:*]) [2024/01/30(火) 09:12:09.86 ID:GdANFjKZ0.net]
- jQuery使いの人は行き当たりばったりな人が多い
jQueryライブラリファイルの読み込みが沢山あってなんじゃこりゃみたいな
- 111 名前：デフォルトの名無しさん mailto:sage [2024/01/30(火) 11:06:06.79 ID:kUs11O+K0.net]
- jQueryが出た頃はSelectors APIもなかったからな
行き当たりばったりというより昔の標準APIが貧弱でライブラリに頼るしかなかった
- 112 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 99d1-NbCu [2001:268:9a89:2571:*]) mailto:sage [2024/01/31(水) 00:18:29.61 ID:Z4CJtIhd0.net]
- jQuery は短く書けるので、ちょっとしたデモには良い。
でも、React, Vue.js では使わない
Bootstrap も、5 からは使わない。
popper.js に変わった
- 113 名前：デフォルトの名無しさん mailto:sage [2024/01/31(水) 08:00:03.26 ID:8Xe2gISY0.net]
- >>110
しかもバージョンがところどころ違ったり読込先や仕方が違ったりする
- 114 名前：デフォルトの名無しさん mailto:sage [2024/02/03(土) 01:34:02.49 ID:VXfZdpMe0.net]
- >>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が優れてて代替出来るから不要になったという話では無い
- 115 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 13ad-IeYv [61.26.38.34]) mailto:sage [2024/02/03(土) 06:58:45.76 ID:hL2W++6M0.net]
- 変数更新してるだけに見えて、別処理が勝手に動くというのも実はアレだけどな
今はリアクティブが流行してるからそこにケチつける風潮ないけれど
- 116 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 1901-fC/B [60.88.91.184]) mailto:sage [2024/02/03(土) 10:15:49.25 ID:HeN++Rh50.net]
- >>99 (ﾜｯﾁｮｲ 4d7c-MQtI [122.212.16.94])
これだけ回答をもらって無反応か
最近の質問者はこういう人が多いな
- 117 名前：デフォルトの名無しさん (ｱｳｱｳｴｰ Sae3-P9+J [111.239.175.167]) mailto:sage [2024/02/03(土) 10:49:13.33 ID:YZYv2rY+a.net]
- 反応欲しいなら知恵袋にしとけって
- 118 名前：デフォルトの名無しさん mailto:sage [2024/02/04(日) 02:28:25.82 ID:ipvGCo7I0.net]
- JavaScriptで作れるプログラムって、webブラウザ以外になにかありますか？
全然ユーザーがいないのはダメだけど
ある程度需要がありそうな用途
- 119 名前：デフォルトの名無しさん mailto:sage [2024/02/04(日) 03:05:45.75 ID:w9OYnB1OM.net]
- >>118
WebブラウザとWebページを区別できるようになろう
- 120 名前：デフォルトの名無しさん mailto:sage [2024/02/04(日) 05:18:25.36 ID:7DDGpERD0.net]
- でもまあwebブラウザが全てではあるよね
他に出番無いし
- 121 名前：デフォルトの名無しさん mailto:sage [2024/02/04(日) 07:00:09.01 ID:wRU34d220.net]
- 今はNode.jsでサーバ側もJSってこともある
- 122 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ bd43-tydm [114.148.57.9]) [2024/02/04(日) 10:50:30.37 ID:Vls4Se8V0.net]
- そうだね
node.jsでJavaScriptはサーバサイドだけじゃくてデスクトップアプリでも使われている
代表格はVScode(node.js+Electron)がある
Webpackもnode.jsだし
身近なところでは汎用掲示板ビューアSikiがnode.js+ElectronでJavaScriptだね
- 123 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 85a1-aUy2 [240b:12:203:6300:* [上級国民]]) mailto:sage [2024/02/04(日) 12:44:47.52 ID:ieWwGMGa0.net]
- CSSもHTMLも生で書くのは平成だしな
普通SASSやらPugやら使うだろ
JSだってWebpackやらBrowserify越しに使うやろ
まぁNode.jsじゃトランスパイル遅いから
GOやRustのツールに置き換える流れにはなってるが
じゃあ最初からCやGO、Rustでやれば良かったよねとはならないフットワークの軽さがNode.jsにはあるからな
- 124 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 1b47-JMKI [2001:240:2462:f08:*]) mailto:sage [2024/02/04(日) 12:55:11.06 ID:m4gIKl+m0.net]
- Rustで書いたJSトランスパイラは速いけどRust自体のコンパイルは遅い
- 125 名前：デフォルトの名無しさん mailto:sage [2024/02/04(日) 23:16:57.06 ID:/yrx0E0+0.net]
- あることをローカルマシンでやりたくて、Python入ってっから、それでやろうとしたらできなくて（いや正確にはすごく遅い）Node.jsになってしまった。何かは言わない。
- 126 名前：デフォルトの名無しさん [2024/02/05(月) 09:44:15.86 ID:Q9Y3g4UN0.net]
- node.jsの良さはJavaScriptでプログラミングできる事
Electron使えばUIもHTMLで書けるので便利
なれたらJavaScriptでデスクトップアプリを書くのが楽しくなった
- 127 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ abcf-aUy2 [2001:240:242f:19bc:* [上級国民]]) mailto:sage [2024/02/05(月) 15:57:34.49 ID:thNH7tNN0.net]
- >>126
Electronはファイルがデカいから
俺が何か作る時はCLI一択だわ
対話的な物作る時は
Tauriで作ってみたいなぁと思う
- 128 名前：デフォルトの名無しさん mailto:sage [2024/02/05(月) 18:19:30.64 ID:1m9RfVzn0.net]
- >>118
Visual Studio Codeがjavascriptで作られている
- 129 名前：デフォルトの名無しさん mailto:sage [2024/02/05(月) 19:17:51.68 ID:+Fh+RIwSa.net]
- vscodeが糞な理由が分かった気がした
- 130 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 436c-OKLl [240b:12:6820:b000:*]) mailto:sage [2024/02/06(火) 07:31:11.51 ID:JsprpZ5q0.net]
- ElectronとAngularで作られてるシステム見させてもらったんだけど、reactに書き換えるって言ってたな
ならnativeでよくね？
- 131 名前：デフォルトの名無しさん mailto:sage [2024/02/06(火) 14:51:45.98 ID:nsw90RpoM.net]
- reactとreact nativeって書き換えが必要なの？
ゴミかな？
- 132 名前：デフォルトの名無しさん [2024/02/06(火) 15:07:15.20 ID:4bvVpi0E0.net]
- >>0127
TauriはWebViewなので
Electronの様にWebRequestを簡単に操れない
Rustに拘らないのなら
使い慣れた開発言語でWebViewを組み込んだ方が手っ取り早い
- 133 名前：デフォルトの名無しさん mailto:sage [2024/02/07(水) 01:01:55.81 ID:8Eizk2eA0.net]
- YouTube 動画で見たけど、
北米では、Flutter よりも、React Native が多いらしい
- 134 名前：デフォルトの名無しさん [2024/02/07(水) 10:23:32.40 ID:Q0zrTHJg0.net]
- JavaScriptで書ける環境の話から
かなり脱線気味
- 135 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 3743-5kwM [60.32.26.124]) mailto:sage [2024/02/11(日) 13:06:38.03 ID:4EmF6N4v0.net]
- 業務がWebアプリなのは危険だと言い出した管理職がいて
Electronでチャチャとデスクトップソフト風にしたら
仕事が早いとお褒めいただいたw
何も変わっちゃいなんだけれどそれはナイショ
- 136 名前：デフォルトの名無しさん [2024/02/11(日) 14:27:08.42 ID:cAyMWgFh0.net]
- 危険だという懸念が素人の無理解から来てるだけなのか妥当な懸念なのか分からないから何とも言えんな
前者なら悪くない回避策
- 137 名前：デフォルトの名無しさん mailto:sage [2024/02/11(日) 21:47:35.74 ID:VNWSIW9O0.net]
- ブラウザのアドインに情報吸われる危険性は下がるね
- 138 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 2279-8TQs [61.192.207.171]) mailto:sage [2024/02/11(日) 23:27:36.16 ID:Z05z2D4x0.net]
- まあ一般的に考えて危険やな
その認識は正しいさすが管理職
- 139 名前：デフォルトの名無しさん mailto:sage [2024/02/12(月) 12:55:25.07 ID:3q7oTZTX0.net]
- 管理職が正しい
どんなに堅牢なシステムでも狙われたら終わり
だから今はクラウドじゃなくてオンプレ回帰してる
- 140 名前：デフォルトの名無しさん mailto:sage [2024/02/12(月) 15:27:53.80 ID:2z81MgsB0.net]
- もうネット使うなよ
- 141 名前：デフォルトの名無しさん mailto:sage [2024/02/12(月) 15:53:51.52 ID:BAGnA5Sa0.net]
- Access でいいよ
- 142 名前：デフォルトの名無しさん mailto:sage [2024/02/17(土) 10:17:04.46 ID:eAolMzZEd.net]
- VBAとC#でちょくちょくアプリ作ってる程度のもんなんですけど
最近VS Code使ってjavascriptの勉強始めたわけですよ
デフォルトの環境で扱ってる限り、typoの指摘が甘くて気づくのに時間かかってしまってつらいです
Visual StudioでC#つかってるとかなり丁寧に指摘してくれるんで助かるんですが
Codeはその辺厳しいですね
Code Spell Checkerを入れてみたんですけど、よさそうな対策は他にありますか？
- 143 名前：デフォルトの名無しさん mailto:sage [2024/02/17(土) 10:48:07.30 ID:Hugfzc2R0.net]
- JSはデフォだとどんなパラメータも持ちうるのでtypoを機械的に見つけにくい言語。
なのでjsdocゴリゴリ書く（もっとやるなら@ts-checkも）かTypeScript使うと良いよ
- 144 名前：デフォルトの名無しさん (ｽｯﾌﾟﾌﾟ Sd42-hHXc [49.105.71.123]) mailto:sage [2024/02/17(土) 14:57:51.18 ID:eAolMzZEd.net]
- >>143
ありがとうございます
TypeScriptも視野にいれてちょい調べてみます
- 145 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ f7d7-bM9J [240b:12:203:6300:* [上級国民]]) mailto:sage [2024/02/17(土) 15:05:36.03 ID:MLAS2UwQ0.net]
- >>142
VSと比較するならWebStormじゃなきゃ辛いし
VSCodeのままでもLSPなりで魔改造すれば頑張れるやろ
- 146 名前：デフォルトの名無しさん mailto:sage [2024/02/17(土) 17:54:57.60 ID:3rmfz0Aa0.net]
- >>142の言うtypoが具体的にどんなのか気になる
厳しいのはCodeじゃなくてJavaScriptなのを誤解してそう
- 147 名前：デフォルトの名無しさん mailto:sage [2024/02/17(土) 18:56:27.31 ID:snWQTW2N0.net]
- JSもDataflow Proposalsが導入されたら
普通に使い続けるんだがなぁ
- 148 名前：デフォルトの名無しさん [2024/02/19(月) 18:24:10.88 ID:waVDHmuE0.net]
- マウスボタンを押しながらマウスを移動させてからマウスボタンを離すと
マウスボタンを離したときにmouseupだけでなくmousemoveも反応してしまうんだけど仕様ですか？
これ知らなくて動作が思うように行かなかった。
- 149 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ ef5b-WqLa [2400:2200:6b5:cb6f:*]) mailto:sage [2024/02/20(火) 00:12:35.13 ID:n1uvc9Mt0.net]
- 手元で試したところmouseup直後に同じ座標でmousemoveが発火してるのを確認
うまく判定して後続処理が走らないようにすれば良さそうではある
- 150 名前：デフォルトの名無しさん [2024/02/20(火) 12:26:48.30 ID:jaWYglX60.net]
- >>149
ありがとうございます
そうしてみます
- 151 名前：デフォルトの名無しさん mailto:sage [2024/02/20(火) 12:38:34.44 ID:SYHvuSDa0.net]
- >>148
mouseoverはマウスが何かの要素の上を移動すれば毎回出てくるから
マウスを持ってる限り常に垂れ流し続けるぞ
ドラッグアンドドロップを実装したいなら
イベント(関数発火)が非同期かつ大量に垂れ流しになること前提で組む必要がある
一案としては上のスコープで何個か変数を定義
mousedown -> 直下の要素を掴んでhold変数に放り込む
mousemove -> hold変数に値が入ってないなら即return、座標変数に座標情報を格納
mouseup -> 精算、hold変数と座標変数をnullにする
- 152 名前：よろしくお願いいたします mailto:sage [2024/02/28(水) 10:59:38.09 ID:j/HFCr6sd.net]
- はじめて、質問させていただきます。
今やってることはリストボックスの行を以下で選択しています。
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
- 153 名前：よろしくお願いいたします mailto:sage [2024/02/28(水) 11:00:05.73 ID:j/HFCr6sd.net]
- はじめて、質問させていただきます。
今やってることはリストボックスの行を以下で選択しています。
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
- 154 名前：デフォルトの名無しさん mailto:sage [2024/02/28(水) 11:09:45.91 ID:74XehS+p0.net]
- はじめて、質問させていただきます。
今やってることはリストボックスの行を以下で選択しています。
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
- 155 名前：デフォルトの名無しさん mailto:sage [2024/02/28(水) 11:10:03.68 ID:74XehS+p0.net]
- はじめて、質問させていただきます。
今やってることはリストボックスの行を以下で選択しています。
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
- 156 名前：デフォルトの名無しさん mailto:sage [2024/02/28(水) 11:34:49.79 ID:j/HFCr6sd.net]
- すみません。5個書き込まれてしまいました。すみません。
- 157 名前：デフォルトの名無しさん mailto:sage [2024/02/28(水) 12:19:36.32 ID:bgJbuEEB0.net]
- >>152
そもそもjQueryは時代遅れだから
ReactなりVue.jsなりのJSフレームワーク覚えて移行しろ
理由は>>114
誰が作ったか分からん動くかも全く保証されてないし、10年前からもうメンテすらされてない
fixForSafariMobileなんてプラグインなんて持ち出してきて
意図通りに動きませんとか動くわけないし、アドバイス出来る訳ない
プラグインの作者は神様でも何でもない
俺らとそう変わらない腕前の奴が少しの善意と承認欲求で作ったコード片でしかない
どうしてもjQuery+プラグインでやりたいならその作者のsylvain-hamelさんにでも聞くか
GitHubで公開されてるコードを全て読んでちゃんと理解して手直ししなよ
- 158 名前：質問者 (ｽｯﾌﾟ Sdfa-RtHD [1.72.9.18]) mailto:sage [2024/02/28(水) 18:05:41.24 ID:j/HFCr6sd.net]
- レスありがとうございます。昔からあるjsやjQueryは今は時代遅れなんですね。
ただ、今回は15年動いているものの改修作業なんです。
fixForSafariMobileはjQueryソースからselectboxからlistに変換するということはわかりました。
$("selectTarget").selectValue(ul, val)で、できそうだと思ったのですが、ulで何を渡すかまでは来ました。
valからulを検索して取得してからこれなんですかね？
- 159 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 13d2-fCbz [240b:12:203:6300:*]) mailto:sage [2024/02/29(木) 00:27:46.28 ID:XLzCkQ6P0.net]
- >>158
なるほどなぁ、なら何とかツギハギで頑張ってパッチするわけか
んで、.selectValueで出来そうだと思いました！って言われても
そんなメソッドjQueryには無いぞ
ttps://api.jquery.com/
何らかのライブラリなりで
jQueryのメソッドを拡張・追加すれば実現出来るが
それを何の前提知識も無く「どうやって使えば良いですか？」と言われても何もアドバイス出来んぞ
jQueryはもう相当うろ覚えだが
.valメソッドとかを使うんじゃなかったか？
セレクトボックスは動きが特殊だから.valで動かんかったら他のメソッド探してみろ
jQueryの公式ドキュメントを読め
JavaScriptの話ならMDNをちゃんと読め
そうとしか言えんわ頑張れ
- 160 名前：質問者 [2024/03/01(金) 23:06:30.38 ID:Id25sy0k0.net]
- いろいろとありがとうございます。
- 161 名前：質問者 mailto:sage [2024/03/01(金) 23:23:12.37 ID:Id25sy0k0.net]
- やりたいこと
・プログラムのデバッガみたいなステップ実行ができるWEBで作成されたものを改修。
・スクロールしていくので、複数行リストボックスで現在行を選択表示して、実現。PC版では動く。
・しかし、モバイル版では、html形式の複数行リストボックスは１行のドロップダウンリストBOXになってしまう。
どうもこれは、モバイルの仕様なようで、実現するのは不可能ぽい。
過去にある人がjqueryで、モバイルで複数行リストボックスみたいな事は実現しているが、これはあくまでも表示のみで選択は不可。
・複数行リストボックスをリスト型で実現している。なので、Val()でも、スクロールして、選択表示できない。
ほかの方法で考えた方が良いですかね？ただ、改修なので、別のフレームワークに変えるのは無理ですね。
- 162 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 47f6-WOak [2400:2200:714:c52d:*]) mailto:sage [2024/03/02(土) 00:10:12.99 ID:Rcnd56Cm0.net]
- sizeが指定されているSELECTタグのdisplayをnoneにして消す
代わりに自分でsize分だけのリストなりボタンなりを追加する
これをjsでモバイル表示のときだけ実現すりゃいいんじゃない
- 163 名前：質問者 mailto:sage [2024/03/02(土) 11:13:20.78 ID:TgRbMsKE0.net]
- >代わりに自分でsize分だけのリストなりボタンなりを追加する
>これをjsでモバイル表示のときだけ実現すりゃいいんじゃない
レスありがとうございます。
データが100行あります。
今、複数行選択リストボックス(select size=25)では、25行表示できるエリアがあって、75行が隠れています。
99行目のListをスクリプトで選択（人間は選択しません。見てるだけです。）したら、自動的にそこまでスクロールしてくれます。
リスト（ul,li）ではスクロールまでしてくれず、隠れてしまって、実現はできないと思うのですが...
- 164 名前：質問者 mailto:sage [2024/03/02(土) 11:46:08.42 ID:TgRbMsKE0.net]
- <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で実現したいのですが、無理ですよね？
- 165 名前：デフォルトの名無しさん mailto:sage [2024/03/02(土) 12:45:11.55 ID:Rcnd56Cm0.net]
- 無理じゃない
jsでdom操作はいくらでもできる
ul liでoptionのような動作をするカスタムのリストボックスも作成可能でcssフレームワークではよくつかう手法
そういうカスタムのWebComponentを作るといいよ
selectから情報をひっぱってきて外観をul liでカスタムコンポーネントを作り、liのクリックイベントリスナーでselect要素のselectedIndexを変更すればいい
select要素はモバイル環境ではdisplayをnoneにする
- 166 名前：デフォルトの名無しさん mailto:sage [2024/03/02(土) 12:47:42.36 ID:Rcnd56Cm0.net]
- 再利用しないのならWebComponent書くまでもなくそのままjsで書けばいい
- 167 名前：デフォルトの名無しさん mailto:sage [2024/03/02(土) 12:52:06.03 ID:Ac/Ek54X0.net]
- >>164
CSSでul > liの見栄えを調整しろ
・メディアクエリの画面横幅で適応されるCSSを切り分ける
・heightをliの25行分の高さに指定
・overflow: scrollを付けてul内でスクロール出来るようにする
CSSを見栄えを整える能力は
Webで食ってく行くならこの先ずっと使うから覚えろ
CSS2の頃はまだ「技術的にも無理です！」ってケース多かったが
CSS3までフル動員させたら「それお前が無知なだけ」ってケースばかりだぞ
- 168 名前：デフォルトの名無しさん mailto:sage [2024/03/02(土) 13:00:31.15 ID:Rcnd56Cm0.net]
- 仕事で受けてるのならこのくらいできないとヤバいぞ
カスタムコンポーネントにすれば
customListBox.size = 25
customListBox.selectIndex = 99
みたいに設定できるようにメソッド追加すると便利
- 169 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 8f43-04EL [114.166.8.189]) [2024/03/02(土) 14:29:55.91 ID:83dahe0E0.net]
- 無理にiOSでも同じUIにする必要ないのと違う
ぐるぐる回るドラム式がiOSのSafari流でかっこいいじゃんと褒め殺せば
林檎ユーザー特有の優越感をくすぐりOKもらえる気がする
- 170 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ ba40-aDj+ [2400:2200:770:d15b:*]) mailto:sage [2024/03/02(土) 15:39:45.46 ID:Ozqjn7Yu0.net]
- >>164
細かい要件が分からないけどただそれっぽく表示するだけならこんなのでいいんじゃないの？
jsfiddle.net/sj3xkrad/1/
- 171 名前：質問者 (ﾜｯﾁｮｲ 572e-lvv7 [118.86.90.123]) mailto:sage [2024/03/03(日) 22:00:44.67 ID:719to9SO0.net]
- 皆さんレスありがとうございます。今日休みで明日から参考にさせていただきます
- 172 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 9724-lvv7 [2001:268:9a3d:bf34:*]) mailto:sage [2024/03/04(月) 10:08:20.56 ID:ORhetY7X0.net]
- Bootstrap, Tailwind, Bulma などに、
使えそうなコンポーネントは無いの？
- 173 名前：デフォルトの名無しさん mailto:sage [2024/03/05(火) 18:22:59.72 ID:dRdKhnsT0.net]
- 質問で、
chrome.tabs.query({}, function(tabs) {
で全タブを取得した各タブに関して、
そのタブのwindowType（appとかnormalなど）って取得できますか？
- 174 名前：デフォルトの名無しさん mailto:sage [2024/03/05(火) 18:47:33.98 ID:qENbjC0BM.net]
- >>173
個別のtab.windowIdから引けるハズ
もっとも、はじめからwindow.getAll()を使った方がいいとは思うが
- 175 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 9f02-ZLJX [27.91.124.53]) mailto:sage [2024/03/06(水) 10:35:08.32 ID:c6agTDKp0.net]
- >>174
お、できた！
ありがとう！
ネットでtabs.WindowTypeってのが載ってたので、それで惑わされてた…
- 176 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 9f02-ZLJX [27.91.124.53]) mailto:sage [2024/03/06(水) 10:42:44.31 ID:c6agTDKp0.net]
- >>174
取得した各tabに対して取得したかったので、
chrome.windows.get()を使いました。
- 177 名前：デフォルトの名無しさん [2024/03/29(金) 14:50:19.65 ID:yy1PP2Jg0.net]
- 非同期処理を同期処理から呼び出すラップ関数を作りたいのですが方法がわかりません
AIに聞いたら次のコードが返ってきましたが、当然awaitが使えないので失敗します
-------------------------------
//非asyncな呼び出し元から、asyncメソッドを呼び出し、結果が帰るまで待って返却する
function FromSyncToAsync() {
const result = await [値を返すだけの非同期な関数]();
return result
}
-------------------------------
調べても呼び出し元をasyncにする方法しかみつかりません…
- 178 名前：デフォルトの名無しさん [2024/03/29(金) 15:40:17.46 ID:yy1PP2Jg0.net]
- これはエラーはおきないけど失敗。戻り値がpendingになりました
-------------------------------
function SyncToCallAsync(){
return getWasmFileLastModified().then((result) => {
// 結果を返却
return result;
});
}
-------------------------------
- 179 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 5f85-qPgS [240b:12:203:6300:* [上級国民]]) mailto:sage [2024/03/29(金) 16:32:26.02 ID:utPNPoKt0.net]
- >>177
残念ながら不可能
一度非同期の世界に入ると
同期処理の世界には戻って来られないぞ
・非同期処理から値を受け取る箇所はPromise値を返す関数にする
・前処理や後処理を含めて色々やってくれる関数をasync関数で定義する
・極力此処の関数やクラスメソッドは小さくして、関係ない値を持たせない事で全てをasync関数にする事を防ぐ
JavaScriptという言語がイベント駆動やイベントループ前提で作られてる以上
こういう作りを維持し続けるしかない
まぁ、ロジックを司るデカい所は基本async関数だよ
作り直す許可を上長や顧客からもぎ取るのが仕事やね
そういう交渉が出来ないなら細かくPromise.thenで作業していくしかない
- 180 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 5fad-VtrB [124.141.209.120]) [2024/03/29(金) 16:55:52.54 ID:yy1PP2Jg0.net]
- ありがとうございます。いくつかのAIに聞いても堂々と回答実現不能なコードばかり返してくるので困っていました。できないとわかったほうが先に進めます
- 181 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ df68-csuD [2400:2200:454:574d:*]) mailto:sage [2024/03/29(金) 17:39:27.22 ID:D+b6Pa3z0.net]
- 現時点ではAIは不可能なことを不可能と答えないケースが多い
信用しすぎないように
- 182 名前：デフォルトの名無しさん mailto:sage [2024/04/05(金) 21:57:54.50 ID:otPTbv2G0.net]
- test
- 183 名前：デフォルトの名無しさん mailto:sage [2024/04/05(金) 21:58:17.84 ID:J45N4zHg0.net]
- test
- 184 名前：デフォルトの名無しさん mailto:sage [2024/04/13(土) 22:59:37.70 ID:3VlMmSMB0.net]
- すいません、Reactの質問ってここでいいですか？
- 185 名前：デフォルトの名無しさん mailto:sage [2024/04/13(土) 23:23:14.15 ID:i7geu5sV0.net]
- まずスレ一覧をReactで検索するぐらいしてみたら？
- 186 名前：デフォルトの名無しさん [2024/04/20(土) 13:04:04.45 ID:/vy8T+9K0.net]
- 昔、私が大学でプログラミングを習ったとき（C言語でした）には円周率など特別な値については定数にしろと言われはしましたが、その他の変数については定数にしろとは言われませんでした。
Javascriptの本を今読んでいるのですが、再代入を行わない場合にはすべて「let」ではなく「const」を使えと書いてあります。
このようなことが言われるようになったのはいつ頃からでしょうか？
私がそう習わなかっただけで、昔から言われていたことでしょうか？
- 187 名前：デフォルトの名無しさん mailto:sage [2024/04/20(土) 14:12:14.37 ID:7dIwEOD00.net]
- >>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を使いましょうという風潮が比較的早く出来た
- 188 名前：デフォルトの名無しさん mailto:sage [2024/04/20(土) 14:22:49.70 ID:7dIwEOD00.net]
- constは直訳すれば定数だが
JSのconstは再代入しちゃいけませんよってだけで
基本は普通の変数として取り扱う
配列やオブジェクト、関数、インスタンスなんかもconstで宣言出来るね
他言語のletみたいなものと考えると良い
constで宣言したオブジェクトや配列は再代入禁止なだけで、中身は普通に加工出来てしまうのも作りとして良くない
const arr = [1, 2, 3];
arr.push(4);
console.log(arr);
// [1, 2, 3, 4]
この辺は勝手に加工しないよう運用でカバーやね
値は基本的に複製しまくってガベージコレクションで掃除してもらう
パフォーマンスチューニングで仕方なく一つの値を加工しまくる時はライブラリ化したり関数で固めたりして、メインロジックの邪魔にならないようにすること
- 189 名前：デフォルトの名無しさん [2024/04/20(土) 14:53:24.59 ID:/vy8T+9K0.net]
- >>187-188
ありがとうございました。
- 190 名前：デフォルトの名無しさん [2024/04/20(土) 21:40:49.05 ID:KOUUOZ8l0.net]
- すみません。
以前からJSフレーム・ワークについて
疑問を持っていたのですが
フレーム・ワークを使う人は、
1. JavaScriptに精通しているので
中規模程度のサイトなら
素のJavaScriptと_lodash等だけでも組めるが
効率が悪いのでフレーム・ワークを
その内部構造をも理解して使っている。
2. JavaScriptの基本的な仕組みと
DOM操作の基本は理解しているが
素のJavaScriptではサイトを作れないので
フレーム・ワークの仕様仕組みを理解して使っている。
の2種類に大別できると思うのですが
結局ブラウザは素のJavaScriptで動いているだけなので
「1」の技能習得に向かわざるを得ないと思うのですが
いかがでしょうか。
- 191 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 6b55-Olxi [2400:2200:6b3:858d:*]) mailto:sage [2024/04/20(土) 22:07:39.36 ID:xlVv2mR90.net]
- どこから突っ込んでいいのかわからなくて答えようがない
- 192 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ d1f1-4mIM [240b:12:203:6300:* [上級国民]]) mailto:sage [2024/04/20(土) 22:27:55.19 ID:7dIwEOD00.net]
- >>190
lodashは関数型プログラミング的な値の加工を司るフレームワークだぞ
一部だけ利用させて頂いて関数片の集合体ライブラリとして使うことも出来るがな
フレームワークは機能を提供するライブラリであると共に
大きなプロダクトを作っていく為のファイル・関数・モジュール置き場をルールで区切ってここに設置してくださいねー
こういう司書さんみたいな役割も担ってる
複数人でプロダクトを触ったり
半年後にどれどれ？と帰ってきて読み直した時にナニコレ？にならない為に
プログラミングスキルの良し悪しに限らず
適切なフレームワークがあるなら使った方が良い
フレームワークを使わん機能を作る時でも
関数やファイルを作って保管するタイミングで「このフレームワークの考え方は好きだな、同じディレクトリ名を作ってそこに保管しよう」
自然とこういう発想が生まれる
なのでフレームワークを使い分けてる人間は引き出しが多くなっていき
可読性の良いプロダクトを作る能力も養われる
結局フレームワーク無しで適当に関数やファイルを作って放り投げるばかりで
読み辛いプロダクト作ってる奴なんて3流の雑魚だよ
- 193 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ d721-K5o/ [121.2.134.225]) [2024/04/21(日) 00:20:10.62 ID:R6fhRdj50.net]
- >>191 >>192
ありがとうございます。
ご教示参考にさせて頂き
精進いたします。
- 194 名前：デフォルトの名無しさん mailto:sage [2024/04/21(日) 02:22:30.51 ID:9CBVBBl20.net]
- >>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 //=> エラー。再代入はできない！
|
 |
