JavaScript の質問用スレッド vol.125 YouTube動画>1本 ->画像>12枚

■質問テンプレート
【環境】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制作板、ブログラム板のどちらのスレで質問しても問題ありません。

■関連スレ(Web制作板)
JavaScript の質問用スレッド vol.126 (重複スレの消化)
http://2chb.net/r/hp/1439005423/
JavaScript ライブラリ総合質問所 vol.5
http://2chb.net/r/hp/1465399470/
jQuery 質問用スレッド vol.7
http://2chb.net/r/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日本語訳)

テンプレここまで。

テンプレは前スレ、前々スレを元に、よくある議論(Web制作板へ誘導云々)を独断で追加した。
問題があれば、修正案を提案して頂ければ。

乙

> Javascript はweb制作管理板、CGI はWEBプログラミング板へ。

これは？

>>6
プログラム板のローカルルールか
「今ではNode.jsもあるし、JavaScriptはWeb制作言語に限定されないよね」を理由にプログラム板に立てられた、と記憶してる
Node.jsスレを関連スレに入れるべきだった

【非同期】node.js part.1【javascript】
http://2chb.net/r/tech/1582906877/

この板のJavaScript スレは、
web制作管理板が荒らされた時に、緊急避難用として立てられたもの

もう、この板でやる必要はない。
web制作管理板の方へ移動すべし！

全く、HTML, jQuery などに関係ない、
Node.js でも扱うなら、この板でも良いけど、
基本、Ruby on Rails などのフレームワークは、WEBプログラミング板

>>8
本スレがなく、ライブラリ信者が健在なWeb制作板に移動する理由はないと思う

>>8はRubyを引き合いに出す件の荒らしだから気にしなくていい

🦏

ローカルのhtmlファイル内に記載してるjsで位置情報取得するコードを書いてるのですが、
毎回位置情報を尋ねられてしまいます。
webサイトのページなら位置情報の使用許可を一度設定すれば、そのサイトでは次から尋ねられなくなりますが、
ローカルのhtmlファイルを開いても同様に永続的に位置情報の使用を尋ねられないようにする方法はありますか？
ブラウザはchrome使ってます。

https://support.google.com/chrome/a/answer/2657289?hl=ja
https://support.google.com/chrome/answer/114662?hl=ja

あとは https にしてみたらどうか
atmarkit.itmedia.co.jp/ait/articles/1605/13/news038.html

file:はともかくhttp:にも機能制限かけるのは逆効果だと思う
クラウド売りたい一心なのだろうけどオレオレ証明書が増えてかなわんよ

そもそもwebアプリ作るなら仮想環境なり、dockerなりで開発環境を作った方が良いかと

すんませんjQueryの質問なんやけど
eachでliタグの子要素のimgタグを取得してalt属性を追加して値はliタグの子要素のemタグのテキストにしたいんだが

全部のliタグの子要素のemタグのテキストを追加してしまう
対応するliタグの子要素のemタグのテキストをそれぞれ追加したいんや！
おせーてくれ！！たのんます！！

>>17
スレ違い
>>3のjQueryスレへ誘導

jQuery の質問は、web制作管理板の方へ書き込んでください

確か、jQueryのスレがあったと思う。
無ければ、JavaScript のスレへ

japascriptは難しい。
初心者はまずはRubyから始めること

そしてRuby on Railsを習得する
javascriptｙとjQueryはその後で良い。

こっちのスレで質問すれば親切な達人プログラマーがどんな質問にも懇切丁寧に答えてくれる。
　↓
Ruby 初心者スレッド Part 67
http://2chb.net/r/tech/1608837867/

clickのタイミングについて
<input type="button" value="クリック" id="bt">

let aaa=0;
setInterval(
function(){
aaa=100;aaa=200;aaa=300;aaa=400;aaa=500;
},0
);
document.getElementById("bt").addEventListener(
"click",
function(e){alert(aaa);}
);
何回クリックしても500と表示されるけど500以外が表示されることはないんでしょうか？
aaaが200のときにクリックが割り込むとかはないんですか？

>>21
タイマー処理の関数呼び出しの途中でイベントハンドラが処理されることはない

>>22
どうもです
タイマー以外のfunctionでもfunctionの途中でイベントハンドラが呼び出されることはないってことですか？

JavaScriptは基本シングルスレッド
関数の実行途中に別の関数の処理が割り込んでくるようなことはない

>>23
非同期処理が混在していなければ、ない

Wan、Lanどちらからもアクセス可能なWebサーバーで
アクセス元がどっちなのかを判断する方法はありますか？

>>26
送信元アドレス見ればよくね？

サーバーで判断すべきだろう
クライアントで知りたいならサーバーに聞けばいい

確かにそうですよね
サーバー側で何とかしてみます

ナンセンスな質問かもしれませんが、JavaScriptにおいて関数はデータ型としてオブジェクトであり、一方でオブジェクトはプロパティとメソッドの集まりであると説明されています。
関数とオブジェクトはどちらが先に定義されているのでしょうか？

>>30
「先に定義」とは、どのような意味？

>>31
先に存在しているとか先に実装されている(?)というようなイメージです

>>30
定義が無限循環してると言いたいんだろうけど広辞苑にだってそういうのはあるし、関数ノットイコールメソッドと考えれば矛盾はしてない
たぶんオブジェクトが先だろうけどね

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

もう少し調べてみると、 https://tc39.es/ecma262/multipage/overview.html#sec-ecmascript-overview でTerms and Definitionsのところに、関数はオブジェクトであってプロパティの他に実行可能なコードと状態を持つもの、という感じのことが書かれてて、メソッドはオブジェクトのプロパティの値である関数のことと書かれていました
こちらの説明で一旦納得できました

v8のソースでも読んでみれば

オブジェクトが先
オブジェクトはプロパティのコレクション

プロパティとはkey/valueのペアのこと
keyはStringでvalueはプリミティブかオブジェクト

オブジェクトを定義するのにオブジェクトを使ったりStringという別のオブジェクト使えるの？
と疑問に思うのかもしれないけど
定義が存在する(名前解決可能である)ことを確認するフェーズと
定義の中身を検証するフェーズを分けることで可能

foo関数の中でbar関数を呼び出しつつ
bar関数の中でfoo関数を呼び出すような関数定義ができるのと同じこと

>>32
「実装」というが、「仕様」上で両方とも存在しているなら、同時に「実装」されるのでは？

>>34
ES3には「オブジェクト」の定義はあるが、「関数」の定義はない
故に「歴史的にはオブジェクトが先に定義された」といえなくもないが、そんな回答を望んでいるようにも見えない
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/4_Overview.html#section-4.2.1

参考になるかわからないが、typeof演算子は「[[Call]] を持つObject型」の場合に "function" を返す
https://262.ecma-international.org/13.0/#sec-typeof-operator

ブックマークレットのスレッドかこちらか悩みましたが質問なのでこちらでご相談させていただきます。

他者のWebサイトを閲覧する際、JavaScriptを用いて作成されている場合、リンクを新しいタブで開けない場面があります。
頻繁にページを進んだり戻ったりする場面、可能であればリンク先を別タブで開くようにしたいです。
ブックマークレットを用いて、現在ページのJavaScriptのリンクを別タブで開くように書き換える処理をすることは可能でしょうか？

>>39
そのサイト次第かな
クリックした後の画面を一発で開けるURLが用意されてたら基本的に実装できると思う

連想配列から特定のキーを検索して、重複がないもののみ取り出した配列を取得したいのですが、
このコードだと速度的に問題がありました。何か良い方法があったら教えていただけないでしょうか
const a= [
{'id': 1, 'category': 'animal', 'kind': 'dog'},
{'id': 2, 'category': 'fruit', 'kind': 'apple'},
{'id': 3, 'category': 'fruit', 'kind': 'orange'},
{'id': 4, 'category': 'animal', 'kind': 'dog'},
{'id': 5, 'category': 'animal', 'kind': 'cat'},
{'id': 6, 'category': 'fruit', 'kind': 'grape'},
]
var b=a.filter((x,y,z)=>z.slice(0,z.length).filter(w=>w.kind==x.kind).length＝=1);
console.log(b);

>>41
const buckets = a.reduce((buckets, current) => {
if (!buckets[current.kind]) {
buckets[current.kind] = [current];
} else {
buckets[current.kind].push(current);
}
return buckets;
}, {});
const b = Object.values(buckets)
.filter((items) => items.length === 1)
.flat();

速度は測ってないけどたぶんO(n^2)→O(n)になって速いはず

Mapで似たようなこと考えてた

>>41
要素数や重複要素のばらつき具合によって結果は変わるが、最終的には力業が最速な事が多い
https://jsfiddle.net/gft5ah0n/

極端な結果になっているのは重複要素がすぐそばにあり、while文による検索ですぐに見つかる為だ
重複要素が遠い位置にあるなら、while文による検索が遅くなるケースも十分にある

>>41のコードが比較的高速なのも重複要素が比較的近くにある為だ
Object.valuesやArray#filterによる変換コストが検索コストより高くついているので、他のコードが比較的遅い

重複検知が頻繁に発生するようであれば、データのも持ち方を new Map や new Set を使うように変更した方がいい
配列はユニークな値を得るのに向いていない

>>44の補足
jsfiddleのconsoleはconsole.time()を実装していないようだ
ベンチマーク結果はブラウザのコンソールで確認する必要がある

すまん
>>44のwhile_loopは期待通りに動かないので忘れてほしい(console.assert()のコードをミスって気づかなかった)
重複要素のばらつき具合によるが、(>>41の配列においては)暫定最速は>>41

>>46
console.assert()の修正、重複チェックをkindのみに修正したら、mapが最速になった
https://jsfiddle.net/bw8z2acf/

>>47
高速化で考えるべきは「ループ回数の削減」と「変換回数の削減」

>>41 source
>>42 reduce
>>47 map

reduceはループ回数は削減されているが、変換回数がsourceよりも多い
要素数6では「変換コスト > 検索コスト」になってしまい、sourceよりも遅い
要素数192では「変換コスト < 検索コスト」となるので、sourceよりも速い

mapの変換回数は2回で Array.from() と results.values() のみ
ループ回数、変換回数ともにsource,reduceよりも少ない
要素数6、要素数192のいずれも map が最速となる

実際のところ、変換を一度も発生させないコードが理想となる
データの持ち方として配列(new Array)であるべきなのか、はよく考えた方がいい

>>39
a要素でマークアップされているなら、難しくはない

for (let a of document.querySelectorAll('a[href]')) a.target = '_blank';

window.open()などでリンクを開く挙動もJavaScriptで制御しているなら、コードを読んでリンク先を得る手段を考える必要がある

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

テーブルの表示となっていて、行全体にリンクが設定されているようです。
以下のような記載が複数並んでおり、通常は左クリックでリンク先に移動しかできず、新しいタブで開くことができません。

<tr class=”〇〇〇” data-href=”★リンク先アドレス★” data-target=”〇〇〇”>
<td class=”〇〇〇”></td>
<td class=”〇〇〇”></td>
</tr>

素人ながらいくつかブックマークレットで試したのですが、逆に実行するとリンクが無効になる事が多々でした。
アドバイスをいただければ幸いです。

<div style="width:100%;height:200px;border:Solid 3px #0000ff" id="test"></div>

これのcss初期設定を取得したいのでstyle="○○"の○○部分を抽出したいんだけどやり方がわかりません。
element.style.widthみたいに取得すると途中で値を書き換えられると初期設定が得られないので
最初にタグに埋め込んであるものを取得したいんです。

getAttributeとか？

element.style.hoge=fugaしたらstyle属性値も連動するんだから
書き換える前に取得しとくしかなくね？

>>51
・直後にscript書いて書き換え前にstyleを取得しておく
・Fetch APIでhtmlをGETしてCSPでscript無効化してparseしてstyleを得る

>>52-54
ありがとうございました

>>50
開発者が、どのフレームワークを使っているのか分からないけど、
例えば、Ruby on Rails, Stimulus を使っているなら、

[Rails]Stimulusを使ってtableの行全体<tr>をリンクにする(jQuery不要)
https://zenn.dev/necocoa/articles/rails-stimulus-tr-link

これのhref_controller.js に、

export default class extends Controller {
toHref(event) {

// 既定の動作を取り消す
event.preventDefault()

// data-href 属性に入っている、URL を取得する
const href = event.currentTarget.dataset['href']

// URL を設定する
window.location.href = href
}
}

>>56
// URL を設定する
window.location.href = href

みたいに直接、window.location.href に設定しているけど、

この場合、Ctrl + クリックや、
右クリックメニューから新しいタブで開くことは出来ないのかな？

>>50
遷移する時にdata-targetが使われることを見込んでこれでいけるかもね
for (let tr of document.querySelectorAll('tr.〇〇〇')) tr.dataset.target = '_blank'
※〇〇〇はtrのクラス名で

document内の要素で、textContentに'xxx'を持つクラスを取得するにはどうしたらいいですか？
全部の要素総当たりでtextContent調べるしかないんでしょうか？

>>50
JavaScriptコードが不明なので正確な回答は不可能

>>58の想定通りなら、おそらくその実装が一番楽
tr要素ノードにclickイベントハンドラでwindow.openする実装と仮定して、下記実装が考えられる

1. elementdataset.hrefでリンク先アドレスを得る
2. createElementでa要素ノード生成
3. replaceChildで(A)のDOMになるよう調節
4. tr要素ノードの仕掛けられたであろうclickイベントハンドラをevent.stopImmediatePropagation()で封印

(A)
<tr class=”〇〇〇” data-href=”★リンク先アドレス★” data-target=”〇〇〇”>
<td class=”〇〇〇”><a href=”★リンク先アドレス★”></a></td>
<td class=”〇〇〇”><a href=”★リンク先アドレス★”></a></td>
</tr>

window.open()なんてレガシーコード書きたくないからあえてa要素を使っているが、
イベントを横取りできるなら、既存イベントハンドラと同じコードにしても良い

>>59
XPath式を使えば、textContentを使わなくて済む
https://jsfiddle.net/kb5e740f/

>>61
テキストノードを子に持つ要素ノードを捕捉するコードにすればよかった
https://jsfiddle.net/kb5e740f/1/

プログラミング初心者でJavaScriptを勉強してます。
メンバ変数A、メソッドBを持つクラスがあり、メソッドBの中で変数Aを活用（Aを用いた処理やAの変更）したいのですが、
Aを引数としてBに渡して返り値として受け取るのと、Bの中で直接this.Aと記述して処理するのは何か違いがありますか？
メソッドBに別の変数を渡す可能性があるなら前者でないといけないのでしょうが、そうでなければ後者の書き方でよいでしょうか？

>>63
this.Aは全てのインスタンスメソッドで参照できる
this.Aはインスタンスを参照可能なスコープ上で参照可能

仮引数AはメソッドBの関数スコープ外から参照不可能

Ruby で書くと、
initialize は、constructor

class A
def initialize
@x = 0
end

def f_1
@x = 1
end

def f_2( num )
@x = num
end
end

p a = A.new #<A: @x=0>

a.f_1
p a #<A: @x=1>

a.f_2( 2 )
p a #<A: @x=2>

>>64
それ何にも疑問の解決になってないだろう

>>66
↓のsetAとcalcAの違いを聞いてるんじゃないのか？

class Foo {
constructor (a) {
this.A = a;
}
setA (a) {
this.A = calc(a);
}
calcA (a) {
return calc(a);
}
}

わかっているらしいあなたが回答すれば済む話だが

すいません。以下の様な状況でfuncCからfuncBまたはB'が呼ばれる状況を考えていました。B'のほうが楽な気がして。そもそも意味不明な質問だったら申し訳ないです…
```
class Foo{
varA; // varAの値はよそから取得

funcB (a){
//aに対する処理
return a;}

funcB' (){
//this.varAに対する処理
}

funcC(){
ans = funcB(this.varA);
または
funcB'();
ans = this.varA;
}
}

Ruby では、>>65
に書いたように、

def f_1
@x = 1
end

みたいに、クラス内のインスタンスメソッド・f_1 内で、
インスタンス変数・@x を使えるので、一々、引数で渡す必要がない

オブジェクト指向の一般的な話としては、クラス内の関数であればクラス内のメンバはいじっても問題ないと思う。

ただ、「どこの関数がこのメンバを触ってるのかわからない」ってほどクラスが巨大化するなら、もはやそれはたちの悪いグローバル変数そのものなので設計からおかしい。

>>68
一つ一つのコードの意味を理解して、一つ一つのコードでなぜをそれを使うのか、と自問して答えを出せば、自ずと答えが出てくる
質問していない部分で突っ込みどころが多すぎて、「何も考えてないんだな」と思わせられる

https://jsfiddle.net/qem7cLyf/
・なぜ 全ての関数は返り値を持たないのか？
・なぜ Foo1#funcB は静的関数ではないのか？
・なぜ Foo1#funcC,Foo2#funcC は返り値ではなく、グローバル変数に演算結果を格納したのか？
・なぜ Foo2#varA の初期化にコンストラクタの引数を使わないのか？

こういう質問全てにこたえられるぐらいに考えられないと良いコードはかけない

https://jsfiddle.net/s27mxepn/
・可能な限り、変数のスコープはせまくあるべき
・可能な限り、関数は参照透過性を持つべき

今後、インスタンスプロパティを拡張する予定があるならclassを使うべきだし、そうでないなら静的関数で十分
>>64で示した挙動の違いだけで十分に判断できる

それがプログラミング初心者に投げつける言葉かよ・・・
そういう知識や判断力もゆくゆくは必要だけども物事には順序ってもんがあってまだその域ではなかろう
マウントが取りたいだけならもっと近いレベルの相手にやんなよ

>>63
いいと思うよ
というかBに汎用性を持たせるのは微妙

this.Aで書いた方が手っ取り早いことが多い気がしたのですが、そちらでもいいけどスコープに注意しないとバグの要因になる、グローバル変数を濫用しないようにというのと相似形の似たような話という認識でいいでしょうか。
下手したら必然性なく両者を混在させてしまったりしそうなので注意したいと思います。参照透過性とか言葉自体知りませんでした…
参考になりました。ありがとうございます。

>>74
今は>>70の理解でいいと思うよ
今の時点であまり詰め込んでもしょうがないし
>>71みたいなののせいで萎縮しないでね

>>72
> 物事には順序ってもんがあってまだその域ではなかろう

順序が大切なことには同意
ダメ出しがたくさんあるのは「学習の順序」が間違っているから
いろいろと学習を飛ばしてコードを書いており、その質問をする域に達していない
初心者だからこそ、もっと基礎的な課題から取り組むのが現実解だと俺は思う
今までの受け答えを見る限り、付け焼刃で知識をつけているように俺には見える

> マウントが取りたいだけならもっと近いレベルの相手にやんなよ

マウントを取りたいわけじゃない

だから、オブジェクト指向とかプログラミングは、Ruby から始めるべき。
JavaScript(JS)みたいなややこしいもので、デザインパターンを学ぶべきではない

改訂2版 Ruby逆引きハンドブック
の1冊だけで、かなりのモジュール・ライブラリの使い方も分かる

同じページ数でも、JSなら、文法だけで終わる。
20年以上のJSの歴史を追っかけて行くから、文法だけでもRubyの5倍ぐらいある

だから、こういう言語へ手を出したらダメ。
Rubyist は、JSなどをコピペで済ます。
深い所までやらない。分量的に切りがない

学習の順序とか提示せずに「何も考えてない」と切り捨てるのはマウンティングに入らないんですか？

回答者相手にマウントとってる人に真面目に答えるだけ無駄か
そんな暇があったら、質問者に回答すればいいのに

君は高圧的な正しさで初心者を殴ってるだけ
人にものを教えるのには向いてないと思うよ

>>80
5chはそういうものと思っていたが、それがこのスレの流儀なら気を付ける
だが、回答者に高圧的だったり、回答者にマウントをとる人も是正されるような公平な世界であってほしいね

具体的にどの発言に対して言ってるのかわからんけど
そういう何か言い返さないと気がすまないって気持ちは心の中にしまっておいた方がいいんじゃないかな

自分の過ちを認めると負けたみたいでプライドが傷つくから
俺も悪かったけどお前らも悪いから引き分けだよねということにしたい心理の表れ

元の配列を関数内で空にしたいけどうまくいきません
100と表示されてしまったので空になっていませんでした。
配列は参照渡しなので元の配列も書き換えられると思ったんだけど
どうやれば関数内で元の配列を空にできますか？returnは使いたくないです。

let a_list = [100,200,300];
test(a_list);

function test(b_list){
b_list = [];
}
alert(a_list[0])

>>84
function test(b_list) {
b_list.length = 0
}

>>85
できました
ありがとうございます

b_list = [];
が何故ダメかというとb_listを空にしてるんじゃなくて
b_listに新しい配列を代入してるだけだから
ということは覚えておこう

ブラウザで動かすとき、グローバルスコープでの demo って名前は何かある？
この名前の関数作ってボタンの onclick から呼び出そうとしたら関数未定義のエラーになる。
別の名前にすると呼び出せる。

タイポかスコープの勘違いとかじゃないの？
コンソールでdemo関数定義して実行したら普通に動いたけど

>>88
再現可能なコードを出してみたら？
https://ja.stackoverflow.com/help/minimal-reproducible-example

>>90
こんな感じだけど、ちょっと分かってきた。
全体貼ろうとしたらセキュリティチェックかなにかに引っ掛かって書けないから、scriptタグの中身と body の中身だけ。

function demo() { alert('DEMO'); }

<form>
<input type="button" name="demo" value="DEMO" onclick="demo()">
</form>

この onclick にとっての demo は多分 form内の input要素の demo になるんだね。
スコープがこの form になると。

エラーは未定義関数じゃなく、demo is not a function だった。

thisとthis.formがスコープに入る仕様だそうな
https://qiita.com/hakatashi/items/40fbedf61a3dd79f21fc

有効に使う機会よりも謎の挙動にどハマりするケースの方が多そう

>>91
window.demoかaddEventListenerを使ってみては？
後者がベター

回答もらった途端にいなくなる質問者多いな

こんにちは
ブラウザから、ローカルのファイル（画像など）を「関連付けされたソフトで開く」というのはできますか？
HTMLの<a href=#></a>だと、ブラウザ（Chrome）内で開いてしまいますが、これを別の画像ビューアで開きたいです

>>96
参考情報
https://akaki.io/2021/url_scheme_hijack

ありがとうございます

「カスタムURLスキーム」を調べてやったみましたが、ローカルのファイルを指定ができません（画像ビューアは開くがファイルが開かない）
JavaScriptの質問ではないので恐縮ですが、どうやって指定できますかね？

https://qiita.com/kojimadev/items/74100c8557a92939ef69

例えば上のサイトを参考に、画像ビューアをhogeでレジストリ登録して下のようにすると、画像ビューアだけ起動してファイルは見つからなかったと出ます（hoge:file:///C:...などもダメ）

<a href="hoge:C:/tmp/sample.jpg"></a>

>>98
違ってるかもだけど、Windowsだったらパスの区切り文字は/じゃなくて\または¥じゃないのかな
で、\は制御文字として扱われるからエスケープして\\にしないとダメとか

>>98
アプリの方もURLスキームでの起動に対応してないとだめなんじゃない？
URLスキームはその URLの書式をアプリ独自に決めてあって、アプリはその書式でアクションや対象を判別して動作するように作られてるんだと思う。

とりあえず与えられた引数が分かるテストアプリを見繕って hoge として登録してみたら何か分かるかもよ。

Xhrで非同期通信するサーバーサイドのファイル(api.php)の中に登録されてる関数を実行することって出来るかな？

api.phpのfunction hoge()を実行するって感じ

>>101
リクエストのハンドラがその関数を呼べばいいだけじゃない？

>>101
ん？
フレームワークも何も使ってないならそもそも該当のphpファイルを指定するから
その中で実行したい事を書けば良いだけでは？

if (a==b){} と書くべき所を、
間違って if (a=b){} と書いたら、
a<>b な値を入れても true が返ってくる

何が起きているんでしょう?

>>104
a=bの評価値はb
bがtruthyならifの次の文が実行される

bが0以外なら{}が実行される。

>>105
>>106
それじゃifにする意味がない状態だったんですね
ありがとうございました

uBlockで要素取得した時の名前が###contentsです
これをTampermonkeyのJSで要素getするにはどうしたらいいでしょうか？
getElementById、getElementsByTagName、getElementsByClassName、querySelectorAll等ではだめでした

>>107
条件の中にあえて代入を入れるケースは無くはない。

if (result = func()) ...

みたいな感じとか。
これは比較してるんじゃなくこういうこと。

result = func();
if (result) ...

比較と組み合わせて

if ((result = func()) == 100) ...

みたいな書き方もある。
メリットは単に短く書けるということもあるし、別の言語も含めれば

while ((line = fgets(fp)) != EOF) ...

みたいな、代入と比較が一緒じゃないと書き方的に面倒になる部分に使う。

>>108
getElementById('contents') or querySelector('#contents')

>>110
なるほど、#つけたらいけました
ありがとうございました

>>106
0だけがfalsyなわけではないはず
https://262.ecma-international.org/13.0/#sec-toboolean

>>109
代入と組み合わせることですっきり書ける場合があるよな
whileは割と使ってる

whileって原始的かつ結構直感的だから使いやすいよね

<style id="test">
@media screen and (min-width:751px){
#aaa{
width:700px;

}
}

@media screen and (max-width:750px){
#aaa{
width:100%;
}
}
</style>

<スクリプト>
let sheet = document.getElementById("test").sheet;
let st = sheet.cssRules[0].selectorText;
alert(st);
</スクリプト>

このようなmedia screen付きのcssのselectorTextを取得したいんだけど
このようにやってもundefinedになってしまいます。どうすれば取得できますか？
media screenがなければちゃんとselectorTextは#aaaと取得できるんだけど

console.dirでsheetの中身を覗いて探せば見つかるかと

iPhone6などの古い環境のSafariで、ES6以降の各ES(ES2022等)のどこまでサポートしているか、というのはどのように確認すればよいでしょうか？
iOSは12で、UAではSafari Webkit 604.1 となっています。
ESも毎年更新されてPCや現行スマホなら問題なく表示できますが、サポートの終わった古い端末でも表示させるにはどの機能がNGかを確認したいのですが・・・
iOSバージョンやブラウザバージョンを指定して、それがどこまでサポートしているかが分かるサイトや、実際の端末を使ってどの機能がNGかテストするとか、PC上でデバッグ可能(エラー表示)なエミュレータなどあれば教えていただきたいです。

MacBookを買いましょう

Can I use のサイトとか、npm のbrowserslist とか？

>>118
ありがとうございます。
Can I useのサイトで各ESxxxを検索して概ねサポートされる範囲が分かりました。
Safari 12だとES2020の一部からサポートされない機能があるので、そこら辺が境界ぽいことが分かりました。

>>115
cssRules[0].cssRules[0].seletctorTextとすることでできました
ありがとうございます

JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、
JavaScriptの難易度は12ぐらいあると思います。
このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。
初級者1のための物ですので、わかってやっている人に好きにやってください。

このコーディングガイドは絶対に従わなければならないものではありません。
私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。

禁止編
JavaScriptには安易に使用してはいけない機能があります。
下記の機能は、それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、使用してはいけません。

>>121
中途半端に@raccyの記事をコピペした意図は何？
https://qiita.com/raccy/items/bf590d3c10c3f1a2846b

ラッシーこそだよ。欄版は。

マンタリーな、シェシェ。
ぐーむ菜素図。i-ku

天ら万重も近し。

>>123-125
日本語でOK

ファイルを読み込んでArrayBufferから配列へbyteデータにしたいです。
<input type="file" id="file">
<script>
let fileInput = document.getElementById('file');
fileInput.onchange = () => {
var fileReader = new FileReader();
fileReader.onload = function(e) {
var ary = new Uint8Array(fileReader.result);
}
};
これでaryに数値が代入されているんですが
選んだファイルが約100,000kb程のサイズなんですが
処理後のaryのサイズが約1600,000kbとなってしまいます。
なぜ大きくなってしまうのでしょうか？
同じサイズになるようにするにはどこを訂正するといいですか？

すいません勘違いだったようです。

初心者です、関数を配列オブジェクトに入れて
findでオブジェクトを取得して、そのオブジェクトの中の関数を呼び出すといったことがしたいです
初心者むけのネット記事なんかを見て組んだのですが、エラーが出てしましいます。
今のソースはこんな状態なんですが、間違っているところはありますでしょうか？

struct = [
　{hoge:huga, func:functionA},
　{hoge:hage, func:functionB}
]

callfunction(check){

　var gets = struct.find((v) => v.hoge === check);
　gets.run()←ここでAとBを使い分けて呼びたい
};

functionA = {}

functioA.run = function(){
～動かしたい処理A～
}

functionB = {}

functioB.run = function(){
～動かしたい処理B～
}

すみません少し修正です

struct = [
　{hoge:huga, func:functionA},
　{hoge:hage, func:functionB}
]

callfunction(check){

　var gets = struct.find((v) => v.hoge === check).func;
　gets.run()←ここでAとBを使い分けて呼びたい
};

functionA = {}

functionA.run = function(){
～動かしたい処理A～
}

functionB = {}

functionB.run = function(){
～動かしたい処理B～
}

あまり複雑なことはせずに↓みたいなのではダメだろうか
https://jsfiddle.net/6x7yusjL/

これではダメで、どうしても>>130のエラーを解消したいなら出ているエラーの内容ぐらいは書くようにしよう

>>121
14位.JavaScript

難易度：★★☆☆☆

今回ご紹介するプログラミング言語の中で最も難易度が低いのがJavaScriptです。

初学者がプログラミングの学習を始めるのに適した言語の一つ。
Webサイトなどで動きのある見た目を実現する為に利用されます。

JavaScriptから派生したフレームワークも数多く、
そちらのフレームワークを学習する場合には難易度が高くなります。
ただ、JavaScriptをそのまま利用して学習を進めるであれば、
他の言語と比べて開発環境の構築が不要であることや関連書籍が数多くでていることから、
難易度は低い言語といえるでしょう。

>>131
ありがとうございます。
まず進捗させないとけないんでそのやり方でやってみて、後々何がエラーの原因なのかは自決できるように調べてみます。

JavaScript(JS)は、Ruby の数倍難しい

初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、2017

例えば上の本は、サイの表紙のサイ本と呼ばれるけど、
これだけ勉強しても、文法しか学べない

改訂2版 Ruby逆引きハンドブック、2018

一方、サイ本と比べて、上の本は、多くの主要モジュールの使い方まで説明している。
大体のコーディングパターンまで学べる。
つまり中級者向けなのは、文法のページが少ないから

JSだと、ES3, ES5, ES6 の20年に及ぶ、膨大な文法の変遷を追っていかなければならない。
ES2015(ES6)から、ようやくクラスも出来て、Rubyっぽくなってきた

ちょっとした比較でも、あいまい比較演算子== は使ってはならない。
厳密比較演算子=== だけを使うとか、初心者がはまる罠が多い

学ぶ順序としては、Ruby → JS を勧める

>>131
では、callback 関数が呼ばれる前に、どちらの処理が呼ばれるか、既に分かっている状態でしょ。
直接引数に、呼ばれる処理を入れている

callfunction('huga');
callfunction('hage');

一方、>>130
では、callback関数が呼ばれる前には、どちらの処理が呼ばれるか、まだ分からない状態。
callback関数の中で初めて、どちらの処理が呼ばれるかが決まる

コンソールからは実行出来るのに、
拡張機能からだと無視されるのは何?

>>132
14位
やっぱ簡単なんだな。

乱数の生成について質問です。
日付をシードとした乱数を生成したいのですがどうも偏ります。
シードの採用の仕方にルールなどがあるのでしょうか？
xorshiftのものを2個試しましたが
2ことも偏っていました。

https://jsfiddle.net/4dz70wxp/3/

ちょっとだけ違う初期値に対して乱数がほしいという用途は想定外だろう
欲しいものはMurmurHash3みたいなハッシュ関数ではないか？

一発目のnext()の値を捨てれば良さそうな気も
https://jsfiddle.net/ny0cpm5v/

もう少しいじってみたけどどうやらシードの桁数不足が問題なのかな
new Xorshift32(seed * 1000000)
とかにするだけで最初の値にもだいぶ幅が出る

いやいや偏りってそういうことじゃなくてって話ならごめんだけど

>>139
不勉強でよくわかってないですが
やりたいのは後で再現できる単純にランダムな遅延時間がほしいだけです。
>>140
delayMaxを100にしてみましたら3回目ぐらいから取れそうと感じました。
シードが小さすぎるということは
一般的には
シードを与えるなら
乱数関数が受けられるシードの最大数/関数で生成されるシードの最大数をかけて
でシードの範囲を広げたほうがいいということなのでしょうか。
それとも単純に今回はシードが小さすぎて特殊事例であまり気にする必要はないと言う感じでしょうか。

お二人ともありがとうございます。

next()が与えられた値にビット演算をあれこれやって次の値を出してるから
シードが2桁整数ではほとんどのビットがゼロなために
最初の演算結果が狭い範囲に収まってしまってるんでないかと

>>143
ありがとうございます
https://jsfiddle.net/4dz70wxp/5/
42億あるうちの下一桁をいじるだけではだめみたいですね。
一日かわればseedも大きく変わるようにして
念の為、3回目あたりをとってみます。
ありがとうございました。

https://jsfiddle.net/f9h4zu1x/
少し間違ってた
桁数が少ないのが問題じゃなくて、ビットの可変幅が狭いのが問題
だから桁数増やしてもシードの増分が1なら結局同じ
日付を上の桁に持っていけば1回目も改善する

ブラウザ上での音声認識と録音について質問です。

現在、マイクから音声認識を行い、簡単な対話を行うWebアプリを作成しようとしています。
Web Speech APIのSpeechRecognitionを使用して音声認識には成功しましたが、これに加えて録音も同時に行いたいです。
SpeechRecognitionは喋っている内容を取っているので、そこから音声ファイルを作成できないかとやったのですが、目的の資料を見つけることができませんでした。

そのため、SpeechRecognitionと並行してmediaDevices.getUserMediaを使い録音する形で実装しました。
PCでは成功したのですが、スマホ（Android、iOS共に）だとmediaDevices.getUserMediaでストリームを使用とした時点で音声がすべてそちらに取られてしまい、音声認識が出来なくなってしまいました。

今度は録音した音声データをGCPのSpeech-to-Textの音声認識に回すかたちで実装してみましたが、即座に認識結果が得られず、対話のテンポが悪くなるため、微妙な感じになってしまいました。

音声認識と録音を両立する良い方法はないでしょうか？

他人が書いたJavaScriptのコードは読みにくいですよね？

>>147
自分が書いたコードすら後から見るとよく分からないなんてことはザラ

function double(number)｛
const result=number*2;
return result;
｝;

const a=double(10);
console.log(a);

でコンソールに20と表示されますが、return resultの所のイメージがつかめません

function double(number)｛
const result=number*2;
｝;

console.log(result);

もっと簡単にこれでは20と表示されないんでしょうか？

すみません
わかりました
double(number)に戻り値number*2を返してるんですね
だからdouble(10)で20になると

>>148
そいつにかまってはいけない

JavaScriptのパズルをやってたんですけど、このコードだけで意味がわかりますか？


最初の定義とか色々省かれていませんか？
初心者だからはっきりわからないのですが…

これぐらいなら簡単
変数名と関数名がちゃんと付けられてるからそこから読んでいけば普通に読める

>>153
変数のlistとかどこにも定義されて無いんですけど…
console.log(list)とか突然書かれても、初心者にはわかりにくい
どこから出てきたのかと…

>>152
任意の数値リストを突っ込むと最大値出してくれるっていうコードだろこれ

問題の方にあるのかも知らんし
ここで聞かれても分かんね

問題はこんな感じです

（画像の下の方が切れてますが、>>152の画像と同じものが入っているだけです）

あまり親切じゃないから初心者には向いて無いのかな？

全部負の数値だと使えない

このコードは十分初心者向けに書かれていると思うけどねぇ
ただmax=0にしているから、基本は0より大きな数の配列の中から最大値を調べる処理という事に

>>159
この学習アプリやってた

Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい
https://forest.watch.impress.co.jp/docs/serial/progedu/1404361.html

次のステップなどで対応するならいいけどね
max の初期値を配列の先頭から取れば済むだけだが

ようやくわかりました
2つめの関数の中で前に定義した1つめの関数を実行してるんですね
関数は定義＆実行で1ペアと考えないといけない
次に進みます

#を付ける　プライベートクラスフィールドが分かりにくい。
解説しているサイトも少ない。

Adobe Illustratorのスクリプトを書くのにHTMLの知識いりますか？
JavaScriptの入門書を読んでたんですけど、前半のJavaScriptの文法の所まで読み終わりました
後半はHTMLとJavaScriptの組み込み方みたいになってるんだけど、ここ読む必要あるのかな？
もちろん知ってた方がためになるんだろうけど、次のAdobe JavaScriptの本へ行こうか迷っています…

DTP（印刷）でillustratorを使ってるのでWebは扱っていません

AdobeのjavascriptというかESバージョンめちゃくちゃ古くて記述するの苦労したが最近はどうなんだ

自己レスですが必要無いそうです
ES2015以降も必要無いそうです
constとかletが使えないので全部varになってる

>>164
CEPでも使わない限りはHTMLの知識は不要。

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

pg9 = win1.pnl.add('group')
pg9.orientation = "row"
CAN = pg9.add("button",[0,0,100,30],"cancel")
OK = pg9.add("button",[0,0,100,30],"OK")
CAN.onClick = function(){win1.close()}
OK.onClick = function(){
win1.close()
dofn()
}
win1.show()
}

// テキストを元のサイズに戻すための計算
var txtresize=100/bai*100;

// テキストフレームだけを選択する
activeDocument.selection = null; // 全ての選択を解除する
var txtObj = activeDocument.textFrames;
for (var i=0; i<txtObj.length; i++){ // テキストフレーム数だけ繰り返す
try {
txtObj[i].selected = true; // 選択する
}catch(e){}
}

//選択したテキストを"sel"とする
var sel = app.activeDocument.selection;

//選択したテキストの数で繰り返す
for (i=0; i<sel.length; i++)
{
//選択したテキストの幅と高さを元の大きさに戻す
sel[i].resize(txtresize,txtresize);
}

// オブジェクトの選択を解除する
for (var i=0; i<sel.length; i++){
try{
sel[i].selected = false;
}catch(e){}
}

プログラムの最初の方は省略したのですが、
CAN.onClick = function(){win1.close()}の所で、キャンセルがクリックされた時にそれ以降のプログラムが実行されないようにしたいのですが、どう書き換えればいいでしょうか？ return;ではそれ以降が実行されてしまいます

CAN.onClick = function(){win1.close();exit();}
みたいなことをやりたいのですが、exit()はAdobeScriptにはありません…

>>170-171
質問の意味がわからない

CAN.onClick = function(){win1.close()}

で処理は終了している

コールバック関数について、伺いたいのですが。
コールバック関数は、引数に渡される関数という理解でいますが。

これは関数であって、オブジェクトメソッドを渡すこともできますでしょうか。
例えば、
object.addEventlistener()
などの、メソッドも渡すことができますでしょうか？

object.addEventlistener なら関数だから渡せるけど
object.addEventlistener() は渡せないな

>>173
object.addEventlistenerで渡せるが、実行時のthis値が変わるので、期待通りに動作しない
bindを使うか、「コールバック関数を渡す関数」にthis値束縛機能があればそれを使う必要がある

ありがとうございます。
Object.AddEventlistenerでも、コールバック関数になりうるということですね。
ただし、期待していることはできない。

関数（ユーザー定義）をコールバック関数にすることはイメージつくのですが。
オブジェクトメソッドをコールバック関数にするイメージがつきません。
何か、例文があれば教えていただけますでしょうか？

あ。addEventlistener以外で構いません。

>>176-177
this値の変え方まで書いているのに、なぜにイメージ？
コールバック関数を使ったコードを書いて試せばすぐにわかる問題

Function.prototype.bind
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

AdobeScriptなのですが、

上の画像の「四角のパスの四隅をハサミツールで切って、塗りを線にする」まではスクリプトで出来るのですが、「短辺を特定する」ということはスクリプトで出来るのでしょうか？
一般的なJavaScriptの話でもいいのですが、出来るとか無理そうとか…

質問です、どなたか教えて下さい、どうか宜しくお願いいたします

インターネットラジオ　JCBA FMはな再生ページ
https://www.jcbasimul.com/fmhana

上記サイトを開くとCookie利用承諾の画面が出てきます。この利用承諾画面は

document.getElementsByClassName("cookieBanner__btn")[0].click()

とすることで自動的にOKボタンを押して閉じることができました。引き続き再生ボタンを押したいので

document.getElementsByClassName("MuiSvgIcon-root")[0].click()

としましたが、残念ながら自動的に再生ボタンを押すことができません。自動クリック自体が禁止
されているような雰囲気です。たぶんサイト側でクリック禁止にしているのだろうと思いますが
これを利用承諾画面と同じようにJacaScriptで自動クリックするする方法はないでしょうか？

ユーザー操作が起点じゃない場合は音声再生をブロックする、という制限がブラウザ側でかかってることがある
その場合はブラウザの設定で解除できるかもしれない

>>181
iframeの中かつshadowDOMの中なので一発で要素を取得できない
document.querySelector(".radioPlayer__iframe").contentDocument.querySelector("#player_ui").shadowRoot.querySelector("button").click();

jcba-playerカスタムエレメントはplay()メソッドが実装されてるようなので
document.querySelector(".radioPlayer__iframe").contentDocument.querySelector("#player_ui").play();
でもいける

こうじゃないか
document.getElementById("player_ui").shadowRoot.querySelectorAll("button")[0].click()
または
document.getElementById("player_ui").play();

>>183
すばらしい！有り難うございます！そのどちらの方法でも再生ボタンがクリックできました！
何を勉強したらあなたのような達人になれるのでしょうか？本当に有り難うございました！

>>184
お答えくださり有り難うございます。ただ、残念ながらその方法はどちらもＮＧでした。
"player_ui" を "#player_ui" に変えても駄目なので、すみませんが>>183を使わせてもらいます。

if( ){ };の( )の中に「関数txtfn()が一度も実行されていなかったら」という条件を書きたいんですけど、どう書けばいいんでしょうか？
無理でしょうか？

単にループ前にフラグをfalseにでもしておいて、一度でも実行すればtrueにすれば判断出来るのでは？

>>188
SEL = activeDocument.selection
LAY = activeDocument.activeLayer

var yk=0;

for(s=0; s<SEL.length; s++) SELfn(SEL[s])

function SELfn(sx){
if(sx.typename != 'PathItem') return
if(sx.filled == false) return
c1 = sx.fillColor

if(c1 != "[GrayColor]"){
val = c1
txtfn();
}
}

function txtfn(){
alert(val+"です");
yk=1;
}
if(yk!=1){
alert("グレースケールです");
}

これで出来ました。
ありがとうございます。

すまん、敢えてここで聞かせて
Windows しか持っておらず、JavaScript の Safari での動作確認のため極力安い MacBook かなにかを買いたい。
中古でもなんでもいいんだけど、今時の Safari が動くやつって何を選べばいい？
Mac も iOS も Safari の系譜もよく分からず途方に暮れてる。
いわゆるブラウザのデベロッパーツールで動作確認したいので、多分 iPhone とかじゃだめなんだよね？
アドバイスおねがい

safariのバージョンってiOSと連動だって話だったと思うから最新のiOSサポートしてる機種ならええんでないの？
Mac系のスレで理由話して最新のiOSが動く安いやつどれ？って聞くのが確実だろう

動作確認のために実機買うなんて景気のいい話だなぁ羨ましい
俺ならBrowserStackとかLambdaTest使っちゃうけどね

iPhone持ってる人に実機テストしてもらっちゃうな

>>192
景気なんてよくねーよだからケチりたいんだろ。
でも何そのおもしろそうなキーワードは。調べてくる

>>193
これまで作ったのをたまたま iPhone で見たら動いてないのがあってね。
元々 Safari とか眼中には無かったけどそんなに特殊なことやってるとも思ってなかったんで、動かないとか思ってなかった。
あんまり気分悪いんでちょっと調べておこうかと。

>>191
やっぱ最新OS じゃないとダメかということでそこを軸に探すと、フリマで 2万台くらいらしいってことは分かった。
あと iPad の Safari でもデベロッパーツールを動かせるらしいことが分かったので、そっちの線もありそう。
つか MacOS と iOS って違うのね…

なにはともあれ、取っ掛かりは掴んだ気がする。
ありがとう

イベントオブジェクトを使わず、thisを使って、
そのイベントの発生元の要素を取得することは可能でしょうか？

>>195
無理

すみません、先日JavaScriptによるクリックについて質問した者です
情けないのですが、今度は別サイトの再生ボタンがどうしても押せず困っています

インターネットラジオFM++　FMはなび再生ページ
https://fmplapla.com/fmhanabi

ソース見るとiframeもshadowDOMも使っていないように見えるのに、再生ボタンを押せません

document.getElementsByClassName("player_start_button")[0].click()
document.getElementsByClassName("start_stop_button_button")[0].click()

上記２つとも駄目でした。どうすればJavaScriptで再生ボタンをクリックできるでしょうか？
どなたかもう一度だけ教えてください、宜しくお願いいたします

該当する要素がない

start_btns = document.getElementsByClassName("player_start_button")
console.log( start_btns.length ) //=> 0

start_stop_btns = document.getElementsByClassName("start_stop_button_button")
console.log( start_stop_btns.length ) //=> 0

>>197
ブラウザの DevTools でイベントリスナーの click を見ると見つかる

>>199
chromeだと当該要素の「検証」をすると出てくる

>>197
対象のclassをよく見てみよう

>>201
document.querySelectorAll("button")[0].click()で行けました
有り難うございました

こういう程の良い距離感のアドバイスを遅れる人間になりたいですな

>>170ですが、やっぱりキャンセルボタンを押すと
CAN.onClick = function(){win1.close()}の所で終わらなくて、最後の行まで実行されるんですがどうすれば中断出来るんでしょうか？
キャンセルしてもテキストの大きさが変わって終わります

そもそもキャンセルボタン押す前にテキストサイズ変わってんじゃねえの

>>205
「画像とテキストが一緒になってる図で、画像だけ拡大縮小してテキストサイズはそのままにする」というスクリプトなんですけど、キャンセルすると図の大きさはそのままでテキストだけ拡大縮小してしまうんですよ
これでは困るのでキャンセルの箇所でコードから抜け出したい

CAN.onClick = function(){win1.close(); return; }
ではなく、

CAN.onClick = function(){win1.close()}
return;

上は、その無名関数から抜け出すだけで、
下は、全体の処理から抜け出す

>>207
まだ仕事中で確かめられていないのですが、キャンセルでなくてOKの時も抜けたりしませんか？

>>207
return;を入れると、違う動作を始めたので保留にします。
時間がある時に考えます。
どうもありがとうございました。

<div id="zahyou" style="position:absolute">aaaaaaaaaa</div>

<スクリプト>
for(let n=1;n<=100;n++){
if(n % 2 === 0){
document.getElementById("zahyou").style.left = "0px";
}
else{
document.getElementById("zahyou").style.left = "200px";

}
}
</スクリプト>

としてもaaaaaaaaaaの位置が全く動かないけど

<スクリプト>
let n=0;
setInterval(
function(){
if(n % 2===0){
document.getElementById("zahyou").style.left = "0px";
}
else{
document.getElementById("zahyou").style.left = "200px";
}
n++;
}
,100
);
</スクリプト>
とするとaaaaaaaaaaの位置が動くのはどうしてですか？

上も動いてるよ
一瞬で終わるから見えないだけ

>>210
画面のレンダリングは逐一行われないから。
イベント契機で実行されたスクリプトの処理を一旦終えたときその最終的な結果がレンダリングされるというか、一旦処理を終えないとレンダリングされないと思っておけばいい。
setInterval のやつは、インターバルの契機で実行された処理は1コマ分の処理だけして終わるから、その都度レンダリングされる(かもしれない)。
実際は周期があまり高頻度だと、処理を終えてもレンダリングされるとは限らず間引かれたりする。
ただ未レンダリングだからといってもDOMの状態やスタイルの設定などは逐一適用されてる。

>>212
そうだったんですか
ありがとうございます

a = "0px";
a = "200px";

a = "0px";
a = "200px";

a = "0px";
a = "200px";

こういう処理を100回やってから、100回目の後だけ再描画されるのだろう。
1～99回までは値が設定されるだけで、再描画されない

横からで申し訳ないけど、アニメーション処理を行うならsettimeoutとかでわざと描画間隔を空ける必要があるって解釈でいいのかな?

>>215
一コマ毎にイベント処理を終えブラウザに処理を返す構造にしないといけない
あるいはスタイルや SVG でアニメーションさせるか

ブラウザでは、Performanceパネルや
タイムラインパネルでチェックできる

アニメーションならsetTimeoutよりrequestAnimationFrameだね

>>216
>>218
わっちょい違うけど同一人物です
勉強になります

ゲームセンターにある機械とか、パソコンゲームでは、よくコマ(フレーム)落ちが起きる

1/30秒とか1/60秒の間に、処理が終わらないので、再描画できない

例えばドキュメント上に5つのアイテムがあるとして、その5つのアイテムそれぞれの幅を合計したものが知りたいのですが、途中までコードを考えました
（5つというのは仮のアイテム数で実際は未定です）

DOC=activeDocument;
SEL=DOC.selection;

for(i=0;i<SEL.length;s++){
BND=SEL[i].geometricbounds;
W=BND[2]-BND[0];

Wが最初の1つのアイテムの幅になると思うのですが、これをSEL[0]～SEL[4]まで合計するにはこの続きにどういうコードを書けばいいのでしょうか？
（間違っていたら既に書いてあるコードを変更してください）

すみません
質問してから気付きました
これでいけますか？

DOC=activeDocument;
SEL=DOC.selection;

for(i=0;i<SEL.length;s++){
BND=SEL[i].geometricbounds;
W1=BND[2]-BND[0];
W=W+W1;
}

>>222
試してから質問しよう

for の前にW=0してね

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

for(i=0;i<SEL.length;i++){ ～ }っていう式がコードの中にいくつも出てくるんですけど、変数iのところはそれぞれの式で変えないといけないんでしょうか？
for(j=0;j<SEL.length;j++){ ～ }とか。
関数内だけですか？
同じ変数文字が使えるのは

いい質問ですね
変数のスコープの問題なので試してみたらいかがでしょう？
jsのスコープをしっかり押さえると
伸びしろが変わります！

ありがとうございます
勉強を始めて1か月ですけど改造はわりとうまく出来るようになりました
最初は何が書いてあるのかわからないんだけど、ジーッとしつこく見てるとわかって来ますね

let も var も（スコープ内）再代入可能です
let i=0;

for(i=0;i<10;i++,console.log(1,i));
for(i=0;i<10;i++,console.log(2,i));
console.log('------');

for(i=0;i<10;i++){
console.log(3,i);
for(i=0;i<10;i++){
console.log(4,i);
}
}
console.log('------');

let t=0;
for(i=0;i<10;i++){
console.log(5,i);
for(t=0;t<10;t++){
console.log(6,t);
}
}

>>228
中腹の二重ループについて敢えてやってるなら説明が必要じゃね。

>>229
for(i=0;i<SEL.length;i++){}
for(j=0;j<SEL.length;j++){}
と質問されてるので入子構造なんだろうなと

入子じゃないですよ
ドキュメント上にアイテムが複数あって、何回も全アイテムを移動したり変形したりする必用があるので並列です

>>228
何回も使えるんですね
ありがとうございます

>>230
二重ループの外と内とで同じ i を使ってることについてよ。
敢えてやってるならどういうメカニズムでどういう結果になるのか説明てあげないと分からないんじゃない？

カスタム要素って使われてます？

>>232

// No 1
for(i=0;i<10;i++){
console.log(3,i);
for(i=0;i<10;i++){
console.log(4,i);
}
}
console.log('------');


// No 2
let t=0;
for(i=0;i<10;i++){
console.log(5,i);
for(t=0;t<10;t++){
console.log(6,t);
}
}

No1とNo2の違いは分かりますでしょうか？
一度コードを実行してみてください

No1のfor文の繰り返し１回目は、i=0です
次にNo2のfor文では、i=1から始まります
その後No2のfor文が繰り返しされi=10までカウントされNo1のfor文繰り返しに戻ります
その時、i=10になっているので、No1のfor文は終了になり、for文を抜けます

入子構造のインクリメント演算子では同じ変数を使うときには要注意ですね

>>235
ありがとうございます
なかなか難しいですね
勉強を続けます

今日はこういう発見がありました
当たり前と言えば当たり前なんですが

let、constどころかvarすら使えない（使わない）のであればPythonにでも行ったほうがいいんじゃない？

>>238
adobeスクリプトですがvarは使えます
他人のスクリプトを改造してる段階で、potisionで正しく並べられていなかったのでgeometricBounds[3]にしたと。
adobeのソフトはJavaScriptでないと動きません

セミコロンも入って無いし、あまりお手本としては良くないかも
でもこの人のadobe スクリプトが一番わかりやすいので

何を制御してるのか知りませんけれど
お好きなように言語を選んで
お好きなようにコードを書けばいいと思います
楽しく好きなように自由に！ですね

JSを使う場合の注意点ですけど
古いJSとの互換性を保つため
JSは結構複雑怪奇な言語になりつつあります

変数の取り扱いはどこ言語でも慎重に設計しますけど
JSの変数とスコープはちょっと特殊なので
制御系でJS扱うのなら注意したほうがって思います

推奨しない書き方はほぼESLintで弾けるだろ

var sel=activeDocument.selection;
for (var i=0; i<sel.length; i++){
if(sel[i].typename != "TextFrame"){
sel[i].selected = false;
}
}

これで出来ました。
お騒がせしました。

JavaScriptの一般的な文法とかの話はともかく、adobe固有の問題はここで聞くべきではないよ

>>244
>>245の言うとおり、もはやここで聞く内容ではない。
adobe forumで聞いた方がいいけど、
レベル的にまだネットで調べれば簡単に答えが見つかる内容だから
なるべく自分で調べたらいいと思う。

一般的なJavaScriptってgeometricBoundsとか使いませんか？
長方形の座標を得るメソッド

>>247
同じアドビでもindesignとillustratorではgeometricBoundsのx,y値の順番が異ってたり、
もはやアプリごとの話題になってくる。

>>247
使えません
それはadobe固有のものです

>>248
>>249
そうなんですか

水平垂直はわりと簡単に出来るけど、斜めになると数学の三角関数勉強しないといけないって…
道は険しそう…

$.Deferred()って分かりにくい。

配列内の数字が1つでも違ってたらtrueというのをif文で書きたいのですが、どう書けば良いのでしょうか？

例えば[6.356, 6.356, 7.482, 6.356]はtrueで、[6.356, 6.356, 6.356, 6.356]はfalseです。
配列内の数字の個数は決まっていません。
if(～){return;}の～の部分が知りたいのですが…
（違う数値が混じっていたら終了(return)したい）

配列内の数値が全部同じならtrue，というのを書いてみてください
ところで浮動小数点数には誤差がつきものなので
「だいたい同じ」を意味する処理を書く必要があります

>>252
配列の変数名がlだとして、
len(set(l))が1より大きかったら違う値が入ってる

そんな丁度いいオブジェクトがあったんだな

>>252
var a = [6.356, 6.356, 7.482, 6.356];
if (new Set(a).size != 1) return;

全部同じならSetのsizeは1になるはずだから

>>254
エラーが出ますが、間違っていますか？

var I=[72.356, 72.356, 72.356, 72.356, 72.356];
If(len(set(I))>1){
alert("違う値が入っています");
}
alert("全部同じ値です");

setってES2015(ES6)で導入されたって書いてありますね。
自分の環境では使えないんだと思います。
let()もたぶん…

len も set もそんなメソッドは定義されてない
>>256 は最近のブラウザなら動くはず

このコードではダメですか？

var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;

例外が出るでしょうか？

lenとかsetってpythonじゃ？

>>261
lenはpythonみたいです
setはES2015(ES6)で導入されたらしいです

}が抜けてました。

var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;
}

です

念のため指摘しておくが、Setとsetは別もんだぞ
確かにどっちもES2015で策定されてるが
Set が重複なしの集合
setはアクセサプロパティの構文で使われるやつ

>>252
var a = [6.356, 6.356, 7.482, 6.356];
if (a.join('').replace(RegExp(a[0], 'g'), '')) return;

falsyな値が入らないならこれでも

>>257
すまん、完全にPythonスレと勘違いしてたわ
申し訳ない

>>264
うーん、質問者のスキルし対して相応な解決策とは言い難いものを薦めるのはいかがなものかと・・・

もうこれで出来ましたよ
var I=[72.356, 72.356, 75.356, 72.356, 72.356];
for(var s=0;s<I.length-1;s++){
if(I[s]!=I[s+1]) return;
}

Setもsetも使えませんでした
ES2015に対応してないので

正規表現もいつか挑戦してみたいな

>>260
まあたいして変わらんけど -1 とか +1 とかがちょっと気になるので俺なら

for(var s = 1; s < I.length; s++){
if(I[0] != I[s]) return;

ってするかな

>>269
こっちの方が断然いいですね
ありがとうございます

>>264
var a = [6.356, 6.356, 7.482, 6.356];
if (a.join('').replaceAll(a[0], '')) return;

replaceAll使えればもっと短くなった

>>252
var a = [6.356, 6.356, 7.482, 6.356];
if (a.some(elem => elem != a[0])) return;

こっちのほうが分かりやすいか
「もし、aのいずれかの要素がa[0]と異なる時、returnする」と読み下せる

アロー関数が使えない環境の場合は
if (a.some(function(elem) {return elem != a[0];})) return;
になる

if( I.find( v=> v != I[0] ) ) return;
なんてのも

eval()でダイアログに計算式が入力出来るね

ごく基本的な事だが、あいまい等価演算子 == などを使うな

厳密等価演算子 === などを使え

>>275
なんで？

型違いの比較を考えるのは無理

obj_1 == obj_2
の場合の、双方の型の組合せ爆発を考えないといけないから

obj_1が配列で、obj_2がオブジェクトとか、その逆とか

こういうのを考えるのが無理なので、事前に型が決まる、TypeScript が出来た

もしも使ってはいけないのなら
そんな演算子がなぜ実装されているのでしょうね

>>277
ツッコミどころがちらほら
>obj_1が配列で、obj_2がオブジェクトとか、その逆とか
これがtrueを返すケースある？

>>278
使ってはいけないということはない
バグの温床になりやすいから避けた方が賢明という意味合い
goto使うなとかと同じ話

>>277
だれがそんな組み合わせを考えるの？
コンパイラとかの話？

>>277は組合せ爆発とかTypeScriptとか言い出す前にまずこれを10回読んだ方がいい
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality

>>281
そいつrubyガイジという名前の有名な糖質だから相手しないほうがいいよ

>>282
あーあれか
Rubyの話ししてないから気づかなかった

var DSP = prompt("ポイントを移動させる距離を入力してください（" + "" + R1[RUL] + "）", RULfn(SUB, "pt", R1[RUL]));
if(!DSP || isNaN(DSP)) return false;

プロンプトに入力される数字を＋2やー3など数字に＋かーが必ず付いたものに限定したいのですが、何と書けばいいでしょうか？
if(～)return false;の～の部分です
数字のみは不可です(＋かーが必ず付いていないと)
2行目を変更しても3行目として追加しても、どちらでもいいです

>>284
この式で、先頭が - または + で始まり、1文字以上の数字が末尾まで並んだ文字列の場合に真になるはず。

DSP.match(/^[¥-¥+]¥d+$/)

そうじゃない文字列を判別したいなら ! で否定すればいい。

>>285
ありがとうございます。
やってみます。

/^[\-\+]\d+$/.test(DSP)
のほうが返り値がtrue/falseだからifの条件の用途ではより適切だと思う

>>287
これをそのまま
if(～)return false;の～の部分に入れたのでいいのですか？

>>288
>>285 も言ってるけど、!付けてな

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

const checkNumberString = inputString => {

const inputAry = [...inputString]; // 文字列を配列にする

const [ firstChar, ...restAry ] = inputAry; // 1文字目と2文字目以降に分ける

if ( restAry.length === 0 ) { return false }; // 1文字しかない場合
// 1文字目が、+/- ではない場合
if ( !( firstChar === "+" || firstChar === "-" ) ) { return false };

// 2文字目以降のすべてが、数字かどうか
const res = restAry.every( ( char ) => {
const cp = char.codePointAt(0);
return ( 48 <= cp && cp <= 57 ); // 0～9
} );

return res
}

const testAry = ['', '+', '-0', '+019', '-9🌕には𩸽'];
const results = testAry.map( (str) => checkNumberString(str) );

console.log( results );
//=> [ false, false, true, true, false ]

>>291
ということを十数文字の文字列で表せる正規表現というのは本当に便利だな

>>291
すごいですね
普通に書くとこれだけ必要なのか…

Ruby なら、もっと簡単に書ける

def checkNumberString ( inputString )

inputAry = inputString.chars # 文字列を配列にする
return false if inputAry.length < 2 # 2文字未満

firstChar = inputAry.shift # 1文字目を取り除く

case firstChar
when "+", "-" # 処理なし
else
return false # 1文字目が、+/- ではない場合
end

# 2文字目以降のすべてが、数字かどうか
zeroToNine = ( '0'..'9' )
res = inputAry.all? { |char| zeroToNine.include?( char ) }

return res
end

testAry = %W(#{} + -0 +019 🌕には𩸽 -9🌕には𩸽)
#=> ["", "+", "-0", "+019", "🌕には𩸽", "-9🌕には𩸽"]

p results = testAry.map{ |str| checkNumberString( str ) };
#=> [false, false, true, true, false, false]

いよいよ正体現したか
都合の悪いツッコミは無視して頼まれてもいないのにRubyの押し売り

>>293
そんなわけで以降こいつはスルーで

条件A、B、Cがあってどれか1つがtrueの場合だけ動作させたいのですが、動作させない場合returnするif文はどう書けば一番シンプルなんでしょうか？

A…true、B…false、C…false
A…false、B…true、C…false
A…false、B…fslse、C…ture
の3つの場合だけ動作させます

それ以外をreturnさせるif文です

動作させたい3つの場合、それぞれ違う関数にジャンプさせて違う処理をさせたいです。
switch文の方が良いのでしょうか？
それでどれにも当てはまらない場合、defaultでreturnとすれば

>>296
複数 true は return ってこと？

if(!(A or B or C))return 0;

X = (A ? 1 : 0) + (B ? 1 : 0) + (C ? 1 : 0);
if (X != 1) return;
if (A) funcA()
else if (B) funcB()
else funcC();

switch((A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)){
case 1:
// Aの処理
break;
case 2:
// Bの処理
break;
case 4:
// Cの処理
break;
default:
return;
}

if (a + b + c != 1) return

flag=true;
if(A and flag)[a();flag=false;]
elseif(B and flag)[b();flag=false;]
elseif(C and flag)[c();flag=false;]
elseif(!(A or B or C) and flag)[return 0;]
else[error();]

>>296
「一番シンプル」と思い描いている条件をもう一段ブレイクダウンするとどうだ？
コードが短いのがいいのかわかりやすいのがいいのかはたまた直行性が高くて
条件の追加やメンテが楽なのがいいとか。

難しいよね
昔はコードを短く、処理負荷を軽くするのかウィザードと呼ばれたけど
今は他人にも自分にも分かりやすく、整備性があるのかとかも大事

a=true ; b=false ; c= false;

([a,b,c].reduce((s,e) => s+e, 0)!=1)

>>304
それではわかりやすいのでお願いします

>>299
これだったら1行ですか

>>302
これが単純でわかりやすいかな？

>>308
一行で書きましたが、それぞれの処理が
できない書き方になりますね

>>301
これにしようかな？
(A ? 1 : 0) | (B ? 2 : 0) | (C ? 4 : 0)の部分の意味を教えてください

([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

>>311
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

こんな所で質問するくらいなら、if文3行書けば良いだけなんだし
自分で考えてない事を後から見ても分からないのだから無意味なんだよね

スマホで画像をフリックしてフリックした方向に画像を滑らかに移動させて
徐々に移動速度が落ちて止まるようなのはどうやって作ればいいですか？

>>313
ありがとうございます
なかなか難しいですね

3つの条件の組合せ爆発が起こる、2 ^ 3 = 8 通りだから、かなり難しい

普通は、条件の組合せ爆発は起こらない

例えば、1～10 の内のどれか1つを選択する場合など。
もし、1を選んだら、2～10は選ばれない。
排他条件になるので単純

君の条件は排他条件ではないので、
すべての組合せ爆発が起こるので、かなり難しい

冗長なコードを書いても処理に1秒もかからない
何百行もある市販のプログラム書いてるわけじゃないし
これでいいのかな？

組み合わせ爆発言いたいだけだろ。
組み合わせ数自体は多くなるけど、組み合わせる操作そのものは組み合わせる数に単純比例。
3入力なら3回の組み合わせ操作で8通りの結果が得られ、今回のケースならその組み合わせのうち3種に反応するだけのこと。
100入力なら100回の組み合わせ操作で1.27x10^30通りの結果が得られ、その中の100種に反応するだけのこと。

既に幾つも正解や技法が出てるしな

大袈裟に語るバカが現れてワロタｗ

>>315
自作でやるならtouchmoveイベントかなあ
でもライブラリを探して使う方がはるかに簡単
フリック　ライブラリ　とかで検索して好きなの使えばいいと思う

んでいろんなライブラリを寄せ集めてページサイズが JS だけで MB単位になるのね

すいません。
各<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';

これでエラーがでるのだが。何が勘違いしていますでしょうか？

>>324
document.getElementsByClassName("key")
で返ってくるのは要素の配列（正確には配列風のオブジェクト）
なのでforで回すなりして各要素ごとにスタイルつける

ありがとうございます。

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

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

【俺】
おい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、このスレの人間の方がまだマシや

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

>>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クラスの要素の背景色を設定することができます。

ちなみに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文など）を記述します
}

>>332
たぶん合ってるよ

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

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

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

【俺】
ふーん。。。

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

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

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

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

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

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

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

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

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

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

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

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

やっぱclassよりprotetypeだよな。

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

【技術ネタ】CopilotとDeepLを使って（ほぼ）何も考えずにElixirでAtCoderの問題を解いてみた


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

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

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

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

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

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

男ならプロトタイプ！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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])ではダメなのでしょうか？

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

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

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

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

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

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

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

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

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

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

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])
}

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
}

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

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

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

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

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

× >>38
◯ >>382

余談だが、>>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 のデータ構造とは関係無いよ。

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

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

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

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

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

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

イラストレータのappかぃ

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