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

[表示 : 全て最新50 1-99 101- 201- 301- 401- 501- 601- 701- 801- 901- 1001- 2ch.scのread.cgiへ]
Update time : 02/24 16:40 / Filesize : 334 KB / Number-of Response : 1026
[このスレッドの書き込みを削除する]
[＋板最近立ったスレ＆熱いスレ一覧 : ＋板最近立ったスレ／記者別一覧] [類似スレッド一覧]


↑キャッシュ検索、類似スレ動作を修正しました、ご迷惑をお掛けしました

1 名前：デフォルトの名無しさん mailto:sage [2021/11/10(水) 15:24:24.80 ID:jxD2VXPG0.net]: JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は 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
321 名前：231 [2022/01/13(木) 16:03:06.44 ID:Pj0bwTK9d.net]: あと、今やりたいことはまさしくそれです。
322 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 16:13:19.06 ID:BdYH6d7w0.net]: >>313
よほど特殊な事情が無い限り、DBに画像データを書き込むってことはないな……

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

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

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

泥は4.1の化石でもPCよりずっと早いです
325 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 22:50:17.84 ID:QIlO/ODF0.net]: >>317
Chromeの開発ツールで通信速度・CPU性能を意図的に遅くすることができます。
「Chrome Network Throttling」「Chrome CPU throttling」辺りで情報が出ます。
326 名前：デフォルトの名無しさん mailto:sage [2022/01/13(木) 23:29:03.91 ID:Ia/gMc7B0.net]: 画像データは、各マス目の画像の番�
327 名前：�ﾌ並びを保存する 例えば、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/ []: [ここ壊れてます]
328 名前：デフォルトの名無しさん mailto:sage [2022/01/14(金) 03:35:28.27 ID:2MXtaXlm0.net]: >>316
頑張れよー
次に来る時は質問の回答者になれる事を祈ってるわ
329 名前：231 [2022/01/15(土) 10:23:00.28 ID:S4wDIFSqd.net]: たった二日で戻ってきてしまい申し訳ありません。知恵をお貸しいただけたら幸いです。

【環境】
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 (localhost:2435/storage/emulated/0/index.html:63:22)" }

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

【サンプルコード】
https://jsbin.com/zelonizugu/edit?js
330 名前：デフォルトの名無しさん mailto:sage [2022/01/15(土) 10:52:09.59 ID:nH/3h8nXa.net]: かたくなにライブラリを使おうとしない理由はなに？
それだけ教えて
331 名前：231 [2022/01/15(土) 10:57:45.01 ID:S4wDIFSqd.net]: >>322
気持ち悪いからです。

いや、ネタとか煽ってるとかじゃなく、本当にです。なんか気持ち悪いんです。
332 名前：デフォルトの名無しさん mailto:sage [2022/01/15(土) 11:44:06.71 ID:hsRAWFnHM.net]: せめてライブラリのコードを読んでマネしてみるとか
333 名前：デフォルトの名無しさん mailto:sage [2022/01/15(土) 13:39:49.54 ID:XtDGDCrq0.net]: createObjectStoreだけしてcreateIndexしてない
画像データそのままぶっこむとかあほみたいなことする必要なくなった？んだし
データベースの基本が分かってないならlocalStorageに戻れば？
334 名前：231 [2022/01/15(土) 14:22:56.89 ID:+L4WFDi5d.net]: ライブラリ？　とか見ても正直把握しきれず困っていましたが、力業で何とかなりました。

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

あと何度も言うが、なるべく最小の形で実装して
細かく試しながらやれよ、動かないコードをツラツラ書いてもしょうがないだろ
336 名前：デフォルトの名無しさん mailto:sage [2022/01/15(土) 15:38:38.42 ID:ZBFGEo1/0.net]: >>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 参照）から、スレ的にはライブラリ使わないでいいと思うぞ
337 名前：231 [2022/01/15(土) 15:58:17.33 ID:+L4WFDi5d.net]: >>327
自分もそのサイト参考にしたいんですが、おま環かわからないんですが、よくフリーズするんですよ。
今繋げたんですが、やっぱりこうなりました。

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

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

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

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

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

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

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

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

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

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

"toucstart",
function(e){

setTimeout(

function(){

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

}
,
2000

);

}

);

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

elementを２秒以上タッチしたらスクロール禁止にしたいんだけどうまくいきません
どうすればいいんですか？
347 名前：デフォルトの名無しさん [2022/01/17(月) 01:33:54.40 ID:2Ob1kDrm0.net]: 訂正：touchstartです
348 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 01:52:23.96 ID:fRpijKvH0.net]: 長押しか

Lodash に、そういう関数が無いか？
349 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 02:08:44.57 ID:HXNtZOIm0.net]: >>338-339
touchstartとtouchendのタイムスタンプの差分が2秒以上か確認すれば良い
setTimeoutは不要
350 名前：デフォルトの名無しさん [2022/01/17(月) 08:35:06.65 ID:2Ob1kDrm0.net]: >>341
２秒以上押している間処理実行という場合はどうしたらいいんですか？
351 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 11:30:42.13 ID:HXNtZOIm0.net]: >>342
「toucstartからtoucendまでの間」が押している間
352 名前：デフォルトの名無しさん [2022/01/17(月) 12:20:33.86 ID:2Ob1kDrm0.net]: >>343
touchendだとタッチを離さないとだめなので
タッチを離さないで２秒以上押しっぱなしという意味です
353 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 12:35:37.47 ID:46yYb1/oM.net]: だからtouchstartから2秒以内にtouchendが無ければ長押し判定でしょ
354 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 13:25:59.68 ID:HXNtZOIm0.net]: >>344
touchstartで処理を開始し、touchendまたは2秒後に処理を停止すれば良い
ボインタ位置も見るならtouchmoveで別の場所に移動した時にも処理を停止すれば良い
355 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 14:12:06.81 ID:KLYqBwLr0.net]: スクロール始まる前のtouchmoveならpreventDefaultでスクロール禁止できるけど
一旦スクロール開始しちゃったら後のtouchmoveでpreventDefaultしてもスクロールキャンセルできない臭い
356 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 14:43:40.87 ID:/IOfqNlx0.net]: >>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が一旦開始すると以降キャンセル不可になるみたいだな
357 名前：デフォルトの名無しさん [2022/01/17(月) 18:08:34.74 ID:2Ob1kDrm0.net]: >>344
if(touch_end_time - touchi_start_time >= 2){関数呼び出し}ってことかな？
>>346
なるほどー
>>348
だいたいそういうことです
358 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 18:35:14.87 ID:S5612HsoM.net]: touchstartでグローバル変数にsetTimeoutを格納した上で、touchendでclrarTimeoutすれば、clearされない場合にのみdisableScroll()が実行される
359 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 20:48:15.45 ID:n9KL/cV4a.net]: 同じ要素が複数あるときに、スクロールした場所だけにactiveを付与する方法ってないでしょうか？

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

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

jQuery のscrollTop() を使うのかな？
362 名前：デフォルトの名無しさん mailto:sage [2022/01/17(月) 23:52:07.20 ID:sHRIiBJ+0.net]: >>352-353
どうもです。

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

clickイベント発火でよければ
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent
369 名前：デフォルトの名無しさん mailto:sage [2022/01/18(火) 22:37:22.43 ID:JAqSdPQV0.net]: >>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>
370 名前：デフォルトの名無しさん mailto:sage [2022/01/20(木) 21:45:57.61 ID:RhIW6qPa0.net]: javascriptで特定のクラス内の文字列をカットしたいです。
.containerの子要素である、.textをターゲットにしたいです。

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

textCutting("#container > .text");
372 名前：デフォルトの名無しさん mailto:sage [2022/01/21(金) 19:52:13.30 ID:rIwZ3iU60.net]: >>363
ありがとうございます。返信忘れてました。

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

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

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

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

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

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

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

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

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

function func(){

console.log("hoge");

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

function func()

{

console.log("hoge");

}
408 名前：デフォルトの名無しさん mailto:sage [2022/01/23(日) 09:10:19.94 ID:pqnTeOnra.net]: JavaScriptで配列とはArrayのこと
"配列っぽい"ことと"配列である"ことは全然違う

逆に聞くけどどうやって両方配列であると判断したの？
409 名前：デフォルトの名無しさん mailto:sage [2022/01/23(日) 09:20:24.21 ID:qS6ibVNz0.net]: >"配列っぽい"ことと"配列である"ことは全然違う

初めてやる人にはそんなこと思いもよらないだろうしな
410 名前：デフォルトの名無しさん mailto:sage [2022/01/23(日) 09:21:45.33 ID:ltsaqaCQ0.net]: >>394
そういうものなのですか。
補完が出ないとちと不安で
411 名前：デフォルトの名無しさん mailto:sage [2022/01/23(日) 10:15:35.55 ID:h5wOxsBg0.net]: >>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
412 名前：デフォルトの名無しさん mailto:sage [2022/01/23(日) 10:16:08.20 ID:h5wOxsBg0.net]: >>399
いわんとすることは分かるが、厳密にはArrayは配列ではない
new ArrayをArrayと書くと誤解を招く
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
413 名前：デフォルトの名無しさん [2022/01/23(日) 11:26:44.19 ID:cv61Nq9M0.net]: >>399
https://youtu.be/sg6pJzAZbqk?t=1504
414 名前：デフォルトの名無しさん mailto:sage [2022/01/24(月) 05:35:59.89 ID:VeWznQkJ0.net]: >>362
.container の子要素(子孫を含めない・直下のみ)である、.text は、.container > .text

親と子を、別々に取得するなら、jQuery で、

<div class="aaa">
<div class="xxx">ああ</div>
<div class="
415 名前：yyy">いい</div> <div class="xxx">うう</div> </div> <div class="aaa"> <div class="xxx">111</div> <div class="xxx">222</div> </div> const parents = $( '.aaa' ) // 子の中で、xxx クラスのものだけを取得する const children = parents.children( '.xxx' ) children.each( function( ) { console.log( $( this ).text( ) ) } ); これで、ああ・うう・111・222 が表示されて、 「いい」だけは表示されない 初心者は、素のJavaScript(JS)で書かずに、jQueryを使った方がよい。 JSで書くと、可読性も悪いし、バグってばかりで時間を損する []: [ここ壊れてます]
416 名前：デフォルトの名無しさん [2022/01/24(月) 07:11:58.20 ID:bR7FKfqoM.net]: ハゲは、素のjQueryで書かずに、Javascript(JS)を使った方がよい。
jQueryで書くと、プログラミングの本質が理解できていないままだし、ハゲてばかりで毛を損する
417 名前：デフォルトの名無しさん [2022/01/24(月) 17:37:07.00 ID:LBRFFVWL0.net]: 初心者こそjQuery使わずに書くべき
418 名前：デフォルトの名無しさん [2022/01/25(火) 18:13:09.23 ID:xKqTlXah0.net]: element.addEventListner(
"click",
function(e){
clearInterval(timer_id);
var timer_id = setInterval(test_func,1000);
}
);
このようにクリックしたとき前回起動したsetIntervalを削除して
新しいsetIntervalをセットしたいんだけど、前回のtimer_idが取得できないのでうまくいきません
どのようにすればできますか？
419 名前：デフォルトの名無しさん mailto:sage [2022/01/25(火) 18:53:59.98 ID:d2MfevVf0.net]: >>408
handleEventプロパティを持つオブジェクトにタイマーidを保存する
420 名前：デフォルトの名無しさん mailto:sage [2022/01/25(火) 20:54:59.74 ID:MGjq+ZUh0.net]: JavascriptってJavaより簡単って聞いたけど、html絡んでくるから難しくないですか？
421 名前：デフォルトの名無しさん mailto:sage [2022/01/25(火) 21:56:30.40 ID:Il9sj+JJM.net]: >>408
下記のようなグローバルオブジェクトを定義しておいて、その要素として保持しよう

const timer = {}:

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

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