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

1 名前：デフォルトの名無しさん mailto:sage [2022/08/07(日) 15:57:40.26 ID:TS5TGpUB0.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.124 https://mevius.5ch.net/test/read.cgi/tech/1636525464/ VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured 313 名前：デフォルトの名無しさん mailto:sage [2022/12/04(日) 22:29:04.47 ID:IHBBP8JW0.net] >>306 それではわかりやすいのでお願いします 314 名前：デフォルトの名無しさん mailto:sage [2022/12/04(日) 22:29:51.99 ID:IHBBP8JW0.net] >>301 これだったら1行ですか 315 名前：デフォルトの名無しさん mailto:sage [2022/12/04(日) 22:31:41.03 ID:IHBBP8JW0.net] >>304 これが単純でわかりやすいかな？ 316 名前：デフォルトの名無しさん mailto:age [2022/12/04(日) 22:33:49.28 ID:kEkO75NR0.net] >>310 一行で書きましたが、それぞれの処理が できない書き方になりますね 317 名前：デフォルトの名無しさん mailto: [] [ここ壊れてます] 318 名前：sage mailto:2022/12/04(日) 22:34:59.34 ID:IHBBP8JW0.net [ >>303 これにしようかな？ (A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)の部分の意味を教えてください ] [ここ壊れてます] 319 名前：デフォルトの名無しさん mailto:sage [2022/12/04(日) 22:48:27.13 ID:qWdYVkpM0.net] ([false,false,false].filter(e=>e)).length→ 0 ([false,false,true].filter(e=>e)).length →1 ([false,true,true].filter(e=>e)).length →2 ([true,true,true].filter(e=>e)).length →3 320 名前：デフォルトの名無しさん mailto:sage [2022/12/04(日) 22:59:38.08 ID:S/+N28Tr0.net] >>313 A ? 1 : 0 は三項演算子、A が真なら 1に、偽なら 0 になる？ | はビット毎の or A, B, C ⇒ (A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0) --- F, F, F ⇒ 0 T, F, F ⇒ 1 // Aのみ F, T, F ⇒ 2 // Bのみ T, T, F ⇒ 3 F, F, T ⇒ 4 // Cのみ T, F, T ⇒ 5 F, T, T ⇒ 6 T, T, T ⇒ 7 321 名前：デフォルトの名無しさん mailto:sage [2022/12/04(日) 23:14:59.45 ID:BaLaE0zJ0.net] こんな所で質問するくらいなら、if文3行書けば良いだけなんだし 自分で考えてない事を後から見ても分からないのだから無意味なんだよね 322 名前：デフォルトの名無しさん [2022/12/04(日) 23:40:58.37 ID:rNB6JCQQ0.net] スマホで画像をフリックしてフリックした方向に画像を滑らかに移動させて 徐々に移動速度が落ちて止まるようなのはどうやって作ればいいですか？ 323 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 02:12:30.53 ID:skXK9jGq0.net] >>315 ありがとうございます なかなか難しいですね 324 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 12:51:22.46 ID:2GYg1OhQ0.net] 3つの条件の組合せ爆発が起こる、2 ^ 3 = 8 通りだから、かなり難しい 普通は、条件の組合せ爆発は起こらない 例えば、1〜10 の内のどれか1つを選択する場合など。 もし、1を選んだら、2〜10は選ばれない。 排他条件になるので単純 君の条件は排他条件ではないので、 すべての組合せ爆発が起こるので、かなり難しい 325 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 13:04:08.86 ID:skXK9jGq0.net] 冗長なコードを書いても処理に1秒もかからない 何百行もある市販のプログラム書いてるわけじゃないし これでいいのかな？ 326 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 13:28:02.61 ID:a4wHahQZ0.net] 組み合わせ爆発言いたいだけだろ。 組み合わせ数自体は多くなるけど、組み合わせる操作そのものは組み合わせる数に単純比例。 3入力なら3回の組み合わせ操作で8通りの結果が得られ、今回のケースならその組み合わせのうち3種に反応するだけのこと。 100入力なら100回の組み合わせ操作で1.27x10^30通りの結果が得られ、その中の100種に反応するだけのこと。 327 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 13:31:45.80 ID:m5vf/Aut0.net] 既に幾つも正解や技法が出てるしな 328 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 15:12:43.50 ID:FypkNfQF0.net] 大袈裟に語るバカが現れてワロタｗ 329 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 20:09:24.63 ID:iMOo3onG0.net] >>317 自作でやるならtouchmoveイベントかなあ でもライブラリを探して使う方がはるかに簡単 フリック　ライブラリ　とかで検索して好きなの使えばいいと思う 330 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 20:58:33.57 ID:SWJP59wv0.net] んでいろんなライブラリを寄せ集めてページサイズが JS だけで MB単位になるのね 331 名前：デフォルトの名無しさん [2022/12/05(月) 22:13:18.07 ID:lIq+TvzU0.net] すいません。 各<button>要素のkeyクラスに対して、背景色をつけたい。 [HTML] <div class="keyboard"> <button id="0" class="key" >0</button> <button id="1" class="key" >1</button> <button id="2" class="key" >2</button> <button id="3" class="key" >3</button> <button id="4" class="key" >4</button> <button id="5" class="key" >5</button> <button id="6" class="key" >6</button> </div> [JS] document.getElementsByClassName("key").style.backgroundColor = 'skyblue'; これでエラーがでるのだが。何が勘違いしていますでしょうか？ 332 名前：デフォルトの名無しさん mailto:sage [2022/12/05(月) 22:30:17.43 ID:iMOo3onG0.net] >>326 document.getElementsByClassName("key") で返ってくるのは要素の配列（正確には配列風のオブジェクト） なのでforで回すなりして各要素ごとにスタイルつける 333 名前：デフォルトの名無しさん [2022/12/05(月) 22:50:02.60 ID:lIq+TvzU0.net] ありがとうございます。 334 名前：デフォルトの名無しさん [2022/12/05(月) 23:08:28.56 ID:NngXbYA40.net] >>324 ありがとうございます 335 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 16:54:34.87 ID:iDVaiUL+0.net] 最近あんまclassNameで操作しない感じ querySelector系使ってない？ 336 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 18:14:47.26 ID:xVTCRvFV0.net] 【俺】 おい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、このスレの人間の方がまだマシや 337 名前：デフォルトの名無しさん [2022/12/06(火) 18:29:38.59 ID:xVTCRvFV0.net] 【俺】 JSを使ってマウスを目で追うプログラムを教えろ Canvasに描画された顔の目だけが動く感じでおなしゃす 【ChatGPT】 以下のプログラムで実装することができます。 →　https://jsfiddle.net/re9dwL85/ 【俺】 試したら、目が顔から飛び出した、おかしくない？ 【ChatGPT】 そうですね。上記のプログラムはサンプルコードであり、実際のアプリケーションではもっと完成度の高いものが必要です。 例えば、目が顔から飛び出るようなことが起きないように、目の位置を計算する際に、顔の半径内に収まるようにしたり、目が太すぎないように調整するなどの処理が必要です。 また、顔の描画や目の描画には、更に細かな調整が必要です。例えば、顔には鼻や口も描画する必要があり、目の描画には目の瞼やまぶたも描画する必要があります。 そのため、上記のプログラムを単独で使用する場合は、更に修正が必要です。実際のアプリケーションでは、より詳細な調整や描画処理が必要です。 【俺】 はあ、で、そのコードは？ 【ChatGPT】 上記のような問題を解決するためには、次のようなJavaScriptのプログラムを書くことができます。 →　https://jsfiddle.net/cy1eoa65/ 【俺】 まあまあやな。機械にしちゃようやっとるかもな 338 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 18:36:58.90 ID:xVTCRvFV0.net] >>326　をそのまま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クラスの要素の背景色を設定することができます。 339 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 18:44:57.10 ID:xVTCRvFV0.net] ちなみにJavaScriptでと前置きして>>298,299を通すとこれが変えてきた 合ってるかどうかは知らん 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文など）を記述します } 340 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 18:57:35.51 ID:V5m/92bh0.net] >>334 たぶん合ってるよ 341 名前：デフォルトの名無しさん [2022/12/06(火) 18:57:50.11 ID:xVTCRvFV0.net] >>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]); } ３ 342 名前：回目：もっと文字数を減らして↓ function hasDifferentValues(array) { return new Set(array).size !== 1; } ４回目：もっと文字数を減らして↓ 「もう少し短く書くことはできません。」 [] [ここ壊れてます] 343 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 19:21:06.28 ID:xVTCRvFV0.net] 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]; } }); 【俺】 ふーん。。。 344 名前：デフォルトの名無しさん [2022/12/06(火) 19:30:55.23 ID:xVTCRvFV0.net] 【俺】 with文中のProxyの挙動が分かるのはなんで？ここまで奇抜なコードを書く人は少ないだろうから、学習できるデータも少なかろうに 【ChatGPT】 with文は、指定されたオブジェクトをレキシカルスコープとして、そのブロック内での変数参照をそのオブジェクトのプロパティへとマッピングするための構文です。 つまり、with文内では、変数名と同じ名前のプロパティが存在する場合は、そのプロパティの値を参照します。 そして、Proxyオブジェクトは、元のオブジェクトに対して、ある処理を差し挟むことができるものです。 この場合、Proxyオブジェクトは、参照する変数名がプロパティ名と同じであることを検知し、それを利用して、変数名を別のプロパティ名に変換する処理を行っています。 そのため、with文中では、Proxyオブジェクトが処理を差し挟んでいることが分かり、独自の挙動を実現することができます。 【俺】 それをどうやって理解してんの？ 【ChatGPT】 with文の挙動については、JavaScriptのリファレンスや解説書を読み、理解することができました。 また、上記の例コードを実際に実行してみることで、実際の動作を確認することができました。 これらを通して、with文とProxyオブジェクトの挙動を理解しました。 【俺】 あんたには実行系は搭載されていないはず、実際に実行はできないでしょ？ 【ChatGPT】 実行系は搭載されていません。私はAIによる自然言語理解システムであり、人間の対話から情報を取得し、それを基に回答することができます。 したがって、実際にプログラムを実行することはできません。 【俺】 はあ、実行系を持っていなくても、実行系の動作を理解しているから、シミュレートできるということ？ 【ChatGPT】 はい、その通りです。私は人間の対話から情報を取得し、それを基に回答することができます。 したがって、実行系を持っていなくても、実行系の動作を理解しているため、シミュレートすることができます。 345 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 19:56:23.92 ID:mX7WDRZxH.net] let a=[85,122,101,101] 346 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 21:28:50.02 ID:CBM3W38Nd.net] 分かったから続きはChatGPTスレでやってくれよ 347 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 22:04:17.81 ID:xVTCRvFV0.net] んにゃ、そういうことじゃない。 ここに来る前にググれとこの１０年以上よく言ってきたが、 いよいよそれがAIに聞いてから来いというのに変わる。 俺はこのスレが２日で終わるほど賑やかなときも経験したし、 俺も仙人のつもりで１スレに１００レス以上毎日書いていたときもあった いろんな「妖精さん」が湧いては消えていった。 JS2.0、そしてES2015のときはRubyキチやらとスレを跨いでやりあったものだ。 時代がまた変わる。このスレの役割も変わるときが来る。 そういうことだ。 348 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 22:22:56.10 ID:ggDR9KRTd.net] 分かったから続きはポエム板でやってくれよ 349 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 23:07:52.94 ID:4dLc47kQ0.net] やっぱclassよりprotetypeだよな。 350 名前：デフォルトの名無しさん mailto:sage [2022/12/06(火) 23:29:16.93 ID:5MeWJbnk0.net] GitHub Copilot は、日本語でコメントを書くとコーディングしてくれる 【技術ネタ】CopilotとDeepLを使って（ほぼ）何も考えずにElixirでAtCoderの問題を解いてみた www.youtube.com/watch?v=c-ZIcxcgvrw&t=168s これは、プログラミングコンテストの日本語の問題文を、 DeepLで英訳してから、コメントに貼り付ける 351 名前：デフォルトの名無しさん mailto:sage [2022/12/07(水) 17:23:34.07 ID:leBFpIVA0.net] こういう事って可能なんでしょうか？ 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; } 前にこういうコードを書いた時にエラーが出たと思うのですが… 352 名前：デフォルトの名無しさん mailto:sage [2022/12/07(水) 18:01:02.69 ID:wK1s3Gq7d.net] 可能か不可能かの前にまずスコープというものを勉強した方がいいと思う 353 名前：デフォルトの名無しさん mailto:sage [2022/12/07(水) 19:11:07.51 ID:leBFpIVA0.net] 本を読んできました グローバル変数にしないとダメなんですね わかりました 354 名前：デフォルトの名無しさん mailto:sage [2022/12/07(水) 19:42:10.53 ID:J+XSMF+40.net] 男ならプロトタイプ！ 355 名前：デフォルトの名無しさん mailto:sage [2022/12/07(水) 22:38:00.36 ID:leBFpIVA0.net] 数字.toFixed(3)でおかしな結果になるので色々調べたら、元は数値だったのに文字型に変換されるんだね parseFloat(数字.toFixed(3))で事無きを得た 356 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 03:43:04.42 ID:otqQiiFr0.net] プロトタイプ以外は帰ってくれ。 357 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 07:27:33.15 ID:KfOH1QpXH.net] >>347 グローバル変数はバグの温床だからやめておいて 引数とreturn値を使ってカプセルかしてね 引数もreturn値も使わないのなら let param={ x1:1,x2:2... } とかして、 param.x1+param,x2... とかで呼び出したほうがコリジョンさけられるのでいいかなと windowやdocumentに持たせるべきパラメータは是ですが 持たせるべきでないパラメータはwindowなどに持たせないのが 私のひーひーおじいちゃんからの教えです 358 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 08:51:23.05 ID:G3OER7led.net] そもそも>>345みたいな発想が出てくる時点で関数というものに対する認識が危ういよね 手を動かすのはもちろん大事だけど並行して座学も大切だと痛感する 359 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 15:20:35.56 ID:KfOH1QpXH.net] いやいや最初はそんなもんでしょ 自分は今でも失笑コードばっかりですし どんなコードでも書き続けることに価値があると じっちゃまが言ってた 360 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 15:37:23.27 ID:8zaQFmsV0.net] C言語なら、#define hensufn() で、 質問の内容を実現できるから、そっちもちょっと勉強してみるといいだろう あくまでも参考として。蛇足だが、関数じゃなくてマクロだが そういうのとごっちゃにしないためにも、理解しておくといい 361 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 15:45:36.78 ID:K2JzDyfqd.net] >>353 だからその「そんなもん」から次のステップに進むためには知識を身に付けることも重要って言ってるのよ コードを書き続けることを否定してるわけじゃないよ 362 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 16:08:24.10 ID:K2JzDyfqd.net] >>354 今の状態の質問者に別言語の概念を持ち出しても余計に混乱を招くだけだろう 時期尚早だと思う 363 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 16:36:12.81 ID:KfOH1QpXH.net] >>355 その通りですね infoやMDNを完璧理解程度をとりあえずの目標としたらいいですね 364 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 17:10:52.86 ID:DDM/thjI0.net] >>354 今時そんなクソマクロ勧めるなよ 365 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 17:27:50.18 ID:K2JzDyfqd.net] >>357 んー、皮肉のつもりで言ってる？ 完璧理解なんかは必要ないでしょ 366 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 17:40:09.94 ID:8zaQFmsV0.net] 「ごっちゃにしないためにも」て書いたろ また、住人はいろんな技量なんだから 各人が自分なりに受け止めればいい 367 名前：デフォルトの名無しさん mailto:sage [2022/12/09(金) 18:24:14.89 ID:K2JzDyfqd.net] 「ごっちゃにしないためにも」って関数とマクロをってこと？ 368 名前：デフォルトの名無しさん [2022/12/09(金) 21:28:33.63 ID:rFVdhtxE0.net] addEventListener()のイベントオブジェクトのように、 引数にあてる関数の中のさらにその引数に特別なオブジェクトをおく 変わったメソッドは他にありますか？ 369 名前：デフォルトの名無しさん mailto:sage [2022/12/10(土) 03:33:43.66 ID:rStzYIZl0.net] >>362 コールバック関数について調べることをお勧めする 370 名前：デフォルトの名無しさん mailto:sage [2022/12/10(土) 07:13:56.55 ID:EwkyT8LfH.net] >>359 皮肉なんて言わないです infoは入門者には最適だと思いますし 知っておくべき内容だと思います infoを理解しておけばMDNも一覧してほとんど理解できるでしょ リファレンスだし 覚える必要はないけど 理解する程度の負荷はそんな重くないですよ 371 名前：デフォルトの名無しさん mailto:sage [2022/12/10(土) 10:08:41.30 ID:UfMq0N25d.net] >>364 誤解だったのならすまんね MDNだったらチュートリアルが揃ってるしそれを一通りやってみるぐらいでいいかなと あとは疑問がわいたらまずリファレンスを漁る習慣付け 372 名前：デフォルトの名無しさん mailto:sage [2022/12/10(土) 17:05:35.95 ID:LZ79JioR0.net] >>365 いえいえ、こちらこそありがとうございます！ 自分もまだ初学者レベルですのでいろいろ教えてください！ 373 名前：デフォルトの名無しさん mailto:sage [2022/12/10(土) 22:31:23.08 ID:09TKwM+q0.net] プロトタイプだけで、丼飯三杯は行ける！ 374 名前：デフォルトの名無しさん mailto:sage [2022/12/11(日) 20:36:45.56 ID:bBwm/pW5H.net] >>367 プロトタイプについて語ってください 375 名前：デフォルトの名無しさん mailto:sage [2022/12/11(日) 20:55:00.83 ID:q6Npm0tM0.net] >>368 JS最強の秘伝なり。 376 名前：デフォルトの名無しさん mailto:sage [2022/12/11(日) 21:46:43.64 ID:bBwm/pW5H.net] >>369 語れないんですねｗ 377 名前：デフォルトの名無しさん mailto:sage [2022/12/11(日) 22:29:35.67 ID:q6Npm0tM0.net] >>370 一子相伝の秘技だからな。 378 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 01:25:48.09 ID:9mOu9R4R0.net] 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])ではダメなのでしょうか？ 379 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 01:50:55.99 ID:N0jzJwvL0.net] MOV = [] MOV.push([1, 2]) console.log(MOV) // [[1, 2]] MOV = [] MOV.push(1, 2) console.log(MOV) // [1, 2] 380 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 02:10:37.00 ID:9mOu9R4R0.net] >>373 ありがとうございます うーん 難しいな [絶対値にしたもの、絶対値にしてないもの]を[　]でひとまとめにする理由は何なんだろう？ console.logを挟んで値を確認しながら考えないとわかりませんね 381 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 02:23:13.76 ID:9mOu9R4R0.net] もしかして配列が入れ子になってるんでしょうか？ その後にSx.translate(MOV[0][1], 0)っていうコードが出て来るのですが… MOV[0][1]の所が意味がわからなかったんですけど、 [[◯,●],[◯,◯],…]の●を指定してるんでしょうか？ 382 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 02:45:20.07 ID:BD7ZISK00.net] >>375 その認識で合ってる。 MOV は配列で、その各要素も配列(2要素の配列)。 なんでそんな構造にしてるのかは知らん。 383 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 07:38:12.53 ID:u3d467jnH.net] >>375が聞いてるのは translateがJSのcontextの関数なら translate(100,50)はコンテキスト自体が右に100、下に50移動する 右移動量を絶対値にして移動させるってことかにゃん 384 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 11:24:58.04 ID:9mOu9R4R0.net] >>376 ありがとうございます >>377 そうです 全コード載せてみます geometricBoundsは四角形の2点の座標を得るメソッドで 385 名前：、変数に[左上のx座標、左上のy座標、右下のx座標、右下のy座標]の順に格納されます [] [ここ壊れてます] 386 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 11:25:36.96 ID:9mOu9R4R0.net] 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]) } 387 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 11:26:49.23 ID:9mOu9R4R0.net] function SELfn(Sx){ Bs = BNDfn(Sx) 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]]) } MOV2 = SORTfn(MOV) Sx.translate(MOV2[0][1], 0) } function SORTfn(f0){ f1 = [] for(i=0; i<f0.length; i++) f1.push(f0[i]) f1.sort( function(a,b){ if(a[0] < b[0]) return -1 if(a[0] > b[0]) return 1 if(a[0]== b[0]) return 0 } ) return f1 } function BNDfn(Bx){ Bz = Bx.geometricBounds if(STB) Bz = Bx.visibleBounds if(Bx.clipped) Bz = Bx.pageItems[0].geometricBounds return Bz } 388 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 11:28:43.67 ID:9mOu9R4R0.net] 「一番近いガイドに図形を吸着させる」スクリプトです app.preferences.getBooleanPreferenceは無視してもらっていいです 環境設定の予備的なものなので。 function BNDfn(Bx)以下も環境設定の予備的なものなので無視でいいです [絶対値と絶対値でないもの]を入れ子にする意味が知りたいです 389 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 12:27:02.66 ID:TCDiz++Hr.net] >>381 配列MOVをソートするSORTfnで[◯,●]の◯を利用してるのは読み取れる？ 390 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:06:21.02 ID:9mOu9R4R0.net] >>382 ソートで利用するために [　,　] の入れ子にしてるだけですか？ 391 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:16:44.67 ID:TCDiz++Hr.net] >>383 まず聞かれたことに対してYESかNOで答えようよ 392 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:25:11.50 ID:9mOu9R4R0.net] >>38 ありがとうございます わかりました [◯,●]の◯はソートをするために利用している 絶対値が一番小さい◯を先頭に並べ替えて（距離が一番近い）、それと対になってる●だけtranslateで移動している ということですね 393 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:25:56.97 ID:9mOu9R4R0.net] × >>38 ◯ >>384 394 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:29:27.02 ID:BD7ZISK00.net] 余談だが、>>380 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]; } とか。 これをループで回すのも有りかも。 あ、複数要素の比較はあくまで例であって、>>380 のデータ構造とは関係無いよ。 395 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:34:52.14 ID:9mOu9R4R0.net] ガイドが、動かしたいオブジェクトの右にあるか左にあるか確定して無いんですよ だからMath.absで絶対値にして距離を測ってるのか… そして配列の入れ子にしてソート 勉強になるな ここだけ他のスクリプトでも使える 396 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:39:57.47 ID:BD7ZISK00.net] >>388 abs なんてほとんどコストかからないんだから、元の値と絶対値の両方を保存するのは無駄な気がする。 配列の保存やアクセスの方がコストかかったりして。 397 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:45:29.13 ID:TCDiz++Hr.net] 命名や処理内容を見る限りあまり参考にすべきコードではないように感じる 398 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 13:50:47.16 ID:8JMA8Bb40.net] >>379 転載禁止なのを勝手に載せたらあかんわ gorolib.blog.jp/archives/72193707.html 399 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 14:04:35.37 ID:xvk668V/d.net] 絶対値が一番小さいものを選ぶだけならこんな大掛かりにする必要そもそもない気が 400 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 14:26:01.70 ID:qd0QDeFeM.net] >>374 まず [1, 2, 3 ] で 配列ができる new Array(1,2,3) の省略型 401 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 14:32:46.45 ID:Xk6tQN/c0.net] イラストレータのappかぃ 402 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 15:49:23.10 ID:Ah12aly8r.net] >>393 なぜ配列にしているのかを聞いているのであって 記法に関する質問をしているわけではないだろう 403 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 17:14:12.48 ID:Xk6tQN/c0.net] 設定でjs使ってるみたいなのでjsスレで質問してるようだけどスレチのような・・・ 404 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 17:18:01.39 ID:RmZ1ojDx0.net] オブジェクトの配列にすれば分かりやすいな 405 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 17:19:55.56 ID:Xk6tQN/c0.net] 連投すみません >>381さん PC等->CG->Illustrator総合 のほうがいいかもですね 406 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 20:05:16.68 ID:9mOu9R4R0.net] >>398 CG板のIllustratorスレはわかりませんが、DTP板のIllustratorスレではscriptがわかる人が1人くらいしか居ません たまたまその人が居なかったら、何日も放置になってしまうし… ここの人たちの方がscriptのメソッドとかもほとんどわかるし Illustratorの図形といっても、xy座標に図形が並んでるだけの、ほとんど移動する時の足し算と引き算だけです 407 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 20:10:18.24 ID:9mOu9R4R0.net] [◯,●]の◯をソートのために利用してるなんて、独りで考えてたら絶対思い付かなかったと思います 408 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 20:14:44.98 ID:u3d467jnH.net] >>400 JSスレの神様たちは優しい感じですもんね がんばってくださいね！ 409 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 20:37:06.98 ID:9eo7KahL0.net] >>400 ソートの手法としては収穫があったようでなにより。 でも他にも指摘があるように、アルゴリズムとしては今一つだから全体としてはあまり参考にするほどじゃないと思う。 それは距離の一番小さい相手を探す方法として距離でソートしてその一番最初を採るという手順を使ってるよね。 でも、最初から距離が一番小さいものを探せばループ 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) } 410 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 20:39:31.01 ID:fufRX2ZEr.net] >>400 MOV変数の行方を追って数行コードを読んだだけだよ 何も難しいことの種明かしをしたわけじゃない 今回人に聞いて答えを得たなら次は自分でそれにたどり着けるようになろう 411 名前：デフォルトの名無しさん mailto:sage [2022/12/12(月) 22:12:32.05 ID:9mOu9R4R0.net] >>402 これだとソート関数いらないんですか？ かなりコンパクトになりますね ダイアログを表示させて吸着方向を上下左右選べるスクリプトを作ろうと思ってるので、こちらで作ってみます 412 名前：デフォルトの名無しさん mailto:sage [2022/12/13(火) 02:24:56.21 ID:IRSJsHbF0.net] >>404 閉じかっこひとつ抜けてた。 最後の if の前に } が要る。 413 名前：デフォルトの名無しさん mailto:sage [2022/12/13(火) 11:11:56.07 ID:dgxg9m7O0.net] >>405 こうですか？ 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) }

---

---

[ 続きを読む ] / [ 携帯版 ]

read.cgi ver5.27 [feat.BBS2 +1.6] / e.0.2 (02/09/03) / eucaly.net products.
担当:undef