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

2023/12/09(土) 17:41:59.25

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　https://plnkr.co/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

■次スレの立て方
本文一行目に「!extend:checked:vvvvvv:1000:512」と書いて、>>1-5のテンプレの「前スレ」「関連スレ」を最新化して立ててください。

■JavaScriptスレの現状
元々はWeb制作板が本スレでしたが、ライブラリ信者に荒らされ、プログラム板に避難所として本スレが立てられました。
Web制作板の本スレは荒らされてから次スレが立っておらず、重複スレの消化のみとなっています。
実質的に本スレは存在しない為、質問者はWeb制作板、ブログラム板のどちらのスレで質問しても問題ありません。

2023/12/09(土) 17:43:26.17

■関連スレ(Web制作板)
JavaScript の質問用スレッド vol.126 (重複スレの消化)
https://mevius.5ch.net/test/read.cgi/hp/1439005423/
JavaScript ライブラリ総合質問所 vol.5
https://mevius.5ch.net/test/read.cgi/hp/1465399470/
jQuery 質問用スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1466750494/

■各種仕様
◆ECMAScript
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
https://262.ecma-international.org/13.0/ (ECMAScript 2022)
◆HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/ (HTML Living
Standard)
https://momdo.github.io/html/ (HTML Living
Standard日本語訳)

2023/12/09(土) 17:45:14.13

テンプレここまで

内容は前スレ踏襲

2023/12/09(土) 17:55:10.18

テンプレの範囲ぐらい修正しとけばよかったかな

2023/12/10(日) 16:33:48.20

前スレで日付変換の関数で質問していた者です。

開発環境としましては、AndroidのmementoというDBを制御するために、Javascriptの使用が可能なので、試しに勉強してみようと思った次第です。

コードエディターや>>2記載のサイトでは正常動作をしていることから、開発環境に問題があると判断しました。ただそうなるとDBと合わせて使用できるメリットが無くなるので代替手段を模索しているところです。

成功例(日時が２つ表示)
https://i.imgur.com/qxdJGAV.jpg

失敗例
(consolelogに対応しないため、コメントアウトしていますが、関数が結果に出力される。何も表示されないはず。)
https://i.imgur.com/ldegoqM.jpg

コードエディター
https://play.google.com/store/apps/details?id=com.rhmsoft.code

memento
https://play.google.com/store/apps/details?id=com.luckydroid.droidbase

2023/12/10(日) 16:34:26.85

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)

2023/12/10(日) 16:34:43.88

// 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);
}

2023/12/10(日) 16:35:00.00

// DateをHH:MM文字列に変換する
function timeToHhmm(time){
let n = time.getHours().toString().padStart(2, "0") + ":";
n += time.getMinutes().toString().padStart(2, "0");
return(n);
}

2023/12/10(日) 16:35:52.81

申し訳有りません。
サービスでの稼働は確認出来たのですが、共有方法が分からないので、連投になってしまいましたが、直接描かせていただきました。

2023/12/10(日) 17:01:43.23

>>10
よくわからんけどそもそもその環境は関数定義して呼び出すとかできるの？
全体を関数として扱って最後の戻り値を文字列として解釈してるとかそういうノリではなく？

2023/12/10(日) 17:01:58.34

>>10
https://wiki.mementodatabase.com/index.php/JavaScript_field
>but only the result of the last operation will be entered into the field.
とあるから最後の文の値が結果値として採用される
だからtimeToHhmm関数自体が結果になっている

修正したければコードの最後に
const result = stDate + stTime + " " + edDate + edTime
などと追加すればその値が結果値として採用されるんではないだろうか

2023/12/10(日) 21:02:11.63

>>11,12
まさに仰るとおりでございました。
最後に出力文を置くことで正しく稼働を確認できました。
改めて調べようが足らなかったことを痛感しました。正直自分の中に『これ、なんかバグってるのかな…』などと考えてしまってた所もありましたが、単に仕様であったことに恥ずかしさとプラットフォーム開発者に申し訳ないですね。
wikiもしっかり読み込んで改めて勉強しなおしてみます。
本当にありがとうございます。
長々と失礼しました。

2023/12/15(金) 23:44:44.09

nullとundefinedはどう違うのでしょうか？

2023/12/16(土) 00:21:53.93

>>14
型も値も何もかも違う

14 (ﾜｯﾁｮｲ 4f1d-Qk2W [180.178.89.53]) · 2023/12/16(土) 12:33:00.76

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

単純に、nullは「空」、undefinedは「未定義」と理解しておけばいいでしょうか？
うーんでも、空だから未定義であるとも言えるし、未定義だから空とも言える気もします
難しく考え出すとハマりますね…

2023/12/16(土) 12:50:38.08

まず「空」とはなんぞや、「未定義」とはなんぞやってところから勉強してみたら？

14 (ﾜｯﾁｮｲ 4f1d-Qk2W [180.178.89.53]) · 2023/12/16(土) 13:09:24.81

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

自分なりに少し調べてみたら、
undefinedは「これから何かしらの値が入る余地があるがまだ定義されていない」
nullは「値が入りようがないから空」
という違いがあるみたいですね

2023/12/16(土) 13:43:31.64

意味的には別物だというのは納得できた？

14 (ﾜｯﾁｮｲ 4f1d-Qk2W [180.178.89.53]) · 2023/12/16(土) 16:34:04.63

>>19
はい、それなりに理解出来たと思います
ありがとうございます
JSでは、undefinedに比べるとnullの登場頻度はかなり低いみたいですね

2023/12/16(土) 19:13:30.08

設計ミスだから使い分ける必要はなく
外部とのやりとり以外にnullは使わないと統一した方が問題でにくいし楽

2023/12/18(月) 12:29:54.63

配列の宣言はvar list=[];
オブジェクトの宣言var obj={};
配列の配列の宣言は var list=[[]];
ではオブジェクトの配列の宣言はどうすればいいですか？
var obj={[]};のようにしてもできませんでした。
obj["aaa"][0]=100;
obj["bbb"][1]=200;
のように値を入れたいです。

2023/12/18(月) 12:38:38.33

配列のオブジェクトって言った方が正しいのかわからないけど
とにかく>>22のように代入したいんです

2023/12/18(月) 12:58:21.29

[[]] 配列を入れ子にしても1番目の要素を[]に初期化しているだけで
配列として使いたい場合に必要な手順ではない
仮に1番目を[1,2]、2番目を[3]にしたい時に操作が変わってしまうので邪魔なだけ
配列は空のまま [] で十分

あとconst/letじゃなくvarで書くスタイルは古い
参考にした情報があるなら忘れよう
更新もせずずっと放置しているなら害悪でしかない

2023/12/18(月) 13:13:46.30

let obj = {};
obj["aaa"] = [100];
obj["bbb"] = [undefined];
obj["bbb"][1] = [200];

2023/12/18(月) 13:15:33.46

obj["bbb"][1] = 200;

2023/12/18(月) 13:42:57.71

const obj = {
aaa: [100],
bbb: [, 200]
};

2023/12/18(月) 14:17:37.97

>>23
そこがあやふやだからどう宣言すればいいかも分からないんだと思う
君が宣言したいものは「配列をメンバーに持つオブジェクト」だよ

2023/12/18(月) 18:21:51.41

>>24-28
ありがとうございます

2023/12/18(月) 23:55:35.85

オブジェクトのkeyにelementを使うのは不具合になりますか？
const element = document.getElementById("test_id");
const element2 = document.getElementById("test2_id");
let obj ={};
obj[element] = 200;
obj[element2] = 300;というような感じです
一応動作はしたけどやらないほうがいいんですか？

2023/12/19(火) 00:19:13.16

>>30
本当に期待通りに動いてるかしっかり確認した？

2023/12/19(火) 00:31:33.88

const element = 何々
で、elementがオブジェクトなら、キーに使ってはならない。
primitive なら、キーに使える

この表記は、constがついていても、
そのオブジェクトの中身・内容は変えられるから、
本当の意味のconstではない

Ruby では、オブジェクトをfreeze すると、浅い第1階層で変更できなくなる。
変更できなくなった部分に、次の第2階層のオブジェクトがあれば、そこは変更できる！

だから完全に深い階層まで、再帰的にfreezeしないと、
本当の意味でfreezeにならない

>>20
undefined はユーザーが作り出せないものだから、
普通は空を表すのに、null を使う

Rubyのnil と同じ

2023/12/19(火) 01:47:20.29

>>30
MapやWeakMapを使おう

2023/12/19(火) 12:32:27.47

>>31
確認したら期待通りに動きました

>>31-33
ありがとうございます

2023/12/19(火) 14:48:44.22

>>34
>>30のあとに
console.log(obj[element]);
と書くと何が表示されると思う？

2023/12/19(火) 14:54:15.24

あ、これだけだと前提が足りないか
test_idもtest2_idもdivタグだとする

2023/12/19(火) 15:48:03.09

>>16
実用的はそれらは同値だと判断した方が良い
少なくともコード上分けるメリットはゼロ

2023/12/20(水) 13:23:41.58

JavaScriptで関数を変数に代入できると聞いて、
物理学で万物が粒子だけでなく波としての性質も合わせもつと聞いたときと同じくらいの衝撃を受けました。
どうもこのJavaScriptで関数を変数に代入できるという考えがしっくりこないのですが、どう考えれば受け入れられますか？

2023/12/20(水) 13:43:53.69

>>38
関数定義の構文
function f() {...}
は関数オブジェクトを変数 f に代入してるだけなので
g = f
としたら g() で同じ関数呼べるし
f = 123
と再代入したら f() で関数呼べなくなる
f = () => {...}
これで関数定義できることからもわかる

2023/12/20(水) 15:57:28.18

>>38
Arrayだろうが関数だろうが変数に格納されてる値はポインタで
値を使う時に自動的にデリファレンスされてると思っとけばいいんじゃね

最近の言語ならどれも同じようなことできるけどね

2023/12/21(木) 01:46:28.22

>>38
実態からはかけ離れるけど、メソッドが1個しかないオブジェクトの特別な扱いだと捉えるとどうだろう？

関数を変数に代入できるというのは、C言語のような古いものでも関数ポインタという形で実現してる。
関数はそのコードがメモリ上に配置されていて、関数の呼び出しはそのメモリのアドレスにジャンプするという形で行われるけど、そのジャンプ先のアドレスを変数に入れる感じ。
JavaScript ではクロージャって概念でもっと高度だけど、代入された変数には結局その関数の在りかが紐づけられてる。

2023/12/21(木) 14:29:18.32

やろうと思えば各要素に関数の入った配列を作れるってことが

2023/12/22(金) 21:46:22.69

LISP→Scheme→Javascriptという歴史的経緯があるのでそこから理解すると判りやすいかも
コードはLISPにとってはただのリストというデータ表現でしかなかったのでコードを変数に代入するというのはとても自然な事だった
Schemeでレキシカルスコープが定義され一般的なクロージャの形になった
括弧だらけの構文は一般受けしないのでCっぽい構文のJavascriptが生まれた
ざっくり書けばこういうわけです

2023/12/23(土) 01:26:50.34

>>43
分かりやすいかなぁw

2023/12/23(土) 02:10:18.87

挙がってる各言語を知ってる人はなるほどと思うかもしれないけど
そうでないならただの遠回りな気が

2023/12/23(土) 18:09:35.53

>>39-41は代入できますって以上の説明はできてないし
ショックを受けた38が知りたいのはそういう事じゃないんだろう
Coders at WorkによればJavaacript設計者のブレンダン・アイクはSICPとSchemeの崇拝者で、
最初のアイデアはNetscapeブラウザにSchemeを持ち込むことだったとの事だよ
まずはSICPでも読むといいんじゃないの

2023/12/23(土) 18:34:01.16

起源が知りたいわけじゃないと思うよ…

2023/12/23(土) 18:43:21.05

別に関数を変数に代入できるのはJavaScriptが初とか唯一ってわけじゃないからそこを掘り下げてもね

2023/12/23(土) 20:16:48.44

>>47-48
起源というかね、こういうのは歴史的経緯を辿って理解した方が判りやすいという話よ
君らのつまらんレスを読むよりはずっとね
Javascriptでやってる事は関数のポインタとはわけが違うんだから

2023/12/23(土) 20:22:17.26

>>49
それは絶対にない>わかりやすい

2023/12/23(土) 20:30:53.27

歴史を追いかけられるくらい論理的に文章組み立ててくれないか？

2023/12/23(土) 20:34:16.96

>Javascriptでやってる事は関数のポインタとはわけが違うんだから

LISPが違うのはわかるけどJavaScriptは関数ポインタとそんなに違うんだっけ？

2023/12/23(土) 20:55:11.83

>>49
賛同されなかったからつまらんレスとか言い出すのは大人げないよ

2023/12/24(日) 14:20:26.14

>>52
だいぶ違うぞ
クロージャって言葉知ってる？
定義された場所のローカル変数を参照できるの
そしてローカル変数がクロージャによってキャプチャされたら
その変数はクロージャが死なない限りずっと保持される
これは関数ポインタとは訳が違う
そしてそれこそがscheme信者のアイクが取り入れたかったもの
クロージャじゃないなら関数ポインタと大して変わらんっちゃ変わらん

2023/12/24(日) 15:20:54.55

>>54
関数がクロージャを形成するかどうかと
関数を受け渡すときに関数へのポインタを使ってるかどうかは直交した別の問題
実際どのJavaScriptエンジンも関数へのポインタを使って変数への代入や関数の受け渡しを実現している

C言語はクロージャをサポートしないのでC言語の関数ポインタを使ってもクロージャにはならないのは当たり前

もう少し言えば関数を受け渡し可能にするためのスコープ解決の仕組み/ルールと受け渡す際に関数へのポインタを使ってるかどうかは別の問題

2023/12/24(日) 15:53:19.34

別スレで見かけたトンデモ記事書いてる人だと思うけどレキシカルスコープの話と第一級関数の話とレキシカルスコープを使ったクロージャによって第一級関数を実現する話を混同してるんじゃないか

Schemeはレキシカルスコープを使ったクロージャという考え方を広く普及させた言語ではあるがレキシカルスコープや第一級関数はScheme以前の昔から実現されてたものだし
レキシカルスコープを使ったクロージャもScheme以前の昔からあった考え方

Schemeが初めてレキシカルスコープを定義したかのように書くのはやめよう

2023/12/24(日) 16:19:26.43

>>56
ちょっと指摘させてもらうと
誰も起源の話なんてしてないよ

2023/12/24(日) 16:48:55.22

>>56
いや別に起源とかはどうでも良くて関数ポインタとは違うよって話をしてるだけなんだけど

2023/12/24(日) 18:14:29.42

>>57
>>43がしてるでしょ
この人同じように間違ったことをあちこちで書いてるから指摘しただけ

2023/12/24(日) 19:40:11.40

彼は命題論理が理解できなくて、120年前の古文書まで読み返して、それでも分からなくて200年前の哲学書まで遡った結果、今でも命題論理が分かってないって人間だから、彼の歴史的経緯を遡れば理解しやすくなるって主張は実は彼自身によって反証されてたりする

2023/12/24(日) 22:35:22.54

>>38 が分かりやすかったかどうか答えてくれれば解決だな

38 (ﾜｯﾁｮｲ bf74-uzyf [211.124.81.22]) · 2023/12/24(日) 23:33:56.01

さっぱり分からん

2023/12/24(日) 23:38:36.92

おっIP同じやし38本人やん
まあそうだよな。あの説明でわかりやすく人間なんておらんやろ

2023/12/25(月) 06:04:30.08

クロージャは第一級市民関数。
関数外のローカル変数などの文脈を取り込む。
つまり、スコープがゆるい

一方、Ruby の関数はスコープがきつくて、
関数外のローカル変数を通さないので、第一級関数ではない。
ただし、ブロックはブロック外のローカル変数を通すから、クロージャ

他に、レシーバーとメソッドを持ち運ぶ、メソッドオブジェクトもある

2023/12/25(月) 08:32:20.98

>>38,62
何がどうわからないのか、を詳しく説明してくれ。
具体的なところがさっぱり分からん。

2023/12/25(月) 21:05:49.32

そりゃそもそもLISPやSchemeを全く知らない人だったんでしょ
分かりやすくなる要素なんて1ミリもないわな

2023/12/25(月) 21:28:48.99

struct Closure {
struct Env env;
struct Function func;
};

Closureの最もシンプルな実装
Envはキャプチャしたローカル変数を保持する環境
Functionは関数ポインタやらを保持してるオブジェクトだと思ってくれ
たったこれだけのことに過ぎない
関数ポインタにenvが追加されただけのものだ

2023/12/26(火) 01:40:31.83

クロージャやレキシカルスコープがどうやって実現されてるかという質問なら[[Environment]]のことを教えてあげるのはいいと思うけど
そういう話は誰もしてないからねぇ

2023/12/26(火) 12:17:20.00

結局のところ>>38の問題って関数は変数に代入できないものだっていう固定観念を他の言語に持ち込んでるところだと思う

プログラミング言語なんて所詮ヒトがそれぞれの都合で作ったものであって言語が違えば考え方や常識も違う
そこを理解して他の言語の固定観念を持ち込まないようにしないとこの先もしっくりこないこと、受け入れられないことだらけだろう

2023/12/26(火) 18:41:41.07

関数を変数に直接代入できないCの系譜の言語が最も広く普及してるから
そういう言語をやってきた人が関数を変数に直接代入できる言語に初めて接したら>>38のように驚くのは極々自然のこと

何が固定観念なのかなんてそれが覆るまで分からないんだから固定観念を持ち込むなとか言っても何の役にも立たないよ

2023/12/26(火) 19:02:16.70

今回のことで固定観念だったと気づければそれでいいと思うよ
そうすれば次からは疑ってかかることができるわけだし