+ JavaScript の質問用スレッド vol.124 +

■ このスレッドは過去ログ倉庫に格納されています
2021/11/10(水) 15:24:24.80ID:jxD2VXPG0
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured
305231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.229.102])
垢版 |
2022/01/12(水) 09:55:20.12ID:moNKRHMad
>>304
何となくですが、普通どうするのかわかったような気がします。

アドバイスありがとうございます。
2022/01/12(水) 12:17:05.53ID:/ZdmJSDda
単にリソースを保管して読込を速くしたいならキャッシュを制御すればいい
何が目的でそれを使うのかよく考えないと訳わからんコードになる
307231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.235.161])
垢版 |
2022/01/13(木) 08:13:45.35ID:9NWqLsjEd
blobで調べたサイトで出てきた、完成されたコードに、画像を置いて実行したら、エラーが出てしまいました。

【エラーメッセージ】
Putting elephants in IndexedDB
DOMException { stack: "Error: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.↵ at putElephantInDb (http://localhost:2435/storage/emulated/0/index.html:95:34)↵ at XMLHttpRequest.<anonymous> (http://localhost:2435/storage/emulated/0/index.html:84:21)" }

どのへんでエラーが出たのかまではわかったのですが、何故エラーが出たのかわかりません。
コードはコピペです。
解決案等ありましたら、教えていただけると幸いです。

https://52.gigafile.nu/0120-e68fc48424d65f0f7ae137f3f97cbbc0
2022/01/13(木) 10:49:49.47ID:BdYH6d7w0
>>307
山ほど言いたい事があるが……
・コードが動かない、っていうなら実行環境も書け
　(JavaScriptはブラウザ単位で動作が異なる場合もあるし、必須）

・初心者ならまずは動くコードを元に改良なり修正なりしろ
　確認したら元ネタのコードは2012年だから、あなたの動作環境で動く補償が無い
　（軽く見ただけでもエディタがエラー吐くレベルの互換性不備が2箇所ぐらいある）
https://dev.mozilla.jp/2012/07/storing-images-and-files-in-indexeddb/

・初学者向けのチュートリアルやってこい
　とりあえず基本を勉強しろ、明らかに実装方針が迷走してる
　エラーを解決できても、この先にエラー地獄になるのが目に見えてる
　とりあえず専門書買うなり、Webで公開されるチュートリアルもあるからやってこい
　(ゲームが作りたいなら以下を見てみろ）
　https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
　http://puyo.sega.jp/program_2020/
309231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.234.197])
垢版 |
2022/01/13(木) 12:01:21.75ID:2Kp13/God
動作環境は、Android10 F-51A
Chrome 93.0.4577.62

です。

最初の質問だった画像の表示と、各種データ（質問時、画像保存が別物とは知りませんでした）のセーブ&ロードさえ出来れば、
後はどうにでもなると踏んでいたので、それらについてだけ、こちらで質問してしまいました。

テキストを表示したり、プレイヤーキャラクターを動かしたり、
まだ簡易版ですがワールドマップの自動生成させたり、
いわゆるNPCが動くプログラムなどは、既に組んでいます。

後はここだけなんです、問題は。

スレの皆さんを不快にさせてしまい、申し訳ありませんでした。
2022/01/13(木) 12:34:36.45ID:v0PpJSuUa
やる気はあるみたいだし不快って程じゃない
でも何がしたいのかよく分からない

保存する画像はユーザーがアップロードするの？それともcanvasに描いた内容を変換するの？
元々サーバーにある画像をわざわざDBに入れるとしたら理由が分からない
311231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.208.200])
垢版 |
2022/01/13(木) 15:14:42.78ID:EndGOLp+d
>>310
https://youtu.be/RKcFIg1yHOI

こちらの動画を参考に、自分なりに考えてやった結果が >>296 >>229 なんですよね。
他にやりようある、ありそうってのはわかるんですが、上手く行かないです。
2022/01/13(木) 15:18:53.58ID:BdYH6d7w0
>>309
こっちも口調が強くなってすまんな
>最初の質問だった画像の表示と、各種データ（質問時、画像保存が別物とは知りませんでした）のセーブ&ロードさえ出来れば、
今やりたい事は
①データをセーブする(localstorageまたIndexedDB）
②①で保存したデータを読み込んで、セーブした時の状態に戻す
っていう事でいいかな？
だとすると、なおさら画像をDB等に保存したい理由が分からない

もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと
ロードした時に復元できない、って思ってる？
313231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.208.229])
垢版 |
2022/01/13(木) 16:01:24.15ID:Pj0bwTK9d
>>312
いえ、こちらこそ、気を遣わせて申し訳ありません。

＞もしかしてマップとかプレイヤーの『画像データ』をDBに書き込まないと
＞ロードした時に復元できない、って思ってる？

そのものズバリでした。
先ほど >>310 さんのレス見て、ん？　とは思ったのですが、
やっぱり画像ってセーブとかロードとかするものじゃないんですね。
314231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.208.229])
垢版 |
2022/01/13(木) 16:03:06.44ID:Pj0bwTK9d
あと、今やりたいことはまさしくそれです。
2022/01/13(木) 16:13:19.06ID:BdYH6d7w0
>>313
よほど特殊な事情が無い限り、DBに画像データを書き込むってことはないな……

例えばマップデータだったら、動画見てると配列で定義してるよね
逆に言えば、その配列情報さえあれば、同じマップを生成する事が出来るからそれだけ保存すれば良い
そうすれば画像データよりも格段に軽い状態で保存できる
プレイヤーの位置情報とかも、座標データを書き出せばそこから位置が復元できる

で、実行環境で出来るか分からんけど
直接サーバー上にファイルを書き出せるなら、localstorageやIndexedDBに拘らなくても
極端な話、テキストとかJSONとかで書き出して
ロードする時にはそのファイルからデータを読み込んで、復元させるっていう方法も取れる
316231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.208.229])
垢版 |
2022/01/13(木) 16:44:42.35ID:Pj0bwTK9d
皆様、ありがとうございました。

ここに来るのがこれで最後になるよう、頑張ってみようと思います。
317デフォルトの名無しさん (ﾜｯﾁｮｲ 23f0-4goK [61.45.110.150])
垢版 |
2022/01/13(木) 20:06:01.17ID:Dm2SSKhE0
WebSockサーバーと接続し、データを受信したら次のデータを要求する様な流れで、
泥のChromeと比べてPCのChromeとEdgeは物凄く遅く、泥と比べて1/5程度の速度なのですが
configで実行速度的な物を設定出来るのでしょうか

泥は4.1の化石でもPCよりずっと早いです
2022/01/13(木) 22:50:17.84ID:QIlO/ODF0
>>317
Chromeの開発ツールで通信速度・CPU性能を意図的に遅くすることができます。
「Chrome Network Throttling」「Chrome CPU throttling」辺りで情報が出ます。
2022/01/13(木) 23:29:03.91ID:Ia/gMc7B0
画像データは、各マス目の画像の番号の並びを保存する

例えば、1は道路・2は山・3は川とか、
さらに、1～3の画像を保存するか、保存せずにサーバーから送るか

1,2,1
1,3,1
1,3,3

JavaScript のゲームエンジンは、Pixi.js ベースのPhaser とか。
C# なら、Unity とか

このイタリア人はPhaserで、461 の記事を書いている
https://www.emanueleferonato.com/
2022/01/14(金) 03:35:28.27ID:2MXtaXlm0
>>316
頑張れよー
次に来る時は質問の回答者になれる事を祈ってるわ
321231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.230.170])
垢版 |
2022/01/15(土) 10:23:00.28ID:S4wDIFSqd
たった二日で戻ってきてしまい申し訳ありません。知恵をお貸しいただけたら幸いです。

【環境】
Android10 F-51A
Chrome 93.0.4577.62

【エラーメッセージ】
DOMException { stack: "Error: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.↵ at IDBOpenDBRequest.openReq.onsuccess (http://localhost:2435/storage/emulated/0/index.html:63:22)" }

【期待する結果】
データベースかオブジェクトストアを増やしたいです
index？　を増やす？　のは試してみましたが、自分では上手く行きませんでした。

【サンプルコード】
https://jsbin.com/zelonizugu/edit?js
2022/01/15(土) 10:52:09.59ID:nH/3h8nXa
かたくなにライブラリを使おうとしない理由はなに？
それだけ教えて
323231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.230.170])
垢版 |
2022/01/15(土) 10:57:45.01ID:S4wDIFSqd
>>322
気持ち悪いからです。

いや、ネタとか煽ってるとかじゃなく、本当にです。なんか気持ち悪いんです。
2022/01/15(土) 11:44:06.71ID:hsRAWFnHM
せめてライブラリのコードを読んでマネしてみるとか
2022/01/15(土) 13:39:49.54ID:XtDGDCrq0
createObjectStoreだけしてcreateIndexしてない
画像データそのままぶっこむとかあほみたいなことする必要なくなった？んだし
データベースの基本が分かってないならlocalStorageに戻れば？
326231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.198.160])
垢版 |
2022/01/15(土) 14:22:56.89ID:+L4WFDi5d
ライブラリ？　とか見ても正直把握しきれず困っていましたが、力業で何とかなりました。

お世話になりました。ありがとうございました。
2022/01/15(土) 14:23:41.37ID:gRCv6ifL0
>>321
Qitaの記事そのままコピーしてもそら動かんだろwwww
やりたいならMDNみたいなちゃんとしたチュートリアルからやれ
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB

あと何度も言うが、なるべく最小の形で実装して
細かく試しながらやれよ、動かないコードをツラツラ書いてもしょうがないだろ
2022/01/15(土) 15:38:38.42ID:ZBFGEo1/0
>>231
問題がぐちゃぐちゃに絡み合ってるなこれ。
a. indexedDB.open() が複数回呼ばれている（dbVersionの値もどうなるか怪しい）
b. storeName / data が途中で上書きされている（他の変数も軒並み上書きされてる）

a. により、onupgradeneeded とか db.createObjectStore の考え方がぐちゃぐちゃになる（DBのバージョン管理が全くできていない）
b. により、想定外の挙動になっている。（"itemStore"を2回作ろうとしている。プライマリキーが不正になってる）

次のように変更すれば、動くと思う。
indexedDB.open() が1つになるように書き換える。（dbVersionを意識して書く）
var を使用しないように書き換える。 const を積極的に使うようにする。（const が無理な場合のみ let を使用する）

正直、 localStorage 使う方がいいと思うぞ。localStorage で容量が足りないならば、保存するデータから考え直したほうがいい。

>>322
このスレ、ライブラリの質問禁止になってる（>>1 参照）から、スレ的にはライブラリ使わないでいいと思うぞ
329231 (ｽﾌﾟｯｯ Sd03-Ylb5 [1.75.198.160])
垢版 |
2022/01/15(土) 15:58:17.33ID:+L4WFDi5d
>>327
自分もそのサイト参考にしたいんですが、おま環かわからないんですが、よくフリーズするんですよ。
今繋げたんですが、やっぱりこうなりました。

https://i.imgur.com/mBDXebU.jpg

>>328
アドバイスありがとうございます。
とても助かりました。
2022/01/15(土) 23:03:48.55ID:gRCv6ifL0
>>329
こういうと元も子もないないけど、
初学者なら一回ちゃんとPC環境で落ち着いて開発した方が良くないか？
PC版開発⇒Android環境で動作するようにテスト＆修正っていう方がやりやすいぞ
(MDNのサイトをAndroidで見てる辺り、ちょっと開発環境が気になった）
2022/01/15(土) 23:42:23.10ID:iJzr35B10
>1 に書いてある、
>(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。

たぶん、これは元々無かったのに、荒らしが勝手に入れた。
荒らしはテンプレを勝手に改変して、自分が有利な話題だけに絞る。
自分が嫌な話題をさせないように邪魔する

荒らしは必ず、2回以上書き込んで複数人いるように思わせる。
それで、議論を自分が有利な方向へ持っていく

Python のすべてのスレのテンプレも、荒らしが改変している。
>・当スレにRubyのソースコード類を書くことを禁ず
>・Ruby等、Pythonではないプログラミング言語での回答類・質問を書くのも禁止
>・「Ruby では」「Rubyでは」「Rails」正規表現→「^クソチョンw$」をNGワード登録推奨

テンプレ荒らし。
ずっと、荒らしがスレを立てて、テンプレを毎回改変してくる

それをそのまま使っちゃいけない。
必ず削除するか、別のスレを立て直す

この辺の対策は、漏れらは散々やってきた
2022/01/15(土) 23:53:50.82ID:6cYxC8yoM
そこでつまづいてるならライブラリ使った方がいいと思うぞ
一応コピペしたら使えるlocalforageのテストコード貼っとくから
あくまでテストコードだからPromise.allとか使ってないけど
https://pastebin.com/f5FtchSD
2022/01/16(日) 01:28:59.06ID:RG8YDX1E0
初心者は、Ruby, jQuery, Lodash みたいな簡単な言語・ライブラリなどを使うと、
時間を削減できて、その分を勉強に回せる

だから荒らしは、それを出来ないように制限してくる。
初心者が勉強して上達するのが嫌なんだろう。
自分が不利になるから

それで、あちこちのスレで、ずっとRuby, jQuery, Lodash 禁止のテンプレを作っている。
漏れらは散々、それらの荒らしと戦ってきた
2022/01/16(日) 02:54:37.36ID:v/bsDKuq0
どの言語でもRubyをゴリ押しするアホが居たからだろ。
2022/01/16(日) 03:56:51.32ID:tdI2bixr0
RubyガイジがRubyスレ以外の言語で現れるからだろ
しかも質問に対して「Rubyでは～」って言ってRubyのコード貼り付けるし
言い方が悪いけど、Ruby布教したいなら大人しくRubyスレだけでやってくれよ
2022/01/16(日) 06:23:17.74ID:69vcad0C0
何でネットに仲間意識があるんだろう？
不思議だな、リアルに仲間が居ないのか？
2022/01/16(日) 06:38:19.21ID:Lkv6MjG/0
前も言ったがrubyスレでpythonの話してもいいっていうなら考える余地がある
現状自分に都合のいい事押し付けてるだけ
2022/01/17(月) 01:32:28.96ID:2Ob1kDrm0
element.addEventListener(

"toucstart",
function(e){

setTimeout(

function(){

document.addEventListener('touchmove', disableScroll, { passive: false });

}
,
2000

);

}

);

function disableScroll(e) {
e.preventDefault();
}

elementを２秒以上タッチしたらスクロール禁止にしたいんだけどうまくいきません
どうすればいいんですか？
339デフォルトの名無しさん (ﾜｯﾁｮｲ cd10-76Y4 [180.12.82.129])
垢版 |
2022/01/17(月) 01:33:54.40ID:2Ob1kDrm0
訂正：touchstartです
2022/01/17(月) 01:52:23.96ID:fRpijKvH0
長押しか

Lodash に、そういう関数が無いか？
2022/01/17(月) 02:08:44.57ID:HXNtZOIm0
>>338-339
touchstartとtouchendのタイムスタンプの差分が2秒以上か確認すれば良い
setTimeoutは不要
342デフォルトの名無しさん (ﾜｯﾁｮｲ cd10-pleP [180.12.82.129])
垢版 |
2022/01/17(月) 08:35:06.65ID:2Ob1kDrm0
>>341
２秒以上押している間処理実行という場合はどうしたらいいんですか？
2022/01/17(月) 11:30:42.13ID:HXNtZOIm0
>>342
「toucstartからtoucendまでの間」が押している間
344デフォルトの名無しさん (ﾜｯﾁｮｲ cd10-pleP [180.12.82.129])
垢版 |
2022/01/17(月) 12:20:33.86ID:2Ob1kDrm0
>>343
touchendだとタッチを離さないとだめなので
タッチを離さないで２秒以上押しっぱなしという意味です
2022/01/17(月) 12:35:37.47ID:46yYb1/oM
だからtouchstartから2秒以内にtouchendが無ければ長押し判定でしょ
2022/01/17(月) 13:25:59.68ID:HXNtZOIm0
>>344
touchstartで処理を開始し、touchendまたは2秒後に処理を停止すれば良い
ボインタ位置も見るならtouchmoveで別の場所に移動した時にも処理を停止すれば良い
2022/01/17(月) 14:12:06.81ID:KLYqBwLr0
スクロール始まる前のtouchmoveならpreventDefaultでスクロール禁止できるけど
一旦スクロール開始しちゃったら後のtouchmoveでpreventDefaultしてもスクロールキャンセルできない臭い
2022/01/17(月) 14:43:40.87ID:/IOfqNlx0
>>338
こゆこと？
指がtouchstartから2秒以上同じ位置に停止していた場合、その後touchend（指を離す）までに発生したtouchmove（スクロール）を中止する。

var element = document.getElementById('element');
let timer, flag = false;
element.addEventListener('touchstart', function(event) {
timer = setTimeout(function() { flag = true; }, 2000);
});
element.addEventListener('touchend', function(event) {
timer = clearTimeout(timer);
flag = false;
});
document.addEventListener('touchmove', function(event) {
if (flag) { event.preventDefault(); }
else if (timer) { timer = clearTimeout(timer); }
}, {passive:false});

>>347
touchmoveが一旦開始すると以降キャンセル不可になるみたいだな
349デフォルトの名無しさん (ﾜｯﾁｮｲ cd10-pleP [180.12.82.129])
垢版 |
2022/01/17(月) 18:08:34.74ID:2Ob1kDrm0
>>344
if(touch_end_time - touchi_start_time >= 2){関数呼び出し}ってことかな？
>>346
なるほどー
>>348
だいたいそういうことです
2022/01/17(月) 18:35:14.87ID:S5612HsoM
touchstartでグローバル変数にsetTimeoutを格納した上で、touchendでclrarTimeoutすれば、clearされない場合にのみdisableScroll()が実行される
2022/01/17(月) 20:48:15.45ID:n9KL/cV4a
同じ要素が複数あるときに、スクロールした場所だけにactiveを付与する方法ってないでしょうか？

例えば、pタグが等間隔に10個ほど並んでいて、その場所までスクロールしたらそのタグだけにaddClassを実行。それをスクロールする度に実行するという感じです。

該当のタグ全てに連番でclassを振るという方法から始めてみましたが、「今スクロールが到達しているpタグだけにaddClass」という
振り分けが分からず苦戦しております。
どうかお知恵をお借りできたら嬉しいです
2022/01/17(月) 21:02:08.36ID:KLYqBwLr0
>>351
IntersectionObserver
2022/01/17(月) 23:24:28.34ID:fRpijKvH0
「javascript スクロールしたら表示」で検索！

jQuery のscrollTop() を使うのかな？
2022/01/17(月) 23:52:07.20ID:sHRIiBJ+0
>>352-353
どうもです。

>>353
一応それやってみてるんですけど、その方法だと対象のセレクターが複数ある時に使えなくて・・・
2022/01/18(火) 16:54:34.98ID:k8xAul1v0
ユーゲンガルグ関数がわからん。
356デフォルトの名無しさん (ｽﾌｯ Sd03-oY3f [49.106.200.84])
垢版 |
2022/01/18(火) 17:00:08.36ID:qIbLvF83d
めちゃくちゃ素人質問で申し訳ないんだけど複数のbuttonがある状態で押されたボタンのvalue要素を取得する事ってできる？
他との問題でボタンにidを付与出来ないからclassとnameを使ってなんとかしようとしてたんだけどサッパリわからん……
2022/01/18(火) 18:05:16.94ID:LpXG9iMK0
>>356
event.target.value
2022/01/18(火) 18:14:12.29ID:i9X1I8m+0
>>356
this.value
2022/01/18(火) 19:33:28.72ID:J9BuAn5e0
javascriptでマウスクリックできますか？
2022/01/18(火) 20:52:58.76ID:LpXG9iMK0
>>359
ボタン等の特定要素にはclickメソッドがある
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/click

clickイベント発火でよければ
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent
2022/01/18(火) 22:37:22.43ID:JAqSdPQV0
>>354
>対象のセレクターが、複数ある時に使えなくて

HTML,CSS,Javascript　スクロールしたらふわっと表示(jQueryなし）
https://notetoself-dy.com/javascript-scroll/

このサイトでは、すべてのup クラスが付いた要素を、
1つずつループして、show クラスを付けている

<div class="up op">表示1</div>
<div class="up op">表示2</div>
2022/01/20(木) 21:45:57.61ID:RhIW6qPa0
javascriptで特定のクラス内の文字列をカットしたいです。
.containerの子要素である、.textをターゲットにしたいです。


しかし、container外にも.textがある可能性も考えられます。
ターゲットをcontainer内に絞るには、どんな関数を組めばいいでしょうか？
https://jsfiddle.net/bgegg/gf324bha/2/
2022/01/20(木) 22:05:50.35ID:NuVLsXYX0
function textCutting(selector) {
const limited_number = 7;
document.querySelectorAll(selector).forEach(node => {
node.textContent = node.textContent.trim().substr(0, limited_number);
});
}

textCutting("#container > .text");
2022/01/21(金) 19:52:13.30ID:rIwZ3iU60
>>363
ありがとうございます。返信忘れてました。

引数にcontainerを入れておきたいのですが、クラスである場合もあります。
クラスかidどちらでも取ってこれる関数ってありましたか？
2022/01/21(金) 19:59:06.53ID:SSxUhBiBM
>>364
釣りなのか?
2022/01/21(金) 20:07:10.92ID:9UlpI2W40
>>364
コードの関数名でぐぐって調べないからそういう質問がでてくる >querySelectorAll
2022/01/21(金) 20:35:43.67ID:rIwZ3iU60
そうでした　すみません

上の例でいうselecterは親要素のセレクタのことだったんですね
2022/01/21(金) 21:49:18.45ID:g1zNjN8q0
一次配列をmatchメソッドみたいに正規表現で検索して、適合するすべての値を返すのってどう書けばいいんですか？

[ あ,い,う,え,お,あか,いし ]　←この配列を/[あい].*?/で検索して[ あ,い,あか,いし ]みたいな結果を得たい
joinメソッドで文字列化してmatchメソッドつかわずに「一次配列を検索」したいんです
2022/01/21(金) 21:55:09.36ID:b7lSBqdq0
>>368
["あ","い","う","え","お","あか","いし"].filter(s => /[あい].*?/.test(s));
2022/01/21(金) 21:57:35.84ID:9UlpI2W40
>>368
filterとtest
2022/01/21(金) 22:12:34.42ID:g1zNjN8q0
>>369
>>370
おおおお！ありがとうございます助かりました
2022/01/22(土) 14:09:45.81ID:NNleZLfU0
要素内から複数の要素（例えば同じクラス名を持つ要素）などを取ってくる場合、htmlcollectionとnodelistのどちらを使うんでしょうか？
どちらということはなく、nodelistの下位にある構造がhtmlcollectionかなとも考えています。
2022/01/22(土) 14:12:22.41ID:tKSIbGor0
>>372
liveかそうでないかを意識すれば、どちらでも良い
プロパティ、メソッドも少し違う
2022/01/22(土) 14:44:09.28ID:NNleZLfU0
https://ideone.com/vndbec
https://i.imgur.com/8k3fQ2F.jpg

まず親要素を取り、その後子要素にアクセスしようとしたんですが、foreachは使えないみたいです。
childrenが配列になっていないからかなと思うんですが、インスペクタ見ると配列にはなっているようですが、なぜでしょうか？

>>373
ではhtmlcollection使うことにします。なんとなくとっつきやすかったので。
2022/01/22(土) 14:58:17.72ID:tKSIbGor0
>>374
HTMLCollectionは配列じゃない
forEachも持ってない
使えるメソッドとプロパティを確認すること
2022/01/22(土) 15:34:49.54ID:SQae85PjM
childrenに格納されているhtmlCollectionにはforEachメソッドがないので、下記のように書く必要がある
[...children].forEach()
2022/01/22(土) 15:50:34.18ID:NNleZLfU0
>>375
nodelistに使うものですよね。ありがとうございました。

>>376
ふつうにlengthとってforで回してもいいんですよね。
ソッチのほうが直感的にわかりやすいかなと。
2022/01/22(土) 15:56:19.54ID:NNleZLfU0
>>376
これは何という記述ですか？
ただの、配列化でしょうか？
2022/01/22(土) 16:13:03.92ID:LEmRhRzh0
>>378
スプレッド構文
2022/01/22(土) 16:45:48.19ID:NNleZLfU0
>>379
どうも、見慣れない記述だったので。
こういうのはふつうにforループ回したほうがわかりやすいんでしょうか？
javascript特有の記述というのが難しくて
2022/01/22(土) 16:57:04.97ID:cpTU2V8CM
特別な理由がない限り、letやforの利用を控えることをオススメする
無意味な状態や副作用をできるだけ排除する構成を心がけよう
2022/01/22(土) 17:05:10.48ID:tKSIbGor0
>>380
あなたは「何を使うべきか」よりも「どんな機能なのか」を把握することから始めた方が良い
NodeListとHTMLCollectionの選択でHTMLCollectionを選択したかと思えば、HTMLCollectionを理解してないから使いこなせない
理解する前に選択するからそうなる

俺はHTMLCollectionではfor文を使ってるが、特徴を理解していれば何の問題もない
NodeListならfpr-ofを使ってもよい
理解さえしていれば、自ずと選択が出来る
NodeList、HTMLCollection、スプレッド構文、..,etc を理解してから悩むべきだ
2022/01/22(土) 17:07:49.25ID:tKSIbGor0
×　NodeListならfpr-ofを使ってもよい
○　NodeListならfor-ofを使ってもよい
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of
2022/01/22(土) 17:17:07.24ID:JjDEqDMvM
>>381
普通のforで回すよりfor...inとかfor...ofで回した方が要素すぐ扱えて記述少なくて済むのは置いといて
letはvarより使わない方が良いの？
それともforのインデックス用の i を使わない方がシンプルで良いという限定的な条件での話？
2022/01/22(土) 17:27:40.96ID:tKSIbGor0
>>381
副作用の話は俺も分からなかった
for文に副作用があるとは思えないが
2022/01/22(土) 17:37:01.92ID:cpTU2V8CM
>>384
現状のvarは「互換性のために残されている」のであって、利用禁止が大前提
その上で、どうしてもconstにできない特別な理由がある場合にだけletを使うってこと

さらにその延長で、forについても使わずに済むなら使わない方が良いってこと
2022/01/22(土) 17:56:17.90ID:QY+Rk2d60
letもforもどんどん使いなさい
2022/01/22(土) 17:59:22.62ID:tKSIbGor0
理由不明な禁止ルールを受け入れるようになると、赤の他人の意見を鵜呑みにしておかしなことになるからお勧めはしない
非推奨理由を読んで、受け入れるか判断するのがいいと俺は思う
2022/01/22(土) 19:12:13.08ID:a9ljOduXa
>>386
なるほど了解。
普通のforで回して処理するよりsomeとかreduceとかのほうが何の処理しようとしてるかわかりやすいしね。
varはブロック内からでもグローバル変数になるからどこから変数内容変更されてるか分かりにくくなり易いから良くないね
2022/01/22(土) 19:44:53.36ID:NNleZLfU0
>>382
はい
2022/01/22(土) 19:52:02.18ID:NNleZLfU0
ややこしいのでfor文使うようにします(´・ω・`)、、、
2022/01/22(土) 19:57:06.18ID:NNleZLfU0
あっ、for of いいですね。
htmlcollectionでなぜforeachが駄目なのか謎ですが。
2022/01/22(土) 20:26:37.27ID:NNleZLfU0
vscodeについて質問です。
javascriptの補完は完全ではないのでしょうか？
以下のコードのtextContentの部分は候補に出ません。

https://ideone.com/VWu28k
2022/01/22(土) 20:44:09.65ID:DzShGNE/M
ここはvscodeスレじゃない
一応答えておくとjavascriptは動的型付けなので常に補完が出る訳じゃない
そういうのを求めてるならtypescriptを使う
2022/01/22(土) 20:47:52.03ID:yE/sDV/tM
今回は「使えないみたいです」って聞き方ではないのねw
MDNをよく読んだ上で、実際にどう動くのかをブラウザのコンソールで繰り返し施行するといい
2022/01/22(土) 21:59:01.76ID:0B2OkF2o0
>>392
HTMLCollectionはArrayのPrototypeを持ってないからforEachはつかえない。
HTMLCollectionでforEachを使いたいなら、Array.Prototype.forEach.callとか。
2022/01/23(日) 09:03:46.77ID:ltsaqaCQ0
>>396
どちらも配列だと思うんですが、なぜhtmlcollectionだけ使えないのかが分かりません
2022/01/23(日) 09:04:54.18ID:ltsaqaCQ0
javascriptを書くとき、関数名などに続けて波括弧を書いたほうがわかりやすいと思いますか？

function func(){

console.log("hoge");

}
以下のようにしたほうが構造が分かりやすくないですか？

function func()

{

console.log("hoge");

}
2022/01/23(日) 09:10:19.94ID:pqnTeOnra
JavaScriptで配列とはArrayのこと
"配列っぽい"ことと"配列である"ことは全然違う

逆に聞くけどどうやって両方配列であると判断したの？
2022/01/23(日) 09:20:24.21ID:qS6ibVNz0
>"配列っぽい"ことと"配列である"ことは全然違う

初めてやる人にはそんなこと思いもよらないだろうしな
2022/01/23(日) 09:21:45.33ID:ltsaqaCQ0
>>394
そういうものなのですか。
補完が出ないとちと不安で
2022/01/23(日) 10:15:35.55ID:h5wOxsBg0
>>398
配列とは new Arrayもしくは [] のこと
new ArrayでforEachを使えるのはプロパティ参照時に Array.prototype.forEachを参照するから
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
プロトタイプチェーンを理解すべき
https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
2022/01/23(日) 10:16:08.20ID:h5wOxsBg0
>>399
いわんとすることは分かるが、厳密にはArrayは配列ではない
new ArrayをArrayと書くと誤解を招く
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
404デフォルトの名無しさん (ﾜｯﾁｮｲ 4bdb-4V6Q [217.178.96.78])
垢版 |
2022/01/23(日) 11:26:44.19ID:cv61Nq9M0
>>399
https://youtu.be/sg6pJzAZbqk?t=1504
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況