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/08/21(日) 10:31:51.96

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

2022/08/21(日) 10:42:02.01

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

2022/08/21(日) 11:25:21.77

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

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

2022/08/21(日) 11:46:37.18

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

2022/08/21(日) 12:32:17.30

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

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

2022/08/21(日) 12:39:55.73

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

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

2022/08/21(日) 15:06:45.69

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

2022/09/02(金) 16:08:14.77

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

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

2022/09/02(金) 16:38:05.47

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

2022/09/03(土) 00:11:31.61

連想配列から特定のキーを検索して、重複がないもののみ取り出した配列を取得したいのですが、
このコードだと速度的に問題がありました。何か良い方法があったら教えていただけないでしょうか
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);

2022/09/03(土) 02:15:20.35

>>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)になって速いはず

2022/09/03(土) 03:34:12.57

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

2022/09/03(土) 10:05:53.47

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

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

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

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

2022/09/03(土) 10:08:20.30

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

2022/09/03(土) 10:28:11.32

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

2022/09/03(土) 10:46:53.92

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

2022/09/03(土) 11:16:26.73

>>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)であるべきなのか、はよく考えた方がいい

2022/09/03(土) 11:42:14.57

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

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

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

2022/09/04(日) 09:22:10.61

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

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

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

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

2022/09/04(日) 12:38:54.82

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

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

2022/09/04(日) 20:07:02.96

getAttributeとか？

2022/09/04(日) 20:23:24.42

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

2022/09/04(日) 21:15:03.99

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

2022/09/04(日) 22:38:54.08

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

2022/09/04(日) 23:03:12.95

>>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 (ﾜｯﾁｮｲ d52c-6nWD [180.52.202.152]) · 2022/09/04(日) 23:14:48.88

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

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

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

2022/09/04(日) 23:26:45.19

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

2022/09/05(月) 18:27:01.95

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

2022/09/05(月) 18:51:10.83

>>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要素を使っているが、
イベントを横取りできるなら、既存イベントハンドラと同じコードにしても良い

2022/09/05(月) 19:18:18.86

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

2022/09/05(月) 19:25:28.71

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

2022/09/07(水) 17:04:03.05

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

2022/09/07(水) 18:23:46.99

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

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

2022/09/07(水) 19:11:15.04

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>

2022/09/07(水) 19:17:44.81

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

2022/09/07(水) 20:26:24.25

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

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

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

2022/09/08(木) 00:18:00.64

すいません。以下の様な状況で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;
}
}

65 (ﾜｯﾁｮｲ 232c-HH83 [219.162.239.51]) · 2022/09/08(木) 07:17:36.21

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

def f_1
@x = 1
end

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

2022/09/08(木) 19:40:45.35

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

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

2022/09/08(木) 22:51:00.93

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

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

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

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

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

2022/09/08(木) 23:10:43.06

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

2022/09/08(木) 23:23:08.03

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

2022/09/09(金) 09:56:50.51

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

2022/09/09(金) 11:06:49.13

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

2022/09/09(金) 19:12:54.25

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

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

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

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

2022/09/09(金) 20:14:57.93

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

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

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

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

2022/09/10(土) 00:48:49.86

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

2022/09/10(土) 06:13:53.00

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

2022/09/10(土) 09:58:22.29

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

2022/09/10(土) 11:01:57.14

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

2022/09/10(土) 11:48:27.08

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

2022/09/10(土) 13:25:36.79

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

2022/09/11(日) 20:15:23.24

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

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

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

2022/09/11(日) 20:29:51.41

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

2022/09/11(日) 21:06:49.62

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

2022/09/12(月) 09:29:51.85

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

2022/09/23(金) 01:20:03.32

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

2022/09/23(金) 09:32:58.81

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

2022/09/23(金) 10:32:57.61

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

2022/09/23(金) 15:04:58.71

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

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

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

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

2022/09/23(金) 15:06:34.97

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

2022/09/23(金) 17:05:20.97

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

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

2022/09/23(金) 18:38:15.96

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

2022/09/25(日) 08:59:26.24

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

2022/09/25(日) 17:53:11.47

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

2022/09/25(日) 20:26:11.45

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

2022/09/26(月) 17:57:53.84

ありがとうございます

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

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

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

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

2022/09/26(月) 22:44:18.29

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

2022/09/26(月) 23:02:16.56

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

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

2022/10/06(木) 16:54:22.37

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

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

2022/10/06(木) 17:40:38.15

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

2022/10/06(木) 18:17:20.20

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

2022/10/19(水) 06:40:09.61

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

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

2022/10/19(水) 06:51:04.23

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

2022/10/19(水) 11:19:00.04

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

2022/10/20(木) 01:45:20.86

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

2022/10/20(木) 05:56:13.16

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

2022/10/20(木) 12:03:03.14

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

if (result = func()) ...

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

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

比較と組み合わせて

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

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

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

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

2022/10/20(木) 12:59:50.47

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

2022/10/20(木) 13:20:03.60

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

2022/10/20(木) 15:12:09.85

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

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

2022/10/20(木) 21:55:34.73

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

2022/10/23(日) 10:06:21.98

2022/10/23(日) 11:43:18.26

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

2022/10/23(日) 16:29:44.52

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

2022/10/23(日) 16:34:31.24

MacBookを買いましょう

2022/10/23(日) 16:44:23.51

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

2022/10/23(日) 16:55:32.04

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

2022/10/23(日) 17:46:05.51

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

2022/10/24(月) 22:47:10.94

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

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

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

2022/10/24(月) 23:16:49.94

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

2022/10/25(火) 01:00:55.86

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

2022/10/25(火) 01:02:07.20

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

2022/10/25(火) 01:02:49.43

天ら万重も近し。

2022/10/25(火) 02:28:40.06

>>123-125
日本語でOK

2022/10/25(火) 14:16:06.20

ファイルを読み込んで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となってしまいます。
なぜ大きくなってしまうのでしょうか？
同じサイズになるようにするにはどこを訂正するといいですか？

2022/10/25(火) 15:28:48.49

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

2022/10/25(火) 17:11:46.89

初心者です、関数を配列オブジェクトに入れて
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～
}

2022/10/25(火) 17:13:23.18

すみません少し修正です

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

2022/10/25(火) 17:47:25.32

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

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