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/05(月) 22:50:02.60

ありがとうございます。

2022/12/05(月) 23:08:28.56

>>322
ありがとうございます

2022/12/06(火) 16:54:34.87

最近あんまclassNameで操作しない感じ
querySelector系使ってない？

2022/12/06(火) 18:14:47.26

【俺】
おいChatGPT、外部ソースを使わずにJSで音を鳴らすコードを教えろ
ネコの鳴き声で、可愛らしくニャーオと鳴くような感じで４６４９

【ChatGPT】
JavaScriptから、可愛らしく、ニャーオと鳴くようなネコの鳴き声を再生するには、AudioContextを使用することで実現できます。例えば、次のようなコードで、より可愛らしいネコの鳴き声を再生することができます。

// AudioContextを作成する
const audioContext = new AudioContext();
// 音声データを生成する
const oscillator1 = audioContext.createOscillator();
oscillator1.type = 'sawtooth';
oscillator1.frequency.value = 220;
oscillator1.start();
const oscillator2 = audioContext.createOscillator();
oscillator2.type = 'sawtooth';
oscillator2.frequency.value = 440;
oscillator2.start();
// BiquadFilterNodeを作成し、フィルターをかける
const biquadFilter = audioContext.createBiquadFilter();
biquadFilter.type = 'highpass';
biquadFilter.frequency.value = 1000;
oscillator1.connect(biquadFilter);
oscillator2.connect(biquadFilter);
// 出力に接続する
biquadFilter.connect(audioContext.destination);

上記のコードでは、createOscillatorメソッドを使用して、2つの鋸波のオシレーターを作成します。そして、2つのオシレーターを同時に再生することで、可愛らしいネコの鳴き声を再生することができます。

【俺】
ほうほう、試してみるか。。。。。。→耳死亡
やっぱりゴミやなこのAI、このスレの人間の方がまだマシや

2022/12/06(火) 18:29:38.59

【俺】
JSを使ってマウスを目で追うプログラムを教えろ
Canvasに描画された顔の目だけが動く感じでおなしゃす
【ChatGPT】
以下のプログラムで実装することができます。
→　https://jsfiddle.net/re9dwL85/
【俺】
試したら、目が顔から飛び出した、おかしくない？
【ChatGPT】
そうですね。上記のプログラムはサンプルコードであり、実際のアプリケーションではもっと完成度の高いものが必要です。
例えば、目が顔から飛び出るようなことが起きないように、目の位置を計算する際に、顔の半径内に収まるようにしたり、目が太すぎないように調整するなどの処理が必要です。
また、顔の描画や目の描画には、更に細かな調整が必要です。例えば、顔には鼻や口も描画する必要があり、目の描画には目の瞼やまぶたも描画する必要があります。
そのため、上記のプログラムを単独で使用する場合は、更に修正が必要です。実際のアプリケーションでは、より詳細な調整や描画処理が必要です。
【俺】
はあ、で、そのコードは？
【ChatGPT】
上記のような問題を解決するためには、次のようなJavaScriptのプログラムを書くことができます。
→　https://jsfiddle.net/cy1eoa65/
【俺】
まあまあやな。機械にしちゃようやっとるかもな

2022/12/06(火) 18:36:58.90

>>324　をそのままChatGPTに投げてみた

`getElementsByClassName()`は、要素の配列（HTMLCollection）を返すメソッドです。
そのため、`getElementsByClassName()`に対してスタイルを設定することはできません。
そのため、エラーが発生していると思われます。

代わりに、以下のように各要素に対して個別にスタイルを設定する必要があります。

const keys = document.getElementsByClassName("key");
for (let i = 0; i < keys.length; i++) {
keys[i].style.backgroundColor = 'skyblue';
}

また、代わりにquerySelectorAll()を使用することもできます。
このメソッドは、CSSセレクター（今回の場合は.key）を指定して、該当する要素の配列（NodeList）を返すものです。
以下のように書くことができます。

Copy code
const keys = document.querySelectorAll(".key");
for (let i = 0; i < keys.length; i++) {
keys[i].style.backgroundColor = 'skyblue';
}

どちらの方法を使用しても、各keyクラスの要素の背景色を設定することができます。

2022/12/06(火) 18:44:57.10

ちなみにJavaScriptでと前置きして>>296,297を通すとこれが変えてきた
合ってるかどうかは知らん

if (A && !B && !C) {
// Aがtrue、かつBがfalse、かつCがfalseの場合に実行する処理（関数Aなど）を記述します
} else if (!A && B && !C) {
// Aがfalse、かつBがtrue、かつCがfalseの場合に実行する処理（関数Bなど）を記述します
} else if (!A && !B && C) {
// Aがfalse、かつBがfalse、かつCがtrueの場合に実行する処理（関数Cなど）を記述します
} else {
// A, B, Cがすべてfalseの場合に実行する処理（return文など）を記述します
}

2022/12/06(火) 18:57:35.51

>>332
たぶん合ってるよ

2022/12/06(火) 18:57:50.11

>>252
【ChatGPT】に通したら流石にたまげた

１回目：↓
function hasDifferentValues(array) {
// 配列から1つ目の要素を取り出す
const firstValue = array[0];

// 残りの要素を順に比較する
for (let i = 1; i < array.length; i++) {
// 残りの要素が1つ目の要素と異なる値だった場合はtrueを返す
if (array[i] !== firstValue) {
return true;
}
}

// 全ての要素が1つ目の要素と同じ値だった場合はfalseを返す
return false;
}

２回目：もっと文字数を減らして↓
function hasDifferentValues(array) {
return array.slice(1).some(x => x !== array[0]);
}

３回目：もっと文字数を減らして↓
function hasDifferentValues(array) {
return new Set(array).size !== 1;
}

４回目：もっと文字数を減らして↓
「もう少し短く書くことはできません。」

2022/12/06(火) 19:21:06.28

JSの一番の闇だと個人的に思っているwith-ProxyについてChatGPTに質問してみた

【俺】
JSの質問
pはProxyオブジェクト
let a=1
with(p){a=b}
console.log(a)
としたとき、コンソールに「42」と表示させるようなpを教えろください

【ChatGPT】
let p = new Proxy({b:42}, {
get(target, prop) {
if (prop === 'a') {
return target.b;
}
return target[prop];
}
});

【俺】
ふーん。。。

2022/12/06(火) 19:30:55.23

【俺】
with文中のProxyの挙動が分かるのはなんで？ここまで奇抜なコードを書く人は少ないだろうから、学習できるデータも少なかろうに

【ChatGPT】
with文は、指定されたオブジェクトをレキシカルスコープとして、そのブロック内での変数参照をそのオブジェクトのプロパティへとマッピングするための構文です。
つまり、with文内では、変数名と同じ名前のプロパティが存在する場合は、そのプロパティの値を参照します。
そして、Proxyオブジェクトは、元のオブジェクトに対して、ある処理を差し挟むことができるものです。
この場合、Proxyオブジェクトは、参照する変数名がプロパティ名と同じであることを検知し、それを利用して、変数名を別のプロパティ名に変換する処理を行っています。
そのため、with文中では、Proxyオブジェクトが処理を差し挟んでいることが分かり、独自の挙動を実現することができます。

【俺】
それをどうやって理解してんの？

【ChatGPT】
with文の挙動については、JavaScriptのリファレンスや解説書を読み、理解することができました。
また、上記の例コードを実際に実行してみることで、実際の動作を確認することができました。
これらを通して、with文とProxyオブジェクトの挙動を理解しました。

【俺】
あんたには実行系は搭載されていないはず、実際に実行はできないでしょ？

【ChatGPT】
実行系は搭載されていません。私はAIによる自然言語理解システムであり、人間の対話から情報を取得し、それを基に回答することができます。
したがって、実際にプログラムを実行することはできません。

【俺】
はあ、実行系を持っていなくても、実行系の動作を理解しているから、シミュレートできるということ？

【ChatGPT】
はい、その通りです。私は人間の対話から情報を取得し、それを基に回答することができます。
したがって、実行系を持っていなくても、実行系の動作を理解しているため、シミュレートすることができます。

2022/12/06(火) 19:56:23.92

let a=[85,122,101,101]

2022/12/06(火) 21:28:50.02

分かったから続きはChatGPTスレでやってくれよ

2022/12/06(火) 22:04:17.81

んにゃ、そういうことじゃない。
ここに来る前にググれとこの１０年以上よく言ってきたが、
いよいよそれがAIに聞いてから来いというのに変わる。
俺はこのスレが２日で終わるほど賑やかなときも経験したし、
俺も仙人のつもりで１スレに１００レス以上毎日書いていたときもあった
いろんな「妖精さん」が湧いては消えていった。
JS2.0、そしてES2015のときはRubyキチやらとスレを跨いでやりあったものだ。
時代がまた変わる。このスレの役割も変わるときが来る。
そういうことだ。

2022/12/06(火) 22:22:56.10

分かったから続きはポエム板でやってくれよ

2022/12/06(火) 23:07:52.94

やっぱclassよりprotetypeだよな。

2022/12/06(火) 23:29:16.93

GitHub Copilot は、日本語でコメントを書くとコーディングしてくれる

【技術ネタ】CopilotとDeepLを使って（ほぼ）何も考えずにElixirでAtCoderの問題を解いてみた
www.youtube.com/watch?v=c-ZIcxcgvrw&t=168s

これは、プログラミングコンテストの日本語の問題文を、
DeepLで英訳してから、コメントに貼り付ける

2022/12/07(水) 17:23:34.07

こういう事って可能なんでしょうか？

mainfn();

function mainfn(){
hensufn();
W=x1+x2+x3;
H=y1+y2+y3;
}

hensufn(){
var x1=2;
var x2=4;
var x3=5;
var y1=9;
var y2=3;
var y3=1;
}

前にこういうコードを書いた時にエラーが出たと思うのですが…

2022/12/07(水) 18:01:02.69

可能か不可能かの前にまずスコープというものを勉強した方がいいと思う

2022/12/07(水) 19:11:07.51

本を読んできました
グローバル変数にしないとダメなんですね
わかりました

2022/12/07(水) 19:42:10.53

男ならプロトタイプ！

2022/12/07(水) 22:38:00.36

数字.toFixed(3)でおかしな結果になるので色々調べたら、元は数値だったのに文字型に変換されるんだね
parseFloat(数字.toFixed(3))で事無きを得た

2022/12/09(金) 03:43:04.42

プロトタイプ以外は帰ってくれ。

2022/12/09(金) 07:27:33.15

>>345
グローバル変数はバグの温床だからやめておいて
引数とreturn値を使ってカプセルかしてね

引数もreturn値も使わないのなら
let param={
x1:1,x2:2...
}
とかして、

param.x1+param,x2...
とかで呼び出したほうがコリジョンさけられるのでいいかなと

windowやdocumentに持たせるべきパラメータは是ですが
持たせるべきでないパラメータはwindowなどに持たせないのが
私のひーひーおじいちゃんからの教えです

2022/12/09(金) 08:51:23.05

そもそも>>343みたいな発想が出てくる時点で関数というものに対する認識が危ういよね
手を動かすのはもちろん大事だけど並行して座学も大切だと痛感する

2022/12/09(金) 15:20:35.56

いやいや最初はそんなもんでしょ
自分は今でも失笑コードばっかりですし
どんなコードでも書き続けることに価値があると
じっちゃまが言ってた

2022/12/09(金) 15:37:23.27

C言語なら、#define hensufn() で、
質問の内容を実現できるから、そっちもちょっと勉強してみるといいだろう
あくまでも参考として。蛇足だが、関数じゃなくてマクロだが
そういうのとごっちゃにしないためにも、理解しておくといい

2022/12/09(金) 15:45:36.78

>>351
だからその「そんなもん」から次のステップに進むためには知識を身に付けることも重要って言ってるのよ
コードを書き続けることを否定してるわけじゃないよ

2022/12/09(金) 16:08:24.10

>>352
今の状態の質問者に別言語の概念を持ち出しても余計に混乱を招くだけだろう
時期尚早だと思う

2022/12/09(金) 16:36:12.81

>>353
その通りですね
infoやMDNを完璧理解程度をとりあえずの目標としたらいいですね

2022/12/09(金) 17:10:52.86

>>352
今時そんなクソマクロ勧めるなよ

2022/12/09(金) 17:27:50.18

>>355
んー、皮肉のつもりで言ってる？
完璧理解なんかは必要ないでしょ

2022/12/09(金) 17:40:09.94

「ごっちゃにしないためにも」て書いたろ
また、住人はいろんな技量なんだから
各人が自分なりに受け止めればいい

2022/12/09(金) 18:24:14.89

「ごっちゃにしないためにも」って関数とマクロをってこと？

2022/12/09(金) 21:28:33.63

addEventListener()のイベントオブジェクトのように、
引数にあてる関数の中のさらにその引数に特別なオブジェクトをおく
変わったメソッドは他にありますか？

2022/12/10(土) 03:33:43.66

>>360
コールバック関数について調べることをお勧めする

2022/12/10(土) 07:13:56.55

>>357
皮肉なんて言わないです
infoは入門者には最適だと思いますし
知っておくべき内容だと思います
infoを理解しておけばMDNも一覧してほとんど理解できるでしょ
リファレンスだし

覚える必要はないけど
理解する程度の負荷はそんな重くないですよ

2022/12/10(土) 10:08:41.30

>>362
誤解だったのならすまんね
MDNだったらチュートリアルが揃ってるしそれを一通りやってみるぐらいでいいかなと
あとは疑問がわいたらまずリファレンスを漁る習慣付け

2022/12/10(土) 17:05:35.95

>>363
いえいえ、こちらこそありがとうございます！
自分もまだ初学者レベルですのでいろいろ教えてください！

2022/12/10(土) 22:31:23.08

プロトタイプだけで、丼飯三杯は行ける！

2022/12/11(日) 20:36:45.56

>>365
プロトタイプについて語ってください

2022/12/11(日) 20:55:00.83

>>366
JS最強の秘伝なり。

2022/12/11(日) 21:46:43.64

>>367
語れないんですねｗ

2022/12/11(日) 22:29:35.67

>>368
一子相伝の秘技だからな。

2022/12/12(月) 01:25:48.09

MOV = []
for(g=0; g<GUI.length; g++){
MOV.push([Math.abs(GUI[g]-Bs[0]), GUI[g]-Bs[0]])
MOV.push([Math.abs(GUI[g]-Bs[2]), GUI[g]-Bs[2]])
}

これですが、MOVの配列の末尾に何かを加えようとしてるのはわかるのですが、何を加えようとしてるのでしょうか？
[　,　]の所の意味がわかりません
MOV.push(Math.abs(GUI[g]-Bs[0]), GUI[g]-Bs[0])ではダメなのでしょうか？

2022/12/12(月) 01:50:55.99

MOV = []
MOV.push([1, 2])
console.log(MOV) // [[1, 2]]

MOV = []
MOV.push(1, 2)
console.log(MOV) // [1, 2]

2022/12/12(月) 02:10:37.00

>>371
ありがとうございます

うーん
難しいな
[絶対値にしたもの、絶対値にしてないもの]を[　]でひとまとめにする理由は何なんだろう？
console.logを挟んで値を確認しながら考えないとわかりませんね

2022/12/12(月) 02:23:13.76

もしかして配列が入れ子になってるんでしょうか？
その後にSx.translate(MOV[0][1], 0)っていうコードが出て来るのですが…
MOV[0][1]の所が意味がわからなかったんですけど、
[[◯,●],[◯,◯],…]の●を指定してるんでしょうか？

2022/12/12(月) 02:45:20.07

>>373
その認識で合ってる。
MOV は配列で、その各要素も配列(2要素の配列)。
なんでそんな構造にしてるのかは知らん。

2022/12/12(月) 07:38:12.53

>>373が聞いてるのは
translateがJSのcontextの関数なら
translate(100,50)はコンテキスト自体が右に100、下に50移動する

右移動量を絶対値にして移動させるってことかにゃん

2022/12/12(月) 11:24:58.04

>>374
ありがとうございます

>>375
そうです
全コード載せてみます
geometricBoundsは四角形の2点の座標を得るメソッドで、変数に[左上のx座標、左上のy座標、右下のx座標、右下のy座標]の順に格納されます

2022/12/12(月) 11:25:36.96

SEL = activeDocument.selection
PAT = activeDocument.pathItems
STB = app.preferences.getBooleanPreference("includeStrokeInBounds")

MAINfn()

function MAINfn(){
if(SEL.length == 0) return
GUI = []
for(p=0; p<PAT.length; p++) PATfn(PAT[p])
if(GUI.length == 0) return
for(s=0; s<SEL.length; s++) SELfn(SEL[s])
}

function PATfn(Px){
if(!Px.guides) return
Bp = Px.geometricBounds
GUI.push(Bp[0])
GUI.push(Bp[2])
}

2022/12/12(月) 11:26:49.23

2022/12/12(月) 11:28:43.67

「一番近いガイドに図形を吸着させる」スクリプトです
app.preferences.getBooleanPreferenceは無視してもらっていいです
環境設定の予備的なものなので。
function BNDfn(Bx)以下も環境設定の予備的なものなので無視でいいです
[絶対値と絶対値でないもの]を入れ子にする意味が知りたいです

2022/12/12(月) 12:27:02.66

>>379
配列MOVをソートするSORTfnで[◯,●]の◯を利用してるのは読み取れる？

2022/12/12(月) 13:06:21.02

>>380
ソートで利用するために [　,　] の入れ子にしてるだけですか？

2022/12/12(月) 13:16:44.67

>>381
まず聞かれたことに対してYESかNOで答えようよ

2022/12/12(月) 13:25:11.50

>>38
ありがとうございます
わかりました
[◯,●]の◯はソートをするために利用している
絶対値が一番小さい◯を先頭に並べ替えて（距離が一番近い）、それと対になってる●だけtranslateで移動している
ということですね

2022/12/12(月) 13:25:56.97

× >>38
◯ >>382

2022/12/12(月) 13:29:27.02

余談だが、>>378
sort の比較関数ってわざわざそういうまどろっこしい実装にしてるのをよく見るけど、数値なら

function(a,b){
return a[0] - b[0];
}

でいいのよ。
順序を見る要素が複数あるなら

function(a,b){
let c = a[0] - b[0];
if (c) return c;
c = a[1] - b[1];
if (c) return c;
return a[2] - b[2];
}

とか、短い表現なら

function(a,b){
let c;
if (c = a[0] - b[0]) return c;
if (c = a[1] - b[1]) return c;
return a[2] - b[2];
}

とか。
これをループで回すのも有りかも。

あ、複数要素の比較はあくまで例であって、>>378 のデータ構造とは関係無いよ。

2022/12/12(月) 13:34:52.14

ガイドが、動かしたいオブジェクトの右にあるか左にあるか確定して無いんですよ
だからMath.absで絶対値にして距離を測ってるのか…
そして配列の入れ子にしてソート
勉強になるな
ここだけ他のスクリプトでも使える

2022/12/12(月) 13:39:57.47

>>386
abs なんてほとんどコストかからないんだから、元の値と絶対値の両方を保存するのは無駄な気がする。
配列の保存やアクセスの方がコストかかったりして。

2022/12/12(月) 13:45:29.13

命名や処理内容を見る限りあまり参考にすべきコードではないように感じる

2022/12/12(月) 13:50:47.16

>>377
転載禁止なのを勝手に載せたらあかんわ
gorolib.blog.jp/archives/72193707.html

2022/12/12(月) 14:04:35.37

絶対値が一番小さいものを選ぶだけならこんな大掛かりにする必要そもそもない気が

2022/12/12(月) 14:26:01.70

>>372
まず
[1, 2, 3 ] で配列ができる
new Array(1,2,3) の省略型

2022/12/12(月) 14:32:46.45

イラストレータのappかぃ

2022/12/12(月) 15:49:23.10

>>391
なぜ配列にしているのかを聞いているのであって
記法に関する質問をしているわけではないだろう

2022/12/12(月) 17:14:12.48

設定でjs使ってるみたいなのでjsスレで質問してるようだけどスレチのような・・・

2022/12/12(月) 17:18:01.39

オブジェクトの配列にすれば分かりやすいな

2022/12/12(月) 17:19:55.56

連投すみません
>>379さん
PC等->CG->Illustrator総合
のほうがいいかもですね

2022/12/12(月) 20:05:16.68

>>396
CG板のIllustratorスレはわかりませんが、DTP板のIllustratorスレではscriptがわかる人が1人くらいしか居ません
たまたまその人が居なかったら、何日も放置になってしまうし…
ここの人たちの方がscriptのメソッドとかもほとんどわかるし
Illustratorの図形といっても、xy座標に図形が並んでるだけの、ほとんど移動する時の足し算と引き算だけです

2022/12/12(月) 20:10:18.24

[◯,●]の◯をソートのために利用してるなんて、独りで考えてたら絶対思い付かなかったと思います

2022/12/12(月) 20:14:44.98

>>398
JSスレの神様たちは優しい感じですもんね
がんばってくださいね！

2022/12/12(月) 20:37:06.98

>>398
ソートの手法としては収穫があったようでなにより。
でも他にも指摘があるように、アルゴリズムとしては今一つだから全体としてはあまり参考にするほどじゃないと思う。
それは距離の一番小さい相手を探す方法として距離でソートしてその一番最初を採るという手順を使ってるよね。
でも、最初から距離が一番小さいものを探せばループ 1回で答えが出る。
こんなかんじ？

function SELfn(Sx) {
Bs = BNDfn(Sx);
dmin = 99999
dsel = 0
for(g = 0; g < GUI.length; g++) {
for (b = 0; b <= 2; b += 2) {
d = GUI[g] - Bs[b]
a = Math.abs(d)
if (a < dmin) {
dmin = a
dsel = d
}
}
if (dmin < 99999) Sx.translate(dsel, 0)
}

2022/12/12(月) 20:39:31.01

>>398
MOV変数の行方を追って数行コードを読んだだけだよ
何も難しいことの種明かしをしたわけじゃない
今回人に聞いて答えを得たなら次は自分でそれにたどり着けるようになろう

2022/12/12(月) 22:12:32.05

>>400
これだとソート関数いらないんですか？
かなりコンパクトになりますね
ダイアログを表示させて吸着方向を上下左右選べるスクリプトを作ろうと思ってるので、こちらで作ってみます

2022/12/13(火) 02:24:56.21

>>402
閉じかっこひとつ抜けてた。
最後の if の前に } が要る。

2022/12/13(火) 11:11:56.07

>>403
こうですか？

function SELfn(Sx) {
Bs = BNDfn(Sx);
dmin = 99999
dsel = 0
for(g = 0; g < GUI.length; g++) {
for (b = 0; b <= 2; b += 2) {
d = GUI[g] - Bs[b]
a = Math.abs(d)
if (a < dmin) {
dmin = a
dsel = d
}
}
}
if (dmin < 99999) Sx.translate(dsel, 0)
}

2022/12/13(火) 12:03:25.74

君、プロトタイプをやりたまえ。

2022/12/13(火) 14:26:18.57

>>404
そそ

2022/12/13(火) 16:55:31.25

プロトタイプとは何なのかを教え給え

クラスとかコンストラクタを書くんじゃなくて、『function hoge(a, b){}』にプロパティやメソッドや戻り値定義すればいいの？

2022/12/13(火) 18:39:15.95

>>407
プロパティを参照する時、「対象オブジェクトの直属のプロパティ」だけでなく、[[Prptotype]] と呼ばれる内部プロパティ内にあるプロパティも検索対象となる仕組みを「プロトタイプチェーン」という

2022/12/13(火) 19:12:20.42

>>408
プロパティを参照する時、対象オブジェクトの直属にプロパティへの参照がない場合、[[Prptotype]] と呼ばれる内部プロパティ内にあるプロパティへの参照を走査する仕組みを「プロトタイプチェーン」という
なお[[Prototype]]はnewで生成される親のprototypeへの参照が格納されるが、動的に[[Prototype]]をセットすることもできる

でどうでしょう？

2022/12/13(火) 20:14:40.67

>>409
プロトタイプに「親」という概念はない
クラスベース言語の考えが混ざってる気がする

2022/12/13(火) 20:36:49.94

>>410
えええええ？そうなんですか？
継承あるのに親がいない？？？

2022/12/13(火) 22:34:12.05

>>410
僕は理解が浅いのでもっと学習しないと。
JSはprptotypeの理解が深まると幅が広がりそうですね
僕ももっと勉強進めないと

2022/12/14(水) 00:03:47.61

>>411-412
プロトタイプベースとクラスベースの違いを理解することから始めよう
https://www.google.com/search?q=%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%99%E3%83%BC%E3%82%B9+%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9&ie=UTF-8

親クラス、子クラス、継承は、クラスベース由来の用語
多くのサイトでクラスベースに慣れた人用に使われている用語だが、クラスベースのつもりで受け取ると誤った機能理解に繋がる

クラスベースはインスタンス生成時に親クラスを複製するが、プロトタイプベースは複製しない
プロトタイプベースはプロトタイプに手を加えると「全てのプロトタイプを元にしたオブジェクト」に影響する

「継承」や「クラス」という用語を使うのは問題ないが、プロトタイプでどのように継承やクラスを実装しているのかは理解する必要がある

2022/12/14(水) 00:19:25.91

プロトタイプ最強伝説！

2022/12/14(水) 07:32:29.92

protptypeを使い、new演算子でインスタンスを継承でき、
さらにプロトタイプチェーンで始祖子孫を関連付けられるのに
親子関係という概念はJSにはないんですねー

2022/12/14(水) 07:55:29.99

ちょっと調べてみたけど、JSに親子関係は存在しない、的な記事はない
MDNには親子表現はないけれど、JSの継承で親子表現してる記事は多数ある
親子関係はクラスの拡張、実装、インスタンス生成でも使われるけど
親子関係自体を定義した言語なんて存在しない、あくまで機能の表現方法
であるにもかかわらず、プロトタイプ言語に親子関係が存在しないというのは
どこかにそういう記述があると思うのですが、参照場所を教えていただけませんか？

2022/12/14(水) 12:33:00.70

プロトタイプベースでは、親ではなく雛形という概念を用いる（それこそがプロトタイプ）
JavaScriptはプロトタイプベースのオブジェクト指向言語の代表格だが
その JavaScriptにも、ES2015(ES6) でクラスベース構文が導入されたので、
使い手の側としては、思想・概念・用語が入り乱れる事になったのかも知れません

2022/12/14(水) 13:15:16.28

あらためてMDNを概覧しましたが
417さんの力説されているとおりかもしれませんね
今後はご指摘の件、頭にいれながら勉強します
ながながとありがとうございます！今後ともよろしくです

2022/12/14(水) 14:22:13.24

個人的にクラス≒雛形って考えだからプロトタイプはわかるけどクラスベースがわからなかった

「雛形クローンして用意してあるの変えるだけだろ？」って

2022/12/15(木) 01:00:33.27

>>418
よくぞ言った、プロトタイプ使徒よ！

2022/12/16(金) 14:16:16.56

みんなはフレームワーク使ってる？
それともJS直接使ってる？

2022/12/16(金) 14:22:39.89

お前から発表しろよ
アンケートだから職種、年俸、年齢、結婚歴は必須な

2022/12/17(土) 12:10:49.73

>>422
職種：プロトタイプ
年俸：プロトタイプ
年齢：プロトタイプ
結婚歴：プロトタイプ

2022/12/17(土) 13:15:46.84

質問させてください

<style>
#d1,#d2{ color:blue}
</style>

<div id="d1"></div>
<div id="d2"></div>

<script>
</script>

JSで、<style>内の#d1,#d2セレクタの設定を編集したいのですが
特定のセレクタ部分だけを取得して変更ってできますか？

2022/12/17(土) 13:44:50.71

>>424
https://developer.mozilla.org/ja/docs/Web/API/StyleSheetList

2022/12/17(土) 13:49:34.17

>>424
変更はこっちだった
https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList