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

2022/08/07(日) 15:57:40.26

!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.124
https://mevius.5ch.net/test/read.cgi/tech/1636525464/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured

2022/12/17(土) 13:53:37.75

>>424
訂正
https://developer.mozilla.org/ja/docs/Web/API/CSSStyleSheet

2022/12/17(土) 20:57:11.28

>>426
ありがとうございます。JSの皆様は本当に神様。
取り急ぎお礼申し上げます。ありがとうございます。
できれば明日時間をとって拝読させていただきます。

2022/12/17(土) 22:30:28.67

if(A1[1] == A1[3]){
A0C = (A0[3]+A0[1])/2;
A1C = (A1[3]+A1[1])/2;
Ty = A1C - A0C;
X1[0].translate(0,Ty);
} else {
dofn3();
}

このif文ですが、A1[1]とA1[3]の誤差がプラスマイナス0.5までならtrueというふうに変えたいんですけど、どう書き換えれば良いでしょうか？
今のままだとA1[1]とA1[3]ともに小数点以下10桁くらいあって条件が厳し過ぎるんですよね
手違いでちょっとずれて作ってしまうこともあるので、その場合はtrueにしたいのです

2022/12/17(土) 22:40:09.17

A1[1]とA1[3]の差が絶対値で0.5までって書けばいいんじゃないの？

2022/12/17(土) 22:44:13.88

A1[1]==A1[3]は、四角形の左上のY座標A1[1]と右下のY座標A1[3]が同じだから、直線という意味です
でもこの2点を上下0.5くらい余裕を持たせたいんです
間違って微妙に斜めに線を引いてしまうこともあるので

2022/12/17(土) 22:45:31.22

>>430
そうか
簡単でしたね w
ありがとうございます

2022/12/17(土) 22:45:36.51

>>429
まず自分で試行錯誤してみたら？
やりたいことが日本語に出来てるなら難しいことではないと思うよ
君は何でも最初から人に聞いて済ませようとしてるように見える

2022/12/17(土) 22:47:25.94

このスレは、回答者の腕試しの意味もあるから

2022/12/17(土) 23:01:46.75

正直このレベルの質問に答える必要が無いと思うが・・・
範囲でif文を書く事とかすら考えつかないレベルでこの先やっていける訳無いやんｗ

2022/12/17(土) 23:10:51.36

>>435
こういうちょっとしたきっかけで他の思い付きができるようになることもあるしね

2022/12/18(日) 12:44:32.64

>>427
様、ありがとうございました。
CSSのスタイル設定プロパティをJSで編集できました。
CSSRulesは配列で返ってきますが
cssRules['div'].color='blue'
のように、プロパティ名で編集する方法はありませんでしょうか？

2022/12/18(日) 14:19:43.57

jQuery使えばできます

2022/12/19(月) 12:00:53.42

>>437
俺は「プロパティ名で編集する方法」を知らないので、CSSOMを調べてみるといいと思う
https://triple-underscore.github.io/cssom-ja.html

2022/12/19(月) 14:10:45.85

>>438
>>439
ありがとうございました
selectortextを呼び出して疑似的にプロパティ名で編集できるような関数を作ってみます。

2022/12/19(月) 21:50:19.67

https://developer.mozilla.org/ja/docs/Web/API/CSSStyleDeclaration/setProperty

let style = document.styleSheets[0].cssRules[0].style;
style.fontSize = "1em";
// style.setProperty("font-size", "1em");

2022/12/21(水) 07:34:30.54

>>441
ありがとうございます。

let styleの呼び出し箇所を関数にして
selector名のオブジェクトを生成し、その中にプロパティ名とvalueを格納して呼び出すような
簡易的な関数を作成してみます
年末のお忙しいとろ、アドバイスありがとうございました。

2022/12/21(水) 16:52:58.12

小数点第4位を四捨五入するのは、parseFloat(a.toFixed(3))と Math.round(a*1000)/1000のどっちがいいでしょうか？

2022/12/21(水) 19:18:04.39

連日すみません。
<link rel="stylesheet" src>で読み込んだcssの
cssStylesheetプロパティにアクセスする方法を教えていただけないでしょうか？

2022/12/21(水) 21:53:16.64

ちょっとググれば出てくるような情報までくれって言うのか？

2022/12/21(水) 22:46:02.69

すみません、ちょっとググってみます

2022/12/21(水) 23:16:30.68

どうしても分からないならchromeのDevToolsのConsoleで
document.styleSheets
って打ってみれば中身が全て見れる
中身見ても意味不明な場合はやりたいことは出来ないかも

2022/12/21(水) 23:34:53.49

jQuery最強伝説。

2022/12/22(木) 07:18:15.65

>>447
それは試してみたんですけどundefinedなんですよね
他ファイルを参照した場合には、stylesheetがdocumentのプロパティになっていないようなのですよね

2022/12/22(木) 07:21:31.78

>>447
すみません、訂正です
document.styleSheetで参照すると
document.styleSheet.cssRulesがnullとなってしまうんです
document.styleSheetで登録されるのは
同じファイル内のスタイルだけのよう？
他のcssファイルに書かれたスタイルを操作するには
どうしたらいいのでしょうか？
に訂正願います

2022/12/22(木) 07:48:35.40

document.styleSheetsの最後のs抜かしてないよな
document.styleSheets[0] みたいにインデックス使わないと参照できないぞ

2022/12/22(木) 09:18:28.13

本当にやりたいのは、特定の要素のstyleを弄ることじゃないの？

2022/12/22(木) 13:29:52.00

ワードプレスとかいうアレをイジってると特定idの親にスタイル変更したいとかはでてくる

2022/12/22(木) 17:03:26.78

よほどのことがなければ元ルールを直に書き変えるなんてしないよなぁ
cssRulesはクロスオリジンだとアクセスできないし

2022/12/22(木) 19:14:24.29

みなさん、ありがとうございます。
関連した質問なのですが
cssが要素に適用される仕組みは
１：
<style>タグを読み込んだり<link ref>を読み込んだ時点で
ブラウザ実行環境にcssプロパティを記録して、セレクタを読み込んだ時に適用するのでしょうか？

それとも
２：
HTMLの要素を読み込んだ時に<style>タグや<link>先に走査して
cssの適用があるかを確認して適用する

なのでしょうか？
もし１なら、クライアントブラウザからアクセスできるような気がするのですけど
もし教えていただけるようでしたらご指導お願いします

2022/12/22(木) 20:32:53.94

次の話に移る前にまず>>451や>>452に答えるべきだろう
言葉遣いだけ丁寧にしてもそういうのが疎かだと相手にされなくなる

2022/12/23(金) 07:08:17.10

>>452様
424,437,440,442の記載の通り、cssRuleを直接編集したいと考えています

>>451様
437,441,442で記載の通り、配列で受けとって編集することはできています
しかし別のスタイルシートでは同様の方法では参照できませんでした

>>445様のご指摘があって、再度検索してみたのですが
別スタイルシートのcssをオブジェクト化して参照する方法が見当たらず
今の質問に至っています

JQueryでできるようなレスがありましたので
JSでもできるのだろうなと思って次の質問をしました

皆様質問の仕方に失礼があっって申し訳ありませんでした
お許しくださいませ

2022/12/23(金) 08:30:41.88

>>454 でクロスオリジンの場合にnullになるって指摘されてるけど、これに引っかかってるだけじゃないかな
この場合はどうにもならんと思う

2022/12/23(金) 10:44:42.21

>>457
ブラウザのコンソールで↓を実行したらどうなる？
for(const ss of document.styleSheets){console.log(ss.href); console.log(ss.cssRules);}

2022/12/23(金) 17:28:12.54

>>458で指摘している通り、他の所から読み込んだスタイルはそもそも変更出来ないって書いてあるんじゃね？
https://w3c.github.io/csswg-drafts/cssom/

> Cross-origin stylesheets are not allowed to be read or changed.

>>459のように実際にcssRulesにアクセスすると自分の所のcssじゃない場合をアクセスしようとすると
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at <anonymous>:1:76
みたいなエラーになる

cssをいじりたいのだろうけど、そういう低層の話じゃなくて本当にやりたい事を書いた方が答えが得られると思うよ
結局何がやりたいのか全く分からんｗ

2022/12/23(金) 17:30:32.01

変な日本語になってるなｗ

>>459のように実際に自分の所のでは無いcssRulesをアクセスしようとすると
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at <anonymous>:1:76
みたいなエラーになる

2022/12/23(金) 19:30:29.91

>>458
459,460,461

皆様ありがとうございます
具体的にこれをしたいというのはなかったんですけど
js勉強していまして、そういうことできるのかな？という質問でした

jsのエンジンは<link rel>を実行すると
jsの実行コンテキストを記録するメモリ部分に
<rel>の情報をロードして
HTML要素を読み込んだ時に参照するという挙動なら
クロスオリジンの適用を受けずに編集できるかなと
そういう疑問も持ちまして質問させていただきました

皆様ありがとうございました

2022/12/23(金) 20:54:13.31

>>462
>クロスオリジンの適用を受けずに編集できるかなと
君の>>450や>>457の発言ではCSS参照が別ファイルでも同一オリジンでは問題なく出来て
別オリジンのみ問題が発生していると認識しているとは読み取れないけども
別ファイル即ち別オリジンと勘違いしてない？
同一オリジンなら別ファイルでも参照出来ることは理解してる？

2022/12/23(金) 20:55:49.05

>>460
今勉強再開して思い出しました。
@keyframesのプロパティや値を
動的に変更したいと考えたのです

同じファイルなら
<style id="st">
として、stから@keyframesを設定編集できますが
外部ファイルでの設定編集ができないので
できたらいいな、って質問してみました

2022/12/23(金) 20:57:53.66

>>463
勘違い、混乱してました。ありがとうございます！

2022/12/23(金) 21:10:25.93

>>465
で、>>450で参照したかったのは本当に別サーバ等のcssだったのか
それともhtmlやjsと同じ場所に置いてあるcssだったのかどっち？

2022/12/23(金) 21:19:54.48

>>466
ローカルで、同じフォルダ内です

2022/12/23(金) 21:28:01.20

@keyframesなんかも後のスタイルで再定義できるんだから
DOMにstyle要素追加してそこに上書きルール突っ込んでそっちを操作すればいいじゃない

2022/12/23(金) 21:39:17.88

>>467
それは本来別オリジンではないんだけどブラウザがローカルアクセスに対するセキュリティの一環として制限をかけてる模様
詳しくはググって
>>459のスクリプトを実行して
file:///～
の行のあとに例外が出るならそれが原因

対策としてはローカルにwebサーバを立ててhttp経由でアクセスする
そうすればスクリプト実行で例外が発生せずcssの中身が読み取れる
webサーバはそんな大層なものは必要なくてvscodeのLiveServerで十分

2022/12/23(金) 21:55:43.41

DevTools を弄れるなら、要素タブでスタイル欄を見れば
適用内容と設定元のファイルが行番号付きで確認できるし
アニメーションを弄りたいなら、「その他のツール」に「アニメーション」がある（chrome）

2022/12/24(土) 09:52:50.24

皆様いろいろありがとうございます
時間とれましたら確認させていただきます

2022/12/24(土) 10:46:15.28

>>471
少し調べたらchromeのオプションでクロスオリジン制約を回避する方法があった
chrome クロスオリジン
で検索
これならwebサーバを立てる必要もなくてお手軽

2022/12/24(土) 14:27:49.26

firefoxもsecurity.fileuri.strict_origin_policyをfalseにすれば回避できるけど
早いうちにローカルサーバ立てることを覚えた方が後が楽になると思うよ

対象要素が１つなら@keyframes書き換えるよりWebAnimationAPI使った方がいいかもしれないし
やりたいことはぼかさずにはっきり書いた方がいいよ

2022/12/24(土) 22:49:22.50

HTA(hta+ie)にとって替わるみたいな環境っていまだにないのかな
PWAみたいのではなく、javascript(やvbs)でWindowsのフレームワーク(.NETやCOMやら)と連携できるようなやつが欲しい
WebView2は思想的にHTAと比べて退化してるようにしか見えないけどこれぐらいなのか…

2022/12/25(日) 03:50:26.67

>>474
そういや前はちょっとしたツールを HTA で書いたりしたけど、もう使えない？

2022/12/25(日) 12:52:51.27

皆さん、ありがとうございます
別シートのcssで可変にしたい部分を変数にし
読み込むシート側に変数専用のstyleタグを用意し
変数用のスタイルタグを編集することにしました

皆様いろいろとありがとうございました

2022/12/25(日) 13:14:34.27

要するにクロスオリジン問題を解決して>>450を実現したのではなくて
別の方法を取ったということ？

2022/12/25(日) 13:37:10.68

そうです
>>468様のアドバイスなら
私の学習レベルでもググり時間とられずにできそうだと思いまして

style.css
@keyframes xxx{ *** : var(--prm) }

index.html
＜style id="prm"＞＜/style＞
＜script＞
prm.innerHTML=":root {--prm:50% }"

のように、変数を編集するstyleタグを設けました
見栄え悪いしかっこ悪いんですけど
いろんな変数を設定変更する関数も自作できそうですので
とりあえずはこれでいいかなと

2022/12/25(日) 14:26:34.39

>>478
それならわざわざstyle要素作って直に操作する必要はない
変数の最初の定義もcssファイルの方に書いておいて
変更したい時は
document.documentElement.style.setProperty("--prm", "100%");
とかすればいいだけ

2022/12/25(日) 15:40:19.02

>>479
ありがとうございます！そうさせていただきます。
今後ともいろいろ教えてください。ありがとうござました！

2022/12/25(日) 16:48:37.78

>>478
>私の学習レベルでもググり時間とられずにできそうだと思いまして
webサーバ云々が億劫だってのは分かるからしょうがないけども
せめて>>472ぐらいは実際に試して欲しかったな
ググって最初に出てくる記事にすぐ出来るやり方が具体的に書いてあるんだし

2022/12/25(日) 16:50:28.05

>>479様
面白かったです。

<html><head><body><div>
どの要素にでも、setProperty('param','value')を設定しておけば
別ファイルに作ったスタイルシートの変数を参照できるのですね

疑似的なコードですが
＜script＞
body.setProperty('--color','red')
div.setProperty('--color','blue')
html.setProperty('--color','green)

とすると、子孫のスタイル設定が優先されることも理解できました
とても面白く学習できました、ありがとうございました

2022/12/25(日) 16:51:23.54

>>481
ありがとうございます
次時間ができたときにぜひ調べて実行してみます

2022/12/25(日) 17:00:33.10

もう解決したんだしどうでもいいからお礼だけ言って体よく話を打ち切りたいって思いがヒシヒシ伝わってくるな

2022/12/26(月) 13:51:42.59

>>469様
Live serverを使って、別のスタイルシートで設定した、フォント色の変更はOKでした。
ありがとうございました。

ただ、@keyframesに関しては、CSSKeyframeRule__{keyText..,style,,cssText,,}__までは見れたのですが
内容の変更方法が分からないため断念しました
時間あるときに再チャレンジしてみます

皆様ありがとうございました

2022/12/26(月) 15:01:08.23

2022/12/26(月) 15:02:39.66

function dofn() {

var SWmmS = rd21.selection.text;
var SWmm = parseFloat(SWmmS);
var SWpt = SWmm / ptEQ;

var rectObj = activeDocument.pathItems.rectangle(-420.94488, 297.638, 150, 100);
rectObj.filled = false;
rectObj.stroked = true;
rectObj.strokeColor = CMYKfn(0, 0, 0, 100);
rectObj.strokeWidth = SWpt;
rectObj.selected = true;
rectObj.remove();

function CMYKfn(c, m, y, k) {　
COL = new CMYKColor();　
COL.cyan = c;　
COL.magenta = m;　
COL.yellow = y;　
COL.black = k;　
return COL;
}
}

2022/12/26(月) 15:07:33.18

線幅を変更するスクリプトなのですが、一応完成しました。
自分で使うだけならこれでいいのですが、他人に使ってもらう場合、ダイアログに「線幅を追加する」という項目を増やしたいと思っています。
rd21 = pg2.add("dropdownlist", [20, 40, 150, 65], ["0.1 mm", "0.12 mm", "0.15 mm", "0.2 mm", "0.25 mm", "0.3 mm", "0.4 mm", "0.5 mm", "0.6 mm"]);
のところに項目を追加していくようなコードを書くことは可能なのでしょうか？
自分自身を書き換えるコードだと思うのですが…
（削除はどうでしょうか？例えば0.15 mmがいらないと思った場合、"0.15 mm"のを削除するコードを書くことは可能ですか？）

2022/12/26(月) 15:27:01.38

スレ内を線幅で検索しても何も引っかからないのにこの書き出しで何か伝わると思ってるのすごいわ

線幅の配列を関数内で直書きしてるから自身を書き換えるとか面倒なことを考える必要があるわけで
関数の外に変数で宣言しとけば追加も削除もなんとでもなるでしょ

2022/12/26(月) 15:55:16.01

確かIllustratorかなんかのスクリプトでしょ
ここ見てるほとんどはWebブラウザやnode.jsのJavaScriptは知っててもそっちは知らないと思う
文法的にはJavaScriptと同じでも出てくるオブジェクトは独自のものだろうし説明しないとわからんよ

2022/12/26(月) 16:14:37.67

>>489
素人でもエディタで開かないとダメということですね。

var mm = ["0.1 mm", "0.12 mm", "0.15 mm", "0.2 mm", "0.25 mm", "0.3 mm", "0.4 mm", "0.5 mm", "0.6 mm"]
// 線幅の項目を増やしたり削除したい場合は、上の1行を書き換えてください

こう先頭に書き加えました。

2022/12/26(月) 16:16:02.82

>>490
すみません
気を付けます

2022/12/26(月) 16:45:32.21

>>491
意図が理解されなかったということが分かった
コメント付けるって妥協するなら>>486のままでもいいでしょ

ここの住人はadobe独自のことは詳しくないんだし他所で聞いたほうが的確な答えが返ってくるよ
そもそもここはスレ違い

2022/12/26(月) 17:18:59.92

>>475
htaまだまだこれからだ
ただhighDPI環境でスケーリング200%とかだとおかしな事になった想い出

2022/12/26(月) 22:12:09.27

>>485
①chromeで↓のurlを開く
https://yari-demos.prod.mdn.mozit.cloud/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations/_sample_.making_it_move_back_and_forth.html

②chromeのコンソールを開いて↓を入力する
document.styleSheets[1].cssRules[1].cssRules[0].style.marginLeft = "50%"

2022/12/27(火) 15:47:36.10

>>495
ありがとうございました
所望の動作を確認できました
JSはいろんな方法があるんですね

2023/01/02(月) 12:58:47.15

>>474
pythonのeelモジュールを使えば、昔のhtaっぽいことができます

2023/01/02(月) 17:25:19.15

>>497
OSに標準で入ってるedgeで使えるのはいいなあ
情報ありがとう

2023/01/04(水) 19:01:14.59

「無名関数」、「関数リテラル」の理解がちょっとぼやけています。

次の様なコードがあったとき、
let calcResult = function calc(a,b){
return a*b;
}

calc()
と()をつけて表せるものが普通の関数、それを変数に代入したもの
calcResult
が関数リテラルかと思っていました。
しかし、どうやら違うようで。。

2023/01/04(水) 19:01:57.33

例えば以下の２つの関数があります。

■「function関数」を変数に格納
let calcResult1 = function calc(a,b){
return a*b;
}

■「無名関数」を変数に格納
let calcResult2 = function(a,b){
return a*b;
}

「無名関数」は「関数リテラル」と同義である。とさまざまな文献に記述されています。

ならば、
calcResult1
は、関数リテラルではない。

calcResult2
は、関数リテラルである。

という認識で間違っていないでしょうか？

2023/01/04(水) 19:02:26.96

SetInterval()
に与える引数は、関数リテラルでなくてはならないそうです。

となると、以下は誤りで、
SetInterval(calcResult1,1000);

以下なら問題ない
SetInterval(calcResult2,1000);

という理解でよろしいでしょうか？

2023/01/04(水) 20:37:28.67

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function

https://developer.mozilla.org/ja/docs/Glossary/Literal
リテラルに関数は含まれてないな

「関数リテラル=無名関数」が間違ってて、calcResult1 も calcResult2 は、関数リテラル。
とイコールで結んじゃうのは乱暴か
字義に従えば「無名関数」には生成時に名前をつけなかった、程度の意味しかないかと

ただ、関数式として生成された関数は変数に格納するか、でなければ他の関数の引数になるので、名前をつける意味はほぼない
結果的に関数式の関数は無名関数になることがほとんどで

2023/01/04(水) 20:40:11.89

ここでいう「関数リテラル」は関数式で記述された関数のことで、名前があろうとなかろうと「関数リテラル」でいいんだと思う

**502** (ﾜｯﾁｮｲ 8701-1zgH [60.103.77.208]) · 2023/01/04(水) 20:53:07.39

途中送信で変になってるからまとめ直し

>>500,501
その文脈での「関数リテラル」ってのは関数式で記述された関数のこと(>>502のリンク参照)で、名前の有無は関係ない
名前のあるcalcResult1 も名前のないcalcResult2 も「関数リテラル」という理解でいいと思う
「無名関数」の「無名」には生成時に名前をつけなかった、程度の意味しかないかと

ただ、関数式として生成された関数は変数に格納するか、でなければ他の関数の引数になるので、名前をつける意味はほぼなくて結果的に無名関数になることがほとんどではある

2023/01/04(水) 20:57:54.46

>>502
すっごい分かりやすい。
モヤモヤしていたのがすっきりしました。
ありがとうございました。

2023/01/04(水) 21:00:20.48

調べたら自分を再帰的に呼び出す場合に名前を付けるって例があってなるほどと思った

2023/01/04(水) 21:21:00.43

ちなみに>>501のsetIntervalの引数は関数リテラルでないといけないってのはどこ情報？

2023/01/04(水) 21:23:57.48

あれ。関数リテラルには引数はないのか。。引数の不要な関数しか関数リテラルにならんのか。
もちょっと調べてみます。

2023/01/04(水) 21:32:15.85

>>507
必要ならページ画像をどっかにアップします。。

技術評論社
JavaScript本格入門
https://gihyo.jp/book/2016/978-4-7741-8411-1
P362
setTimeout/SetIntervalメソッドの注意点
...引数funcは必ず関数リテラルで指定してください。

2023/01/04(水) 21:39:03.24

でも何かの引数に関数をわたすときは、
一般的に関数リテラルで渡すのがデフォと
ぼんやり思っている。

2023/01/04(水) 21:47:22.56

技術評論社はやめとけよ。

2023/01/04(水) 21:55:58.51

>>509
文脈がわからんけど理由は書いてあるの？
動く動かないで言えばfunction文で定義した関数リテラルでない関数を渡しても動くようだけど
そもそもMDNにも関数としか書いてないし

2023/01/04(水) 22:20:18.03

単に著者が良く理解せずに書いてるだけな気がする

2023/01/04(水) 22:21:10.60

>>512
setTimeout()の例でしかもjQueryで
申し訳ないのですが。
１秒後に#displayのhtmlの内容を空にするコードです。

以下のようなコードではsetTimeoutが動かず、

setTimeout($('#display').html(' '), 1000);

代わりに、以下で動きます。

function clearDisplay(){
$('#display').html('');
}
setTimeout(clearDisplay, 1000);

このことから書籍にあるように
関数リテラルでないと引数に渡せないと
思っていました。。

書籍の文脈ですが、実際にあとで画像アップします。

2023/01/04(水) 22:46:11.56

>setTimeout($('#display').html(' '), 1000);
これそもそも渡してるの関数じゃないからリテラル云々の問題じゃなくない？
html()が戻り値としてjQueryを返すからそれが引数として渡ってるでしょ

>function clearDisplay(){
> $('#display').html('');
>}
これもfunction「文」で定義してるから>>504で言うところの関数リテラルには当てはまらない関数だよね

2023/01/04(水) 23:53:56.91

アロー関数式を使うことで、関数リテラルによる関数定義を
より簡略化して記述することができます
ただし、this には注意してください

2023/01/05(木) 00:01:25.43

>>515
setTimeout($('#display').html(' '), 1000);
これそもそも渡してるの関数じゃないからリテラル云々の問題じゃなくない？

渡しているのは関数じゃない。。
んー。メソッドか。だから動かない。

ありがとう。

2023/01/05(木) 00:18:03.56

>>517
いや、関数かメソッドかの話じゃなくて
$('#display').html(' ')をその場で実行してその戻り値であるjQueryオブジェクトを渡しちゃってるでしょって話
ちゃんと理解できてる？
https://js.studio-kingdom.com/jquery/manipulation/html#1

2023/01/05(木) 00:26:22.30

私の勘違いだったのですね。

たしかに関数ではない。。
一応書籍のページ画像をuploadしました。

「引数funcは必ず関数リテラルで指定してください。」
https://uploda1.ysklog.net/uploda/8298a4c0da.png

「関数リテラルは....ある関数の引数として渡したり....」
https://uploda1.ysklog.net/uploda/0bcdf35455.png

2023/01/05(木) 00:27:48.45

>>518
理解したありがとう！

2023/01/05(木) 02:04:13.18

>>519
「引数funcは必ず関数リテラルで指定してください。」
ちょっと問題のある文章だなあ

https://developer.mozilla.org/ja/docs/Web/API/setTimeout
第一引数は関数またはjavascriptコードとして実行される文字列

関数ってのは関数呼び出しじゃなくて関数名、または無名関数（関数リテラル）

>>514
文字列で渡したら動くはず
setTimeout("$('#display').html(' ')", 1000);

2023/01/05(木) 06:17:33.15

>>521
> 「引数funcは必ず関数リテラルで指定してください。」
> ちょっと問題のある文章だなあ
まあそこは直前に文字列でも指定できるけどって書いてるから教育的指導なんだろうとは思う
まあ「必ず」という言葉が強すぎるから「引数funcは関数リテラルで指定するようにしてください。」程度でいいと思う
むしろ問題は「関数リテラルは宣言した時点では、名前を持たないことから匿名関数、または無名関数と呼ばれることもあります。」の方だろうね

2023/01/05(木) 09:18:58.87

>>521
>文字列で渡したら動くはず
>setTimeout("$('#display').html(' ')", 1000);
ありがとう。関数とは、関数呼び出しではなく実行される文字列

次いでもう一点お願いします。

https://uploda1.ysklog.net/uploda/0bcdf35455.png
リスト4-04 function_literal.js

以下は、関数リテラルを使ってリスト4-01を書き換えたものです。

var getTraiangle = function(base,height){
return base * height/2;
}

console.log('三角形の面積：'+getTrianle(5,2));

↑の
getTrianle(5,2)
は、関数リテラルなのですね。
てっきり()がないものが関数リテラルと思っていたが、
どうも、それも間違いようで。

2023/01/05(木) 09:20:11.59

あくまで、関数を変数に代入するということが、重要なのでしょうか？

2023/01/05(木) 09:23:08.82

「関数呼び出し」と
「引数付の関数リテラル」は
それだけみても違いわからないですね。
定義された場所を見て判断しないと。

2023/01/05(木) 10:06:29.26

>>523
>>setTimeout("$('#display').html(' ')", 1000);
>ありがとう。関数とは、関数呼び出しではなく実行される文字列
いやいや、それは関数じゃなくてただの文字列
setTimeoutの第一引数は文字列か関数って書いてあるでしょ

関数リテラルって言葉はもう忘れていいと思うよ
そもそもMDNに記述がないから便宜的なものだし、その本での説明も怪しい
定義の仕方で区分されてるだけで実質的にはただの関数で
挙動に差異があるわけでもないだろうし