23/12/09 17:41:59.25 Mnb70srnr.net
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
URLﾘﾝｸ(plnkr.co) URLﾘﾝｸ(jsbin.com) URLﾘﾝｸ(jsfiddle.net) URLﾘﾝｸ(ideone.com)
■次スレの立て方
本文一行目に「!extend:checked:vvvvvv:1000:512」と書いて、>>1-5のテンプレの「前スレ」「関連スレ」を最新化して立ててください。
■JavaScriptスレの現状
元々はWeb制作板が本スレでしたが、ライブラリ信者に荒らされ、プログラム板に避難所として本スレが立てられました。
Web制作板の本スレは荒らされてから次スレが立っておらず、重複スレの消化のみとなっています。
実質的に本スレは存在しない為、質問者はWeb制作板、ブログラム板のどちらのスレで質問しても問題ありません。
3:デフォルトの名無しさん (ｵｯﾍﾟｹ Sre1-tek/ [126.254.232.20])
23/12/09 17:43:26.17 Mnb70srnr.net
■関連スレ(Web制作板)
JavaScript の質問用スレッド vol.126 (重複スレの消化)
ｽﾚﾘﾝｸ(hp板)
JavaScript ライブラリ総合質問所 vol.5
ｽﾚﾘﾝｸ(hp板)
jQuery 質問用スレッド vol.7
ｽﾚﾘﾝｸ(hp板)
■各種仕様
◆ECMAScript
URLﾘﾝｸ(bclary.com) (ECMAScript 3 HTML版)
URLﾘﾝｸ(www2u.biglobe.ne.jp) (ECMAScript 3 和訳)
URLﾘﾝｸ(262.ecma-international.org) (ECMAScript 2022)
◆HTML Standard (HTML5)
URLﾘﾝｸ(www.whatwg.org) (HTML Living
Standard)
URLﾘﾝｸ(momdo.github.io) (HTML Living
Standard日本語訳)
4:デフォルトの名無しさん (ｵｯﾍﾟｹ Sre1-tek/ [126.254.232.20])
23/12/09 17:45:14.13 Mnb70srnr.net
テンプレここまで
内容は前スレ踏襲
5:デフォルトの名無しさん
23/12/09 17:55:10.18 Mnb70srnr.net
テンプレの範囲ぐらい修正しとけばよかったかな
6:デフォルトの名無しさん
23/12/10 16:33:48.20 ngtmyS7f0.net
前スレで日付変換の関数で質問していた者です。
開発環境としましては、AndroidのmementoというDBを制御するために、Javascriptの使用が可能なので、試しに勉強してみようと思った次第です。
コードエディターや>>2記載のサイトでは正常動作をしていることから、開発環境に問題があると判断しました。ただそうなるとDBと合わせて使用できるメリットが無くなるので代替手段を模索しているところです。
成功例(日時が２つ表示)
URLﾘﾝｸ(i.imgur.com)
失敗例
(consolelogに対応しないため、コメントアウトしていますが、関数が結果に出力される。何も表示されないはず。)
URLﾘﾝｸ(i.imgur.com)
コードエディター
URLﾘﾝｸ(play.google.com)
memento
URLﾘﾝｸ(play.google.com)
7:デフォルトの名無しさん
23/12/10 16:34:26.85 ngtmyS7f0.net
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)
8:デフォルトの名無しさん
23/12/10 16:34:43.88 ngtmyS7f0.net
// 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);
}
9:デフォルトの名無しさん
23/12/10 16:35:00.00 ngtmyS7f0.net
// DateをHH:MM文字列に変換する
function timeToHhmm(time){
let n = time.getHours().toString().padStart(2, "0") + ":";
n += time.getMinutes().toString().padStart(2, "0");
return(n);
}
10:デフォルトの名無しさん
23/12/10 16:35:52.81 ngtmyS7f0.net
申し訳有りません。
サービスでの稼働は確認出来たのですが、共有方法が分からないので、連投になってしまいましたが、直接描かせていただきました。
11:デフォルトの名無しさん (ｱｳｱｳｳｰ Sa49-+EJW [106.155.27.178])
23/12/10 17:01:43.23 013bN9IEa.net
>>10
よくわからんけどそもそもその環境は関数定義して呼び出すとかできるの？
全体を関数として扱って最後の戻り値を文字列として解釈してるとかそういうノリではなく？
12:デフォルトの名無しさん (ﾜｯﾁｮｲ ed27-tek/ [2400:2200:6f2:ad4b:*])
23/12/10 17:01:58.34 uEdCnVbW0.net
>>10
URLﾘﾝｸ(wiki.mementodatabase.com)
>but only the result of the last operation will be entered into the field.
とあるから最後の文の値が結果値として採用される
だからtimeToHhmm関数自体が結果になっている
修正したければコードの最後に
const result = stDate + stTime + " " + edDate + edTime
などと追加すればその値が結果値として採用されるんではないだろうか
13:デフォルトの名無しさん
23/12/10 21:02:11.63 ngtmyS7f0.net
>>11,12
まさに仰るとおりでございました。
最後に出力文を置くことで正しく稼働を確認できました。
改めて調べようが足らなかったことを痛感しました。正直自分の中に『これ、なんかバグってるのかな…』などと考えてしまってた所もありましたが、単に仕様であったことに恥ずかしさとプラットフォーム開発者に申し訳ないですね。
wikiもしっかり読み込んで改めて勉強しなおしてみます。
本当にありがとうございます。
長々と失礼しました。
14:デフォルトの名無しさん
23/12/15 23:44:44.09 WfAwrcm40.net
nullとundefinedはどう違うのでしょうか？
15:デフォルトの名無しさん
23/12/16 00:21:53.93 92Act5oB0.net
>>14
型も値も何もかも違う
16:14
23/12/16 12:33:00.76 3Jo1PIzy0.net
>>15
レスありがとうございます
単純に、nullは「空」、undefinedは「未定義」と理解しておけばいいでしょうか？
うーんでも、空だから未定義であるとも言えるし、未定義だから空とも言える気もします
難しく考え出すとハマりますね…
17:デフォルトの名無しさん
23/12/16 12:50:38.08 GGJUNSgh0.net
まず「空」とはなんぞや、「未定義」とはなんぞやってところから勉強してみたら？
18:14
23/12/16 13:09:24.81 3Jo1PIzy0.net
>>17
レスありがとうございます
自分なりに少し調べてみたら、
undefinedは「これから何かしらの値が入る余地があるがまだ定義されていない」
nullは「値が入りようがないから空」
という違いがあるみたいですね
19:デフォルトの名無しさん
23/12/16 13:43:31.64 GGJUNSgh0.net
意味的には別物だというのは納得できた？
20:14 (ﾜｯﾁｮｲ 4f1d-Qk2W [180.178.89.53])
23/12/16 16:34:04.63 3Jo1PIzy0.net
>>19
はい、それなりに理解出来たと思います
ありがとうございます
JSでは、undefinedに比べるとnullの登場頻度はかなり低いみたいですね
21:デフォルトの名無しさん
23/12/16 19:13:30.08 UfR4i5aB0.net
設計ミスだから使い分ける必要はなく
外部とのやりとり以外にnullは使わないと統一した方が問題でにくいし楽
22:デフォルトの名無しさん
23/12/18 12:29:54.63 UBFKxLGp0.net
配列の宣言はvar list=[];
オブジェクトの宣言var obj={};
配列の配列の宣言は var list=[[]];
ではオブジェクトの配列の宣言はどうすればいいですか？
var obj={[]};のようにしてもできませんでした。
obj["aaa"][0]=100;
obj["bbb"][1]=200;
のように値を入れたいです。
23:デフォルトの名無しさん
23/12/18 12:38:38.33 UBFKxLGp0.net
配列のオブジェクトって言った方が正しいのかわからないけど
とにかく>>22のように代入したいんです
24:デフォルトの名無しさん
23/12/18 12:58:21.29 kn95Gf6w0.net
[[]] 配列を入れ子にしても1番目の要素を[]に初期化しているだけで
配列として使いたい場合に必要な手順ではない
仮に1番目を[1,2]、2番目を[3]にしたい時に操作が変わってしまうので邪魔なだけ
配列は空のまま [] で十分
あとconst/letじゃなくvarで書くスタイルは古い
参考にした情報があるなら忘れよう
更新もせずずっと放置しているなら害悪でしかない
25:デフォルトの名無しさん
23/12/18 13:13:46.30 BJv/M26K0.net
let obj = {};
obj["aaa"] = [100];
obj["bbb"] = [undefined];
obj["bbb"][1] = [200];
26:デフォルトの名無しさん
23/12/18 13:15:33.46 BJv/M26K0.net
obj["bbb"][1] = 200;
27:デフォルトの名無しさん
23/12/18 13:42:57.71 WXLOngT30.net
const obj = {
aaa: [100],
bbb: [, 200]
};
28:デフォルトの名無しさん
23/12/18 14:17:37.97 oIHu3KbV0.net
>>23
そこがあやふやだからどう宣言すればいいかも分からないんだと思う
君が宣言したいものは「配列をメンバーに持つオブジェクト」だよ
29:デフォルトの名無しさん
23/12/18 18:21:51.41 UBFKxLGp0.net
>>24-28
ありがとうございます
30:デフォルトの名無しさん (ﾜｯﾁｮｲ 4f10-n6T6 [180.12.82.129])
23/12/18 23:55:35.85 UBFKxLGp0.net
オブジェクトのkeyにelementを使うのは不具合になりますか？
const element = document.getElementById("test_id");
const element2 = document.getElementById("test2_id");
let obj ={};
obj[element] = 200;
obj[element2] = 300;というような感じです
一応動作はしたけどやらないほうがいいんですか？
31:デフォルトの名無しさん (ﾜｯﾁｮｲ c73f-r/Us [2400:2200:736:eb7f:*])
23/12/19 00:19:13.16 ny/Z19vi0.net
>>30
本当に期待通りに動いてるかしっかり確認した？
32:デフォルトの名無しさん (ﾜｯﾁｮｲ 0343-Qk2W [2001:268:9a84:9fef:*])
23/12/19 00:31:33.88 z6V4TATi0.net
const element = 何々
で、elementがオブジェクトなら、キーに使ってはならない。
primitive なら、キーに使える
この表記は、constがついていても、
そのオブジェクトの中身・内容は変えられるから、
本当の意味のconstではない
Ruby では、オブジェクトをfreeze すると、浅い第1階層で変更できなくなる。
変更できなくなった部分に、次の第2階層のオブジェクトがあれば、そこは変更できる！
だから完全に深い階層まで、再帰的にfreezeしないと、
本当の意味でfreezeにならない
>>20
undefined はユーザーが作り出せないものだから、
普通は空を表すのに、null を使う
Rubyのnil と同じ
33:デフォルトの名無しさん
23/12/19 01:47:20.29 jkXgnxvQ0.net
>>30
MapやWeakMapを使おう
34:デフォルトの名無しさん
23/12/19 12:32:27.47 wIcY707L0.net
>>31
確認したら期待通りに動きました
>>31-33
ありがとうございます
35:デフォルトの名無しさん
23/12/19 14:48:44.22 s0aDiAUA0.net
>>34
>>30のあとに
console.log(obj[element]);
と書くと何が表示されると思う？
36:デフォルトの名無しさん
23/12/19 14:54:15.24 s0aDiAUA0.net
あ、これだけだと前提が足りないか
test_idもtest2_idもdivタグだとする
37:デフォルトの名無しさん
23/12/19 15:48:03.09 g4Os8oTba.net
>>16
実用的はそれらは同値だと判断した方が良い
少なくともコード上分けるメリットはゼロ
38:デフォルトの名無しさん
23/12/20 13:23:41.58 QAvRAUPM0.net
JavaScriptで関数を変数に代入できると聞いて、
物理学で万物が粒子だけでなく波としての性質も合わせもつと聞いたときと同じくらいの衝撃を受けました。
どうもこのJavaScriptで関数を変数に代入できるという考えがしっくりこないのですが、どう考えれば受け入れられますか？
39:デフォルトの名無しさん
23/12/20 13:43:53.69 bsiqnAom0.net
>>38
関数定義の構文
function f() {...}
は関数オブジェクトを変数 f に代入してるだけなので
g = f
としたら g() で同じ関数呼べるし
f = 123
と再代入したら f() で関数呼べなくなる
f = () => {...}
これで関数定義できることからもわかる
40:デフォルトの名無しさん (ﾜｯﾁｮｲ a262-Zz6i [2001:240:2428:b257:*])
23/12/20 15:57:28.18 5U5fDbVv0.net
>>38
Arrayだろうが関数だろうが変数に格納されてる値はポインタで
値を使う時に自動的にデリファレンスされてると思っとけばいいんじゃね
最近の言語ならどれも同じようなことできるけどね
41:デフォルトの名無しさん
23/12/21 01:46:28.22 9dULh+b20.net
>>38
実態からはかけ離れるけど、メソッドが1個しかないオブジェクトの特別な扱いだと捉えるとどうだろう？
関数を変数に代入できるというのは、C言語のような古いものでも関数ポインタという形で実現してる。
関数はそのコードがメモリ上に配置されていて、関数の呼び出しはそのメモリのアドレスにジャンプするという形で行われるけど、そのジャンプ先のアドレスを変数に入れる感じ。
JavaScript ではクロージャって概念でもっと高度だけど、代入された変数には結局その関数の在りかが紐づけられてる。
42:デフォルトの名無しさん (ｽｯﾌﾟ Sd42-MF53 [49.97.109.220])
23/12/21 14:29:18.32 0EYD168kd.net
やろうと思えば各要素に関数の入った配列を作れるってことが
43:デフォルトの名無しさん (ﾜｯﾁｮｲ 2279-F8eA [61.192.187.100])
23/12/22 21:46:22.69 nFOKM4xK0.net
LISP→Scheme→Javascriptという歴史的経緯があるのでそこから理解すると判りやすいかも
コードはLISPにとってはただのリストというデータ表現でしかなかったのでコードを変数に代入するというのはとても自然な事だった
Schemeでレキシカルスコープが定義され一般的なクロージャの形になった
括弧だらけの構文は一般受けしないのでCっぽい構文のJavascriptが生まれた
ざっくり書けばこういうわけです
44:デフォルトの名無しさん
23/12/23 01:26:50.34 ZuCxSQpj0.net
>>43
分かりやすいかなぁw
45:デフォルトの名無しさん (ﾜｯﾁｮｲ 131b-taje [2400:2200:395:6245:*])
23/12/23 02:10:18.87 YHpw3jwo0.net
挙がってる各言語を知ってる人はなるほどと思うかもしれないけど
そうでないならただの遠回りな気が
46:デフォルトの名無しさん
23/12/23 18:09:35.53 87/jUj+m0.net
>>39-41は代入できますって以上の説明はできてないし
ショックを受けた38が知りたいのはそういう事じゃないんだろう
Coders at WorkによればJavaacript設計者のブレンダン・アイクはSICPとSchemeの崇拝者で、
最初のアイデアはNetscapeブラウザにSchemeを持ち込むことだったとの事だよ
まずはSICPでも読むといいんじゃないの
47:デフォルトの名無しさん
23/12/23 18:34:01.16 seU0bwIPM.net
起源が知りたいわけじゃないと思うよ…
48:デフォルトの名無しさん
23/12/23 18:43:21.05 RHehsd3K0.net
別に関数を変数に代入できるのはJavaScriptが初とか唯一ってわけじゃないからそこを掘り下げてもね
49:デフォルトの名無しさん (ﾜｯﾁｮｲ 3f79-Eb5K [61.192.187.100])
23/12/23 20:16:48.44 87/jUj+m0.net
>>47-48
起源というかね、こういうのは歴史的経緯を辿って理解した方が判りやすいという話よ
君らのつまらんレスを読むよりはずっとね
Javascriptでやってる事は関数のポインタとはわけが違うんだから
50:デフォルトの名無しさん (ﾜﾝﾄﾝｷﾝ MMdf-llxg [153.248.8.149])
23/12/23 20:22:17.26 seU0bwIPM.net
>>49
それは絶対にない>わかりやすい
51:デフォルトの名無しさん (ﾜｯﾁｮｲ 7f95-UZ2u [240b:12:6820:b000:*])
23/12/23 20:30:53.27 1KvsNCZl0.net
歴史を追いかけられるくらい論理的に文章組み立ててくれないか？
52:デフォルトの名無しさん (ﾜｯﾁｮｲ cfcf-x2Sm [153.206.76.80])
23/12/23 20:34:16.96 6J3b/0Sr0.net
>Javascriptでやってる事は関数のポインタとはわけが違うんだから
LISPが違うのはわかるけどJavaScriptは関数ポインタとそんなに違うんだっけ？
53:デフォルトの名無しさん (ﾜｯﾁｮｲ 3f48-taje [2400:2200:39a:a839:*])
23/12/23 20:55:11.83 RHehsd3K0.net
>>49
賛同されなかったからつまらんレスとか言い出すのは大人げないよ
54:デフォルトの名無しさん
23/12/24 14:20:26.14 eKX/4s7na.net
>>52
だいぶ違うぞ
クロージャって言葉知ってる？
定義された場所のローカル変数を参照できるの
そしてローカル変数がクロージャによってキャプチャされたら
その変数はクロージャが死なない限りずっと保持される
これは関数ポインタとは訳が違う
そしてそれこそがscheme信者のアイクが取り入れたかったもの
クロージャじゃないなら関数ポインタと大して変わらんっちゃ変わらん
55:デフォルトの名無しさん
23/12/24 15:20:54.55 D70pmwho0.net
>>54
関数がクロージャを形成するかどうかと
関数を受け渡すときに関数へのポインタを使ってるかどうかは直交した別の問題
実際どのJavaScriptエンジンも関数へのポインタを使って変数への代入や関数の受け渡しを実現している
C言語はクロージャをサポートしないのでC言語の関数ポインタを使ってもクロージャにはならないのは当たり前
もう少し言えば関数を受け渡し可能にするためのスコープ解決の仕組み/ルールと受け渡す際に関数へのポインタを使ってるかどうかは別の問題
56:デフォルトの名無しさん
23/12/24 15:53:19.34 D70pmwho0.net
別スレで見かけたトンデモ記事書いてる人だと思うけどレキシカルスコープの話と第一級関数の話とレキシカルスコープを使ったクロージャによって第一級関数を実現する話を混同してるんじゃないか
Schemeはレキシカルスコープを使ったクロージャという考え方を広く普及させた言語ではあるがレキシカルスコープや第一級関数はScheme以前の昔から実現されてたものだし
レキシカルスコープを使ったクロージャもScheme以前の昔からあった考え方
Schemeが初めてレキシカルスコープを定義したかのように書くのはやめよう
57:デフォルトの名無しさん
23/12/24 16:19:26.43 +dT+Yo8pd.net
>>56
ちょっと指摘させてもらうと
誰も起源の話なんてしてないよ
58:デフォルトの名無しさん
23/12/24 16:48:55.22 awd0q31Fa.net
>>56
いや別に起源とかはどうでも良くて関数ポインタとは違うよって話をしてるだけなんだけど
59:デフォルトの名無しさん
23/12/24 18:14:29.42 uJ8b4azy0.net
>>57
>>43がしてるでしょ
この人同じように間違ったことをあちこちで書いてるから指摘しただけ
60:デフォルトの名無しさん
23/12/24 19:40:11.40 3LVtZ1UM0.net
彼は命題論理が理解できなくて、120年前の古文書まで読み返して、それでも分からなくて200年前の哲学書まで遡った結果、今でも命題論理が分かってないって人間だから、彼の歴史的経緯を遡れば理解しやすくなるって主張は実は彼自身によって反証されてたりする
61:デフォルトの名無しさん
23/12/24 22:35:22.54 ietP5AWI0.net
>>38 が分かりやすかったかどうか答えてくれれば解決だな
62:38 (ﾜｯﾁｮｲ bf74-uzyf [211.124.81.22])
23/12/24 23:33:56.01 M3Ha8RQ30.net
さっぱり分からん
63:デフォルトの名無しさん (ﾜｯﾁｮｲ cfb1-llxg [2400:4050:afe0:3700:*])
23/12/24 23:38:36.92 3LVtZ1UM0.net
おっIP同じやし38本人やん
まあそうだよな。あの説明でわかりやすく人間なんておらんやろ
64:デフォルトの名無しさん
23/12/25 06:04:30.08 G5r1XQvR0.net
クロージャは第一級市民関数。
関数外のローカル変数などの文脈を取り込む。
つまり、スコープがゆるい
一方、Ruby の関数はスコープがきつくて、
関数外のローカル変数を通さないので、第一級関数ではない。
ただし、ブロックはブロック外のローカル変数を通すから、クロージャ
他に、レシーバーとメソッドを持ち運ぶ、メソッドオブジェクトもある
65:デフォルトの名無しさん
23/12/25 08:32:20.98 xnbzJK+y0.net
>>38,62
何がどうわからないのか、を詳しく説明してくれ。
具体的なところがさっぱり分からん。
66:デフォルトの名無しさん
23/12/25 21:05:49.32 HhwD874b0.net
そりゃそもそもLISPやSchemeを全く知らない人だったんでしょ
分かりやすくなる要素なんて1ミリもないわな
67:デフォルトの名無しさん
23/12/25 21:28:48.99 XllulW5ca.net
struct Closure {
struct Env env;
struct Function func;
};
Closureの最もシンプルな実装
Envはキャプチャしたローカル変数を保持する環境
Functionは関数ポインタやらを保持してるオブジェクトだと思ってくれ
たったこれだけのことに過ぎない
関数ポインタにenvが追加されただけのものだ
68:デフォルトの名無しさん
23/12/26 01:40:31.83 XlP1bh7b0.net
クロージャやレキシカルスコープがどうやって実現されてるかという質問なら[[Environment]]のことを教えてあげるのはいいと思うけど
そういう話は誰もしてないからねぇ
69:デフォルトの名無しさん
23/12/26 12:17:20.00 iZHdB3Jl0.net
結局のところ>>38の問題って関数は変数に代入できないものだっていう固定観念を他の言語に持ち込んでるところだと思う
プログラミング言語なんて所詮ヒトがそれぞれの都合で作ったものであって言語が違えば考え方や常識も違う
そこを理解して他の言語の固定観念を持ち込まないようにしないとこの先もしっくりこないこと、受け入れられないことだらけだろう
70:デフォルトの名無しさん (ﾜｯﾁｮｲ efc9-l39z [2001:240:247c:3ea8:*])
23/12/26 18:41:41.07 DtaEhUmP0.net
関数を変数に直接代入できないCの系譜の言語が最も広く普及してるから
そういう言語をやってきた人が関数を変数に直接代入できる言語に初めて接したら>>38のように驚くのは極々自然のこと
何が固定観念なのかなんてそれが覆るまで分からないんだから固定観念を持ち込むなとか言っても何の役にも立たないよ
71:デフォルトの名無しさん (ﾜｯﾁｮｲ 3f27-taje [2400:2200:391:e73b:*])
23/12/26 19:02:16.70 ar+aUrwZ0.net
今回のことで固定観念だったと気づければそれでいいと思うよ
そうすれば次からは疑ってかかることができるわけだし
72:デフォルトの名無しさん
24/01/05 08:36:00.72 kvxPBg+iM.net
糞長い式が真値のときだけ変数に代入したくて
if (糞長い式) {
X = 糞長い式
}
と書いてるんですが糞長い式を一度で済ますにはどうしたらいいですか
73:デフォルトの名無しさん
24/01/05 09:10:31.40 PLcvVAqJ0.net
>>72
いますぐ糞をして寝ることだ。
糞!
74:デフォルトの名無しさん
24/01/05 09:12:10.60 PLcvVAqJ0.net
X = 糞長い式 ? 糞長い式2 : X;
75:デフォルトの名無しさん
24/01/05 09:26:22.59 B0YNzjLy0.net
Y = 糞長い式
if (Y) {
X = Y
}
76:デフォルトの名無しさん
24/01/05 09:52:24.63 UVxCqy8T0.net
2回評価したくないときもあるし>>75
URLﾘﾝｸ(docs.python.org)
そこまで糞長くないならセイウチ演算子
77:デフォルトの名無しさん
24/01/05 11:11:29.09 j+cl8so10.net
X = 糞長い式 || X;
わかりやすい>>75でいいと思うわ
78:デフォルトの名無しさん (ﾜｯﾁｮｲ efbb-bJ3A [240f:108:3018:1:*])
24/01/05 18:15:32.86 xFVV62H30.net
カルノー図やクワイン・マクラスキー法で書けないほど複雑だと
どうにもならない
if else if else にうまく展開するか
switch 文をうまく使うとかかなあ
79:デフォルトの名無しさん (ﾜｯﾁｮｲ fd9f-stEI [122.133.203.183])
24/01/08 08:24:08.50 HV7sMHf30.net
質問させていただきます。
タグの属性onclick等で設定したイベント処理では
処理側の関数ではeventオブジェクトを参照出来ないのでしょうか？
色々探してるのですが見つけられなくて・・・よろしくお願い致します。
80:デフォルトの名無しさん
24/01/08 10:20:56.34 FNFcnj+v0.net
>>79
onclick属性のイコールの右側にある値は無名関数をそのままラップしたもので、eventオブジェクトはその関数の第一引数に渡される
つまり<タグ onclick="func(arguments[0]);">とすれば取得できる
81:デフォルトの名無しさん (ﾜｯﾁｮｲ 8d43-iBaE [114.148.50.247])
24/01/08 10:51:13.68 adS5ZNXz0.net
>>79
引数で渡されてくるけど？
HTMLのタグの中に書く事例では意味も解らずその引数を省略しているのが多い
それより、今どきはHTMLと分離した、こっちの書き方がおすすめ
URLﾘﾝｸ(developer.mozilla.org)
82:デフォルトの名無しさん
24/01/08 13:07:07.19 cXOMuDOl0.net
>>79
onclick属性値の中でもeventは使える。
<p onclick="console.log(event);">
ところで、「処理側の関数」とは？
83:デフォルトの名無しさん
24/01/08 13:58:47.00 pIW6TUAd0.net
ブラウザの開発者ツールにあるデバッガをつかえば気づける
止めたところの環境が丸見えになるから
84:デフォルトの名無しさん (ﾜｯﾁｮｲ fd2e-dvWY [2001:268:9a3d:8302:*])
24/01/08 20:55:54.87 gJaMg8aw0.net
例えば、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 );
}
} )
} );
85:デフォルトの名無しさん (ﾜｯﾁｮｲ 434b-NOlf [240b:12:6820:b000:*])
24/01/08 21:08:17.54 Jg6SbkUr0.net
<button onclick="hoge(this)">ってやると意図しない動きすることあるからルールで禁止してるところもあるよね
86:デフォルトの名無しさん
24/01/11 09:49:12.76 L0eqWFW50.net
子要素は含まないように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");}
);
</スクリプト>
87:デフォルトの名無しさん (ﾜｯﾁｮｲ b536-QPx5 [2400:4052:5062:9ff0:*])
24/01/11 10:30:37.07 8+5yXztZ0.net
何をやりたいのかがわからない説明
とりあえずプログラムを意識せずに
やりたいことの要件を日本語でよろしく
88:デフォルトの名無しさん (ﾜｯﾁｮｲ 2319-dvWY [2001:268:c0d0:700e:*])
24/01/11 10:35:49.26 oja63d6W0.net
function(e){
// input要素以外をクリックした場合の処理
if (e.target.tagName !== 'INPUT') {
alert("www");
}
}
89:デフォルトの名無しさん (ﾜｯﾁｮｲ 0510-zseD [180.12.82.129])
24/01/11 13:03:40.31 L0eqWFW50.net
>>87
子要素を除外したelementを取得したいってことっす
>>88
ありがとうございます試してみます
90:デフォルトの名無しさん
24/01/11 14:18:15.97 8+5yXztZ0.net
それ、バブリングを意識しないとダメかもよ
91:デフォルトの名無しさん
24/01/11 14:44:36.31 bfPtSoSL0.net
先ほどは手元にソースコードがなかったので即席で質問してしまいました。
やりたいことはテーブル部分でタッチムーブしたときブラウザのスクロールを禁止にしたいのですが、
テーブルにあるスライダーまでロックされて動かせないようになってしまうので、
スライダーを除外したテーブル部分の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(); //ブラウザのスクロールを禁止にする
}
);
</スクリプト>
92:デフォルトの名無しさん
24/01/11 15:08:55.09 k0wEY4GK0.net
よく分からんが、cssでそんなのがあるな
URLﾘﾝｸ(developer.mozilla.org)
93:デフォルトの名無しさん
24/01/11 16:34:13.87 tWeEPqJO0.net
>>91
preventDefault()をstopPropagation()に変えるだけでいいかもしれない
この場合は多分preventDefault()はいらない
94:デフォルトの名無しさん
24/01/11 22:20:25.19 vnpK4WpS0.net
clickやmousedownに仕込む話したど思ったのでバブリングを指摘したけれど
スマホの場合にスライダー操作でスクロールしちゃうのを止めたい場合の話なら別問題
スクロールはブラウザ側の仕組みでDOMのイベントバブリングを止めてもダメ
それとターブルじゃなくて、スライダーをtouchmoveしたときにスクロールを止めたいのじゃないですか
要件としては
スライダーのtouchstartでブラウザのスクロール機能を無効にして
スライダーのtouchendでブラウザのスクロール機能を有効に戻す
スクロールの有効・無効は、スクロール要素のcssのスタイルで制御できるので、JavaScriptでstyle要素のoverflowYまたはoverflowXを'hidden'または'auto'と値を切り替える
95:デフォルトの名無しさん
24/01/11 22:41:54.15 bfPtSoSL0.net
>>93
ありがとうございます。
スライダーのelementにe.stopPropagation()をしたらスライダーを動かせるようになりました
>>94
ありがとうございます。試してみます。
96:デフォルトの名無しさん
24/01/13 03:22:15.94 bBKen2/T0.net
すいません、vueの質問はここでいいですか？
97:デフォルトの名無しさん
24/01/13 11:42:05.46 sUiBS1y50.net
↓あたりにどうぞ
JavaScriptフロントエンド総合 Part.11
ｽﾚﾘﾝｸ(tech板)
Vue vs React vs Angular vs Svelte Part.11
ｽﾚﾘﾝｸ(tech板)
98:デフォルトの名無しさん (ﾜｯﾁｮｲ ad01-1c9G [126.168.252.135])
24/01/14 17:21:53.60 vAN1c9wS0.net
ありがとうございます
99:デフォルトの名無しさん
24/01/26 17:25:13.36 2+81uqBd0.net
WebフロントエンドでのJavaScriptを勉強中です
「jQueryでできることは素のJSでもできるのがほとんどになったから、jQuery不要」という話しが出てきますが、
エレメントの操作などで、素のJSだと記述する文字が長く、jQueryだとすごく短く書けるので、それだけでも十分便利と感じています。
document.querySelector('selector')
⇒ $('selector')
jQuery不要の場合、効率良く書くために代わりに何を使っているのか気になります。
大型のフレームワークとかでしょうか？フレームワーク使うと、ここのエレメントの参照・操作などはもはや不要になるのでしょうか？
100:デフォルトの名無しさん
24/01/26 19:57:32.14 vs+8Yc4d0.net
jQueryの技術覚えてもjQueryにしか使えない。素のJS技術はどんなフレームワーク使っても役に立つ
101:デフォルトの名無しさん
24/01/26 20:11:15.77 Uafucq2BM.net
>>99
コード補完機能（任意のスニペット呼び出しを含む）のある現代のエディタではその全てをキータイプする必要は無いし、どうしても短く書きたいならショートハンドを定義すればいい
たとえば、5ch互換掲示板ビューアであるブラウザ拡張機能「read.crx 2」では、同拡張機能の共同メンテナの方が作成したjQueryライク（互換ではない）なショートハンドライブラリ「shortQuery.js」が使われてる（だいぶ前にいわゆる「脱jQuery」のお供として導入されたハズ）
なんにせよ、初心者が今からjQueryを学ぶのは悪手
102:デフォルトの名無しさん
24/01/26 20:12:23.71 Z5KyuX5d0.net
素のjs分からずにjquery使えるわけないだろ
103:デフォルトの名無しさん (ﾜｯﾁｮｲ 433e-K/rq [2400:2200:7d4:c4d1:*])
24/01/26 21:41:55.02 bxMKu9aD0.net
>>99
その通り
ReactやVueに代表されるような昨今のフレームワークは開発者がDOMを直接操作しない
104:デフォルトの名無しさん (ﾌﾞｰｲﾓ MM43-kvtp [49.239.68.29])
24/01/26 21:48:25.16 KJ09lp1IM.net
そう思ってるとこんなん当然知ってますよねみたいなノリでevent処理とかrefとか出て詰むゾ
105:デフォルトの名無しさん
24/01/28 11:39:44.53 WhNL7KNN0.net
>>99
jQueryの現在はHPフロントエンジニアさんが
抱負なライブラリでHPに花をそえるために使っているだけ
ウェブアプリ屋さんはjQueryが邪魔くさい時があるので使わない
どの分野を目指すのかが決まっているなら
その分野で何が主流なのかを見極めたほうがいい
106:デフォルトの名無しさん
24/01/28 19:30:17.30 1z8oB9tQ0.net
動的に作られる特定の要素にだけイベント追加するのがラク
jQueryがバニラJSに勝ってる唯一の点だけど、そういう処理を入れるくらいDOMの操作使ったアプリ作るなら他のフレームワークのほうが良いだろう
107:デフォルトの名無しさん
24/01/28 20:16:55.07 9hZosd/l0.net
ゆうて古から続くjqueryの資産はいたる所にあるから、読めることくらいは出来ないとな
難しいもんではないんだし
108:デフォルトの名無しさん
24/01/28 23:52:21.72 Plt7vTfv0.net
>>106
バニラでも祖先ノードでmatches(selectors)を使えば対応可能なので、それほどjQueryに優位性はない気がする。
それから、jQueryはバブリングフェースのみ対応という弱点がある。
バブリングしないイベントタイプに関してはaddEventListener()に優位性がある。
109:デフォルトの名無しさん
24/01/29 01:34:06.63 fIBxeYXl0.net
他から持ってきたコードが指すjQueryが最近のじゃなくて
だれが互換性担保するのってのが一番困る
jQueryを直接つかう分には検証できるけど
依存しているライブラリは採用せんでほしい
110:デフォルトの名無しさん (ﾜｯﾁｮｲ f95a-w/9U [2400:4052:5062:9ff0:*])
24/01/30 09:12:09.86 GdANFjKZ0.net
jQuery使いの人は行き当たりばったりな人が多い
jQueryライブラリファイルの読み込みが沢山あってなんじゃこりゃみたいな
111:デフォルトの名無しさん
24/01/30 11:06:06.79 kUs11O+K0.net
jQueryが出た頃はSelectors APIもなかったからな
行き当たりばったりというより昔の標準APIが貧弱でライブラリに頼るしかなかった
112:デフォルトの名無しさん (ﾜｯﾁｮｲ 99d1-NbCu [2001:268:9a89:2571:*])
24/01/31 00:18:29.61 Z4CJtIhd0.net
jQuery は短く書けるので、ちょっとしたデモには良い。
でも、React, Vue.js では使わない
Bootstrap も、5 からは使わない。
popper.js に変わった
113:デフォルトの名無しさん
24/01/31 08:00:03.26 8Xe2gISY0.net
>>110
しかもバージョンがところどころ違ったり読込先や仕方が違ったりする
114:デフォルトの名無しさん
24/02/03 01:34:02.49 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])
24/02/03 06:58:45.76 hL2W++6M0.net
変数更新してるだけに見えて、別処理が勝手に動くというのも実はアレだけどな
今はリアクティブが流行してるからそこにケチつける風潮ないけれど
116:デフォルトの名無しさん (ﾜｯﾁｮｲ 1901-fC/B [60.88.91.184])
24/02/03 10:15:49.25 HeN++Rh50.net
>>99 (ﾜｯﾁｮｲ 4d7c-MQtI [122.212.16.94])
これだけ回答をもらって無反応か
最近の質問者はこういう人が多いな
117:デフォルトの名無しさん (ｱｳｱｳｴｰ Sae3-P9+J [111.239.175.167])
24/02/03 10:49:13.33 YZYv2rY+a.net
反応欲しいなら知恵袋にしとけって
118:デフォルトの名無しさん
24/02/04 02:28:25.82 ipvGCo7I0.net
JavaScriptで作れるプログラムって、webブラウザ以外になにかありますか？
全然ユーザーがいないのはダメだけど
ある程度需要がありそうな用途
119:デフォルトの名無しさん
24/02/04 03:05:45.75 w9OYnB1OM.net
>>118
WebブラウザとWebページを区別できるようになろう
120:デフォルトの名無しさん
24/02/04 05:18:25.36 7DDGpERD0.net
でもまあwebブラウザが全てではあるよね
他に出番無いし
121:デフォルトの名無しさん
24/02/04 07:00:09.01 wRU34d220.net
今はNode.jsでサーバ側もJSってこともある
122:デフォルトの名無しさん (ﾜｯﾁｮｲ bd43-tydm [114.148.57.9])
24/02/04 10:50:30.37 Vls4Se8V0.net
そうだね
node.jsでJavaScriptはサーバサイドだけじゃくてデスクトップアプリでも使われている
代表格はVScode(node.js+Electron)がある
Webpackもnode.jsだし
身近なところでは汎用掲示板ビューアSikiがnode.js+ElectronでJavaScriptだね
123:デフォルトの名無しさん (ﾜｯﾁｮｲ 85a1-aUy2 [240b:12:203:6300:* [上級国民]])
24/02/04 12:44:47.52 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:*])
24/02/04 12:55:11.06 m4gIKl+m0.net
Rustで書いたJSトランスパイラは速いけどRust自体のコンパイルは遅い
125:デフォルトの名無しさん
24/02/04 23:16:57.06 /yrx0E0+0.net
あることをローカルマシンでやりたくて、Python入ってっから、それでやろうとしたらできなくて（いや正確にはすごく遅い）Node.jsになってしまった。何かは言わない。
126:デフォルトの名無しさん
24/02/05 09:44:15.86 Q9Y3g4UN0.net
node.jsの良さはJavaScriptでプログラミングできる事
Electron使えばUIもHTMLで書けるので便利
なれたらJavaScriptでデスクトップアプリを書くのが楽しくなった
127:デフォルトの名無しさん (ﾜｯﾁｮｲ abcf-aUy2 [2001:240:242f:19bc:* [上級国民]])
24/02/05 15:57:34.49 thNH7tNN0.net
>>126
Electronはファイルがデカいから
俺が何か作る時はCLI一択だわ
対話的な物作る時は
Tauriで作ってみたいなぁと思う
128:デフォルトの名無しさん
24/02/05 18:19:30.64 1m9RfVzn0.net
>>118
Visual Studio Codeがjavascriptで作られている
129:デフォルトの名無しさん
24/02/05 19:17:51.68 +Fh+RIwSa.net
vscodeが糞な理由が分かった気がした
130:デフォルトの名無しさん (ﾜｯﾁｮｲ 436c-OKLl [240b:12:6820:b000:*])
24/02/06 07:31:11.51 JsprpZ5q0.net
ElectronとAngularで作られてるシステム見させてもらったんだけど、reactに書き換えるって言ってたな
ならnativeでよくね？
131:デフォルトの名無しさん
24/02/06 14:51:45.98 nsw90RpoM.net
reactとreact nativeって書き換えが必要なの？
ゴミかな？
132:デフォルトの名無しさん
24/02/06 15:07:15.20 4bvVpi0E0.net
>>0127
TauriはWebViewなので
Electronの様にWebRequestを簡単に操れない
Rustに拘らないのなら
使い慣れた開発言語でWebViewを組み込んだ方が手っ取り早い
133:デフォルトの名無しさん
24/02/07 01:01:55.81 8Eizk2eA0.net
YouTube 動画で見たけど、
北米では、Flutter よりも、React Native が多いらしい
134:デフォルトの名無しさん
24/02/07 10:23:32.40 Q0zrTHJg0.net
JavaScriptで書ける環境の話から
かなり脱線気味
135:デフォルトの名無しさん (ﾜｯﾁｮｲ 3743-5kwM [60.32.26.124])
24/02/11 13:06:38.03 4EmF6N4v0.net
業務がWebアプリなのは危険だと言い出した管理職がいて
Electronでチャチャとデスクトップソフト風にしたら
仕事が早いとお褒めいただいたw
何も変わっちゃいなんだけれどそれはナイショ
136:デフォルトの名無しさん
24/02/11 14:27:08.42 cAyMWgFh0.net
危険だという懸念が素人の無理解から来てるだけなのか妥当な懸念なのか分からないから何とも言えんな
前者なら悪くない回避策
137:デフォルトの名無しさん
24/02/11 21:47:35.74 VNWSIW9O0.net
ブラウザのアドインに情報吸われる危険性は下がるね
138:デフォルトの名無しさん (ﾜｯﾁｮｲ 2279-8TQs [61.192.207.171])
24/02/11 23:27:36.16 Z05z2D4x0.net
まあ一般的に考えて危険やな
その認識は正しいさすが管理職
139:デフォルトの名無しさん
24/02/12 12:55:25.07 3q7oTZTX0.net
管理職が正しい
どんなに堅牢なシステムでも狙われたら終わり
だから今はクラウドじゃなくてオンプレ回帰してる
140:デフォルトの名無しさん
24/02/12 15:27:53.80 2z81MgsB0.net
もうネット使うなよ
141:デフォルトの名無しさん
24/02/12 15:53:51.52 BAGnA5Sa0.net
Access でいいよ
142:デフォルトの名無しさん
24/02/17 10:17:04.46 eAolMzZEd.net
VBAとC#でちょくちょくアプリ作ってる程度のもんなんですけど
最近VS Code使ってjavascriptの勉強始めたわけですよ
デフォルトの環境で扱ってる限り、typoの指摘が甘くて気づくのに時間かかってしまってつらいです
Visual StudioでC#つかってるとかなり丁寧に指摘してくれるんで助かるんですが
Codeはその辺厳しいですね
Code Spell Checkerを入れてみたんですけど、よさそうな対策は他にありますか？
143:デフォルトの名無しさん
24/02/17 10:48:07.30 Hugfzc2R0.net
JSはデフォだとどんなパラメータも持ちうるのでtypoを機械的に見つけにくい言語。
なのでjsdocゴリゴリ書く（もっとやるなら@ts-checkも）かTypeScript使うと良いよ
144:デフォルトの名無しさん (ｽｯﾌﾟﾌﾟ Sd42-hHXc [49.105.71.123])
24/02/17 14:57:51.18 eAolMzZEd.net
>>143
ありがとうございます
TypeScriptも視野にいれてちょい調べてみます
145:デフォルトの名無しさん (ﾜｯﾁｮｲ f7d7-bM9J [240b:12:203:6300:* [上級国民]])
24/02/17 15:05:36.03 MLAS2UwQ0.net
>>142
VSと比較するならWebStormじゃなきゃ辛いし
VSCodeのままでもLSPなりで魔改造すれば頑張れるやろ
146:デフォルトの名無しさん
24/02/17 17:54:57.60 3rmfz0Aa0.net
>>142の言うtypoが具体的にどんなのか気になる
厳しいのはCodeじゃなくてJavaScriptなのを誤解してそう
147:デフォルトの名無しさん
24/02/17 18:56:27.31 snWQTW2N0.net
JSもDataflow Proposalsが導入されたら
普通に使い続けるんだがなぁ
148:デフォルトの名無しさん
24/02/19 18:24:10.88 waVDHmuE0.net
マウスボタンを押しながらマウスを移動させてからマウスボタンを離すと
マウスボタンを離したときにmouseupだけでなくmousemoveも反応してしまうんだけど仕様ですか？
これ知らなくて動作が思うように行かなかった。
149:デフォルトの名無しさん (ﾜｯﾁｮｲ ef5b-WqLa [2400:2200:6b5:cb6f:*])
24/02/20 00:12:35.13 n1uvc9Mt0.net
手元で試したところmouseup直後に同じ座標でmousemoveが発火してるのを確認
うまく判定して後続処理が走らないようにすれば良さそうではある
150:デフォルトの名無しさん
24/02/20 12:26:48.30 jaWYglX60.net
>>149
ありがとうございます
そうしてみます
151:デフォルトの名無しさん
24/02/20 12:38:34.44 SYHvuSDa0.net
>>148
mouseoverはマウスが何かの要素の上を移動すれば毎回出てくるから
マウスを持ってる限り常に垂れ流し続けるぞ
ドラッグアンドドロップを実装したいなら
イベント(関数発火)が非同期かつ大量に垂れ流しになること前提で組む必要がある
一案としては上のスコープで何個か変数を定義
mousedown -> 直下の要素を掴んでhold変数に放り込む
mousemove -> hold変数に値が入ってないなら即return、座標変数に座標情報を格納
mouseup -> 精算、hold変数と座標変数をnullにする
152:よろしくお願いいたします
24/02/28 10:59:38.09 j/HFCr6sd.net
はじめて、質問させていただきます。
今やってることはリストボックスの行を以下で選択しています。
document.getElementById('xxxx').selectedIndex = n;
PC版ブラウザではうまくいきました。しかし、モバイル版ブラウザでは1行のドロップダウンリストになってしまいます。
URLﾘﾝｸ(ja.stackoverflow.com)
それで、以下のjqueryの $("select").fixForSafariMobile(true); を使ったところ、表示はドロップダウンリストからリストボックスになりましたが、上のselectedIndexが動作しなくなりました。
URLﾘﾝｸ(github.com)
URLﾘﾝｸ(github.com)
153:よろしくお願いいたします
24/02/28 11:00:05.73 j/HFCr6sd.net
はじめて、質問させていただきます。
今やってることはリストボックスの行を以下で選択しています。
document.getElementById('xxxx').selectedIndex = n;
PC版ブラウザではうまくいきました。しかし、モバイル版ブラウザでは1行のドロップダウンリストになってしまいます。
URLﾘﾝｸ(ja.stackoverflow.com)
それで、以下のjqueryの $("select").fixForSafariMobile(true); を使ったところ、表示はドロップダウンリストからリストボックスになりましたが、上のselectedIndexが動作しなくなりました。
URLﾘﾝｸ(github.com)
URLﾘﾝｸ(github.com)
154:デフォルトの名無しさん
24/02/28 11:09:45.91 74XehS+p0.net
はじめて、質問させていただきます。
今やってることはリストボックスの行を以下で選択しています。
document.getElementById('xxxx').selectedIndex = n;
PC版ブラウザではうまくいきました。しかし、モバイル版ブラウザでは1行のドロップダウンリストになってしまいます。
URLﾘﾝｸ(ja.stackoverflow.com)
それで、以下のjqueryの $("select").fixForSafariMobile(true); を使ったところ、表示はドロップダウンリストからリストボックスになりましたが、上のselectedIndexが動作しなくなりました。
URLﾘﾝｸ(github.com)
URLﾘﾝｸ(github.com)
155:デフォルトの名無しさん
24/02/28 11:10:03.68 74XehS+p0.net
はじめて、質問させていただきます。
今やってることはリストボックスの行を以下で選択しています。
document.getElementById('xxxx').selectedIndex = n;
PC版ブラウザではうまくいきました。しかし、モバイル版ブラウザでは1行のドロップダウンリストになってしまいます。
URLﾘﾝｸ(ja.stackoverflow.com)
それで、以下のjqueryの $("select").fixForSafariMobile(true); を使ったところ、表示はドロップダウンリストからリストボックスになりましたが、上のselectedIndexが動作しなくなりました。
URLﾘﾝｸ(github.com)
URLﾘﾝｸ(github.com)
156:デフォルトの名無しさん
24/02/28 11:34:49.79 j/HFCr6sd.net
すみません。5個書き込まれてしまいました。すみません。
157:デフォルトの名無しさん
24/02/28 12:19:36.32 bgJbuEEB0.net
>>152
そもそもjQueryは時代遅れだから
ReactなりVue.jsなりのJSフレームワーク覚えて移行しろ
理由は>>114
誰が作ったか分からん動くかも全く保証されてないし、10年前からもうメンテすらされてない
fixForSafariMobileなんてプラグインなんて持ち出してきて
意図通りに動きませんとか動くわけないし、アドバイス出来る訳ない
プラグインの作者は神様でも何でもない
俺らとそう変わらない腕前の奴が少しの善意と承認欲求で作ったコード片でしかない
どうしてもjQuery+プラグインでやりたいならその作者のsylvain-hamelさんにでも聞くか
GitHubで公開されてるコードを全て読んでちゃんと理解して手直ししなよ
158:質問者 (ｽｯﾌﾟ Sdfa-RtHD [1.72.9.18])
24/02/28 18:05:41.24 j/HFCr6sd.net
レスありがとうございます。昔からあるjsやjQueryは今は時代遅れなんですね。
ただ、今回は15年動いているものの改修作業なんです。
fixForSafariMobileはjQueryソースからselectboxからlistに変換するということはわかりました。
$("selectTarget").selectValue(ul, val)で、できそうだと思ったのですが、ulで何を渡すかまでは来ました。
valからulを検索して取得してからこれなんですかね？
159:デフォルトの名無しさん (ﾜｯﾁｮｲ 13d2-fCbz [240b:12:203:6300:*])
24/02/29 00:27:46.28 XLzCkQ6P0.net
>>158
なるほどなぁ、なら何とかツギハギで頑張ってパッチするわけか
んで、.selectValueで出来そうだと思いました！って言われても
そんなメソッドjQueryには無いぞ
URLﾘﾝｸ(api.jquery.com)
何らかのライブラリなりで
jQueryのメソッドを拡張・追加すれば実現出来るが
それを何の前提知識も無く「どうやって使えば良いですか？」と言われても何もアドバイス出来んぞ
jQueryはもう相当うろ覚えだが
.valメソッドとかを使うんじゃなかったか？
セレクトボックスは動きが特殊だから.valで動かんかったら他のメソッド探してみろ
jQueryの公式ドキュメントを読め
JavaScriptの話ならMDNをちゃんと読め
そうとしか言えんわ頑張れ
160:質問者
24/03/01 23:06:30.38 Id25sy0k0.net
いろいろとありがとうございます。
161:質問者
24/03/01 23:23:12.37 Id25sy0k0.net
やりたいこと
・プログラムのデバッガみたいなステップ実行ができるWEBで作成されたものを改修。
・スクロールしていくので、複数行リストボックスで現在行を選択表示して、実現。PC版では動く。
・しかし、モバイル版では、html形式の複数行リストボックスは１行のドロップダウンリストBOXになってしまう。
どうもこれは、モバイルの仕様なようで、実現するのは不可能ぽい。
過去にある人がjqueryで、モバイルで複数行リストボックスみたいな事は実現しているが、これはあくまでも表示のみで選択は不可。
・複数行リストボックスをリスト型で実現している。なので、Val()でも、スクロールして、選択表示できない。
ほかの方法で考えた方が良いですかね？ただ、改修なので、別のフレームワークに変えるのは無理ですね。
162:デフォルトの名無しさん (ﾜｯﾁｮｲ 47f6-WOak [2400:2200:714:c52d:*])
24/03/02 00:10:12.99 Rcnd56Cm0.net
sizeが指定されているSELECTタグのdisplayをnoneにして消す
代わりに自分でsize分だけのリストなりボタンなりを追加する
これをjsでモバイル表示のときだけ実現すりゃいいんじゃない
163:質問者
24/03/02 11:13:20.78 TgRbMsKE0.net
>代わりに自分でsize分だけのリストなりボタンなりを追加する
>これをjsでモバイル表示のときだけ実現すりゃいいんじゃない
レスありがとうございます。
データが100行あります。
今、複数行選択リストボックス(select size=25)では、25行表示できるエリアがあって、75行が隠れています。
99行目のListをスクリプトで選択（人間は選択しません。見てるだけです。）したら、自動的にそこまでスクロールしてくれます。
リスト（ul,li）ではスクロールまでしてくれず、隠れてしまって、実現はできないと思うのですが...
164:質問者
24/03/02 11:46:08.42 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:デフォルトの名無しさん
24/03/02 12:45:11.55 Rcnd56Cm0.net
無理じゃない
jsでdom操作はいくらでもできる
ul liでoptionのような動作をするカスタムのリストボックスも作成可能でcssフレームワークではよくつかう手法
そういうカスタムのWebComponentを作るといいよ
selectから情報をひっぱってきて外観をul liでカスタムコンポーネントを作り、liのクリックイベントリスナーでselect要素のselectedIndexを変更すればいい
select要素はモバイル環境ではdisplayをnoneにする
166:デフォルトの名無しさん
24/03/02 12:47:42.36 Rcnd56Cm0.net
再利用しないのならWebComponent書くまでもなくそのままjsで書けばいい
167:デフォルトの名無しさん
24/03/02 12:52:06.03 Ac/Ek54X0.net
>>164
CSSでul > liの見栄えを調整しろ
・メディアクエリの画面横幅で適応されるCSSを切り分ける
・heightをliの25行分の高さに指定
・overflow: scrollを付けてul内でスクロール出来るようにする
CSSを見栄えを整える能力は
Webで食ってく行くならこの先ずっと使うから覚えろ
CSS2の頃はまだ「技術的にも無理です！」ってケース多かったが
CSS3までフル動員させたら「それお前が無知なだけ」ってケースばかりだぞ
168:デフォルトの名無しさん
24/03/02 13:00:31.15 Rcnd56Cm0.net
仕事で受けてるのならこのくらいできないとヤバいぞ
カスタムコンポーネントにすれば
customListBox.size = 25
customListBox.selectIndex = 99
みたいに設定できるようにメソッド追加すると便利
169:デフォルトの名無しさん (ﾜｯﾁｮｲ 8f43-04EL [114.166.8.189])
24/03/02 14:29:55.91 83dahe0E0.net
無理にiOSでも同じUIにする必要ないのと違う
ぐるぐる回るドラム式がiOSのSafari流でかっこいいじゃんと褒め殺せば
林檎ユーザー特有の優越感をくすぐりOKもらえる気がする
170:デフォルトの名無しさん (ﾜｯﾁｮｲ ba40-aDj+ [2400:2200:770:d15b:*])
24/03/02 15:39:45.46 Ozqjn7Yu0.net
>>164
細かい要件が分からないけどただそれっぽく表示するだけならこんなのでいいんじゃないの？
jsfiddle.net/sj3xkrad/1/
171:質問者 (ﾜｯﾁｮｲ 572e-lvv7 [118.86.90.123])
24/03/03 22:00:44.67 719to9SO0.net
皆さんレスありがとうございます。今日休みで明日から参考にさせていただきます
172:デフォルトの名無しさん (ﾜｯﾁｮｲ 9724-lvv7 [2001:268:9a3d:bf34:*])
24/03/04 10:08:20.56 ORhetY7X0.net
Bootstrap, Tailwind, Bulma などに、
使えそうなコンポーネントは無いの？
173:デフォルトの名無しさん
24/03/05 18:22:59.72 dRdKhnsT0.net
質問で、
chrome.tabs.query({}, function(tabs) {
で全タブを取得した各タブに関して、
そのタブのwindowType（appとかnormalなど）って取得できますか？
174:デフォルトの名無しさん
24/03/05 18:47:33.98 qENbjC0BM.net
>>173
個別のtab.windowIdから引けるハズ
もっとも、はじめからwindow.getAll()を使った方がいいとは思うが
175:デフォルトの名無しさん (ﾜｯﾁｮｲ 9f02-ZLJX [27.91.124.53])
24/03/06 10:35:08.32 c6agTDKp0.net
>>174
お、できた！
ありがとう！
ネットでtabs.WindowTypeってのが載ってたので、それで惑わされてた…
176:デフォルトの名無しさん (ﾜｯﾁｮｲ 9f02-ZLJX [27.91.124.53])
24/03/06 10:42:44.31 c6agTDKp0.net
>>174
取得した各tabに対して取得したかったので、
chrome.windows.get()を使いました。
177:デフォルトの名無しさん
24/03/29 14:50:19.65 yy1PP2Jg0.net
非同期処理を同期処理から呼び出すラップ関数を作りたいのですが方法がわかりません
AIに聞いたら次のコードが返ってきましたが、当然awaitが使えないので失敗します
-------------------------------
//非asyncな呼び出し元から、asyncメソッドを呼び出し、結果が帰るまで待って返却する
function FromSyncToAsync() {
const result = await [値を返すだけの非同期な関数]();
return result
}
-------------------------------
調べても呼び出し元をasyncにする方法しかみつかりません…
178:デフォルトの名無しさん
24/03/29 15:40:17.46 yy1PP2Jg0.net
これはエラーはおきないけど失敗。戻り値がpendingになりました
-------------------------------
function SyncToCallAsync(){
return getWasmFileLastModified().then((result) => {
// 結果を返却
return result;
});
}
-------------------------------
179:デフォルトの名無しさん (ﾜｯﾁｮｲ 5f85-qPgS [240b:12:203:6300:* [上級国民]])
24/03/29 16:32:26.02 utPNPoKt0.net
>>177
残念ながら不可能
一度非同期の世界に入ると
同期処理の世界には戻って来られないぞ
・非同期処理から値を受け取る箇所はPromise値を返す関数にする
・前処理や後処理を含めて色々やってくれる関数をasync関数で定義する
・極力此処の関数やクラスメソッドは小さくして、関係ない値を持たせない事で全てをasync関数にする事を防ぐ
JavaScriptという言語がイベント駆動やイベントループ前提で作られてる以上
こういう作りを維持し続けるしかない
まぁ、ロジックを司るデカい所は基本async関数だよ
作り直す許可を上長や顧客からもぎ取るのが仕事やね
そういう交渉が出来ないなら細かくPromise.thenで作業していくしかない
180:デフォルトの名無しさん (ﾜｯﾁｮｲ 5fad-VtrB [124.141.209.120])
24/03/29 16:55:52.54 yy1PP2Jg0.net
ありがとうございます。いくつかのAIに聞いても堂々と回答実現不能なコードばかり返してくるので困っていました。できないとわかったほうが先に進めます
181:デフォルトの名無しさん (ﾜｯﾁｮｲ df68-csuD [2400:2200:454:574d:*])
24/03/29 17:39:27.22 D+b6Pa3z0.net
現時点ではAIは不可能なことを不可能と答えないケースが多い
信用しすぎないように
182:デフォルトの名無しさん
24/04/05 21:57:54.50 otPTbv2G0.net
test
183:デフォルトの名無しさん
24/04/05 21:58:17.84 J45N4zHg0.net
test
184:デフォルトの名無しさん
24/04/13 22:59:37.70 3VlMmSMB0.net
すいません、Reactの質問ってここでいいですか？
185:デフォルトの名無しさん
24/04/13 23:23:14.15 i7geu5sV0.net
まずスレ一覧をReactで検索するぐらいしてみたら？
186:デフォルトの名無しさん
24/04/20 13:04:04.45 /vy8T+9K0.net
昔、私が大学でプログラミングを習ったとき（C言語でした）には円周率など特別な値については定数にしろと言われはしましたが、その他の変数については定数にしろとは言われませんでした。
Javascriptの本を今読んでいるのですが、再代入を行わない場合にはすべて「let」ではなく「const」を使えと書いてあります。
このようなことが言われるようになったのはいつ頃からでしょうか？
私がそう習わなかっただけで、昔から言われていたことでしょうか？
187:デフォルトの名無しさん
24/04/20 14:12:14.37 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:デフォルトの名無しさん
24/04/20 14:22:49.70 7dIwEOD00.net
constは直訳すれば定数だが
JSのconstは再代入しちゃいけませんよってだけで
基本は普通の変数として取り扱う
配列やオブジェクト、関数、インスタンスなんかもconstで宣言出来るね
他言語のletみたいなものと考えると良い
constで宣言したオブジェクトや配列は再代入禁止なだけで、中身は普通に加工出来てしまうのも作りとして良くない
const arr = [1, 2, 3];
arr.push(4);
console.log(arr);
// [1, 2, 3, 4]
この辺は勝手に加工しないよう運用でカバーやね
値は基本的に複製しまくってガベージコレクションで掃除してもらう
パフォーマンスチューニングで仕方なく一つの値を加工しまくる時はライブラリ化したり関数で固めたりして、メインロジックの邪魔にならないようにすること
189:デフォルトの名無しさん
24/04/20 14:53:24.59 /vy8T+9K0.net
>>187-188
ありがとうございました。
190:デフォルトの名無しさん
24/04/20 21:40:49.05 KOUUOZ8l0.net
すみません。
以前からJSフレーム・ワークについて
疑問を持っていたのですが
フレーム・ワークを使う人は、
1. JavaScriptに精通しているので
中規模程度のサイトなら
素のJavaScriptと_lodash等だけでも組めるが
効率が悪いのでフレーム・ワークを
その内部構造をも理解して使っている。
2. JavaScriptの基本的な仕組みと
DOM操作の基本は理解しているが
素のJavaScriptではサイトを作れないので
フレーム・ワークの仕様仕組みを理解して使っている。
の2種類に大別できると思うのですが
結局ブラウザは素のJavaScriptで動いているだけなので
「1」の技能習得に向かわざるを得ないと思うのですが
いかがでしょうか。
191:デフォルトの名無しさん (ﾜｯﾁｮｲ 6b55-Olxi [2400:2200:6b3:858d:*])
24/04/20 22:07:39.36 xlVv2mR90.net
どこから突っ込んでいいのかわからなくて答えようがない
192:デフォルトの名無しさん (ﾜｯﾁｮｲ d1f1-4mIM [240b:12:203:6300:* [上級国民]])
24/04/20 22:27:55.19 7dIwEOD00.net
>>190
lodashは関数型プログラミング的な値の加工を司るフレームワークだぞ
一部だけ利用させて頂いて関数片の集合体ライブラリとして使うことも出来るがな
フレームワークは機能を提供するライブラリであると共に
大きなプロダクトを作っていく為のファイル・関数・モジュール置き場をルールで区切ってここに設置してくださいねー
こういう司書さんみたいな役割も担ってる
複数人でプロダクトを触ったり
半年後にどれどれ？と帰ってきて読み直した時にナニコレ？にならない為に
プログラミングスキルの良し悪しに限らず
適切なフレームワークがあるなら使った方が良い
フレームワークを使わん機能を作る時でも
関数やファイルを作って保管するタイミングで「このフレームワークの考え方は好きだな、同じディレクトリ名を作ってそこに保管しよう」
自然とこういう発想が生まれる
なのでフレームワークを使い分けてる人間は引き出しが多くなっていき
可読性の良いプロダクトを作る能力も養われる
結局フレームワーク無しで適当に関数やファイルを作って放り投げるばかりで
読み辛いプロダクト作ってる奴なんて3流の雑魚だよ
193:デフォルトの名無しさん (ﾜｯﾁｮｲ d721-K5o/ [121.2.134.225])
24/04/21 00:20:10.62 R6fhRdj50.net
>>191 >>192
ありがとうございます。
ご教示参考にさせて頂き
精進いたします。
194:デフォルトの名無しさん
24/04/21 02:22:30.51 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 //=> エラー。再代入はできない！