+ JavaScript(ECMAScript)質問用スレッド vol.123 + [無断転載禁止]©2ch.net

**デフォルトの名無しさん** · 2016/12/21(水) 21:56:53.30

プログラマ板の趣旨にあわせてブラウザ限定ではなくサーバーサイドJavaScriptや
トランスパイラなどの関連技術の話題も取り扱うように変わりました。
ECMAScriptの言語仕様の話題。最新ECMAScriptによるモダンな書き方、Promiseやasync/awaitを
使った非同期プログラミング。ES2015、2016、2017等の最新ECMAScriptをブラウザで今すぐ使う方法、
ビルド環境やbowerやnodeのパッケージを使う方法等、モダンなJavaScript環境についての幅広い話をしましょう。

ECMAScript対応実行環境一覧（ブラウザやbabelを含む）
http://kangax.github.io/compat-table/es5/
http://kangax.github.io/compat-table/es6/ （＝ es2015）
http://kangax.github.io/compat-table/es2016plus/
http://kangax.github.io/compat-table/esnext/

JavaScriptとは？
もともとMozillaの前身のNetscapeが作った言語であり本来のJavaScriptはFirefoxの実装のみです。
JavaScriptの正式な仕様名はECMAScriptです。ですが一般に使われているとおり
ChromeやEdgeで使う言語もJavaScriptとしてこのスレでは扱います。
Firefox等のJavaScript実装は最新のECMAScriptに準拠しています。

※DOMはブラウザが提供しているものでありJavaScript（ECMAScript）の範囲外です。
なのでDOMを使ったプログラミングは原則としてこのスレの対象外です。
DOMはwindowオブジェクト（ブラウザのホストオブジェクト）経由で
参照するもので、window自体、window.document、window.Workerなどです。
これに関する話題はWeb制作板の下記のスレに移動してください。

+ JavaScript & jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1467906819/
jQuery 質問スレッド vol.7
http://echo.2ch.net/test/read.cgi/hp/1478055094/
+ JavaScript の質問用スレッド vol.131 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1478053599
前スレ + JavaScript(ECMAScript)質問用スレッド vol.122 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/tech/1472401404

**デフォルトの名無しさん** · 2021/06/20(日) 21:34:07.37

で、ついでにさらに回答しておくと、
> JSは普及率の割に良い入門書が本当に少ないです
> 何とか良い本を見つけたいです
これが間違いだ。
C全盛期の1992年頃、C/C++は合わせて92%のシェアを持っており、今のJSどころではなく普及していた。
(当時のC++は今のC++からすれば「それはC」でしかないので合算で問題ない)
ところが、その状況ですら入門書の良書なんて1冊もなかった。
だから、入門書の良書が存在する、と考えること自体が間違いだ。

理由は、そもそも入門書を書く奴がプログラマではない奴ばかりで、本当に中身がデタラメだからだ。
プロ中のプロレベルのプログラマは、通常は本なんか書かずにコードばかり書いてるし、
本を書くにしても、もっと上位の内容を書くので、入門書なんて書きたがる奴が居ない。
結果、ここは永遠に改善されない。

ただし、言語を作った奴自身が最初に布教用に書く本だけは例外だ。
著者のレベルはプロ平均よりも断然上だし、布教用だけに比較的初心者向けに、しかも網羅的に書いてある。
Cの場合はこれがK&Rで、30年経った今でも絶賛と罵倒で議論されてたりするが、名著なのは確かだ。
ところがJSにはこれがない。ブレンダン・アイクが書いた本がないのだ。ここはJSの不幸なところだとは思う。
実際、既存概念の寄せ集めで、難しい部分もないので、書く必要もなかったし、読む必要もない、という
簡単な言語を目指したのは事実だし、成功してもいるが、それにしても書いておけよ、とは思う。
(とはいえK&Rも「既にプログラミング出来る人が初めてCを触る時」向けに書かれているので、
それを渡されて撃沈した超初心者からは怨嗟の声が上がりまくりだが)

だから、本探しは諦めて、さっさと手を動かしてサイトを作ることだ。
目的と手段の混同はよく陥る落とし穴だが、君もそうなっている。
本なんてどれでもいいからコードを書け。
そして上達すれば、君が参考にした本が実は糞だった、と実感出来るようになる。
その後、君自身が初心者向けの本を書くのもありだ。
(実際はサイトを作る方が儲かるから、結局誰も初心者用の本を書かないわけだが)

**デフォルトの名無しさん** · 2021/06/20(日) 21:35:21.42

が、まあ、今回はうっかり間違って回答してしまった。これは俺のミスだな。
本件終わったら、忘れずに回答対象スレから外しておくことにする。
君らも俺の回答が無くなることを望んでいるし、お互いこれで幸せだ。
(半年ほどは出てこない予定)

**デフォルトの名無しさん** · 2021/06/20(日) 22:36:01.01

文章から溢れ出る独善オナニーが臭すぎる

**デフォルトの名無しさん** · 2021/06/20(日) 23:08:03.84

既に、YouTube で有名な、雑食系エンジニア・KENTA が言ってる、
初心者はRuby から始めて、Go へ行けとか。
PHP は一生やる必要ありませんとか

C/C++ みたいなポインター言語や、
JavaScript みたいなプロトタイプ宣言も、時間の無駄

「たのしいRuby」は、2週間ぐらいで読める。
継承チェーンも、プロトタイプみたいに自作しなくてよい。
言語に継承機能があるから

以下のサイの表紙の2冊のサイ本とか、カーニハン・リッチーとか、どれほど面倒くさいか

JavaScript 第6版、2012、David Flanagan
初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017

プログラミング言語C 第2版、Kernighan & Ritchie

だから、KENTAは東大合格マンガ・ドラゴン桜。
最も短時間の勉強で、効率的に稼いでしまう

Ruby on Rails, Docker Compose, AWS Fargate。
こういう技術の組み合わせで

米国年収で、Rails が1,300万円、
それを抜いたのが、AWS Solution Architect で1,400万円

日本で、KENTA, Udemy の山浦清透、AWSのくろかわこうへいなどが、
ウェブ系の教育革命を起こしたから

Rubyの女神・女優の池澤あやかも、同じことを言ってる。
大学でC を学ぶと、プログラミングが嫌いになるので、Ruby から始めろって

**377** · 2021/06/20(日) 23:14:36.06

MicroSoft 自体も、主戦場がLinux・AWS・クラウドに移行しているのを分かっている。
Windows 10 にも、WSL2 でLinux, Docker を入れたし

もう、Windowsには、クラウド開発の端末・タブレットの意味しかない

**369** · 2021/06/21(月) 02:04:22.95

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

ただ1つだけ言わせて頂くと、やはり本選びは大事だと思います
(Webで勉強するならサイト選び)
分かりやすく説明してくれてある本もあれば、手抜きで内容スカスカの本も
あるからです
また、自分のフィーリングに合う、というのも重要な要素だと思います

**369** · 2021/06/21(月) 02:13:23.27

>>377
時間の無駄も何も、クライアントサイドで動きのあるサイトを作りたければ
JSを使うしかないだろ

Rubyがお勧めというのも時代遅れになりつつある
サーバーサイドで使われる言語が、日本でもPythonに取って代わられつつある
(スレチですいません)
このことは勝又氏も動画で言及している

**デフォルトの名無しさん** · 2021/06/21(月) 09:40:06.75

>>379
既に言ったけど、その価値観が老害なんだよ。

一応言っておくと、ゆとりは自分が「若い」から「老害」ではない、と安全地帯に逃げ込んでいるが、そうじゃない。
老害ってのは、古い価値観を引きずったまま、それを他人に押しつけて邪魔になる人のことだ。
なるほどお前らは若いから今はまだ「押しつける」事は出来ず、直接的には「老害」にはなってないのだろうけど、
その価値観で後輩/同僚を指導したらその瞬間から老害でしかない。完全に老害予備軍だ。
(だからさとりはゆとりが老害だという前提で構えておくべきだ、と俺は言っているわけだ)

プログラミングも今は、IDEでオンライン前提の状況になってる。
大多数の人にとって、それが最も良いと認識されてるから、そうなってる。
なら、お前もそれを採用するのが妥当。初心者なら尚更。
そして大半は慣れの問題だから、やれば慣れるだけ、やらない限り慣れないだけ。

何故そこまで本に拘るのかは不明だが、リファレンスでは網羅的に知識を得にくいことは確かだ。
これは本来はphp.netのように、目次を綺麗に整備すればいいだけなのだが、MDNはそうなってない。
なら、グダグダ言わずに全部読むしかない。
多少は時間がかかるだろうけども、本屋でいい本を探す事に時間を費やすよりは、有意義だろうよ。

それ以前に「網羅的」である必要も、最早なくなりつつある。
仕様はどんどん膨らんでおり、APIなんて使いもしない物も多く、
今は「覚えておく」「知っておく」という老害価値観ではなく、「使いたい時に調べて使う」だから。
学校でテストを受ける為の勉強(=暗記)ではないし。

ちなみに「サイ本」も、糞の中では比較的マシというだけで、名著扱いなんてしてる奴は居ない。
https://jp.quora.com/JavaScript-no-sai-hon-fun-atsushi-sugi-ma-sen-ka-zenbu-doku-nde-ko-do-wo-uchi-komi-n-da-nin-wo-chi-tte-i-masu-ka
https://srad.jp/~ozuma/journal/542145/
心配せずとも、普通に使ってれば、7割くらいは勝手に網羅される。
残りの3割を埋めたいかは、その後でいい。
精々50行程度しか書けない初心者の段階で、色々知識を仕入れたところで、どうせ身には付かないよ。

まあこれも含めて、どういう戦略で行くかは君の判断だし、結果となるのだけど。

**デフォルトの名無しさん** · 2021/06/21(月) 10:16:18.41

さすがは老害
1年以上前にES2020ベースの第7版が出てるのも知らず
10年前の批評を読んで自己正当化

こうはなりたくないね

**デフォルトの名無しさん** · 2021/06/21(月) 16:35:48.18

JavaScriptはC++よりも難しい。

誰だJSが初心者向けの簡単な言語などとデマを吹いてるやつは。

**デフォルトの名無しさん** · 2021/06/22(火) 00:24:35.18

>>382
まあそりゃ実際知らないからな。

読んでもないし、読む気もない。だからこういう機会でもなければ調べもしないから、知らない。
この意味では、俺は検索の「契機付け」として質問を使っている。
まあ、最新の出版事情を知ってれば老害ではない、と思うのならご自由に。

合理性の欠けた意見に対し、お前らより若い連中が何故同調してくれると思えるのか。
ゆとりはそこら辺が根本的に傲慢すぎる。

**デフォルトの名無しさん** · 2021/06/22(火) 00:25:17.50

ただ見たところ、第7版はまだ翻訳されてないようだ。
英語が得意なら英語版で問題ないが、それなら英語圏の掲示板で質問するから、
ここで質問する一通りも出来ない初心者には、英語版は薦められないよ。
しかしまあ、内容は大幅にアップデートされてるらしい。

> ES6, ES2016, ES2017, ES2018, ES2019 and ES2020
> MDN見た方が早いからリファレンスを削って400ページ削減した
> 構成を大幅に変更。JSとNodeを大幅増加、WebPlatformを半減
> document.write()やattachEvrnt()は不要なので削除。jQueryは省ごと削除 --- (A)
> class基本に変更 --- (B)
> Map/Set/TypedArray/Date/JSONを追加 --- (C)
> https://davidflanagan.com/2020/05/03/changes-in-the-seventh-edition.html
10日間の立ち読みも可能らしい。
https://www.oreilly.com/library/view/javascript-the-definitive/9781491952016/

まあ内容が刷新されているのはいいとして、
(A)の前半はいいが、jQueryを全削除していいのかね？
現実として使われてもいるので、網羅するつもりなら、知らないわけにも行くまい。
(B)については他スレでもclass要らないんじゃね？みたいに話題になってるが、技術的にはその通り。
むしろclassの方が使いにくい(というより意図的にそうしてる)ので、今後は微妙ではある。
(C)に関しては、もしかして第6版ってこれが丸々抜けてたのか？なら今となっては完全にゴミだね。
かといって、今学びたい奴にいつ出るか分からない第7版の訳本を待て、ってのも微妙ではある。

上記、第6版がゴミ化したのはアップデートが間に合ってないからで、
確かに第7版はしばらくは問題ないだろうが、その後は同様にゴミ化する運命だ。
どうやっても出版物はMDNの更新速度には付いていけない。
早い段階でMDNに慣れるしかないと思うけどね。
本に数千円ずつ出すくらいなら、さっさと2画面にして片方はMDN専用にしとけ、と思うよ。

**デフォルトの名無しさん** · 2021/09/13(月) 15:11:44.90

xamppのローカル上ではjQueryが動作してくれるのですが、そのファイルをエックスサーバーに上げると動作してくれません、、
調べてもindex.phpで動作させる方法の検索結果が無いのですが、駄目なのでしょうか？

教えていただきたいのは
以下の端折ったjQueryを読み込ます一文の位置とjQuery本体を記述する位置です
script src="https:ajax.google /jQuery/3.4.1

宜しくお願い致しますm(_ _)m

**160** · 2021/09/24(金) 20:45:45.12

jQeryローカル上でも作ったサーバ上でもお好きな方で動かせますよ？

**デフォルトの名無しさん** · 2022/06/08(水) 23:58:13.22

WordPressにも正式採用されているのにjQueryはオワコンって何を根拠に？

**デフォルトの名無しさん** · 2022/06/21(火) 00:32:42.51

htmlなんですが
動的にタグが追加された事を検知するイベントってありますか？

**デフォルトの名無しさん** · 2022/06/21(火) 00:37:32.08

>>389
MutationObserver

**デフォルトの名無しさん** · 2022/06/21(火) 08:44:24.88

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

**デフォルトの名無しさん** · 2022/06/21(火) 12:05:25.30

メソッドの引数にあるアロー関数(コールバック関数)って
関数内の処理結果が関数内の引数に返される、で合ってます？

配列.メソッド((関数内の引数) => { 関数内の処理 });

**デフォルトの名無しさん** · 2022/06/21(火) 12:39:29.95

filterとかのことか？
引数に指定するものがfilterならfilter内で利用される（呼ばれる）感じだが
filterだとそれが評価式につながるからどう呼ばれるかは気にする必要が無い

**デフォルトの名無しさん** · 2022/06/21(火) 12:46:03.98

>>392
合ってないよ

**デフォルトの名無しさん** · 2022/06/21(火) 13:27:49.69

>>393
そうです、findとかfilterとか
どこにreturnされてるとか考えなくていいんですね

>>394
違ってたんですね、この部分の仕組みについてなかなか理解できなくて

**デフォルトの名無しさん** · 2022/06/21(火) 13:57:27.26

MDNをよく読もう

**デフォルトの名無しさん** · 2022/06/21(火) 14:23:21.03

MDNしばらくぶりに見たら関数シグニチャが見にくくなってるな
Try itを頭に持ってくる意味が良くわからん

**デフォルトの名無しさん** · 2022/06/21(火) 14:49:47.59

例えば、Ruby では以下の、ブロック・メソッド名・ラムダのどれでも、
大文字に変換された、 ["A", "B"] が返ってくる

ary = [ "a", "b" ]

l = ->(ch) { ch.upcase } # lambda

p ary.map { |ch| ch.upcase }

result = ary.map do |ch|
ch.upcase
end
p result

p ary.map( &:upcase )

p ary.map( &l )

**デフォルトの名無しさん** · 2022/06/21(火) 14:56:42.71

コレクションに対して関数を適用する感覚がわからないようなら
とりあえずはループを回して1つ1つの要素に対して受け取った関数を実行してると考えればいいんじゃないかな

for文で簡易的にfindやfilterを実装したらこんな感じ
どちらもif (fn(x))のところで受け取った関数を使ってる
https://ideone.com/ewhTIh

渡した関数の戻り値がどこにreturnされるかは特に意識する必要がない
関数がどう使われるかと関数の型は意識する必要がある

**デフォルトの名無しさん** · 2022/06/22(水) 17:32:29.82

旬ネタに便乗してプログラムを書いてみた
javascriptはほぼ触ったことがないので、添削してくれると勉強になる
より効率化したいです

github.com/unvirus/make_hasan_list

**デフォルトの名無しさん** · 2022/06/22(水) 20:50:56.89

varをletに置換
new Array("",""..,)は["",""...]にするかnew Array(11).fill("")
Promiseチェーンが書きにくいならasync/await使うとか
今回は書き捨てコードだから気にしなくていいけどdocument.writeとかは非推奨

**デフォルトの名無しさん** · 2022/06/22(水) 21:17:23.95

>>400
・javascriptとは直接関係ないけど、各種の「名付け」が雑過ぎて読みにくい(max_loop→MAX_PARALLEL_FETCH、など)
・厳格モード('use strict';)を使おう
・varは祟りの元。letを使おう
・hasan_detaile_get()には、あらかじめ分割したplaceを渡した方がシンプルになる(endをjson.lengthで代替)
・detail.phpのfetch結果からのデータ抽出は(substringではなく)match結果の分割代入で良さそう(正規表現を事前定義しておいて利用する)
・何度もブラウザで実行するコードの場合は「ブックマークレット化(各種エスケープが必要)+結果をクリップボードに反映」がオススメ

**デフォルトの名無しさん** · 2022/06/23(木) 12:55:36.14

401、402　
コメントありがとうございます
指摘内容自体がいまいち理解できてない部分もありますが調べてみる

**デフォルトの名無しさん** · 2022/07/20(水) 11:10:33.10

https://www.google.com/search?q=javascript&newwindow=1&sxsrf=ALiCzsYVTXuOX_Koud_rGUMyTDgKxJQ1pg%3A1658281669093&ei=xV7XYu6BBfHN2roP0dujqAg&ved=0ahUKEwiu-MrOrIb5AhXxplYBHdHtCIUQ4dUDCA4&uact=5&oq=javascript+%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE+%E3%81%8D%E3%82%8A%E3%81%A8%E3%82%8A&gs_lcp=Cgdnd3Mtd2l6EAMyBggAEB4QBDoHCAAQRxCwA0oECEEYAEoECEYYAFCaBljzCmDCDWgBcAF4AIABbIgBtwKSAQMxLjKYAQCgAQHIAQrAAQE&sclient=gws-wiz

⬆のグーグルのURLから検索ワードのみ抽出したいんだけどどうすればいいですか？

var query = decodeURI(url.match(/q=.*&?/))

とやってみたのですが ⬇のように&newwindow以降の全てがついた状態で抽出されてしまいます
q=javascript&newwindow=1&sxsrf=ALiCzsYVTXuOX_Koud_rGUMyTDgKxJQ1pg%3A1658281669093&ei=xV7XYu6BBfHN2roP0dujqAg&ved=0ahUKEwiu-MrOrIb5AhXxplYBHdHtCIUQ4dUDCA4&uact=5&oq=javascript+正規表現+きりとり&gs_lcp=Cgdnd3Mtd2l6EAMyBggAEB4QBDoHCAAQRxCwA0oECEEYAEoECEYYAFCaBljzCmDCDWgBcAF4AIABbIgBtwKSAQMxLjKYAQCgAQHIAQrAAQE&sclient=gws-wiz

**デフォルトの名無しさん** · 2022/07/20(水) 11:51:09.39

const url = new URL("https://～;")
const params = new URLSearchParams(url.search)
params.get('q')

**デフォルトの名無しさん** · 2022/07/20(水) 12:33:39.55

>>405
こんな事できるようになってたんですね
しらなかったです

**デフォルトの名無しさん** · 2022/07/20(水) 16:16:19.89

これ便利だね、すげー

**デフォルトの名無しさん** · 2022/08/05(金) 16:27:44.94

window.print()を使ってAndroidとiOSから印刷かける時に、cssの@media printで指定したデザインが適用されません
PCからはデザインが適用されているのですが…

**デフォルトの名無しさん** · 2022/08/05(金) 17:22:51.04

onbeforeprintとonafterprintで解決しました

**デフォルトの名無しさん** · 2022/09/14(水) 10:34:12.60

JavaScriptでマルチバイトの文字列をカウントするのってどうするのが適切なのでしょうか？

特定の文字数で長文を折りたたみ/展開させたいと考えています
調査すると注意ポイントとして文字列の組み合わせとかサロゲートキーとか（同じ注意点かも）Intl.SegmenterはFirefox対応していないとか、網羅的に注意記述のある記事が見つからなくてどのような選択をすればよいか分かりませんでした

対象ブラウザは厳密に決まっていないので古いものであれば切ってしまっても構わないと考えていますが、
Chrome,Edge,Firefox,Opera,Safariの最新には対応していてほしいです

標準的なカウントライブラリでもありそうなのですが、それすら見つけられてない状況です
ご教示お願いします

**デフォルトの名無しさん** · 2022/09/14(水) 14:15:41.41

サロゲートペア程度なら[...'文字列'].lengthでいける模様
絵文字の合成も考慮するとなると別の方法を考えないとだけど

**デフォルトの名無しさん** · 2022/09/14(水) 15:13:51.29

>>410
zwjや異字体セレクタが実行環境において"正しく"使われている前提であれば、入力文字列の「zwjとそれに続く任意の1文字、FVS、SVS、IVS」を空文字に置換したstrを [...str].length すれば、表示と一致する文字数が得られるはず

zwjなしに結合する「地域指定用(国旗指定用)のアルファベット」に対応したい場合は、上記置換に加えて「2連続の同アルファベット」を任意の1文字に置換するといい

**デフォルトの名無しさん** · 2022/09/14(水) 16:18:42.24

zwjですか
また新しい考慮ポイントがｗ

頂いた情報を元に調査したところ
https://github.com/flmnt/graphemer
で分割/文字数のカウントを実施してslice（）で表示文字数を制限できそうです

助かりました
ありがとうございました

**デフォルトの名無しさん** · 2022/09/14(水) 16:22:54.92

あ、微妙にダメかも...
https://github.com/flmnt/graphemer/issues/3

**デフォルトの名無しさん** · 2022/09/15(木) 01:00:37.64

リガチャーとかもあるので、まあ描いて長さ測った方が確実だと思うよ。

**デフォルトの名無しさん** · 2022/09/15(木) 05:57:34.81

>>415
ブラウザ上の描画（？）を制限したいのだからそれが一番正しい気がするけどやり方がわからんかった
どんなキーワードで調べると良い？

**デフォルトの名無しさん** · 2022/09/15(木) 07:54:26.97

こういうアプローチかね
https://www.w3docs.com/snippets/javascript/how-to-calculate-text-width-with-javascript.html

**デフォルトの名無しさん** · 2022/09/15(木) 08:18:21.60

目的が「文字数のカウント」ではなく「1行テキスト要素の表示幅を一定にしたい」ってことなら、そんな処理を書かずともCSSで要素サイズを指定or制限すれば良いだけ
要素末尾端については a) text-overflowとwhite-spaceで省略表示、b) mask-image(chromium系は-webkit-mask-image)でフェードさせる、のいずれかを充てれば文字が見切れることもなくなる

**デフォルトの名無しさん** · 2022/09/15(木) 08:47:23.29

>>417-418
ありがとう
XY問題なやつだったみたいですね

頂いたアドバイスを元に調査し直してみます

**デフォルトの名無しさん** · 2022/09/15(木) 13:01:04.75

スマホでタッチしてその場で指を離したときにtouchendとmouseupのどちらも反応するけど
mouseupが反応するのはバグなのでしょうか？
タッチしながら指を移動させてから指を離す場合はtouchendのみでmouseupは反応しませんでした。

**デフォルトの名無しさん** · 2022/09/16(金) 01:15:41.14

スマホでmousedownイベントは発火した？

**デフォルトの名無しさん** · 2022/09/16(金) 13:37:36.12

スマホのタッチ操作でmouse系イベントが反応するのがおかしいって
言ってるなら歴史的経緯からしょうがないんじゃないの？としか
そうでないならもう少し詳しく説明してくれないと

**デフォルトの名無しさん** · 2022/09/16(金) 14:54:53.25

>>420
toutchendとmouseupそれぞれのリスナーの登録先要素は同一ってこと?

**デフォルトの名無しさん** · 2022/09/17(土) 17:40:09.60

結局なんでバグだと思ったのか分からずじまいか

**デフォルトの名無しさん** · 2022/09/17(土) 18:45:19.49

>>421
しました
>>423
event_list = ["mouseup","touchend"];
for(let n=1;n<=event_list.length;n++){
element.addEventListener(
event_list[n-1],
function(e){
alert(event_list[n-1])
}
);
}
のようにやりました

**デフォルトの名無しさん** · 2022/09/17(土) 18:53:13.89

>>425
nousedownが発火したならmouseupも発火するのが当然だと思うけど
mousedownが発火したのもバグだと思ってるの？

**デフォルトの名無しさん** · 2022/09/17(土) 21:37:01.55

ブラウザ上で音を合成するのに Web Audio を試してるところなんだけど、AudioContext の createBuffer で取得したバッファに波形を作り出して再生することはできた。
ただこれだと最初にバッファ長を決めないといけなくて、音の長さが有限になっちゃう。
途切れることなく延々と波形合成と出力をしたいんだけど、どうやればいい？
出力バッファの残りが少なくなったらコールバックで追加データを補充するような作りにできると都合がいいけど、とりあえずヒントになりそうなメソッド名だけでも助かる。

**デフォルトの名無しさん** · 2022/09/17(土) 22:15:56.60

ググったらそれっぽいデモが出てきたけど参考にならないだろうか
https://weblike-curtaincall.ssl-lolipop.jp/portfolio-web-sounder/webaudioapi-basic/demos/demo-08
解説はこっち
https://weblike-curtaincall.ssl-lolipop.jp/portfolio-web-sounder/webaudioapi-basic/audio

そしてデモの一番最後にmouse系イベントとtouch系イベントをUAによって切り替えてる処理が書いてあって
バグかどうかはともかく同時にリスナー登録するべきではないのだろうということで>>420の件も片付きそう

**デフォルトの名無しさん** · 2022/09/17(土) 22:33:23.87

>>426
タッチのときは
event_list = ["mousedown","touchstart"];で登録して
スマホだとtouchstartのみ発火でmousedownは発火しませんでした。
PCのクロームでF12キー押してスマホモードで確認しました
>>428
同時にやらない方がいいのですか

**デフォルトの名無しさん** · 2022/09/17(土) 23:30:53.36

>>429
サンプル作ってみた
https://jsfiddle.net/ju1af0zk/
PCだとmousedownとmouseupのみが発火
Chromeのスマホモードとスマホ実機はそれに加えてtouchstartとtouchendも発火したけど
君の方でも試してもらえる？

**デフォルトの名無しさん** · 2022/09/18(日) 12:49:02.81

>>430
スマホモードでタッチして１秒以内に指を離すと
mousedown,touchistart,mouseup,touchend全て発火ししましたが、
タッチしてから１秒以上経って指を離すとtouchstartとtouchendのみ発火でした。

**デフォルトの名無しさん** · 2022/09/18(日) 13:29:46.60

>>431
１秒以上押下でmouse系が反応しないのはタッチとマウスの操作性の違いを考慮しての挙動と思われる

>>429でmousedownが発火しなかったのはおそらくalertを使用していたのが原因
マウスやキーボードのイベントハンドラのデバッグでalertを使用すると後続のイベントに影響が出るので
consoleなどに置き換えた方がいいと思う

で、>>420のスマホでもmouseupイベントが反応するのはバグか？という問いに対しては
スマホがtouchイベントにしか反応しないとmouseイベントで書かれたページを操作できなくて困る
そのことに対する救済措置でありバグではないと推測するがどうだろうか

**デフォルトの名無しさん** · 2022/09/18(日) 14:53:23.29

そう短タップをクリックとみなすためのものだよ
ただし短タップ判定のためmousedown/mouseup/clickはtouchstart/touchendより若干ラグがある
touchstart/touchendで処理した際にマウスイベント発火させたくないならpreventDefaultする方法がある

**デフォルトの名無しさん** · 2022/09/18(日) 19:49:26.31

>>432-433
なるほど、そういうことですね
ありがとうございました

**デフォルトの名無しさん** · 2022/09/19(月) 10:20:03.23

そもそもそんなメジャーなプロダクトをちょっと触っただけで発生するような現象を
バグだと疑ってかかるのはいかがなものかという話

**427** · 2022/09/20(火) 01:26:00.73

>>428
うまくいった！
BufferSource.start には再生開始時刻を指定できるから、適当な時間で分割したバッファを開始時刻をずらして start しておくことと、
BufferSource 再生終了時イベント onended で新たなバッファを追加していけばいい。

**デフォルトの名無しさん** · 2022/09/20(火) 07:14:05.18

触ったことない領域だったから的外れなものを紹介しちゃったかなと思ってたけど
役に立ったようなら何より

**デフォルトの名無しさん** · 2022/09/25(日) 18:19:36.24

#test{
width:80%;
heigh:auto;
}

このような記述のcssがあった場合cssからwidthやheightを取得したいです
この場合widthが80%、heightっがautoと表示されればＯＫです

**デフォルトの名無しさん** · 2022/09/25(日) 18:37:13.46

getComputedStyle()使えば良いのでは？

**デフォルトの名無しさん** · 2022/09/25(日) 20:48:47.27

>>439
それだとpx値に変換されてしまいました。
cssに書いてあるそのまんまの値を取得したいんです。

**デフォルトの名無しさん** · 2022/09/25(日) 20:54:57.74

element.getAttribute(style)とか？

**デフォルトの名無しさん** · 2022/09/25(日) 21:56:43.82

>>441
それでやっても取得できませんでした

**デフォルトの名無しさん** · 2022/09/25(日) 22:13:33.47

>>442
ちなみに、それができたとして何をしようとしてるの？

**デフォルトの名無しさん** · 2022/09/25(日) 22:34:13.70

CSS ファイルを読み込んで、パースするのは？

**デフォルトの名無しさん** · 2022/09/25(日) 22:55:14.37

>>438
適当だけどこんな感じで
https://jsfiddle.net/fk9wvacy/

**デフォルトの名無しさん** · 2022/09/25(日) 23:38:35.06

>>443
widthが固定値か相対値かで処理を分けたいからです
>>444-445
それで取得できました

**デフォルトの名無しさん** · 2022/09/26(月) 17:39:21.17

>>445
同じファイルにある場合はそれでcssRulesを取得できたんですけど
外部ファイルに置いたcssをlinkタグで読み込んだ場合は
cssRulesが取得できませんでした。
外部ファイルのcssのcssRulesを取得するのは無理なんでしょうか？

**デフォルトの名無しさん** · 2022/09/26(月) 18:32:01.21

どういう環境でどういうコードを実行してどういう現象が発生したのかが分からないと適切なレスを返すのは難しいよ

おそらくは↓にあるようなコードからCSSにアクセスする際の制限ではないかと思うけど
https://qiita.com/querykuma/items/930b20758b06c31d2af5

**デフォルトの名無しさん** · 2022/09/26(月) 21:43:25.19

>>448
それでした
ありがとうございました

**デフォルトの名無しさん** · 2022/09/26(月) 23:37:36.30

VSCode の拡張機能では、

open in browser では、ローカルファイルアクセスになる。
この場合、CORS など、ブラウザの色々な制限がある

file:///C:/Users/Owner/Documents/test/index.html

一方、Live Server では、
自分のPC 内にサーバーを立ててから、そこから配信されるので、テストしやすい

http://127.0.0.1:5500/test/index.html

**デフォルトの名無しさん** · 2022/10/12(水) 22:10:27.46

var str = "calc((100% - 50px) / 2)";

calc()で囲まれた部分を取り出すにはどうやったらいいですか？
(100% - 50px) / 2と表示されればＯＫです

**デフォルトの名無しさん** · 2022/10/12(水) 23:59:28.98

>>451
// calc()で囲まれた文字列（マッチしなかった場合はnull）
console.log((str.match(/(?<=calc\().+(?=¥))/) ?? [])[0]);

**デフォルトの名無しさん** · 2022/10/13(木) 12:45:47.55

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

**デフォルトの名無しさん** · 2022/10/17(月) 11:14:15.53

「初めてのJavaScript 第3版」を読んでます
訳者コメントで日本語識別子について触れてます
let 現在の温度 = 16;
let 目標温度, 部屋1 = "会議室A", 部屋2 = "ロビー";
↑
こういうのです。日本語話者には分かりやすくていいんじゃないかと好意的な感じですが...

> let 渡辺 = { age: 25 } ;
> 渡邊.age
Uncaught ReferenceError: 渡邊 is not defined
こんなん混乱の元だと思うんですがどうなんでしょうね？
日本限定のサービスなら結構使われてたりするんでしょうか

**デフォルトの名無しさん** · 2022/10/17(月) 13:25:44.34

なんでもかんでも日本語識別子にはせんよ
業務専門用語満載のエンティティを相手にしなきゃいけなくて
いちいちそれっぽい英訳やローマ字にするよりは日本語そのままの方がマシって状況で
仕方なく使うぐらい

**デフォルトの名無しさん** · 2022/10/17(月) 13:34:49.01

日本語の変数は流石に使わないｗ

**デフォルトの名無しさん** · 2022/10/17(月) 13:50:05.73

ありがとうございます、やっぱそうですよね

**デフォルトの名無しさん** · 2022/10/17(月) 14:20:57.28

>>454
それ、今 ID にマルチバイト使用したいって案件で泣いてるｗ
正規化が糞めんどくさい

**デフォルトの名無しさん** · 2022/10/17(月) 18:34:01.49

cssのtransform:scaleで縮小した場合にできる余白を削除してくれる
フレームワークやライブラリってありますか？
なかったら独自で余白の削除しなければならないですか？

**デフォルトの名無しさん** · 2022/10/17(月) 21:07:02.94

>>458
何のIDか分からんけど値がマルチバイトになるだけならこの話題と関係ないような気がするが

**デフォルトの名無しさん** · 2022/10/17(月) 21:59:29.32

>>460
識別子として渡邊を渡辺と正規化するかどうかって話だよ
アルファベットですらユニコード対応しようとすると糞めんどくさい

**デフォルトの名無しさん** · 2022/10/17(月) 22:25:07.48

つまり値としての"渡辺"と"渡邉"を別のものとするのか同じものとしてどちらかに寄せるかみたいな話？
確かに>>454は例として渡辺を出したけどもあくまで変数名やプロパティ名として
日本語を使用する際の問題点の一例として挙げただけであって
本質的には別の問題だと思うぞ

**デフォルトの名無しさん** · 2022/10/20(木) 19:32:12.82

**デフォルトの名無しさん** · 2022/10/20(木) 22:22:36.37

>>463
JSON.stringifyはArray.isArrayで配列かどうかのチェックをして、それによって挙動を変えている。
で、Array.isArrayはそのオブジェクトがエキゾチックオブジェクトかどうかを判定基準のひとつにしている。
エキゾチックオブジェクトは内部仕様でArray.constructorからしか作れない。

というのがおそらく理由。
Array.isArray(a1)===Array.isArray(a2)の結果はfalseになる。

**デフォルトの名無しさん** · 2022/10/20(木) 22:30:08.59

>>464
ありがとうございます。スッキリしました。

**デフォルトの名無しさん** · 2022/10/27(木) 16:40:09.53

let a = "0px";
let b = "1000px";
let animation = element.animate(
{
left:[a,b]
}
,
{
iterations:1,
direction:"normal",
easing:"ease",
fill:"forwards",
duration:1000
}
このアニメーションのleftを変数とするにはどうやればいいんですか？

**デフォルトの名無しさん** · 2022/10/27(木) 18:15:16.28

let name = "left";
let animation = element.animate( { [name] : [a,b] } , ...

こういうコト？仕様のどこに書かれてるか知らんけどたぶんどの環境でもいけるはず

**デフォルトの名無しさん** · 2022/10/27(木) 18:20:15.80

>>467
はい、ありがとうございます

**デフォルトの名無しさん** · 2022/10/27(木) 20:04:48.47

const left = [a, b];
const animation = element.animate({left}, ...

一般的には上記のように渡す（変数名がそのままkeyになる）ことが多いけど、そういうことではなくて?

**デフォルトの名無しさん** · 2022/10/28(金) 00:15:16.96

>>463
基本的なことだけど、

初心者は、あいまい等価演算子== を使わず、
厳密等価演算子=== だけを使うこと

型違いでバグるから、使ってはいけない。
ここは他の言語と違う

**デフォルトの名無しさん** · 2022/10/28(金) 02:45:12.29

と説教するやつがいるが、型をあいまいに扱えるのが良いところなのに。

**デフォルトの名無しさん** · 2022/10/28(金) 09:33:25.27

特徴ではあるが単純に良いところと言い切るのには賛同できんな

**デフォルトの名無しさん** · 2022/10/28(金) 11:45:54.02

ウェブブラウザで動かすには実質 JavaScript しか無いから当たらないけど、例えばサーバサイドなんかでわざわざ PHP 使って型を厳密化するのはアホらしいと思うわ。
型に拘りたいなら JAVA でも使ってろよと。