[表示 : 全て 最新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
[このスレッドの書き込みを削除する]
[+板 最近立ったスレ&熱いスレ一覧 : +板 最近立ったスレ/記者別一覧] [類似スレッド一覧]


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

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



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

2 名前:デフォルトの名無しさん mailto:sage [2021/11/10(水) 15:26:36.49 ID:jxD2VXPG0.net]
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
 1レスに収まらないならコード投稿サイトを利用してください。
 jsdo.it/ jsbin.com/ jsfiddle.net/ ideone.com/

■過去スレ全集
www2.atpages.jp/mirror/2ch/javascript/
usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)

■テンプレ案
https://fiddle.jshell.net/6018r9tu/1/show/light/

3 名前:デフォルトの名無しさん mailto:sage [2021/11/10(水) 15:46:52.81 ID:qwlO4mThM.net]
前スレ998の質問だけど
一般的にはc2が返してるような関数のことをクロージャと呼ぶことが多いが
JavaScriptの関数は全部クロージャなのでc2自体もクロージャ

4 名前:デフォルトの名無しさん mailto:sage [2021/11/10(水) 16:02:48.18 ID:ABhSQgxq0.net]
なるほど

5 名前:デフォルトの名無しさん mailto:sage [2021/11/10(水) 17:50:22.23 ID:KxrU4/8D0.net]
>>998
追記です

3つの要素を持つオブジェクトセットを利用して、
関数内のクローズ状態を実現する、ということ意味して
そのセットをクロージャーと呼んでいるのだという理解でいかがでしょう?

6 名前:デフォルトの名無しさん mailto:sage [2021/11/10(水) 18:59:16.59 ID:l7XWnHd40.net]
過去スレみれねー

7 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 11:19:40.42 ID:FWyFKZol0.net]
前スレで誤字があったので訂正と
クロージャーに関してわかりやすく説明しときます
closerは誤りでclouserでした

8 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 11:24:24.80 ID:vTNkP19HM.net]
末尾セミコロンはどうしたらいいですか?

9 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 11:47:50.28 ID:FWyFKZol0.net]
【クロージャー】
クロージャーはJSの関数に下記の仕組みを持たせるための要素のセットです
・関数内部をクローズにする(外部から直接アクセスできない)
・関数からは外部のプロパティにアクセスできる

この仕組みを作るものがクロージャーです
クロージャーの要素は、おおざっぱに関数自身、関数内情報、関数外部を参照するポインタで、
この要素のセットをクロージャーと呼びます


【外部ポインタの働きと内部情報の動きの確認】
<サンプルコード>
function f1(){ let c=0;return c++; }
function f2(){ let c=0;return ()=>{let s=0;return [c++,s++];} }

let f3=f2() ;

1 f1() ;f1() ;console.log(f1());
2 f2()();f2()();console.log(f2()());
3 f3() ;f3() ;console.log(f3());

<結果出力>
1 c:0
2 c:0 s:0
3 c:2 s:0

ここで外部への参照ポインタをouterとします
f1のクロージャーは、{関数f1 return c}{変数c}{outer(global}
f2のクロージャーは、{関数f2 return function}{変数c}{outer(global}
f2のアローの場合、 {無名  return [c,s]}{変数s}{outer(f2)}

10 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 11:48:17.36 ID:FWyFKZol0.net]
コード1では、f1を2回呼びますが、関数呼び出し1回につき、1つの(別々の)クロージャーが生成されます
同じ変数名のcであっても、別物のcとなります
ですから、cはインクリメントされずに0となります

コード2ではf2から戻されるアロー関数を複数回呼び出しますが
関数の呼び出し1回につき、別々のクロージャーが生成されますので
上記と同じようにcは0になります

コード3では、f2から戻されるアロー関数を変数f3に代入し、それを複数回呼び出します
呼び出しのたびに別々のクロージャーが生成されますが
外部への参照は、outer(f2)なので、同じcを参照していますので
複数回呼び出すとcをインクリメントします
一方でアロー関数内の変数sは、コード1や2の説明と同じでインクリメントされません



11 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 11:48:37.71 ID:FWyFKZol0.net]
【関数はクロージャーか?】
クロージャーは関数ではありませんし
関数はクロージャーではありません

関数内をクローズにし、外部参照を持たせる、という仕組みをつくるための
関数、内部情報、外部参照ポインタのセットがクロージャーです

【言語は多数者が正しい】
f2で戻される無名関数をクロージャーと呼ぶ人がいるのは
クロージャーの説明のために多用されていることで
無名関数をクロージャーと誤解してしまったり

f1が外部からクローズ状態なので、f1がクロージャーなんだと
そう理解してる人が多かったりしています

クロージャーという言語の用法に関して
何が正しいのかは、それぞれの立場を主張する人数によって
決定することが正しいのかもしれません

以上で訂正とまとめを終わります

12 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 12:08:29.83 ID:FWyFKZol0.net]
>>8
javascript.infoでは
[ ]の前にセミコロンは想定していないため、前段と次段のコードが連続することが説明されてます

console.log(1)
[...'string'].forEach(console.log)



console.log(1)[...'string'].forEach(console.log)

と同じ扱いで、1を出力したのち、エラーになります
[]を使うときに思い出してください

13 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 13:44:12.02 ID:PJUcZthZ0.net]
>>7
closureでは?

14 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 14:51:22.63 ID:69bvz9620.net]
スジャータ

15 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 16:11:30.72 ID:+2WcRgNnM.net]
クロージャーに「関数内部をクローズにする」なんて意味はないよ

16 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 16:24:36.04 ID:YbaQuGpg0.net]
JSのクロージャーってどういう意味なの?

17 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 16:26:10.03 ID:YbaQuGpg0.net]
9の長い長い説明はまったくもって的外れ?

18 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 18:44:36.77 ID:a2zl13Hx0.net]
ふーん、なるほどねぇ

19 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 19:03:41.76 ID:a2zl13Hx0.net]
||クロージャーは、組み合わされた(囲まれた)関数と、
||その周囲の状態(レキシカル環境)への参照の組み合わせです。
||言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。
||(MDN)

「関数の内から関数の外を参照できる、参照権限(参照できる状態(仕組み))」ということだろ!!!
これできめ!

20 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 19:41:41.77 ID:CFwD9UgS0.net]
クロージャは関数閉包のこと
関数の中に関数が内包された状態を指す
外側の関数をエンクロージャと呼ぶが、クロージャ=関数ではない



21 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 20:24:37.12 ID:eeb4OqXn0.net]
現在のスコープに変数が見つからなければ、どんどん外のスコープに変数を探しに行って
最終的にwindowまで探しに行ってくれる機能のことをクロージャと呼ぶ

かな?

22 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 20:29:10.77 ID:CFwD9UgS0.net]
>>21
違う
それはスコープチェーン

23 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 21:31:01.83 ID:P2a3zHOn0.net]
Promiseの状態(pending/fullfilled/rejected)って外から取得できないんだっけ?
探しても方法が見つからな。

24 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 22:17:06.64 ID:9vb0JKHxM.net]
MDNの訳が微妙すぎると思ったら原文も同じだった

A closure is the combination of a function with references to its surrounding state.

A closure is a function bundled together with references to its surrounding state.
のどっちかにしたかったんだろう

25 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 22:18:41.74 ID:a2zl13Hx0.net]
>>20
それは違う言語でしょ
JSはグローバルも一つの環境としてるから
グローバル内に宣言された関数も、囲まれた関数なんだよ
グローバルを関数と呼ぶのなら、それはそれかもなんだけど

26 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 22:22:39.31 ID:a2zl13Hx0.net]
>>24
JSの設計のあいまいさを感じられるな

27 名前:デフォルトの名無しさん mailto:sage [2021/11/11(木) 22:44:02.25 ID:/xlmv84EM.net]
囲まれた関数ってのは微妙な原文と訳文で作られた言葉

ここの真ん中くらいにあるクロージャの定義を読むといい
https://javascript.info/closure

28 名前:デフォルトの名無しさん mailto:sage [2021/11/12(金) 07:15:12.60 ID:JgN/83EX0.net]
それを読んでも統一見解が得られづらいからこうなってるってわかる?

29 名前:デフォルトの名無しさん mailto:sage [2021/11/12(金) 07:25:05.37 ID:JgN/83EX0.net]
でもまぁ一連のやり取りで
環境レコードや外部参照チェーンやスコープの復習ができたということで
この部分に関しては、脱素人になったわけだ、おめでとー

30 名前:デフォルトの名無しさん [2021/11/14(日) 19:04:13.43 ID:y8V9oC250.net]
canvasでcontext.lineWidth=1;にして直線を描いても幅が1にならなくて2ピクセル分の太さになってしまいます
どうすれば幅1の直線が描けますか?



31 名前:デフォルトの名無しさん mailto:sage [2021/11/14(日) 19:57:25.52 ID:oSBO5A5Z0.net]
>>25
言語仕様に言及するのなら、「ECMAScriptにクロージャは存在しない」が正解

> グローバル内に宣言された関数も、囲まれた関数なんだよ

そんな仕様はない
クロージャなんて概念は忘れて、変数、スコープ、関数の仕組みを覚える方が正しい理解に繋がる

32 名前:デフォルトの名無しさん mailto:sage [2021/11/14(日) 20:00:15.95 ID:g8AzdeEc0.net]
>>30
整数座標はピクセル中央ではなくピクセル左上になるので0.5足す
めんどくさかったらcontext.translate(.5, .5)するとか

33 名前:デフォルトの名無しさん mailto:sage [2021/11/14(日) 20:54:05.86 ID:oSBO5A5Z0.net]
>>28
クロージャで統一見解といえるのは「クロージャ=関数が入れ子になった状態」だけ
そこに機能的価値を見いだそうとするなら「クロージャという名の機能は存在しない」だ
機能的には別の機能で実装されていて、
関数を入れ子にした結果、それらの機能が便利な状況を作り出しているに過ぎない
学習目的なら「クロージャ」は忘れた方がいい

34 名前:デフォルトの名無しさん mailto:sage [2021/11/14(日) 21:16:07.13 ID:Ec4oDlx8M.net]
関数が入れ子かどうかなんて関係ないよ

理解してない人たち同士で"統一見解"を求めようとするからドツボに嵌ってる

35 名前:デフォルトの名無しさん mailto:sage [2021/11/14(日) 21:27:55.45 ID:oSBO5A5Z0.net]
>>34
仕様にない単語に、統一見解を求めるのが間違いなんだろうな

36 名前:デフォルトの名無しさん mailto:sage [2021/11/14(日) 21:47:51.05 ID:ybz8bu8o0.net]
とはいえ「クロージャ=関数が入れ子になった状態」って定義は明らかに間違いだろう。

37 名前:デフォルトの名無しさん mailto:sage [2021/11/14(日) 21:57:27.13 ID:pXm3Ey2jM.net]
ECMAの仕様にはAbstruct Closure Specification Typeが定義されてるし、関数定義周りでclosureって言葉は繰り返し出てくるよ

まあでも仕様型みたいな大半の人が知らなくても困らないような詳細知識よりも
クロージャとは一般的にどういうものを指すのかという基礎的知識を身につけたほうがいい

38 名前:デフォルトの名無しさん mailto:sage [2021/11/14(日) 23:10:09.15 ID:oSBO5A5Z0.net]
>>37
一般解を示す公式文書を出せる?

ぶっちゃけ、言語が異なれば用語定義も変わると思ってるし、共通の用語なんてないと思ってる
複数言語習得者が勝手に共通認識を定義しているだけなのでは?

39 名前:デフォルトの名無しさん mailto:sage [2021/11/15(月) 00:30:22.12 ID:gtEjBgCa0.net]
ワロスw

40 名前:デフォルトの名無しさん mailto:sage [2021/11/15(月) 07:13:10.30 ID:slHpwqED0.net]
JSのクロージャーは
関数内のプロパティに、外部から直接アクセスできないが
関数内から外部への参照はチェーンしているという状態をいう

外部Lexicalへの参照を持たない関数型は
関数ではあるけどクロージャーにならない
入り子になっていても

もうクロージャはこれで終わり
クロージャーに貴重な人生を奪われるなよ?



41 名前:40 mailto:sage [2021/11/15(月) 07:21:28.04 ID:slHpwqED0.net]
状態ではなく仕組みがいいな
クロージャーはオブジェクトセットという表現が適してる例が散見されるみたいだし
必要なオブジェクトセットを使ってnativeでクロージャーを実現してるんだから
クロージャーは仕組み!これできめ!

42 名前:デフォルトの名無しさん mailto:sage [2021/11/15(月) 07:45:40.57 ID:slHpwqED0.net]
>>37

var a=0;
let b=1;
let c='C';

function func(){
let c=2;
return [a,b,c];
}

func.a='A';

console.log(
[window.a,window.b,window.c],
[a,b,c],
func(),
[func().a,func().b,func().c],
[func.a,func.b,func.c]
);


この出力を理解するにはクロージャーの仕組みの理解は必要でない?

43 名前:デフォルトの名無しさん mailto:sage [2021/11/15(月) 19:30:23.51 ID:rDFc2Y3T0.net]
>>40-41
あなたの見解は理解した
正しさの根拠が見つからないのでそれだけだが

44 名前:デフォルトの名無しさん mailto:sage [2021/11/15(月) 21:15:21.66 ID:eCFTqC9o0.net]
すいません、下記のようにボタンを押した時の処理をあらかじめ一つずつJSで書いて書いてるんですが、
ボタンの種類と数が莫大な量になるとJSを書くのが大変になってきました

逆にクリックされた任意のボタンオブジェクトを変数に入れる方法ってあったりしますでしょうか
(ボタンがクリックされる→クリックされたボタンのclassやvalueやtextを調べて目的の処理、という順番に変更したい)

下記が現状のコードです


・html
<button class="BtnA" value="固有の番号">ボタンAタイプ</button>
<button class="BtnA" value="固有の番号">ボタンAタイプ</button>
<button class="BtnB" value="固有の番号">ボタンBタイプ</button>

・js
const BtnA = document.getElementsByClassName('BtnA');
for(i=0;BtnA.length>i;i++){
BtnA[i].addEventListener('click', () =>{
//ここに押された時の処理を書く
});
}
const BtnB = document.getElementsByClassName('BtnB');
以下BtnAのコードとほぼ同様

45 名前:デフォルトの名無しさん mailto:sage [2021/11/15(月) 22:27:30.97 ID:slHpwqED0.net]
>>44
クラス数×value数×text種類数だけ処理数があるってことですか?

46 名前:デフォルトの名無しさん mailto:sage [2021/11/15(月) 22:58:29.48 ID:OfX77+Sf0.net]
class="BtnA BtnAll"
class="BtnB BtnAll"

みたいに、BtnAll で、すべてのボタンの処理をまとめ

47 名前:黷ホ?

JavaScript のスレは、この板ではなく、web制作管理板の方へ書き込んでください!
この板のスレは、荒らしが出た時に、緊急的に立てられたものだから
[]
[ここ壊れてます]

48 名前:デフォルトの名無しさん mailto:sage [2021/11/16(火) 00:43:22.12 ID:Ca8LCMpZ0.net]
>>45
そのイメージに近いです

>>46
ある程度まとめた結果が
BtnA BtnB BtnCみたいなグループです。

了解です、Web製作管理板に移動させていただきます。

49 名前:デフォルトの名無しさん mailto:sage [2021/11/16(火) 07:19:53.13 ID:L8BSEbG10.net]
>>44
event.currentTarget
event.target

50 名前:デフォルトの名無しさん mailto:sage [2021/11/16(火) 13:14:21.44 ID:x6nbCzKN0.net]
>>44
処理数が多すぎて管理効率が悪くなってるってことかな?
ボタン数×(value数-1)×(str数-2)の数の処理があって
保守管理しづらいというのなら下記の考え方はどうでしょう?

変数buttonにはボタンオブジェクト
変数getFuncにはクリックイベント処理を固有番号で紐づける
変数buttonをfor of で回して、固有番号で分岐して、リスナーを設定する

button=document.getelementsbytagname('button')
getFunc={
固有番号:function(){}
固有番号:function(){},,,}

for(let i of button){
switch(i.value){
case '固有番号':i.addEventlistener('click',getFunc[固有番号]);break;



51 名前:デフォルトの名無しさん mailto:sage [2021/11/16(火) 13:26:34.28 ID:x6nbCzKN0.net]
>>44
上の説明だとわかりづらいかな

let getButton=function(){button=document.getElementsByTagName('button');}

// valueの固有番号毎に処理を設定
let addEvent=function(){
for(let i of button){
switch (i.value){
case '101':i.addEventListener('click',addFunc[101]);break;}}}

let button;
// 関数をまとめ置く
let addFunc={
101:function(){console.log(this.value)},
102:function(){console.log(this.className)},}

52 名前:デフォルトの名無しさん mailto:sage [2021/11/16(火) 19:57:25.19 ID:ES2RXggH0.net]
switchの中をObject.keys().forEach()でまわして
addFunc[+i.value]で作り直したらすっきりしそう
いじりたくなるコードだけど可読性を考えたらこれはこれなのか

53 名前:デフォルトの名無しさん mailto:sage [2021/11/16(火) 22:10:30.79 ID:iK58PKMQ0.net]
リアクトでのスマホアプリ開発なんですが、エミュレータは何がお勧めですか?
というのも実機を持っていません。

また、実機を使う場合はアンドロイド5などは使い物になりますか?
古い機種に合わせて作っても、上位互換性のないソフトになるんでしょうか?

54 名前:デフォルトの名無しさん mailto:sage [2021/11/17(水) 07:47:58.17 ID:/ZY56h0o0.net]
>>52
「React andoridアプリ開発 エミュレータ」で検索どうぞ
「api16 開発 不具合 or 互換性」で検索どうぞ

これがベストっていう答えがないから
開発者が自分で試行錯誤して答えを出す問題かな
互換性の問題は作るものによっても違うからね
jellyならそんな問題ないとおもうけど

55 名前:デフォルトの名無しさん mailto:sage [2021/11/17(水) 10:05:17.45 ID:syddc80l0.net]
>>53
jellyッテの調べてみますです

56 名前:デフォルトの名無しさん mailto:sage [2021/11/17(水) 14:33:19.47 ID:syddc80l0.net]
>>53
すみません。互換性に関して見つけられなかったです。
android5向けに作った場合、上位互換性ってあるんでしょうか?

javascriptのバージョン?次第とも考えられますけど

57 名前:デフォルトの名無しさん mailto:sage [2021/11/17(水) 17:43:10.56 ID:+3kxan1mM.net]
androidの話はandroid開発スレで聞いてくれ
多分実機なしは無謀、5は古すぎでFA

58 名前:デフォルトの名無しさん mailto:sage [2021/11/18(木) 06:50:53.17 ID:TN6Tj1JF0.net]
>>56
了解す

59 名前:デフォルトの名無しさん mailto:sage [2021/11/18(木) 07:17:54.57 ID:DvlppRWo0.net]
そんなことはない
android5で使えるアプリが目的なんだから
android5で作成するのがベスト

reactNativeエンジンがどうエンコードして
androidで動かしてるのか分らんので
今のreactでandroid5のどの機能を使えるのか
全然わからんけどな

60 名前:デフォルトの名無しさん mailto:sage [2021/11/18(木) 07:27:37.77 ID:dAtvmzd9M.net]
React NativeはAndroid 5.0以上に対応だね

https://github.com/facebook/react-native



61 名前:デフォルトの名無しさん mailto:sage [2021/11/18(木) 19:32:55.35 ID:DvlppRWo0.net]
API21からなんだな

62 名前:デフォルトの名無しさん mailto:sage [2021/11/19(金) 12:50:28.04 ID:zuBm2fI80.net]
文字列化した数式を計算させるにはどうやればいいんですか?
test("x*x+10",2);

function test(suushiki_str,x){
var y = suushiki_str(この場合x*x+10)でx=2を代入;
retuen(y)
}
こういうのがやりたいんだけど

63 名前:デフォルトの名無しさん mailto:sage [2021/11/19(金) 12:55:11.51 ID:CS9Fe95O0.net]
function test(suushiki_str,x){
return eval(suushiki_str)
}

64 名前:デフォルトの名無しさん [2021/11/19(金) 13:17:09.00 ID:zuBm2fI80.net]
>>62
ありがとー

65 名前:デフォルトの名無しさん mailto:sage [2021/11/19(金) 13:41:30.73 ID:5MAibbygM.net]
何がしたいのか分からないけど、設計自体が間違ってる気がするけどなあ

66 名前:デフォルトの名無しさん mailto:sage [2021/11/19(金) 21:34:02.13 ID:FkG8ODwP0.net]
eval is evil
evalをそのまま使う事はまずないな

67 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 07:02:21.23 ID:0rDRyz8e0.net]
evalを使えとなw

68 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 07:04:06.68 ID:0rDRyz8e0.net]
evalが生きていること自体、JSが未成熟の証

69 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 07:46:31.86 ID:0rDRyz8e0.net]
>>61
evalは非推奨だから

function test(fun,x){
return fun(x);
}

test(function(x){return x*x+10},5);
としときましょう

70 名前:デフォルトの名無しさん [2021/11/20(土) 18:55:29.17 ID:BgP9vp1q0.net]
evalって外部から入力させなければ使っても問題ないんじゃないの?



71 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 18:57:47.86 ID:0rDRyz8e0.net]
使いたければつかったらいいよ

72 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 19:05:52.91 ID:Gd107dzfr.net]
やっぱjavascriptできるとなんでも作れるな
めちゃくちゃ便利だわ

73 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 19:54:48.88 ID:0rDRyz8e0.net]
ブラウザ限定だし
HTMLと一緒でメンテナンスとか関係なければな

もしJSで金融システムみたいな厳格なシステム作ろうとしたら
開発者はみんな気がくるってしまうんじゃないかな

74 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 19:57:24.06 ID:Gd107dzfr.net]
マジでjavascriptだけでめちゃくちゃ儲けてる
使いこなせばガチで素晴らしい

75 名前:デフォルトの名無しさん [2021/11/20(土) 20:02:17.98 ID:4VXr5Xxs0.net]
仕事で使ってるサイトをJavascriptで自動化できませんか?
たとえば出勤と退勤のときの時間を管理するのに「勤次郎」というサイトを使ってるんだけど
毎回ログインしたあといちいち入力するのが面倒くさい。

76 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 20:22:43.02 ID:0rDRyz8e0.net]
>>74
データーの保存はどこを想定してますか?

77 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 20:24:55.79 ID:b48agA+u0.net]
seleniumでいいじゃん

78 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 20:46:00.92 ID:Gd107dzfr.net]
認証しないシステムなんて攻撃か踏み台にされるとか考えないのか

79 名前:デフォルトの名無しさん mailto:sage [2021/11/20(土) 21:05:08.87 ID:t4XZd1270.net]
定型をポチポチ入力してボタン押すのがダルい程度ならブックマークレットでいいだろ

80 名前:デフォルトの名無しさん mailto:sage [2021/11/21(日) 08:08:40.09 ID:zYUtuXs90.net]
>>74
ブラウザを自動操作なら、iMacros は?

例えば漏れは、Ruby のselenium-webdriver で、
ブラウザを自動操作して、ヤフーにログインしてる

ユーザー名を入力して、ボタンを押す。
パスワードを入力して、ボタンを押すとか

require "selenium-webdriver"

options = Selenium::WebDriver::Chrome::Options.new
options.add_option( :detach, true ) # ブラウザを切り離す
options.add_argument( '--start-maximized' ) # 画面最大

driver = Selenium::WebDriver.for :chrome, options: options
driver.manage.timeouts.implicit_wait = 10 # default timeout

driver.navigate.to "https://login.yahoo.co.jp/config/login_verify2?.src=ym"

element = driver.find_element(:id => "username")
element.send_key "ユーザー名"

driver.find_element(:id => "btnNext").click # ボタンを押す

element = driver.find_element(:id => "passwd")
element.send_key "パスワード"

driver.find_element(:id => "btnSubmit").click # ボタンを押す



81 名前:デフォルトの名無しさん [2021/11/21(日) 18:31:02.25 ID:8Vc5P3wO0.net]
>>768
それだと数式を""で囲んで文字列にすると計算できない

82 名前:デフォルトの名無しさん [2021/11/21(日) 18:31:35.22 ID:8Vc5P3wO0.net]
>>68

83 名前:デフォルトの名無しさん [2021/11/21(日) 19:15:18.38 ID:s72Bw1rA0.net]
classが非推奨になるのはいつですか?

84 名前:デフォルトの名無しさん mailto:sage [2021/11/21(日) 19:23:58.62 ID:6CiZCeOJ0.net]
>>82
その予定はない

85 名前:デフォルトの名無しさん mailto:sage [2021/11/21(日) 21:16:08.25 ID:CIU/fTVN0.net]
>>81
>>70で答えてる

eval非推奨な意味を理解していて使うならそれでいいんじゃね?

86 名前:デフォルトの名無しさん mailto:sage [2021/11/21(日) 21:19:33.19 ID:QvzeRvg10.net]
>>61
function test(suushiki_str, x){
var f = Function('x', 'return ' + suushiki_str);
return f(x);
}

test('x * x + 10' ,2);
//=> 14

87 名前:デフォルトの名無しさん mailto:sage [2021/11/21(日) 22:55:28.72 ID:EhgufZNWr.net]
javascriptが使えるとやりたいことが簡単にできる

88 名前:デフォルトの名無しさん [2021/11/22(月) 11:19:44.15 ID:svQfIHqM0.net]
>>86
JavaScript最強伝説。

89 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 14:30:42.59 ID:zL7mhfu3r.net]
ブラウザで動く
LambdaやGoogle Functionsで動く
デスクトップアプリも作れる
OfficeWeb版やGASでも動く

インフラ構築不要で最強すぎるだろ

90 名前:デフォルトの名無しさん [2021/11/22(月) 16:46:08.87 ID:svQfIHqM0.net]
>>88
でも、文法が分かりにくい。
というか無駄に複雑過ぎる。



91 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 16:48:25.46 ID:zL7mhfu3r.net]
>>89
文法なんかふつう

複雑な意味がわからん
ほかの言語だと単純なの?

92 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 17:43:25.62 ID:+p8qnn8E0.net]
すいません、下記のように読み込んだshiftJISのcsvファイルを
正規表現を使って置換しようとしてるのですがうまくいきません

文字コードの問題なのか指定したマッチパターン意外の色んな文字が勝手に置換されてしまいます

const requestCSV = new XMLHttpRequest();
requestCSV.overrideMimeType('text/plain; charset=Shift_JIS');//csvの文字コードがshiftJSであることは変更できない

requestCSV.addEventListener('load', (event) => {

 const orgCSV = event.target.responseText;
 tempKey="["+key+"]";//keyは変数を使う必要があります
 keyName = new RegExp(tempKey, "g");//複数マッチさせる必要があります

 result=orgCSV.replace(keyName, "ほげ");
}

正規表現オブジェクトを使わずにreplaceさせると問題なく動くのですが、
マッチパターンを変数にしたいのと、複数回以上にマッチさせるため g をつけるため、
正規表現オブジェクトを使わざるを得ない状態です。

どなたかアドバイスお願いできますでしょうか

93 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 17:45:45.05 ID:svQfIHqM0.net]
>>90
Javaの方が分かりやすかった。

94 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 18:41:55.55 ID:kseOISZ70.net]
Javaと比べたらJavaScriptのほうが文法複雑じゃないと思うが…
TypeScriptと混同してない?

95 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 18:43:22.51 ID:kseOISZ70.net]
それかDOM APIをJavaScriptの文法に含むと勘違いしてるとか

96 名前:デフォルトの名無しさん [2021/11/22(月) 18:50:50.35 ID:jaRoUi/NM.net]
Javaのほうが圧倒的にすっきりしている。
ほんとに両言語をちゃんと勉強したことあるか?
アルツハイマーでもこれくらい分かる。

97 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 18:53:04.86 ID:yUT2zM6b0.net]
>>91
keyを[]で囲む必要なし

98 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 18:54:55.94 ID:LGR+CB3F0.net]
>>94
古いJSとの互換性を取ろうとすると
古い文法も理解しないとならないからな
オブジェクトの生成も多種多様
JSの細かいところまで理解しようとすると
javaやpythonとかのほうが整理されていてわかりやすい

let obj var objのLexicalの違いや
let obj={}
let fun=function(){}
function fun(){}
class cs extends fun{}
class cs{
__proto__=a;
}

obj.constructor.prorotype=obj
newObjext ,Object.create

こんなのシンプルなわけがない

と92はいいたんだと思う

99 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 19:05:02.79 ID:+p8qnn8E0.net]
>>96
"["+key+"]"

というようにカッコで囲んだ形式で検索したいのでここはあえてそうしてるんです…

100 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 19:40:22.23 ID:kseOISZ70.net]
Java
class Main {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}

JavaScript
console.log("Hello World!");

hello worldからしてこれだからな
あなたの「シンプル」の定義を見せてもらえないと…



101 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 20:19:16.63 ID:LGR+CB3F0.net]
>>99
JSのクラスは疑似クラス
他言語のClassと同じように扱えるように
functionを疑似的にclass表現できるようにしてるだけ

Javaと異なりJSはconstructorを有するオブジェクトの生成方法が沢山ある
それすら理解できずに、99の問いとは、、、もっとJSを勉強しようぜ
Javaのほうが圧倒的に整理され覚える文法が少ない

つか、JavaとJS、両方ともそこそこ使えたら
99みたいなこと言えないだろw

102 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 20:26:36.75 ID:LGR+CB3F0.net]
>>99
もうちょっと言わせてもらえば
Javaは変数エラーをチェックしやすい言語設計
JSは変数エラーを無限に生成し得る言語設計

JSはマークアップを動的に処理することから発生し
高度な言語設計にしても互換性の問題から
古い文法を生かしているので、とても複雑怪奇になっている

そう表現したらわかるかな?

103 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 20:44:07.24 ID:LDcgDFlhM.net]
変数エラーとは

104 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 20:52:35.36 ID:LDcgDFlhM.net]
>>98
上手く行かない具体例出してよ
ぶっちゃけ[ ]の使い方ミスってる様な気がするんだけど

105 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 23:07:56.11 ID:+p8qnn8E0.net]
>>103
置換した具体例で言うと例えば

さっきの例で置換部分が
result=orgCSV.replace(keyName, "ほげ");

元のテキストが下記だとすると
<title>[name]</title>

結果が下記になってしまってなんじゃこりゃ…て感じですね
<titlほげ>[ほげaほげほげ]</titlほげ>

正規表現オブジェクトを使わなければ普通に成功します
result=orgCSV.replace("[name]", "ほげ"); //<title>ほげ</title>になる

しかし先述のようにマッチパターンを変数化しつつgをつけて複数置換する必要があるため難しいんです…

106 名前:デフォルトの名無しさん mailto:sage [2021/11/22(月) 23:44:57.26 ID:yUT2zM6b0.net]
>>104
 tempKey="\\["+key+"\\]";

107 名前:デフォルトの名無しさん [2021/11/22(月) 23:59:47.75 ID:LPlgTaUb0.net]
javascriptで計算の値がオーバーフロウするかどうかを調べるにはどうすればいいんですか?
例えば10000の10乗を計算しようとしてオーバーフロウするならばalertで計算できませんと
表示したいんだけど

108 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 00:04:12.05 ID:KUvc8h5G0.net]
>>104
[] は文字クラス
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes

更に、keyにメタキャラクタがあれば同じ事になるので、文字列全体をエスケープすべき
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions#escaping

上記は正規表現の基本
正規表現を体系的に学習すれば、絶対に気がついたこと
急がば回れ

109 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 00:07:12.09 ID:KUvc8h5G0.net]
>>106
BigIntと文字列比較

110 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 00:24:05.58 ID:t+JcGiN60.net]
>>100
なんでクラスの話に?詭弁では?
クラスベースの奴らがうるさいからclassなんて入れる羽目になったんだが。
そいつらのせいで木に竹を接ぐようなことさせられてむしろ複雑になった。
プロトタイプベースとしてシンプルでよかったのにほんと独善的でろくなことしない。
Reactでもクラスコンポーネントは廃れ99%のケースでFCになったよ。



111 名前:デフォルトの名無しさん [2021/11/23(火) 01:06:21.92 ID:cKz+CerT0.net]
>>109
エセクラスベースは絶対に反対。
classは早期に非推奨にすべき。

112 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 01:17:09.89 ID:SfFCbJaV0.net]
>>105
>>107
ああ、なるほど、エスケープをダブルでつけないといけなかったんですね
シングルではつけてみていたんですがそれで動かなかったのであれって思ってました
資料の提示もありがとうございます!

113 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 07:20:19.58 ID:A/hfu3xU0.net]
>>102
その問いはマジ質問?

>>109
JavaとJsの言語設計に関して
どっちがすっきりしてるかを話ししてるだけだろ
疑似クラスなんてあること自体がお笑いだし
オブジェクト生成方法も多岐にわたるとか
どこが整理されてる言語なのかと

114 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 07:33:58.18 ID:MZ1To5x7M.net]
変数エラーでググっても出てこなかったです
何処の業界用語ですか?

115 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 08:34:50.37 ID:Ln8GWMq+0.net]
>>104
Ruby では、Regexp.escape で、

正規表現において、特別な意味を持つ文字の直前に、
エスケープ文字(バックスラッシュ)を挿入した、文字列を返す

p esc_1 = Regexp.escape( "[-a]" ) #=> "\\[\\-a\\]"

reg_1 = Regexp.new( esc_1 )
p reg_1.match( "x[-a]y" ) #<MatchData "[-a]">

116 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 09:26:25.23 ID:AKV1HaX9M.net]
>>112
お笑いと言えばJavaの無名クラスだろ
なんだったのアレ
関数がファーストクラスオブジェクトじゃなかった欠陥言語の苦肉の策とは言えとんでもなくキッタネェコード
今じゃラムダ関数使ってだーれも使ってないし
最初からそうしとけばよかったのにね
ぜんぜん整理されてなかったのかな?w

117 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 10:33:28.85 ID:9dlC3Wki0.net]
言語の完成度はJava>JS
学びやすさもJava>JS

だからと言って優劣を表現してるわけじゃないよ
マークアップ操作言語として
JS、HTML、CSS等との新旧互換性を担保しながら


118 名前:長してきた言語だから
継ぎ接ぎ言語になっているのは仕方ないこと
JSでできることは多いし楽しい言語であることを否定してるわけじゃないんだ
でもJSが整理されてシンプルな言語であるとは言えないってだけ
[]
[ここ壊れてます]

119 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 10:45:11.29 ID:jndULnQpr.net]
javascriptさえあれば何もいらん
javascriptだけでスケーラブルなシステムが作れる

120 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 10:52:32.71 ID:AKV1HaX9M.net]
あまりにも面倒くさいため、誰もJavaでGUIを作らなくなりました。
やる気とAWT,Swingなど道具立てはあったのです。
ただJavaがクソ過ぎた。
イベントドリブンで必須のリスナー登録はこんな感じ(笑)
button1.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
System.out.println("clicked");
}
});
一方C#ではデリゲートで簡単に書くことができました。
Javaはデリゲートが言語機能として無いのでマネできませんでしたw
結果今では誰もJavaでクライアントGUIプログラムを書きませんがC#はバリバリ使われてますw
結局Java8でJavaScriptをパクってlambdaで以下のように書けるようにしました(ハズカシーw)
button1.addActionListener(e -> System.out.println("clicked"));
しかし時すでにお寿司、誰もJavaでGUIを作っていないのであるwww
Javaはサーバーサイドに集中して成功者?
ノンノンw
Javaが糞でめんどくさくて誰も書かなくなったから廃れた、これがシンプルな答えですw



121 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 11:43:58.38 ID:9dlC3Wki0.net]
うん、わかった
確かにその通りです

122 名前:デフォルトの名無しさん mailto:sage [2021/11/23(火) 15:55:58.57 ID:MdPJopiF0.net]
Android StudioではまだJava言語で開発が必要だったような

123 名前:デフォルトの名無しさん mailto:sage [2021/11/27(土) 15:29:53.92 ID:czi6N/jr0.net]
0から9の入ったランダムの配列に適当に選んだnという数字が最大何個並んでいるか
これはどういう方法が早いのでしょうか
気にするほどでもないのでしょうか
配列を見ていくのは遅いとか言う話も聞いたような気もします
一般的にはどういう方法を取るのでしょうか

・配列の前から順にforでnであるか、あればカウンターインクリメント、なければカウンターリセット
・joinで配列を文字列化したあとforでi文字数ぶんのnを検索文字として includesがfalseになるまでか最悪配列数まで調べる
・文字列化したあとmatchで/n+/gで一覧を出して一覧の配列をmap(e=>e.length)で文字数にしてMath.maxで調べる

124 名前:デフォルトの名無しさん mailto:sage [2021/11/27(土) 17:26:03.23 ID:YexJKObKM.net]
>>121
まずは自分で試して比べろよ

125 名前:デフォルトの名無しさん mailto:sage [2021/11/27(土) 20:27:12.12 ID:czi6N/jr0.net]
コードはこんな感じでいいですか?
https://jsfiddle.net/rj457v0q/
windows10 firefox 64bit 94.0.2のabout:newtabのコンソールでやった結果
11374, 1970, 2920
とかそれに似たような時間なんですが
同じ環境でJSFiddle に保存した際に実行された時間が
320, 1994, 2938
と1番目が早くなって結果が真逆になっています
どういう事なんでしょうか

126 名前:デフォルトの名無しさん mailto:sage [2021/11/27(土) 21:17:39.73 ID:czi6N/jr0.net]
IronというChromeベースのブラウザでも試したところ
FirefoxからJSFiddleを開いてそこで走らせた時間と同じような結果になりました

127 名前:デフォルトの名無しさん mailto:sage [2021/11/27(土) 22:00:25.94 ID:w/hwUzDX0.net]
element.addEventListener(
"mousemove",
function(e){alert(e.offsetX);}
);

このfunction(e)の部分はfunction(aaa,e,bbb){}のように引数を複数設定することはできますか?
e以外を渡すにはグローバルしかできないんですか?

128 名前:デフォルトの名無しさん mailto:sage [2021/11/27(土) 23:25:49.55 ID:QiKYnGor0.net]
>>123
Firefox の Math.max() が激重っぽい(1万回の関数呼び出しが重い?)
三項演算子とかにすれば JSFiddle と同じくらい早くなる

129 名前:デフォルトの名無しさん mailto:sage [2021/11/27(土) 23:48:23.24 ID:czi6N/jr0.net]
>>126
ありがとうございます。
Math.maxを使わず、
配列のまま計算させたほうがいいみたいですね。
3つ目もMath.maxを使ってますが使わないようにしても、
こちらはMath.max関数の呼び出し回数が1周1回なせいか短縮されませんでした。

130 名前:デフォルトの名無しさん mailto:sage [2021/11/28(日) 12:42:42.78 ID:TNNdgbH5M.net]
>>123
1つめのバグっとるよ
2つめのは連続する数が大きいのでも確かめないとパフォーマンス特性が分からない

jsbench.meみたいなところで試すといい
アルゴリズムのオーダー考えれば単純ループが一番高速



131 名前:デフォルトの名無しさん mailto:sage [2021/11/28(日) 21:15:40.16 ID:P+UGlIn90.net]
>>125
引数を複数設定できる。ただし、第一引数以外は何も渡されない。(デフォルト引数なんかの例外もある)
thisを渡せる。bind()とhandleEvent()を含むオブジェクトで渡せる。

132 名前:デフォルトの名無しさん mailto:sage [2021/11/28(日) 21:21:54.23 ID:PdYmCZpH0.net]
>>128
ありがとうございます
サイトは次使う時に使って見たいと思いますw

133 名前:デフォルトの名無しさん mailto:sage [2021/11/28(日) 21:29:03.95 ID:eSM912u0M.net]
>>125
どんな使い方をするのか想定コードを教えて

あと代入されるaaa,bbbの値はいつ確定する?
呼び出し時に確定するなら変数で置いとくしか無いし
関数定義する時点で確定してるなら引数にする必要が無い

134 名前:デフォルトの名無しさん mailto:sage [2021/11/29(月) 12:33:33.13 ID:nUjIBrRJ0.net]
>>131
canvasの領域内をクリックしながらマウスを移動させたときの
canvas内のマウスの座標を得たいんだけど
mousedownでvar clickcyuu = 1;mouseupでclickcyuu=0;
mousemoveでclickcyuu===1ならばdrag_mouse_x = e.offsetX;drag_mouse_y = e.offsetY
とやりたかったのでfunction(e,clickcyuu){}としたかった

135 名前:デフォルトの名無しさん mailto:sage [2021/11/29(月) 13:18:58.10 ID:kIPjw4qWM.net]
>>132
それだと結局グローバル変数参照してるのと同じじゃない?
わざわざ引数経由する理由がない

136 名前:デフォルトの名無しさん mailto:sage [2021/11/29(月) 13:23:14.24 ID:T3PYHNfj0.net]
>>132
>>129の方法ではダメなのか?

137 名前:デフォルトの名無しさん mailto:sage [2021/11/29(月) 15:20:06.33 ID:0iOICyJy0.net]
定期的にaddEventListener自体から引数渡したいって人出てくるけど
仮にできたとしてもaddEventListenerした時点で値が固定されることが考えから抜け落ちてるよね
>>132
引数渡したいならイベントハンドラに関数式使えば済むけど
複数のイベント仕込むなら一連の動作をこんな感じでclassかオブジェクトにした方が楽よ
https://jsfiddle.net/hgro7t5m/

138 名前:デフォルトの名無しさん mailto:sage [2021/11/29(月) 15:41:30.31 ID:cAtmNTK4M.net]
クロージャ使えば普通にできるやろ
それに参照型ならaddEventListenerした後からでも値を変えられるよ

139 名前:デフォルトの名無しさん mailto:sage [2021/11/29(月) 18:56:58.07 ID:QQHq1BUR0.net]
var か

140 名前:デフォルトの名無しさん mailto:sage [2021/11/29(月) 20:17:26.02 ID:T3PYHNfj0.net]
>>135
オブジェクトを束縛すれば、プロパティは固定されない(>>129)
handleEventも使ってみればその有用性に気がつくと思うが



141 名前:デフォルトの名無しさん mailto:sage [2021/12/04(土) 12:18:05.48 ID:Zxe83BGy0.net]
読み込みたいファイルのパスだけがわかっている場合に

reader= new FileReader();
reader.readAsText("aaa/hoge.csv") ;

みたいな感じで読み込もうと思ったんですが、
readAsTextの引数はblobだかfileオブジェクトでないとだめみたいで、
レファレンスを読んで見るも、
パスから

142 名前:blogだかfileオブジェクトだかを作成する方法がわかりませんでした。

ファイル読み込み自体は他の方法を使ってできるものの、
FileReaderとreadAsTextの組み合わせを使ってトライしてみたいので
どなたかアドバイスお願いできますでしょうか
[]
[ここ壊れてます]

143 名前:デフォルトの名無しさん mailto:sage [2021/12/04(土) 12:36:24.21 ID:6Q/yxXZX0.net]
>>139
それが出来たら、ファイルの情報を盗み出せるようになるな

144 名前:デフォルトの名無しさん mailto:sage [2021/12/04(土) 12:48:45.94 ID:Zxe83BGy0.net]
>>140
例えばxmlhttpRequest()でもパスからファイルを読み込むことが出来るので
FileReaderでそれが出来ないのは不思議な気になるんですがそういうものなんですかね

145 名前:デフォルトの名無しさん mailto:sage [2021/12/04(土) 14:35:37.60 ID:t4TtjIXNM.net]
むしろ他の方法とやらが気になる

146 名前:デフォルトの名無しさん mailto:sage [2021/12/04(土) 14:36:47.65 ID:6Q/yxXZX0.net]
>>141
xhrは基本的にhttp接続しか出来ない

147 名前:デフォルトの名無しさん mailto:sage [2021/12/04(土) 16:15:20.01 ID:4OadB/pcM.net]
とりあえずリファレンス読め
https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

148 名前:デフォルトの名無しさん mailto:sage [2021/12/07(火) 11:51:05.11 ID:sVKUttQ/0.net]
ガチでヌーブなんですけどrequestsとbeautifulsoupでスクレイピングやってます
waitかけないとバンされるよと言われましたがどうすればいいですか?
requests.get()でtimeoutは今書きましたがforで同じサイトの似たようなページに何度もアクセスするのでサーバーへの負荷はすごいと思います
これに対してどうすればいいですか?

149 名前:デフォルトの名無しさん mailto:sage [2021/12/07(火) 11:56:58.02 ID:PaA+NeG00.net]
>>145
マルチ禁止

150 名前:デフォルトの名無しさん mailto:sage [2021/12/09(木) 15:07:14.43 ID:uyimWi/30.net]
const test = [
{main:"A"},
{main:"B"},
{main:"C"}
]
から全てのmainをとり出した["A","B","C"]となる配列を作りたいです
forを使えば作れますが、もっと簡単に作れる便利なメソッドあったりしますか?



151 名前:デフォルトの名無しさん mailto:sage [2021/12/09(木) 15:32:51.58 ID:gfmL2AFS0.net]
const test = [
{main:"A"},
{main:"B"},
{main:"C"}
]

let testB = test.map(e=>e.main)
知っててコレジャナイ方法をきいてるのかもしれないけど

152 名前:デフォルトの名無しさん mailto:sage [2021/12/09(木) 15:38:12.28 ID:uyimWi/30.net]
>>148
自分もそれやってたけど不可能なので質問しましたが
どうやらqueryselectorAllにmapが効かないっていうのが原因だったみたいです
すんません

153 名前:デフォルトの名無しさん mailto:sage [2021/12/09(木) 15:51:07.69 ID:uyimWi/30.net]
許して下さい…

154 名前:デフォルトの名無しさん mailto:sage [2021/12/09(木) 16:09:45.62 ID:CDvY1Ccm0.net]
querySelectorAllの戻り値はArrayではなくNodeListだからね
hoge = Array.from(test).map(e => e.main);

155 名前:デフォルトの名無しさん mailto:sage [2021/12/10(金) 03:36:53.73 ID:TbLIJEp/M.net]
hoge = Array.prototype.map.call(test,e => e.main);
とか

156 名前:デフォルトの名無しさん mailto:sage [2021/12/10(金) 20:33:15.32 ID:Kd0T5CdW0.net]
Pythonの

157 名前:デフォルトの名無しさん mailto:sage [2021/12/10(金) 20:34:21.58 ID:Kd0T5CdW0.net]
PythonのコードですがどなたかJavascriptに直して下さい…

sorted(pts, key=clockwiseangle_and_distance)

import math

pts = [[2,3], [5,2],[4,1],[3.5,1],[1,2],[2,1],[3,1],[3,3],[4,3]]
Origin = [2, 3]
refvec = [0, 1]

def clockwiseangle_and_distance(point):
 vector = [point[0]-Origin[0], point[1]-Origin[1]]
 lenvector = math.hypot(vector[0], vector[1])
 if lenvector == 0:
  return -math.pi, 0
 normalized = [vector[0]/lenvector, vector[1]/lenvector]
 dotprod = normalized[0]*refvec[0] + normalized[1]*refvec[1]
 diffprod = refvec[1]*normalized[0] - refvec[0]*normalized[1]
 angle = math.atan2(diffprod, dotprod)
 if angle < 0:
  return 2*math.pi+angle, lenvector
 return angle, lenvector

158 名前:デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:19:38.29 ID:kTfvj9Ya0.net]
すんません

var hoge = test(); //←2個入った

159 名前:配列が返ってくるヤツ
var A = hoge[0];
var B = hoge[1];

って書いてます。
これもーちょっとカッコよく

var A B = test();

って感じで一行でAとBに変数に入れる方法とかあります?
[]
[ここ壊れてます]

160 名前:デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:55:24.52 ID:4C+gjCbR0.net]
var hoge = [1,9];
var [A,B] = hoge;



161 名前:デフォルトの名無しさん mailto:sage [2021/12/11(土) 11:56:54.19 ID:kTfvj9Ya0.net]
>>156
うおーすげー天才
ありがとうございます!

162 名前:デフォルトの名無しさん [2021/12/12(日) 17:05:57.60 ID:neOkkgxzM.net]
var obj={
key:{x:200,y:300}
}
obj.key2=500;
alert(obj.key2);
alert(obj.key.x);
上はオブジェクトで下はオブジェクトのオブジェクトです。
実行結果は上が500で下が200です。
一応動作はしますがこのような使い方は間違っていますか?

163 名前:デフォルトの名無しさん mailto:sage [2021/12/12(日) 18:15:54.15 ID:vioicQgx0.net]
>>158
「間違っている」は「期待する動作」によって決定される
それをあなた自身しか知らないので、第三者による判断は不可能

164 名前:デフォルトの名無しさん [2021/12/12(日) 18:40:13.36 ID:MwcQtjtM0.net]
>>159
文法的にはどうですか?

165 名前:デフォルトの名無しさん mailto:sage [2021/12/12(日) 19:22:12.57 ID:vioicQgx0.net]
>>160
文法は他人に聞くまでもない
コンソールにSyntaxErrorが出力されていなければ、文法的に問題ない

166 名前:デフォルトの名無しさん mailto:sage [2021/12/12(日) 20:06:45.86 ID:A9cM/MPAM.net]
何に引っかかってるのか書かないと期待してる答えは返ってこない
特に変なところないし

167 名前:デフォルトの名無しさん [2021/12/13(月) 08:42:46.82 ID:8aJMJMAP0.net]
引数が多い場合の引数の渡し方について
function(
aaa,
bbb,
ccc,
・・・(略)
zzz
){}
って書くより
function(obj){
var aaa = obj.aaa;
var bbb = obj.bbb;
・・・・・(略)
var zzz = obj.zzz;
}
って書く方がいいんでしょうか?
どっちもメリット、デメリットはあると思うけど

168 名前:デフォルトの名無しさん mailto:sage [2021/12/13(月) 13:06:28.94 ID:CRKwXgwv0.net]
>>163
何でこう無条件に善し悪しを求めようとするかね
メリット、デメリットがあるなら、どちらが良いと決めつけることは出来ないと判断出来ないものなのか

169 名前:デフォルトの名無しさん mailto:sage [2021/12/13(月) 15:27:20.29 ID:+BabEBNV0.net]
下のほうなら
const f = function({aaa, bbb, zzz}){
console.log(aaa, bbb, zzz);
}
のほうが分かりやすくないか
const o = {
aaa: 'あ',
bbb: 42,
zzz: 'ん',
};
f(o);

170 名前:デフォルトの名無しさん mailto:sage [2021/12/13(月) 18:56:15.12 ID:hdHWXJOsM.net]
>>136
形だけひとまとめにしても後でバラすんじゃなんの意味もない
objとかじゃなくて意味のある名前が付けられる範囲でまとめるべき



171 名前:デフォルトの名無しさん mailto:sage [2021/12/13(月) 18:56:54.87 ID:hdHWXJOsM.net]
>>166>>163あて

172 名前:デフォルトの名無しさん [2021/12/14(火) 13:31:35.06 ID:qf3fX3jjM.net]
var str="x^2 + (x+2)^2 - (x*(x-2))^3";
をMath.pow(x,2)+Math.pow((x+2),2)-
Math.pow((x*(x-2)),3)に置換するにはどうやればいいんですか?

173 名前:デフォルトの名無しさん mailto:sage [2021/12/14(火) 15:01:16.14 ID:82CERvuP0.net]
Math.powを使わなければ簡単なんだけどね

eval(str.replace(/\^/g, '**'));

174 名前:デフォルトの名無しさん mailto:sage [2021/12/14(火) 15:08:13.94 ID:4lV7iDvz0.net]
スペース含まない半角文字列限定。式の文字列つくるまで。
賢い人ならもうちょっとスマートに書けるかと。

var str="x^2+(x+2)^2-(x*(x-2))^3";
function func(s){
var s2=s.split('^');
var s3=s2[1].replace(/¥d+/,"");
return "Math.pow("+s2[0]+","+s2[1].replace(/[^¥d]/,"")+")"+s3;
}
var result=str.replace(/[a-z¥(¥)¥d¥*¥+¥-¥/]+¥^¥d+([¥+¥-¥*¥/]|$)/g,func);

175 名前:デフォルトの名無しさん [2021/12/14(火) 18:05:48.23 ID:ZmdmxRFm0.net]
>>169
そうやった方が簡単そうですね
>>170
ありがとうございます

176 名前:デフォルトの名無しさん mailto:sage [2021/12/15(水) 19:13:45.77 ID:h9C3pi7L0.net]
いつもはreplaceやmatchを使うんだけど、
execってのがキャプチャグループだけを簡単に抜き出せて便利そうだから使ってみました

txt="AabBxxB";

pattern = /A(.*)B/;

d=pattern.exec(txt);

alert(d[1]);



期待する結果はab

でも実際はabBxxが返ってきます、後方参照ってやつですか?一番後ろのものとマッチしてしまう
これって最短距離でのマッチを取得するにはどうすれば良いんでしょうか?

177 名前:デフォルトの名無しさん mailto:sage [2021/12/15(水) 19:19:59.60 ID:UjbkuvW00.net]
.*?

178 名前:デフォルトの名無しさん mailto:sage [2021/12/15(水) 19:20:26.59 ID:LAChl8N10.net]
ぱっとしかみてないけど
pattern = /A(.*?)B/;

179 名前:デフォルトの名無しさん mailto:sage [2021/12/15(水) 19:22:08.15 ID:Z/edc8620.net]
A([^B]*)B

180 名前:デフォルトの名無しさん mailto:sage [2021/12/15(水) 20:16:03.92 ID:1LHweqXF0.net]
( ^)o(^ )b



181 名前:デフォルトの名無しさん mailto:sage [2021/12/15(水) 20:34:33.03 ID:h9C3pi7L0.net]
>>173
>>174,175
ありがとうございます
なるほど、*も+も?も単体で使うと最長一致になるけど
*?とか+?みたいに組み合わせて使うと最短一致になるんですね、ややこしい…

182 名前:デフォルトの名無しさん mailto:sage [2021/12/16(木) 20:22:00.71 ID:bW+aVaO40.net]
>>177
その通りだが、一文字ならバックトラックが発生しない最長一致がいいと思う >>175

183 名前:デフォルトの名無しさん mailto:sage [2021/12/22(水) 17:33:35.08 ID:ONJh0jXva.net]
【環境】Windows 7 64bit, IE11
【何をしたのか】
$("form")で取得している内容が自分の考えと正しいかを確認したい
1. alert($("form")) → [object Object]と表示される
2. alert(JSON.stringify($("form"))) → IEが動作を停止しましたで強制終了
【エラーメッセージ】-
【期待する結果】
$("form")の中身が確認したいです
手段は選びません
console.log()は試していませんがshowModalDialogにて新規で開かれるウィンドウが描画されるまでに行われる処理のようで、コンソールを開く前に終わってしまうためalertで今は試しています
【サンプルコード】
$("form").attr("name");

184 名前:デフォルトの名無しさん mailto:sage [2021/12/22(水) 17:43:33.97 ID:ONJh0jXva.net]
>>179
自分は取得しているものが<form 〜>であると思っています
なのでHTMLが確認したいです

185 名前:デフォルトの名無しさん mailto:sage [2021/12/22(水) 18:34:04.36 ID:VeORz/HR0.net]
試してみたらfirefoxだと強制終了しないね
IEは消したからわからん

186 名前:デフォルトの名無しさん mailto:sage [2021/12/22(水) 20:25:41.33 ID:WODdA7db0.net]
>>179
試してないconsole.logやconsole.dirでいいと思うが、まず試してみては?
コンソールはモーダルウインドウが開いてなくても関係ない

あなたがほしいのは$("form")[0]な気はするが

187 名前:デフォルトの名無しさん mailto:sage [2021/12/22(水) 20:33:32.43 ID:WODdA7db0.net]
モーダルウインドウ上でコンソール出力しようとせず、モーダルウインドウを開くページから参照するとか、breakpointで止めるとか、モーダルウインドウを閉じるコードを一時的にコメントアウトするとか

モーダルウインドウを使わないのが一番だが
、Win7を使ってるならインターネットに接続してないのだろうし、相当特殊な環境だな

188 名前:デフォルトの名無しさん mailto:sage [2021/12/22(水) 22:15:47.78 ID:oJlbnIXA0.net]
>>181-183
ありがとうございます

>>182,183
お察しの通り過去に作られたIE用のシステムをEdgeに対応する必要があり、
現時点では当時の開発環境(VS2012)でデバッグ実行しています
JavaScriptに関わるのが初めてでとにかく動かして覚えようとしているところです
$("form")[0]は明日試してみます

console.logなどを試していない(諦めた)理由は、
動作として、親ウィンドウからshowModalDialogで子ウィンドウを開く
→子でデータを選択する→親に選択したデータが入力される という流れになっており、
親画面でF12のコンソールを開いておいても子が開かれるとモーダルにより親画面のコンソールも触れない
ので諦めたんですが、もしかしてピン止め外すと止まらないんですかね?
ピン止めした状態でしか動かしてなかったので明日試してみようとおもいます

>モーダルウインドウを開くページから参照するとか、
ウィンドウ間のやりとりがまだよくわからないのでその発想に至れませんでした

>breakpointで止めるとか、
showModalDialogで開いた後に処理される関数に貼ってみたんですが
張っていないshowModalDialogの行で止まって、関数の中をステップ実行できなかったんですよね…
関数の最初にdialogArgumentsを参照してifで分岐するんですが
showModalDialog以外で呼ばれるときはステップ実行できるのでそういうものなのかと諦めました

>モーダルウインドウを閉じるコードを一時的にコメントアウトするとか
その発想はなかったです
今後のデバッグに使ってみます

ひとまず、$("form")[0]とピン止めを試してみます

189 名前:デフォルトの名無しさん mailto:sage [2021/12/27(月) 21:01:36.58 ID:XB7P0UiP0.net]
html5のcanvasについて質問です
drawImageでこの画像をcanvasに描写した後、画像の白い部分だけを赤くマスクしたいです
https://illust8.com/wp-content/uploads/2018/08/icon_mail_illust_924.png

ctx.globalCompositeOperation = 'destination-in';

c2.globalCompositeOperation = 'darken';
を使うとオシイのですが、どうしても黒い箇所が赤くそまってしまったり、明るい方が優先されてしまったりします
何か良い手はないでしょうか?

190 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 10:31:30.75 ID:ChI3TD7z0.net]
今後はclassが標準になるの?



191 名前:デフォルトの名無しさん [2021/12/28(火) 10:36:46.52 ID:ChI3TD7z0.net]
JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。



そのため、以前できなかったことは、今でもできません。



クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。



class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。



使いたければ使えばいいんじゃない?と思います。

192 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 12:53:44.91 ID:s8DIRgNG0.net]
>>186-187
自問自答?
使いたくなければ使わなければいいと思うが、定期的にネガキャンするのは無駄なので、止めて欲しい
>>82,110

193 名前:デフォルトの名無しさん [2021/12/28(火) 13:05:03.77 ID:ChI3TD7z0.net]
JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。
そのため、以前できなかったことは、今でもできません。
クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、
誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。
class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、
勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。

194 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 13:28:00.05 ID:ediH0wTa0.net]
>>179
const form = $( 'form' )
console.log( form.length, form[ 0 ] )

HTML 内に、フォームが1つしかないなら、
form.length は1 で、form[ 0 ] でform 要素を取得できる

<form action="" id="form_1" name="form_1">
みたいに、id を付けた方が良いかも

そうすれば、これで取得できる
const form_1 = $( '#form_1' )

まあ、HTML, JavaScript, jQuery の質問は、
この板よりも、web制作管理板の方へ書き込んでください

向こうのスレが、本スレです

195 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 13:30:12.08 ID:ediH0wTa0.net]
今は、class を使う

今さら、prototype を使う人は、いない

196 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 13:50:08.36 ID:ChI3TD7z0.net]
>>191
内部構造が分かりにくい。

197 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 14:58:53.60 ID:Gh6bV9aa0.net]
ワイにとってはclassのほうが分かりやすいかな

198 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 16:37:46.66 ID:ChI3TD7z0.net]
すごい。
みんな頭いいんだな。

199 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 17:14:08.11 ID:jIrgILJka.net]
まあな

200 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 18:05:32.60 ID:VM83xPh40.net]
中がprototypeだとか別に関係ないだろう。外から見てclassとして振舞うならそれでいいわけだし。
classとしての振る舞いに何か問題があるならそこは注意すべきだが。



201 名前:デフォルトの名無しさん mailto:sage [2021/12/28(火) 19:24:57.81 ID:ChI3TD7z0.net]
みなさんjavascript何年目?
オレは2年。

202 名前:デフォルトの名無しさん [2021/12/31(金) 00:19:23.87 ID:K3Q5NoN00.net]
 昼食が3億!?AppleCEOや投資の神様とのランチ権オークションがすごい

スティーブ・ジョブズが亡くなった後にAppleのCEOになったのがティム・クック氏です。
そんな彼との1時間のランチ権が今年4月から5月にかけてCharitybuzzというオークションサイトに
出品され、$515,000(約5,150万円)で落札されました!
実はクックは過去にも同様の出品をしていて、今年の出品で4回目となります。

2000年からこれまでに計17回出品されているのが、「投資の神様」とも呼ばれるウォーレン・バフェット氏
とのランチミーティング権。2003年からは、世界最大級のオークションサイト「eBay」で毎年開催される
チャリティー・オークションのひとつとして出品されています。
今年6月に出品された際には、なんと$3,456,789(約3億4,568万円)で落札されました! 

203 名前:デフォルトの名無しさん mailto:sage [2022/01/02(日) 11:53:11.76 ID:qPLPCP6o0.net]
fc2ブログを使用しているのですが、javascriptが動かない設定などあったりするのでしょうか?
<script type="text/javascript">alert("hoge");</script>

また、動かない原因をブラウザの検証から調べる事はできますか?

204 名前:デフォルトの名無しさん mailto:sage [2022/01/02(日) 12:00:54.33 ID:qPLPCP6o0.net]
自己解決 すみませんす

205 名前:デフォルトの名無しさん mailto:sage [2022/01/03(月) 10:30:02.94 ID:ciAHc7bt0.net]
文字数の制限をしたいのですが、htmlでoverflow hiddenするのとjsでカットするのはどちらがいいんでしょうか?
ブログのトップページなんですが、本文の1部を表示させておいて、続きを読むというリンクを設置したいなと。
<div id="text">123456789</div>

<script>
let text = document.getElementById("text");
let inner_text = text.innerHTML;
let text_length = inner_text.length;
let max_length = 5;
if(text_length > max_length){
console.log("5文字超えてます");
text.innerHTML = inner_text.substr(0,max_length);
}
</script>

これで動きはしましたけど

206 名前:デフォルトの名無しさん [2022/01/04(火) 19:09:00.18 ID:NiWy5jYJ0.net]
x=<span id="x">0</span>,y=<span id="y">0</span>

<p> </p>
<div style="text-align:center">
<canvas id="canvas"></canvas>
</div>

<スクリプト>
var canvas_elm = document.getElementById("canvas");
var x_elm = document.getElementById("x");
var y_elm = document.getElementById("y");

var context = canvas_elm.getContext("2d");
canvas_elm.width = 600;
canvas_elm.height = 500;

context.fillStyle = "#0000ff";
context.fillRect(0,0,canvas_elm.width,canvas_elm.height);

canvas_elm.addEventListener(
"mousemove",
function(e){
x_elm.innerHTML = e.offsetX;
y_elm.innerHTML = e.offsetY;
}
);
</スクリプト>

canvas上でのマウスやタッチポインターの座標を表示したいんですけど、、PCではこれで座標が表示されるけど
mousemoveをtouchmoveにしてchromeでF12キーを押してスマホモードにしてタッチポインターを動かしたときxy座標がundefinedと表示されてしまいます。
スマホモードでもポインターの位置を表示できるようにするにはどうやればいいんですか?

207 名前:デフォルトの名無しさん mailto:sage [2022/01/04(火) 19:25:07.68 ID:vw+5Ecnq0.net]
スマホなど、色々なデバイスに対応させるのは、
React, Vue.js などのフレームワークを使うのでは?

それと、JavaScript の質問は、この板よりも、
web制作管理板の方へ書き込んでください!

この板のスレは、荒らしが出て、緊急避難用に立てたものだから

208 名前:デフォルトの名無しさん mailto:sage [2022/01/04(火) 19:34:13.24 ID:vw+5Ecnq0.net]
>>201
Ruby on Rails では、続きを読むのは、truncate(文字数)。
Railsがどういう実装をしているかまでは知らないけど

npm とか、Lodash とかに、そういう関数が無いのか?

「javascript 続きを読む」「css 続きを読む」で検索してみれば?

209 名前:デフォルトの名無しさん mailto:sage [2022/01/04(火) 20:53:53.77 ID:QGpHZiP/0.net]
>>202
タッチイベントにはevent.offsetX, event.offsetYはありません
event.changedTouches[0].pageX等から計算してください

210 名前:デフォルトの名無しさん [2022/01/04(火) 22:55:40.12 ID:NiWy5jYJ0.net]
そうなんですか
ありがとうございます



211 名前:デフォルトの名無しさん mailto:sage [2022/01/05(水) 10:08:51.69 ID:D2CbxegU0.net]
>>206
どう致しまして。

212 名前:デフォルトの名無しさん [2022/01/06(木) 12:37:03.20 ID:qVRSVavo0.net]
質問1 element.addeventlistnerとdocument.addeventlistnerの違いは?
質問2 
function(elm){
elm.addeventlistner(
"click",
function(e){alert("クリック");}
);
}
のような関数がある場合document.addeventlistnerの場合はelementがないので個別に関数作らないとだめなのか?

213 名前:デフォルトの名無しさん mailto:sage [2022/01/06(木) 12:51:53.90 ID:/RkhTEU50.net]
外側・親に、イベントを付けて、親で、子のイベントをキャッチできる。
jQuery で書いた

<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>

// 外側・親に、イベントを付けて、親で、子のイベントをキャッチする

$( '#btn-wrap' ).on( 'click', function ( event ) {
console.log( $( event.target ).prop( 'value' ) )
} );

この板よりも、web制作管理板の方へ書き込んでください!
そちらの方が、本スレです

214 名前:デフォルトの名無しさん mailto:sage [2022/01/06(木) 13:04:40.48 ID:nb3ueMLOM.net]
>>208
1. 対象要素が違うだけ。バブリングによって「あらゆる要素」のイベントをトラップしたい場合は後者を使うといい(一般的には普通は比較的近いコンテナ要素でトラップするもんだが...)
2. その関数なら共通でOK

>>209
本当に誘導したいなら、せめてリンクを貼りましょう

215 名前:デフォルトの名無しさん [2022/01/06(木) 14:19:29.65 ID:j/6fwGrk0.net]
このスレで質問しても何の問題もありません
荒らしやアフィリエイト宣伝業者に騙されて誘導されないようにしてください

216 名前:デフォルトの名無しさん mailto:sage [2022/01/06(木) 15:06:56.73 ID:cXhLxUi00.net]
>>208
回答1
event.currentTargetが異なる

回答2
e.targetを確認すれば良い

217 名前:デフォルトの名無しさん mailto:sage [2022/01/06(木) 15:09:56.94 ID:cXhLxUi00.net]
>>209
Web制作板でも次スレが立たず、旧スレを再利用してる状態
本スレなど存在していない

本気で本スレに誘導したいなら、最新スレを探して次スレを立てて保守すべき
それぐらいの情熱がある人はもういないと思ってたが、あなたがそうしたいのなら止めはしない

218 名前:209 mailto:sage [2022/01/06(木) 16:09:40.84 ID:/RkhTEU50.net]
この板のスレは元々、web制作管理板が荒らされた時に、緊急避難用に立てられたもの。
本スレは、向こうの方

この板は荒らしが多い

荒らしは短文で、必ず2回書き込む。
複数回書き込むことで、多くの人が書いているように見せる

それと、テンプレをしょっちゅう、自分が有利なように書き換える

Python のスレのテンプレとか、ひどい。
NGワードは何々とか、しょっちゅう書き換えている

まあ、ソースコードを書かない香具師は、
プログラマーじゃないから、相手にしない方がよい

219 名前:デフォルトの名無しさん mailto:sage [2022/01/06(木) 21:02:16.03 ID:Ozp6fgWI0.net]
window.onload = function(){
}
このfunctionって何の意味があるんですかね?

220 名前:デフォルトの名無しさん mailto:sage [2022/01/06(木) 21:09:14.63 ID:N8zU5Utu0.net]
中の変数とかを外から見えなくしてるんじゃない?



221 名前:デフォルトの名無しさん mailto:sage [2022/01/06(木) 21:28:50.56 ID:aRDKku+G0.net]
>>215
変数 = function() { ... }
で関数式(無名関数)っていう形で定義できる

関数式についての説明はこの辺を参照
https://ja.javascript.info/function-expressions
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

で、window.onload = function() { ... }
っていう風に実装すると、少し特殊な動きになって
HTMLを完全に読み込んだタイミングで、関数の中身を実行するっていう動きになる
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

(他言語だとあんまり見ない書き方だから混乱するかもしれんけど)

222 名前:超面白いyoutubeチャンネル [2022/01/06(木) 21:52:51.91 ID:eAd55W1B0.net]
https://www.youtube.com/channel/UC9UsyidyKO-s6K8sgWKmE2w

223 名前:デフォルトの名無しさん mailto:sage [2022/01/07(金) 07:23:20.82 ID:RiDo7mPm0.net]
>>217
変数に関数を入れられるんですよね。
処理を直には入れられないから、関数で包むとイメージなんでしょうかね。

224 名前:デフォルトの名無しさん mailto:sage [2022/01/07(金) 13:51:45.20 ID:RiDo7mPm0.net]
<div class="content">

<h2>header2</h2>

<h2>header2-2</h2>

<h2>header2-3</h2>

<h2>header2-4</h2>

</div>



<script>

let content = document.getElementsByClassName("content");

let all_element = content.querySelectorAll("h2");

console.log(all_element);

</script>

gebcnで取得したターゲットにqueryselectorは使えないんでしょうか?
idで取得したものなら可能なんですけども。

225 名前:デフォルトの名無しさん mailto:sage [2022/01/07(金) 14:27:21.79 ID:YQSfQDAQ0.net]
>>220
contentはgetElementsでHTMLCollectionをとってるので
content[0]とかにすればでるんじゃない?

226 名前:デフォルトの名無しさん mailto:sage [2022/01/07(金) 18:28:49.81 ID:RiDo7mPm0.net]
>>221
返り値が違うんですね。
要素だけを取ってくるもんだと思っていました。

ありがとうございます。

227 名前:デフォルトの名無しさん mailto:sage [2022/01/07(金) 18:31:00.59 ID:RiDo7mPm0.net]
エレメントしかいらないのならid使ったほうが良いみたいですね

228 名前:デフォルトの名無しさん mailto:sage [2022/01/07(金) 18:36:46.10 ID:HaEbTiQw0.net]
document.querySelectorAll(".content > h2");
でよくね?

229 名前:デフォルトの名無しさん mailto:sage [2022/01/07(金) 20:54:20.38 ID:RiDo7mPm0.net]
こういった場合クラスを使うんでしょうか?
cssではidは出来るだけ使わないということになっているらしいですが

230 名前:デフォルトの名無しさん mailto:sage [2022/01/07(金) 21:09:58.61 ID:/l7S/g/G0.net]
できるだけ使わないというか詳細度に関わる
1ページ一回というユニークルールもcss使い回しに不向き



231 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:37:14.84 ID:ly/XOtiZ0.net]
classnameでやってみますです

232 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:41:40.78 ID:ly/XOtiZ0.net]
>>224
そうやって書けるんすね
html collectionの構造がよくわからんくて

233 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:48:14.75 ID:ly/XOtiZ0.net]
>>224
いや、これだめでしたね
nodelistは帰ってきますけど、h2はとれてないです

234 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 05:55:36.78 ID:fLniY7PXM.net]
全てconstでOK

235 名前:デフォルトの名無しさん [2022/01/08(土) 07:52:36.25 ID:GNp2CfCTd.net]
Android10 F-51A
Chrome 93.0.4577.62

ブラウザ上での画像についての質問です。
画像自体は恐らく読み込めているようなのですが、全く映らないか、映っても一瞬で消えてしまいます。
エラーメッセージは出ません。
ファイルマネージャーというアプリから起動すると、正常に動作します。

考えられる原因、解決案は、例えば何があるでしょうか。
絶対パスというものなら出来るかと思ったのですが、自分のやり方が悪いのか、上手く行きませんでした。

236 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 09:00:28.06 ID:5hFueUuG0.net]
>>229
最初の一個だけでいいなら
let all_element = document.querySelector(".content h2")

237 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 09:52:41.58 ID:UKENl29p0.net]
>>231
情報が少なすぎて詰めきれません。もう少し詳細な情報を提供できませんか?
(まず、JavaScriptはどのように使用していますか?)

238 名前:デフォルトの名無しさん [2022/01/08(土) 10:15:27.19 ID:GNp2CfCTd.net]
>>233
スマホアプリの「QuickEdit」というテキストエディタで制作しています。

そういう意味じゃなかったらごめんなさい。

$Game_Image_Data = [];
$Game_Image_Data[0] = new Image(); $Game_Image_Data[0].src = "image/player.png";

これで「$Game_Image_Data[0].src」をアラートで出力すると、こうなります。

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

239 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 14:43:01.70 ID:ly/XOtiZ0.net]
>>232
どうも。今回はindex使うことにしてみます。

240 名前:231 [2022/01/08(土) 17:15:55.99 ID:GNp2CfCTd.net]
可能な限り絞り込み? ました。

検証にご協力していただける方は、「imageフォルダに適当な「player.png」の画像を挿入して、実行してみてください。

ここまである程度余計な要素を取り除いたので、流石にこれならいけるんじゃないか? と思ったのですが、自分の環境ではやはり駄目でした。

よろしくお願いいたします。



241 名前:231 [2022/01/08(土) 17:19:01.00 ID:GNp2CfCTd.net]
<! html>
<html>
<head>
<meta ="utf-8"/>
<title>No_Name_Game</title>
</head>
<body>
<div id="Original_Game_Windows">
<canvas id="Game_Main_Window" width="640" height="480" style="background-color:#000000;"></canvas>
</div>
<style>
body { margin: 0; padding: 0; }
#Original_Game_Windows {
width: 640px;
height: 480px;
position: relative;
}
</style>
</body>

242 名前:231 [2022/01/08(土) 17:22:09.26 ID:GNp2CfCTd.net]
ごめんなさい、貼り付けるの無理でした。

243 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 17:26:57.57 ID:c2V21ewI0.net]
>>236
サーバーに画像アップロードしないとだめですよ?

244 名前:231 [2022/01/08(土) 17:42:45.65 ID:GNp2CfCTd.net]
https://www.axfc.net/u/4048256

245 名前:231 [2022/01/08(土) 17:44:17.60 ID:GNp2CfCTd.net]
斧を使わせて貰いました。
よろしくお願いします。

246 名前:231 [2022/01/08(土) 17:44:45.13 ID:GNp2CfCTd.net]
>>239
もちろん承知しています。
それで試しても駄目でした。

247 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 18:53:38.87 ID:c2V21ewI0.net]
>>242
>>234のalertに表示されてるアドレスNot Foundだけど?

248 名前:231 [2022/01/08(土) 19:05:34.21 ID:GNp2CfCTd.net]
>>243
この文章って、そういう意味なのですか?
てっきり、アクセスは出来てるという意味だと勘違いしていました。
勉強不足で申し訳ありません。

ただ、今回は確実に、ちゃんと画像もフォルダ内にアップロードしたのですが、上手く行きませんでした。


https://i.imgur.com/7tRCd4P.jpg
https://i.imgur.com/AM1zYbJ.jpg
https://i.imgur.com/Egje64L.jpg

249 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 19:12:51.05 ID:c2V21ewI0.net]
>>244
頭のpが大文字じゃないですか…

250 名前:231 [2022/01/08(土) 19:26:33.45 ID:GNp2CfCTd.net]
>>245
ありがとうございました。

私が馬鹿すぎました。
ネタでやってたんじゃないです。ガチです。お騒がせしました。本当にありがとうございました。



251 名前:231 [2022/01/08(土) 19:30:48.95 ID:GNp2CfCTd.net]
>>24

252 名前:5
報告までに。
一応確認したところ、無事成功しました。
ありがとうございました。
[]
[ここ壊れてます]

253 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 20:24:29.61 ID:70jc3KgD0.net]
ドンマイ

254 名前:デフォルトの名無しさん mailto:sage [2022/01/08(土) 20:40:02.49 ID:6njacc4u0.net]
わりとやらかすミスだからしゃーない

255 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 01:12:15.51 ID:lzN+drLE0.net]
>>229
const elems = document.querySelectorAll(".content > h2");
console.log( elems, elems[ 0 ] )

これで、4つのh2が、ちゃんと取れている

NodeList(4) [h2, h2, h2, h2]
NodeList <h2>​header2​</h2>​

この板よりも、web制作管理板の方で聞いた方がよい。
向こうのスレが、本スレだから

256 名前:デフォルトの名無しさん [2022/01/09(日) 01:27:51.26 ID:wKoMs7Y50.net]
そいつは、>1 のテンプレをしょっちゅう改変している、テンプレ改変荒らし。
基本的に、ソースコードを書かない香具師は荒らし

「Ruby, Rails, クソチョン」などを、NGワード登録推奨とか、
自分が有利なように、いつもテンプレを改変する

荒らしがスレ主として、居座っているので、
まともな人がスレ立てして、テンプレも元に戻した方がよい

荒らしは必ず、短文で2回以上書き込む。
必ず、複数人がいるように見せかける

257 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 02:26:51.89 ID:WLNeqQAW0.net]
>>251
統合失調症ですか?

258 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 10:47:02.34 ID:94EdrQaq0.net]
>>250
「本スレはない」といっても伝わってなかったんだな >>213
Web制作板のスレは長らく次スレが立ってない
複数ある過去スレ(重複)を質問者が好き勝手に選んで再利用してるだけ
利用者も「重複だから本スレはこちら」などの誘導は誰もやってないし、どれが本スレとか誰も把握してない
繰り返すが、そもそもスレ消化時に次スレが立たなかったのでWeb制作板の本スレは消滅している
Web制作板のスレを追いかけてきたなら知ってるはずなんだがな

259 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 10:50:05.66 ID:zqBk0tn4M.net]
>>250
本気で誘導したいならリンクを貼りましょう

260 名前:231 [2022/01/09(日) 11:32:48.03 ID:8qT6W49sd.net]
昨日はお世話になりました。
二日連続になって申し訳ないのですが、質問させていただきます。

localStorageに保存しておける文字数って、あんまり多くないのでしょうか?

2000×400字ほどで、エラーが出てしまいます。
2000×300字だと問題なかったので、やり方じゃなく文字数の関係なのかと思ったのですが、どうなんでしょうか。

ちなみに、配列、オブジェクト型データです。



261 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 11:40:12.10 ID:81xkTGx10.net]
>>255
文字数というより、localStorageのデータ保存量の上限は基本5MBで
ブラウザや個人設定によって変わってくる
www.htmq.com/webstorage/

262 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 11:47:21.66 ID:Km6Rc4Yy0.net]
>>255
エラーとは?そこを詳しく説明して

263 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 11:51:03.02 ID:RPzdd9tK0.net]
変数や関数名の迷わない命名ルールってありますか?
変数は名詞、関数は動詞とは聞きますね。

264 名前:231 [2022/01/09(日) 11:56:07.27 ID:8qT6W49sd.net]
>>257
DOMEException { stack 〜ってエラーです。

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

265 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 12:09:04.30 ID:Km6Rc4Yy0.net]
>>259
exceeded the quota(割当超過)で確定
サイズ減らすかindexedDB使うか

266 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 12:10:23.57 ID:94EdrQaq0.net]
>>258
言語仕様としては、使用可能文字があるのみで命名規則に縛りはない
ビルトイン関数/プロパティの慣習的にクラスはUpperCamelCase、関数はlow

267 名前:erCamelCaseなので、守るとビルトインのコードと統一性が出来て良いだろう

後は採用しているコーディング規約を守れば良い
例えば、Google JavaScript Style Guide
https://google.github.io/styleguide/jsguide.html#naming
https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html#va
[]
[ここ壊れてます]

268 名前:231 [2022/01/09(日) 12:16:18.69 ID:8qT6W49sd.net]
>>260
回答ありがとうございます。
サイズ減らしたくないので、indexdDBと言うものを調べてみようと思います。

269 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 12:39:38.59 ID:RPzdd9tK0.net]
>>261
回答どうも。
規則というか命名ルールみたいなものが知りたいなと。

迷ってる時間が無駄になっているので。

270 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 12:45:08.85 ID:CpwtZL4w0.net]
すいません、アホな質問かもしれません。
マウスの右ボタンクリックで独自のサブメニューを表示したいと思います。
この場合は JavaScriput が必須で、CSSでは出来ないという理解で良いでしょうか。



271 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 14:49:13.23 ID:MpHyBZWL0.net]
仕事関係なのと、JavaScript は全くの初心者なんで聞き辛いのですが、
【環境】 Raspberry Pi OS Ver10.11
【期待する結果】 文字列の後ろに 1バイトの値を付加したい。
シリアルで受信したメッセージから特定の値を抜き出して別のユニットにシリアルで送信
します。見様見真似とネットで調べながら、

set_Message: function (message) {
const _STX = '\x02'; // STX
const _ETX = '\x03'; // ETX
// 送信フレーム生成
var frame = _STX + message + _ETX;
// BCC 生成
var idx = 0;
var bcc = frame.charCodeAt(idx++);
do {
bcc ^= frame.charCodeAt(idx++);
} while (frame.charAt(idx) != '');
var buff = new ArrayBuffer(5);
var BCC = new DataView(buff);
BCC.setUint8(0, Number(bcc));
// 送信実行
var command = "echo -n " + frame + " > " + TTY_USB;
execsyncs(command);
command = "echo -n " + BCC.getUint8(0) + ',' + (bcc - 0) + ',' + Number(bcc) + ',' + parseInt(bcc, 10) + " > " + TTY_USB;
execsyncs(command);
return;
}

関数を作成、ブロックチェックコード BCC を計算させました。BCC を最後に付加したいのですが、
どれも値が 2バイトの文字列になってしまいます。"JavaScript" + "文字列を数値に変換" とかの
キーワードで検索しながら試行錯誤していますが、単純な数値にするヒントを頂ければ幸いです。
組み込みプログラマーなので、C と、C++ が少しわかります。

272 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:08:40.66 ID:94EdrQaq0.net]
>>263
ruleは日本語で規則
あなたのいう命名ルールと俺のいう命名規則は同じ

273 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:18:07.99 ID:WLNeqQAW0.net]
名前なんて違反しなきゃ好きにつけりゃいい
俺は長くなっても意味がわかる命名派
vとかiとか一文字の変数や定数を好む宗教も強い

274 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:28:05.42 ID:94EdrQaq0.net]
>>264
menu要素は非推奨になったし、JavaAcriptしかないのでは
少なくとCSSがブラウザ標準の動作を変更させることはないと思うし、右クリックを検知する方法はないと思う

コンテキストメニューの改変はアクセシビリティが低下する可能性が高いので、慎重に対応する必要はある
ゲームのような独自の操作方法を要求する場合は致し方ないが、多くの場合、ユーザはブラウザ標準の動作を期待する
独自メニューを提供することでブラウザ標準のメニューを使えなくなる事に不満を持つ
独自メニューとブラウザ標準のコンテキストメニューが両方出現するUIなら良いかもしれないが

275 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:29:28.78 ID:94EdrQaq0.net]
>>268の誤字修正

× JavaAcriptしかないのでは
○ JavaScriptしかないのでは

276 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 15:42:44.57 ID:RPzdd9tK0.net]
適当につけます(´・ω・`)

277 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 16:11:22.92 ID:CpwtZL4w0.net]
>>268
ありがとうございます!
Javascriptを使う必要がある件、了解です。

以前に .net で作ったWindowsアプリをWebアプリに移植しています。
Table上の特定のセルを右クリックしたら独自メニューが表示される仕様になります。
それ以外の場所では ブラウザ標準のコンテキストメニューが表示出来るようにしたいと思っています。

やり初めて間もないのですが、覚えることが多すぎて恐ろしい世界ですね。Webアプリとは。
Javascriptでやるにしても、JQueryかVueかReactか、どれでやるべきか・・・
バックエンドは Djangoですが、自分ひとりでやらないといけないので かなりの修行になりそうです。
あと、AWSのデプロイとか Dockerとか・・・・ 初めてのことばかりで・・・

278 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 16:51:11.22 ID:94EdrQaq0.net]
>>271
デスクトップアプリとWebアプリの一番の違いは実行環境が複数存在していることだろうな
クライアント環境を指定出来る社内向けWebアプリならブラウザを制限できるが、Webアプリを公開するなら、クロスブラウザが必須
デスクトップOSだけでもChrome,Fx,Edgeの対応が必要となる
(Operaもあるが、シェアが小さい)
モバイルOS版のブラウザも含めると更に大変になる
実装状況はcaniuseやMDNの互換表を見ると、ある程度は分かる
https://caniuse.com/

JavaScript標準の書き方を覚えてから、ライブラリ、フレームワークに手を付けるのが良いと思う
jQueryから入った人はDOMの知識が浅くて見当違いの質問をする事が多い
Vue,Reactは完全に別世界だが、DOMやECMAScriptの文法を理解してないと辛い
JavaScriptの基礎はおさえておいて損はない

最も、バックエンドが未着手なら、バックエンドの習得が先かと
JavaScriptもまとめて学習すると、おそらく混乱する

table要素の特定セルのコンテキストメニューの独自化なら大丈夫だと思う
Google スプレッドシートのWebアプリを想起した

279 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 17:29:38.29 ID:CpwtZL4w0.net]
>>272
アドバイス ありがとうございます。
ほんとうに助かります!

幸い 社内関係者が使用するだけの業務用アプリなので ブラウザを限定して開発することが出来ます。
JavaScriptの基本をおさえるほうが良い件、了解です。
入門本を買ってきて 勉強してみます。

バックエンド(Django)はなんとか目処が立ちそうです。
いやぁ、本当にWebアプリの世界はすごい(難しくて 複雑)と思いました。
おまけに技術の変化が激しそうだし・・・
がんばります!

280 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 18:35:56.14 ID:94EdrQaq0.net]
>>273
クライアント環境を制限できるなら、デファクトスタンダードのGoogle Chromeがお勧め
次点でレンダリングエンジンが同じMS Edge

ブラウザシェアはIE1強時代と比べて、大分変わったな…
https://gs.statcounter.com/browser-market-share/desktop/japan/2021

確かに技術の進化はあるが、Web技術は後方互換性重視の設計思想なので、非推奨機能を使わなければ、大半の機能で半永続性が保証されている
HTML3.2は現代のブラウザでも動作するし、ECMAScript3は現役だ
つまり、古いバージョンから新しいバージョンに更新し続ける必要はない




281 名前:ただし、これはWeb標準機能に限定した理屈でブラウザの独自拡張機能は別
その昔、IEのActiveX機能を使用した社内向けWebアプリはIEが終焉を迎えるとともに、他ブラウザへ移行するために改修を余儀なくされた
現在は昔と比べてブラウザの独自拡張機能が少ないが、ないわけでもない
Web標準機能を使っておけば、他ブラウザの対応も容易なので、注意すると良い
[]
[ここ壊れてます]

282 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 19:24:13.83 ID:oCAuhuCGM.net]
>>265
Uint8Arrayとかそういう話じゃなくて?

283 名前:231 [2022/01/09(日) 19:56:40.79 ID:8qT6W49sd.net]
昨日から何度も失礼します。

ご提示いただいたindexedDBについて調べて、最初、コピペせずに
自分で打ち込んだら、何度修正してもトランザクションでエラーが出たので、
次に某所のコードをコピペしたら、このようなエラーが出てしまいました。

制作環境がスマホでは、トランザクションというか、indexedDBを扱うのは無理なのでしょうか。
スマホの制作環境わかる方少ないかと思いますが、アドバイスいただけたら幸いです。

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

284 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 20:16:29.50 ID:Km6Rc4Yy0.net]
>>276
某所なんてぼかされても何も分からん
スマホだから使えないなんて話は聞いたことがない

https://caniuse.com/indexeddb

285 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 20:32:49.24 ID:d2WOXC3/M.net]
indexeddbは直で扱うのはしんどいからライブラリ使うといい
localstorageの代わりとして使う程度ならlocalforageがおすすめ

286 名前:231 [2022/01/09(日) 20:34:03.26 ID:8qT6W49sd.net]
確かに質問するのにそこぼかしたら駄目ですよね。すみません。

「VB.NET-TIPS などプログラミングについて」というブログの、「JavaScript IndexedDB の使い方2(データ追加)」

というところです。

vbnettips.blog.shinobi.jp/javascript/javascript%20indexeddb%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%EF%BC%92

287 名前:265 mailto:sage [2022/01/09(日) 20:35:41.88 ID:MpHyBZWL0.net]
>>275
BCC[0] = bcc;
BCC[1] = Number(bcc);
BCC[2] = parseInt(bcc);

command = "echo -n " + BCC[0] + BCC[1] + BCC[2] + " > " + TTY_USB;
execsyncs(command);

としてみましたが、どれも 2文字の文字列で出力されてしまいます。コマンドを作る際の連結で文字列にされている感じでしょうか?

昼過ぎに質問を書き込んでから、const _BCC[ '\x00', 〜 '\xFF' ] の 256バイトの配列を作成、_BCC[bcc] として目的の値が出力出来る所まで辿り着いたのですが、処理としてはチョット恥ずかしい感じがします。

288 名前:265 mailto:sage [2022/01/09(日) 20:38:48.27 ID:MpHyBZWL0.net]
>>280
消しすぎてました。試したのは、

var BCC = new Uint8Array(bcc);
BCC[0] = bcc;
BCC[1] = Number(bcc);
BCC[2] = parseInt(bcc);

です。

289 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 20:56:22.61 ID:94EdrQaq0.net]
>>280
変数commandはString型なので、そこに含まれる値は全てStrong型に変換される

String(10) === "10"

1バイトの文字が必要なら、ASCIIコードの範囲で1文字になるよう調整する必要がある

290 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 21:05:54.69 ID:wEbou60s0.net]
>>265
String.fromCharCode(bcc) ではだめなの?(UTF-16だけど)



291 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 21:57:44.39 ID:MpHyBZWL0.net]
>>282
>>283
有難うございます。
String.fromCharCode(bcc) で目的が達成出来ました。
これで巨大な変換テーブルを人目に晒さずに済みました。
精進いたします。

292 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 22:58:01.81 ID:lzN+drLE0.net]
>>271
スレ立てるまでもない質問はここで 158匹目
https://mevius.5ch.net/test/read.cgi/tech/1635193843/538

ここに、YouTube で有名な、雑食系エンジニア・KENTA のサロンの、
Ruby on Rails 初心者用コースの内容を書いておいた

基本的に、Rails以外のフレームワークは、シェアが少ないのでおすすめしない。
学習環境も揃わないので、無理

Railsでは、Railsチュートリアル・Railsガイド・
黒田努の3冊の本・パーフェクト Ruby on Rails・Ruby on Rails 6 エンジニア養成読本とか、
Rubyでは、改訂2版 パーフェクトRuby・改訂2版 Ruby逆引きハンドブックなどの教科書が揃っている

これほど、良い教科書が揃っているフレームワークはない!

Laravel のシェアは少しあるけど、KENTAがPHP は一生やる必要がないと言ったので、
PHP自体がオワコンになってしまったw

日本のウェブ開発の将来は、ほぼKENTAが決めている。
Scala を滅ぼしたのも、KENTA

293 名前:デフォルトの名無しさん mailto:sage [2022/01/09(日) 23:10:39.20 ID:WLNeqQAW0.net]
>>285
自演するな

294 名前:デフォルトの名無しさん mailto:sage [2022/01/10(月) 00:49:36.06 ID:iL7OUFIC0.net]
<table style="width:3000px;background:#ff00ff">
<tr>
<td>aaaaaaaaaaaa</td>
</tr>
</table>

<div style="position:fixed;top:50px;left:200px">x=<span id="x">0</span></div>

setInterval(

function(){
document.getElementById("x").innerHTML = window.pageXOffset;
}
,100
);

PCだと左右スクロールさせたときちゃんとwindow.pageXOffsetが表示されるけど
スマホだと右スクロールの場合は0のまんまで左スクロールの場合だけ表示されます。
スマホでもスクロール値ちゃんと取得できるようなやり方はありますか?

295 名前:デフォルトの名無しさん mailto:sage [2022/01/10(月) 01:03:26.84 ID:RagYY3R10.net]
>>287
scrollイベントでなく、setIntervalを使う理由が何かある?
scrollしてない時にも常に監視したらバッテリの持ちが悪くなりそうだが

296 名前:231 [2022/01/10(月) 05:44:27.44 ID:GFg5qhLud.net]
>>277
>>278
ありがとうございました。

297 名前:231 [2022/01/10(月) 07:56:10.03 ID:GFg5qhLud.net]
>>277
おっしゃるとおり、トランザクションはブラウザでは正常に動作していました。
トランザクションでエラー起きていたのは、テキストエディタのプレビューから動かしたときだけでした。

しかし、

https://ideone.com/IKQkII

このコードの59行目くらいで、自分のスマホだとエラーが起きるところまではわかったのですが、解決案がわかりません。
アドバイスいただけたら幸いです。

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

298 名前:デフォルトの名無しさん mailto:sage [2022/01/10(月) 09:10:37.59 ID:kImY1hGC0.net]
>>290
idb作るときにkey指定したりした?
結構癖のあるDBよ。
https://qiita.com/butakoma/items/2c1c956b63fcf956a137

localForageとかPouchDB使った方が良いのでは?

299 名前:231 [2022/01/10(月) 09:57:44.78 ID:GFg5qhLud.net]
>>291
このコードは自分で書いたものじゃなく >>279 で挙げたサイトの完コピなんです。
なので多分ミスはないんじゃないかと思うんですが……。

昨日も薦められましたが、localForageと言うのも少し調べてみます。

それなりの規模のRPGを作ろうとしてまして、キャラ、アイテム、フィールドマップ、
イベントなどなどの情報をセーブするために、出来るだけ格納出来る情報量が多いものを使用したいんですよね。

300 名前:デフォルトの名無しさん mailto:sage [2022/01/10(月) 10:26:53.27 ID:LkWl6bQKM.net]
>>292
そういう事であればPouchDB一択。
サーバと同期してマスタ撒いたりできる。
サーバはIBM CloudantってDBaaSがあるよ。



301 名前:231 [2022/01/10(月) 10:56:29.90 ID:GFg5qhLud.net]
>>293
ありがとうございます。
こちらも調べてみます。

302 名前:デフォルトの名無しさん [2022/01/10(月) 12:30:07.69 ID:iL7OUFIC0.net]
>>288
1:ゲームみたいにリアルタイム処理しているのでsetInterval使ってるから
2:setInterval内に書けばaddeventlistner使わずにプログラムが簡単ですむから
3:addeventlistnerから得た値をsetInterval内の関数に渡すときグローバル変数で渡すけど
setInterval内でいろいろスクロール値やフォームなどの入力値も取得すればグローバル使わなくていいから

303 名前:231 [2022/01/11(火) 10:20:14.57 ID:xHId70tjd.net]
連日すみません。

new Objectしたデータ(以下〇〇〇〇とします)をindexedDBで格納しようとしたのですが、
〇〇〇〇[0].nameで実行するとちゃんと格納されたようで
名前を表示してくれるのですが、〇〇〇〇[0]や〇〇〇〇で実行すると、エラーが出てしまいます。

名前などは表示されるのだから、forで無理矢理全部やろうとしたら、indexedDBでは前のデータに上書きされるようで、上手く出来ませんでした。

この〇〇〇〇を格納出来うる解決案などありましたら、教えていただけると幸いです。

連日すみません。

https://i.imgur.com/5TVe5FC.jpg
https://i.imgur.com/b6Ymtuc.jpg

304 名前:デフォルトの名無しさん mailto:sage [2022/01/11(火) 13:20:29.56 ID:yML4DU0R0.net]
>>287
次のコードを先頭(<head>部)に追加する。
<meta name="viewport" content="user-scalable=no" />

>>296
>>1
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
  ※必ず「問題の事象が再現されること」を確認してください。
   必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。

305 名前:231 [2022/01/11(火) 13:48:48.89 ID:dFSE8CT0d.net]
>>297  さんはじめ、皆様失礼しました。
コピペ部分除いて、自分が好きなように書き殴ったコードなので、
出来るだけ見せたくなく、あのような半端な質問になってしまいました。申し訳ありません。

現在進行形でサンプルコードを作成していたのですが、打開案が見つかりそうな気がしたので、もう少し自力で頑張ってみます。

306 名前:231 [2022/01/11(火) 17:48:23.29 ID:deLc6mHgd.net]
>>296 についてですが、どうやら、データの一つ一つに割り当てた画像の部分を削除すると、上手く機能するようなのですが、
IndexedDBでは、文字列などのオブジェクトと画像は、同時に格納出来ないのでしょうか。

出来ないのであれば、相当な量の手直しが必要になり非常に困ります。
制作開始時期にほんの少し調べて、localstorageで出来るんだな、と高をくくってセーブを後回しにしてしまい、後悔ばかりです。

307 名前:デフォルトの名無しさん mailto:sage [2022/01/11(火) 22:47:10.94 ID:TAtkceMX0.net]
Ruby on Rails では、画像の保存に、libvips かImageMagick も使う。
それで画像を変換したり、サイズなどをチェックする

チェックしないと、サイズが少なくても、
1px × 10,000px みたいな極端な形状を送られて、
サーバーを攻撃してきて落とされる

だから、縦横もチェックしないといけない

Railsみたいなフレームワークを使っていない人は、
ウェブサービスを作るのは無理だと思う

フレームワーク側で自動的にチェックされる機能を、
すべて自分で作らないといけないから

308 名前:デフォルトの名無しさん mailto:sage [2022/01/11(火) 22:54:59.18 ID:1iYs2MCE0.net]
>>299
質問する時は
@やりたい事を明確に書く
Aそのために今試している/実装している内容、ソースコードなど
B発生しているエラー等について
の順で書くと良い

ぶっちゃけ何をやろうとしてるのかが全く分からん
画像をIndexedDBに保存したいなら、一回blobに変換しないといかんぞ
https://blog.katsubemakito.net/html5/indexeddb2

309 名前:デフォルトの名無しさん mailto:sage [2022/01/11(火) 22:59:30.93 ID:JNUAUaQda.net]
>>299
IndexedDBでblob保存できるんだから画像が入らない理由はない
そしてHTMLImageElementを丸ごと保管するのは明らかにおかしいし
そこに画像は無いと思うんだが

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

310 名前:231 [2022/01/12(水) 05:59:28.46 ID:cpeqqxS8d.net]
https://4.gigafile.nu/0119-b5bf917d41c34039ed485d68891d082e0

ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。

紹介されたサイトなど巡って、考えてみようと思います。



311 名前:デフォルトの名無しさん mailto:sage [2022/01/12(水) 09:14:18.07 ID:60+8sbQA0.net]
>>303
>ゲームキャラクターのステータスなどと一緒に、歩行グラフィックもまとめて保存していました。
なんかまた妙な事をやろうとしてるな

普通はimgフォルダを作って、そこに歩行グラフィックとかを格納する
実装部分はキャラクターの状態に合わせてグラフィックを呼び出す、みたいな感じにするぞ

312 名前:231 [2022/01/12(水) 09:55:20.12 ID:moNKRHMad.net]
>>304
何となくですが、普通どうするのかわかったような気がします。

アドバイスありがとうございます。

313 名前:デフォルトの名無しさん mailto:sage [2022/01/12(水) 12:17:05.53 ID:/ZdmJSDda.net]
単にリソースを保管して読込を速くしたいならキャッシュを制御すればいい
何が目的でそれを使うのかよく考えないと訳わからんコードになる

314 名前:231 [2022/01/13(木) 08:13:45.35 ID:9NWqLsjEd.net]
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 (localhost:2435/storage/emulated/0/index.html:95:34)↵ at XMLHttpRequest.<anonymous> (localhost:2435/storage/emulated/0/index.html:84:21)" }

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

https://52.gigafile.nu/0120-e68fc48424d65f0f7ae137f3f97cbbc0

315 名前:デフォルトの名無しさん mailto:sage [2022/01/13(木) 10:49:49.47 ID:BdYH6d7w0.net]
>>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
 puyo.sega.jp/program_2020/

316 名前:231 [2022/01/13(木) 12:01:21.75 ID:2Kp13/God.net]
動作環境は、Android10 F-51A
Chrome 93.0.4577.62

です。

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

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

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

スレの皆さんを不快にさせてしまい、申し訳ありませんでした。

317 名前:デフォルトの名無しさん mailto:sage [2022/01/13(木) 12:34:36.45 ID:v0PpJSuUa.net]
やる気はあるみたいだし不快って程じゃない
でも何がしたいのかよく分からない

保存する画像はユーザーがアップロードするの?それともcanvasに描いた内容を変換するの?
元々サーバーにある画像をわざわざDBに入れるとしたら理由が分からない

318 名前:231 [2022/01/13(木) 15:14:42.78 ID:EndGOLp+d.net]
>>310
https://youtu.be/RKcFIg1yHOI

こちらの動画を参考に、自分なりに考えてやった結果が >>296 >>229 なんですよね。
他にやりようある、ありそうってのはわかるんですが、上手く行かないです。

319 名前:デフォルトの名無しさん mailto:sage [2022/01/13(木) 15:18:53.58 ID:BdYH6d7w0.net]
>>309
こっちも口調が強くなってすまんな
>最初の質問だった画像の表示と、各種データ(質問時、画像保存が別物とは知りませんでした)のセーブ&ロードさえ出来れば、
今やりたい事は
@データをセーブする(localstorageまたIndexedDB)
A@で保存したデータを読み込んで、セーブした時の状態に戻す
っていう事でいいかな?
だとすると、なおさら画像をDB等に保存したい理由が分からない

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

320 名前:231 [2022/01/13(木) 16:01:24.15 ID:Pj0bwTK9d.net]
>>312
いえ、こちらこそ、気を遣わせて申し訳ありません。

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

そのものズバリでした。
先ほど >>310 さんのレス見て、ん? とは思ったのですが、
やっぱり画像ってセーブとかロードとかするものじゃないんですね。



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を2秒以上タッチしたらスクロール禁止にしたいんだけどうまくいきません
どうすればいいんですか?

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
2秒以上押している間処理実行という場合はどうしたらいいんですか?



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だとタッチを離さないとだめなので
タッチを離さないで2秒以上押しっぱなしという意味です

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 = {}:

422 名前:デフォルトの名無しさん [2022/01/25(火) 22:43:16.96 ID:xKqTlXah0.net]
>>409>>411
できましたありがとー

また質問だけどsetIntervalとwindow.scrollByを使って自動スクロール中に
手動でスクロールするとclearIntervalで自動スクロールを止めるようにしたいんだけど
自動スクロールも手動スクロールもaddEventListner("scroll",function(e){})が発動して
区別をつけることができないんだけどどうすればいいですか?

423 名前:デフォルトの名無しさん mailto:sage [2022/01/25(火) 23:01:22.01 ID:5lVpkzkKr.net]
>>410
WebAPI使わなければいいんでない?

424 名前:デフォルトの名無しさん mailto:sage [2022/01/26(水) 01:23:00.34 ID:I/6zw4/PM.net]
>>412
e.isTrusted で区別できるかも

425 名前:デフォルトの名無しさん [2022/01/26(水) 12:30:28.07 ID:XmTyDG1O0.net]
>>414
やってみたけど自動でも手動もでtrueだったので判別できませんでした

426 名前:デフォルトの名無しさん mailto:sage [2022/01/26(水) 12:40:07.38 ID:9OS9fT5f0.net]
>>412
自動スクロール中のフラグを作成して、フラグ管理すれば良い

427 名前:デフォルトの名無しさん mailto:sage [2022/01/26(水) 13:12:16.31 ID:bkHBqHOK0.net]
>>412
wheel, mousedown、keydownイベントで止めるとか

428 名前:デフォルトの名無しさん mailto:sage [2022/01/27(木) 11:57:20.38 ID:ZSUaXKzX0.net]
>>417
mousedownはオート・スクロール・モードのことか
https://atmarkit.itmedia.co.jp/fwin2k/win2ktips/759autoscroll/autoscroll.html

2アクション必要だから、モード検知がやや複雑化しそうだな…

---
自動スクロールを検知して、自動スクロール以外を手動スクロール扱いする方向で考えてた
これなら、キーバインド変更されても対応出来る

429 名前:デフォルトの名無しさん mailto:sage [2022/01/29(土) 02:18:01.02 ID:/eUfBI510.net]
oninput="value=value.replace(';','1')"

置換元が特定の全角記号(¥:;@等)の場合、置換先の文字が2回入力されます。
書き方の問題ですか?回避方法はありますか?

chromeとedgeで発生しました。
ieでは発生しませんでした。

430 名前:デフォルトの名無しさん mailto:sage [2022/01/29(土) 03:13:10.90 ID:wMUjEsRbM.net]
KeyboardEvent.isComposingで変換中か判定したらいい

<input id="test">

const elm = document.querySelector("#test");
elm.addEventListener("keyup",(e)=>{
if(!e.isComposing){
elm.value =
e.target.value.replaceAll(";","1")
}
})



431 名前:デフォルトの名無しさん mailto:sage [2022/01/29(土) 09:47:04.60 ID:/uVNTTXR0.net]
>>410
JavaScriptは初心者向けの簡易言語。

432 名前:デフォルトの名無しさん [2022/01/29(土) 23:21:16.05 ID:vLNLUfHR0.net]
一応入門書を一通り終えたのでelectronでGUI作ろうと思ったら、予想以上に難しくて挫折した。
electron使いの人いる?
いたらどれだけのレベルにならないと作れないか教えて。

433 名前:デフォルトの名無しさん mailto:sage [2022/01/30(日) 00:53:12.46 ID:8AeUKyTB0.net]
>>419
Node.js で実行したら、1回しか置換されない

inText = 'あい;;ab;;12';
outText = inText.replace(';', '1');

//=> あい1;ab;;12

434 名前:デフォルトの名無しさん mailto:sage [2022/01/30(日) 02:04:42.24 ID:acbp/SqRa.net]
>>422
俺はelectron使いじゃないけど今本屋に並んでる2022年3月号の日経ソフトウエアでElectronでデスクトップアプリ開発特集載ってたよ

435 名前:デフォルトの名無しさん mailto:sage [2022/01/30(日) 12:10:56.23 ID:5V9R/BtT0.net]
>>420
これだと普通に置換できますね

>>423
環境によるんですかね

結局こうしました。半角の数字と半角のコロンだけ表示。
.replace(/[0-9:]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/[^\:\d]/g,'').replace('::',':');
最後に[::]→[:]
変なやり方だと思うけど:を二回使う事は無いのでとりあえずOK

replaceどうのこうのではなくて、oninputが2回実行されてるみたいです。
oninput="value=value + 'あ'"
特定の全角記号だと「;あ;あ」、全角英字なら「;あ」

436 名前:デフォルトの名無しさん mailto:sage [2022/01/30(日) 12:57:51.16 ID:hMKxlwO1a.net]
querySelector
で帰ってきたelementのメソッドでcloset()だとRoot方向にしか検索できませんがchild方向にelementを検索する方法はありますか?

437 名前:デフォルトの名無しさん mailto:sage [2022/01/30(日) 13:01:07.63 ID:/oi//KEc0.net]
chiled方向に検索するのがquerySelectorじゃないのですか?

438 名前:デフォルトの名無しさん mailto:sage [2022/01/30(日) 13:06:33.56 ID:hMKxlwO1a.net]
>>427
documentだけじゃなくてelementに対してもquerySelectorメソッドつかえるんですね。ありがとうございます

439 名前:デフォルトの名無しさん mailto:sage [2022/01/30(日) 13:12:27.53 ID:y4il4Rjb0.net]
>>428
必要としてるのは :scope か?
https://developer.mozilla.org/ja/docs/Web/CSS/:scope

440 名前:デフォルトの名無しさん mailto:sage [2022/01/31(月) 12:50:53.75 ID:rc3LWwE50.net]
excelの配列数式などでAND OR の代わりに * + 等を使ったりしていましたが
javascriptの条件式のなかに&&の代わりに*を使った場合、
違いはありますでしょうか。
*だと左辺がtrueであっても右辺も評価するなどするのでしょうか。



441 名前:デフォルトの名無しさん mailto:sage [2022/01/31(月) 13:20:30.75 ID:QWw3Y16fM.net]
>>430
そんなもん手元のコンソールに打って直接確認した方が早いと思うけど、そうしたくない理由でもあるの?

442 名前:デフォルトの名無しさん mailto:sage [2022/01/31(月) 13:34:41.41 ID:KJiW2Lya0.net]
だってただの乗算・加算なのだから一連の計算全部しないと結果は出せないもの
文字列だった場合バグの温床になりかねないので素直に論理演算子使っとけ

443 名前:デフォルトの名無しさん mailto:sage [2022/01/31(月) 15:13:48.28 ID:rc3LWwE50.net]
ありがとうございます

444 名前:デフォルトの名無しさん mailto:sage [2022/02/01(火) 14:41:29.69 ID:wfvu5dwy0.net]
> if(undefined){

445 名前:console.log("undefined is true");} else {console.log("undefined is false");}
undefined is false
undefined

> if(!undefined){console.log("!undefined is true");} else {console.log("!undefined is false");}
!undefined is true
undefined

> if(true+console.log("exec")){console.log("true"); }else{console.log('false')}
exec
false
undefined

> if(console.log("exec")*console.log("exec2")){console.log("true"); }else{console.log('false')}
exec
exec2
false
undefined

論理演算子的な打ち切りはしてないね。普通に算術演算子だわw
[]
[ここ壊れてます]

446 名前:デフォルトの名無しさん mailto:sage [2022/02/01(火) 14:46:27.83 ID:wfvu5dwy0.net]
普通に手打ちしてたら、空白とかクォートとかセミコロンの打ち方に全然整合性ないでやんの、俺w

447 名前:231 [2022/02/04(金) 16:32:44.06 ID:1UhKSGd+d.net]
■質問テンプレート
【環境】Android10 F-51A
Chrome 93.0.4577.62

【何をしたのか】セーブ(サンプルコードの一番下の方で実行)を2回以上実行すると、ロード出来なくなる。

【エラーメッセージ】出ません。

【期待する結果】セーブ、ロードが正常に行われるようにする。

【サンプルコード】
https://ideone.com/BJQ4qV

懲りずにお邪魔します。
解決案など思いついた方いらっしゃったら、よろしくお願いします。

今回でアドバイスを得られない、あるいは私の理解が及ばなかった場合、ココナラなどの利用も検討しています。
解決案は知らんけど、有償で良いならこのサイトがおすすめ、みたいな情報も頂けたら嬉しいです。

448 名前:デフォルトの名無しさん mailto:sage [2022/02/04(金) 17:05:32.54 ID:eOennQVj0.net]
全然見てないしよくわからんけど、なんでセーブとロードを繰り返してるの?

449 名前:デフォルトの名無しさん mailto:sage [2022/02/04(金) 17:14:57.96 ID:kUcQ1Y3lM.net]
>>436
1. 非同期の基礎を勉強する
2. コールバックAPIをPromisifyしてawaitする

450 名前:デフォルトの名無しさん mailto:sage [2022/02/04(金) 17:20:39.40 ID:5yD7H7/00.net]
>>436
書き込み、読み込み後にデータベースを閉じてないから2回目のdeleteDatabaseが出来ずに永遠に待ってる
データベースである必要ないならストレージ使えってば



451 名前:231 [2022/02/04(金) 17:21:33.29 ID:1UhKSGd+d.net]
>>437
最初のセーブでは、ロード成功するんです。
2回目のセーブをすると、ロードに失敗するんです。
一度目の処理では成功してるけど、二度目で失敗してるのを見て貰うために、今回のコードでは繰り返しにしました。

452 名前:デフォルトの名無しさん mailto:sage [2022/02/04(金) 17:22:14.91 ID:58zz3a0tM.net]
まず変数はletかconstを使って明示的に宣言する

あと非同期処理の勉強をした方がいい
url先のコードは処理が行われる順番を考慮してない
コードで例示すると
const elm = document.querySelector("#input")
let mail;
elm.oninput = (e) => {
mail = e.target.value;
}
console.log(mail);
みたいなコードを書いてる
oninputはすぐに呼び出されないのに先にmailを参照しているからバグる
他にも色々ありそうだけど自分がパッと見つけられた間違いはこれだけ
(文字が全角になってるのはCloudflare対策)

453 名前:デフォルトの名無しさん mailto:sage [2022/02/04(金) 17:23:09.66 ID:0CWz3hfAM.net]
変数の宣言方法と変数のスコープについても学んで下さい
”use strict”;使うように

454 名前:231 [2022/02/04(金) 17:27:11.67 ID:1UhKSGd+d.net]
>>439
実現出来るかわからないのですが、理想通りに事が進むと、主にマップデータで結構容量食いそうで心配なんです。
そういう心配事は取っ払ってから制作したいもので。転ばぬ先の杖って言うんですかね。

455 名前:231 [2022/02/04(金) 17:27:20.65 ID:1UhKSGd+d.net]
みなさま

456 名前:231 [2022/02/04(金) 17:28:39.30 ID:1UhKSGd+d.net]
失礼しました。

予想以上に早く、また親切にアドバイスして頂けて嬉しいです。

本当にありがとうございました。

457 名前:231 [2022/02/04(金) 17:36:54.98 ID:1UhKSGd+d.net]
今回躓いたところは完璧に解決しました。

皆様、本当にありがとうございます。

458 名前:デフォルトの名無しさん mailto:sage [2022/02/04(金) 17:37:47.88 ID:fRxFESBHM.net]
>>443
ライブラリ使えって散々言われてたじゃん
使いたくないとか言ってたけど今ライブラリ使ってないプログラムなんてほとんどないぞ

459 名前:デフォルトの名無しさん mailto:sage [2022/02/04(金) 23:04:44.52 ID:gGuISdVA0.net]
eval関数なしで
テキストボックスに入力されている
5*6*4+56/24のような計算をするにはどうすればいいでしょうか?

460 名前:デフォルトの名無しさん mailto:sage [2022/02/04(金) 23:19:30.94 ID:/i5Sn7pz0.net]
再帰下降構文解析でググれ



461 名前:デフォルトの名無しさん mailto:sage [2022/02/05(土) 00:01:28.09 ID:sD6dJYyZd.net]
eval is evil

462 名前:デフォルトの名無しさん mailto:sage [2022/02/05(土) 15:51:37.55 ID:7rGxUilP0.net]
>>449
ありがとうございます

ググって見たんですが、かなり難しいですね、知らないコードも多くて挫折しそうです

463 名前:デフォルトの名無しさん mailto:sage [2022/02/06(日) 14:13:43.12 ID:jyf5OL160.net]
>>448
https://qiita.com/mori-bito/items/8cd64dab6527a6e93355

464 名前:デフォルトの名無しさん mailto:sage [2022/02/07(月) 07:37:13.78 ID:90TSH41+H.net]
グッドモーニングショーで未だにファックス使ってコロナ集計してやんのwって言ってましたけど
特定サイトで入力した個人情報や体調情報などをQRコード化して読み取りパスを設定し
その情報を診療所などで携帯で読み込むと、自動的に院内システムと保健所など供給機関にJSONで送情されるようなの
あっという間にできそうなんだけど
セキュリティ面感がなければ2時間くらいでできそう

465 名前:デフォルトの名無しさん mailto:sage [2022/02/07(月) 08:42:42.57 ID:2FnRi9wN0.net]
>>453
院内システムは普通インターネットに疎通していない。
Drがインターネット使うのも全部、画面のみ転送のリモートデスクトップ。

466 名前:デフォルトの名無しさん mailto:sage [2022/02/07(月) 08:56:33.13 ID:4W18gTd9a.net]
単機能のシステムなら出来そうだけど
あれもこれもと仕様が膨れ上がって予算もウン十億になり
最終的に使い勝手の悪いガラクタになるのがオチ
https://wedge.ismedia.jp/articles/-/22205?layout=b

467 名前:デフォルトの名無しさん mailto:sage [2022/02/07(月) 12:51:27.00 ID:QUqmCtWk0.net]
規格を統一するのが難しい

医療機関は、各SIer でバラバラだろ

468 名前:デフォルトの名無しさん mailto:sage [2022/02/08(火) 06:39:24.19 ID:L7XKTsfqH.net]
先進諸国ってシステム規格は統一してるん?
なんで日本だけファックスよ?

469 名前:デフォルトの名無しさん mailto:sage [2022/02/10(木) 18:43:10.54 ID:yttBwpD00.net]
firefoxを使ってるんですが
マウスのソフトウェアの左クリックの連射機能を使うことがあって
その際にリンクやボタンを多重クリックを避けたいので
特定のエレメントにイベントリスナーでクリックするとstyle.display = 'none'にするようにしたんですが
これが実際に多重クリックになってるかどうかは
どのように判断すればよろしいのでしょうか
ブラウザの開発ツールなどで簡単にわかる方法ありますでしょうか?
それとももう一度同じエレメントにイベントリスナーでクリックした場合
カウンターにインクリメントさせてconsole.logがいいのでしょうか
(この方法も正確に取れているのかは私にはわかりません)

470 名前:デフォルトの名無しさん mailto:sage [2022/02/11(金) 20:34:20.02 ID:efWVJIaOH.net]
質問させてください

let ar={a:{a1:1}};
console.log(a1); // @ a1 is not defined

let {a:{a1}}=ar;
console.log(a1); // A 1

a1を出力したのですが、
@は未定義
Aは1が出力されています

どうして@とAの出力結果が異なるのでしょうか?



471 名前:デフォルトの名無しさん mailto:sage [2022/02/11(金) 20:42:04.99 ID:XbmfRAz/p.net]
>>459
オブジェクトの分割代入されるから。

472 名前:デフォルトの名無しさん mailto:sage [2022/02/12(土) 11:33:13.66 ID:RPVXSf4c0.net]
>>459
@のa1はグローバルレキシカルを参照したけど定義されていなかった
Aのa1はグローバルレキシカルを参照したらオブジェクトとして登録されていたのでvalueを返した

Aは{a:

473 名前:デフォルトの名無しさん mailto:sage [2022/02/12(土) 11:55:49.55 ID:GfpJrBC6M.net]
>>459
>>460が書いてるように3行目は分割代入なんだけど
特にオブジェクトデストラクチャリングと呼ばれる機能
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring

3行目でaとa1という変数が定義される
それ以前はa1という変数が定義されてないからundefined

とりあえずstrictモードを使いましょう

474 名前:デフォルトの名無しさん mailto:sage [2022/02/12(土) 23:28:01.59 ID:c6xzFFYJ0.net]
何で理解していないのにこんな書き方して分かりませんって質問しているのだろうかw
目的は?

475 名前:デフォルトの名無しさん mailto:sage [2022/02/13(日) 11:28:11.91 ID:Y75YevLW0.net]
>>462
3行目のaは変数じゃない

476 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 16:00:20.18 ID:WCBHI7+n0.net]
JavaScript の配列の要素をすべて削除する
https://qiita.com/niwasawa/items/89e86c0fd85ad4591e1c

arr.length = 0 じゃダメなの?

477 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 16:55:47.25 ID:6QhYGEARr.net]
arr = null
もしくは
arr = []
じゃダメなの?

478 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 20:35:06.19 ID:v0u4j5eD0.net]
>>465
いいと思うが、そう思ったなら本人に伝えればいいのに

あと、teratailスレのは誤投稿か?
https://mevius.5ch.net/test/read.cgi/tech/1630107050/304

479 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 20:41:42.47 ID:YCvdbcjXM.net]
自分は arr.length = 0 を使う

>>466
arr が let ならそれでもいいけど、const の場合は再代入出来ない

480 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 21:08:32.51 ID:6QhYGEARr.net]
>>468
constなのに長さ0にしちゃっていいの?



481 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 21:10:50.44 ID:v0u4j5eD0.net]
>>469
constが禁止するのは再代入
プロパティ変更は禁止しない

482 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 22:48:45.41 ID:6QhYGEARr.net]
>>470
そういう意味ではなく
constで定義している配列の長さを0にするってことは変更不可として定義してる配列なのになぜか0になってるというバグを生みやすいんじゃないか?

483 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 23:01:49.17 ID:z5poVj2c0.net]
>>471
「変更不可」と「再代入禁止」の区別を付けられるようになろう
君のその認識こそ、不具合を生み出す原因になるよ

484 名前:デフォルトの名無しさん [2022/02/15(火) 23:03:26.68 ID:JA2Mlap+0.net]
別に変更不可って意味でconst使わなくないか?

485 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 23:07:54.82 ID:6QhYGEARr.net]
やっぱjavascriptは欠陥言語だよな
定数とオブジェクトでconstの使い方変わるし

486 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 23:20:36.81 ID:NudRi/Oa0.net]
ワロスw

487 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 23:24:11.41 ID:oyYnjwf7d.net]


488 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 23:54:38.03 ID:DOsFVpUk0.net]


489 名前:デフォルトの名無しさん mailto:sage [2022/02/15(火) 23:54:58.40 ID:DOsFVpUk0.net]
いや

大爆

490 名前:デフォルトの名無しさん mailto:sage [2022/02/16(水) 00:38:29.63 ID:dZoJOzXw0.net]
欠陥言語か?cのconstと同じでは?



491 名前:デフォルトの名無しさん mailto:sage [2022/02/16(水) 12:21:54.58 ID:Nuw/c3FA0.net]
Ruby でも、入れ物と各要素は別。
shallow copy と同じ。動的言語は全てそう。
deep copy, deep freeze などは、誰かが作る必要がある

入れ物をフリーズしても、各要素は変更できる

ary = %w(a b).freeze

ary[ 0 ].upcase!
p ary #=> ["A", "b"]

だから、入れ物と各要素の両方を、フリーズする必要がある

ary_2 = %w(x y).map( &:freeze ).freeze
ary_2[ 0 ].upcase! #=> エラー。変更できない!

492 名前:デフォルトの名無しさん mailto:sage [2022/02/16(水) 22:54:05.43 ID:CjOKbN9ya.net]
スレ違いも守れない身勝手なクズ

493 名前:デフォルトの名無しさん [2022/02/17(木) 22:37:18.01 ID:TmsR/NWJ0.net]
<input type="button" value="aaaaaa" id="test1">
<br>
<input type="button" value="bbbbbb" id="test2">

<スクリプト>

var id_list = ["test1","test2"];

for(let n=1;n<=id_list.length;n++){
var elm = document.getElementById(id_list[n-1]);

elm.addEventListener(
"click",
function(e){
alert(elm.value);
}
);
}
</スクリプト>

aaaaaaボタンをクリックしてもbbbbbbと表示されてしまいます
どこが間違っているんですか?

494 名前:デフォルトの名無しさん mailto:sage [2022/02/17(木) 23:03:32.28 ID:Np/YPCaB0.net]
>>482
スコープまわりの認識とか?
var を使わずに const, let 使えば意図した通りに動くはず

495 名前:デフォルトの名無しさん mailto:sage [2022/02/17(木) 23:21:36.38 ID:eqAwClgCa.net]
alert (elm.value)をalert(e.currentTarget.value)に変えたればおけ

496 名前:デフォルトの名無しさん mailto:sage [2022/02/17(木) 23:28:41.09 ID:7BD8Ewk+0.net]
alert(this.value)
または
const elm = document.getElementById(id_list[n-1])

497 名前:デフォルトの名無しさん mailto:sage [2022/02/17(木) 23:31:46.94 ID:U/Ab4M74p.net]
これから新規でスクリプト書くなら、特別な理由がない限りvarは使わずletかconstだけ使うほうが、変なミス起こらなくていいと思う

498 名前:デフォルトの名無しさん mailto:sage [2022/02/18(金) 10:44:02.23 ID:tiifqQ9V0.net]
初心者は、jQuery を使えばよい

分かりにくい、this の意味も変えてある

499 名前:デフォルトの名無しさん mailto:sage [2022/02/18(金) 11:35:27.02 ID:tiifqQ9V0.net]
jQuery で、ボタンの外側・親にイベントを付けて、親で、子のイベントをキャッチできる

<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>

$( function ( ) {
// 外側・親にイベントを付けて、親で、子のイベントをキャッチする
$( '#btn-wrap' ).on( 'click', function ( event ) {
const value = $( event.target ).prop( 'value' )
console.log( value )
alert( value )
} );
} );

または、共通のclass を付けて、そのクラスだけのイベントをキャッチできる

// .BtnA のみ
$( '.BtnA' ).on( 'click', function ( event ) {
const value = $( this ).prop( 'value' )
console.log( value )
alert( value )
} );

500 名前:488 mailto:sage [2022/02/18(金) 12:16:47.94 ID:tiifqQ9V0.net]
>>488
に追加

セレクターをカンマで区切れば、A またはB でも出来る

// .BtnA or .BtnB のみ
$( '.BtnA, .BtnB' ).on( 'click', function ( event ) {
const value = $( this ).prop( 'value' )
console.log( value )
alert( value )
} );



501 名前:デフォルトの名無しさん [2022/02/18(金) 12:23:50.32 ID:aHWUA2kK0.net]
>>483-485
やってみますありがとー

502 名前:デフォルトの名無しさん mailto:sage [2022/02/18(金) 12:38:42.82 ID:YjRRevVzM.net]
イベントのバブリングを学ぶにはいい機会(丁度よい題材)だとは思うけど、「初心者に向けて」というエクスキューズでもって今時jQueryを勧める態度には悪意に近いモノを感じる

503 名前:デフォルトの名無しさん mailto:sage [2022/02/18(金) 21:37:34.77 ID:rjrdvPAWd.net]
今後廃れていくだけだもんな
新たに学習する必要はないわな

504 名前:マッチ棒 mailto:sage [2022/02/19(土) 09:29:33.08 ID:SYl7hXba0.net]
こんにちはこのたびはお世話になります
Javaスクリプトの質問ですが
いろいろ煮詰まっておりさしあたり
変数のスコープとオブジェクトのことがよくわからないでして
変数は関数内のみのローカルありますよね
でオブジェクトも
var obj=new obj()
といったインスタンツなら変数とおなじでローカルだったりグローバルだったりするんですかな
まずは以上よろしくお願いします

505 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 09:52:37.76 ID:ApZEftHir.net]
もうvarは使うな以上

506 名前:マッチ棒 mailto:sage [2022/02/19(土) 12:07:18.29 ID:SYl7hXba0.net]
バーよりレッツを使うんですね承知しました。
ブラウザ画面内に表示されたDOMオブジェクトは常にグローバルなんですかね
何もかもがわからん

507 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 13:34:02.57 ID:XlinVUCj0.net]
window.document.body, window.document.head など、
windowオブジェクトはグローバル

windowが無くても、document.head でも同じ

window.document.head == document.head
//=> true

例えば、Pjax で、ページを作っている場合、
ページ遷移したように見えても、window に追加したオブジェクトは初期化されない。
そのまま残っている

ページの一部分しか変更されていないから。
ページをreload していないから

508 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 16:01:34.02 ID:c/9+L37GM.net]
Pjax is なに

509 名前:デフォルトの名無しさん [2022/02/19(土) 18:28:21.70 ID:fGIkG9WE0.net]
>>491
むしろ悪意そのものでしょ

510 名前:マッチ棒 mailto:sage [2022/02/19(土) 18:38:03.12 ID:SYl7hXba0.net]
参考書に、Javaスクリプトにはクラスの概念はない、て書いてあるんですが
もしかして情報が古い?



511 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 18:39:00.10 ID:9/CFXaUW0.net]
はい

512 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 18:43:12.48 ID:QjUSXh+yM.net]
その本で勉強するのやめたら
varを使ってるのもそのせいだろうし

513 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 19:02:00.92 ID:LKw+j5240.net]
>>499
「クラスの概念がない」は正しい
JavaScriptはプロトタイプベースでclass文は糖衣構文だからな

そういう意味で書かれているのなら正しいといえるが、書籍を持ってない人が文脈を読みとれるはずもない
書籍の正しさを保証するのはその書籍を持っている人だけ

514 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 19:05:31.85 ID:s68IJWjka.net]
まあvar使ってる時点でES15以前だから読む価値なしですね

時間の無駄なんでその本を投げ捨てろ

515 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 19:06:29.96 ID:LKw+j5240.net]
>>499
あと、正しさを気にするなら、カナ交じり用語を使うのを止めた方がいい

・Javaスクリプト
・バー
・レッツ

516 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 21:14:26.70 ID:WPu6vt5B0.net]
マジレス…

517 名前:マッチ棒 mailto:sage [2022/02/19(土) 22:06:51.12 ID:SYl7hXba0.net]
こんばんはいつもお世話なります
今日でかなり学習は進みましたありがとうございます
さっそく質問ですが
クロッパーJSという便利ライブラリを見つけて解析しております
ところが
fileReaderでダイヤログを出してjpg画像なりを読んでまずは画面にプレビューしますが、
あっ間違えたのテイで再度fileReaderして別の画像を読み込むのですが
プレビュー画面が前のまま変わらないのです
以上よろしくお願いします

518 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 22:16:58.88 ID:LKw+j5240.net]
>>506
クロームdevtoolでソースcodeを解析してみればいいんじゃないかな
ネタ品質が低くてすまん

519 名前:マッチ棒 mailto:sage [2022/02/19(土) 23:27:47.87 ID:SYl7hXba0.net]
クロッパーJSの公式デモページ(エマワトソンの写真のやつ)でImport Image with Blob URLsというボタンは
何度でも写真を読み直しできるんですよ
インスタンスをデストロイがカギとは思うのですが

520 名前:デフォルトの名無しさん mailto:sage [2022/02/19(土) 23:34:29.04 ID:LKw+j5240.net]
>>508
デモページのソースをディフってみたら?



521 名前:マッチ棒 mailto:sage [2022/02/20(日) 01:15:27.52 ID:vRC3RkLD0.net]
クロッパーのことですけんど
なかなか敷居が高いですわ
インタネッツでもたくさんの人が2回目の読み込みをどうするか質問してますね

522 名前:マッチ棒 mailto:sage [2022/02/20(日) 03:05:26.93 ID:vRC3RkLD0.net]
ふう、なんとかやれましたよ
大儀であつた

523 名前:日記帳 mailto:sage [2022/02/20(日) 16:34:24.33 ID:vRC3RkLD0.net]
こんにちは今日も格闘しております
グーグルマップのリーフレットプラグインで、写真を地

524 名前:}に貼り付けています
複数貼った時の処理でまた壁につきあたりました
貼り付け関数で作るインスタンスが「imgovlay」なんですがその名前なら例えばimgovlay.options.cornersってやれば四つ角の座標がとれるですけんど
3枚はったあとからでは1枚目の座標が調べられんとです
これはどんな工夫したらよいのやら
以上よろしくお願いします
[]
[ここ壊れてます]

525 名前:デフォルトの名無しさん mailto:sage [2022/02/20(日) 17:20:03.63 ID:xfffAjua0.net]
日記ならそろそろ個人ブログでも作ってやったら
前にレスくれてる人は無視、相変わらず中途半端なカタカナ表記で聞きたいこともわかりにくいし書いてるコードも貼らない
一応エスパーしとくと、配列でインスタンス全部持っておくだけでは?

526 名前:日記帳 mailto:sage [2022/02/20(日) 17:28:08.35 ID:vRC3RkLD0.net]
ジェーンスタイルというアプリでこのスッドレを見ておるますが、タグのあるコードのコピペはできないんですよ

527 名前:デフォルトの名無しさん mailto:sage [2022/02/20(日) 17:31:05.62 ID:7vowCzxS0.net]
まず最初に>1-2を丁寧に見るといいよ、というか見て
ideone.com/
jsfiddle.net/

528 名前:日記帳 mailto:sage [2022/02/20(日) 17:50:37.16 ID:vRC3RkLD0.net]
はい承知しました
大儀であった

529 名前:デフォルトの名無しさん mailto:sage [2022/02/20(日) 18:25:51.02 ID:hgnRPi350.net]
ID:vRC3RkLD0はネタ質問と思ってる
全く面白くないが

530 名前:デフォルトの名無しさん mailto:sage [2022/02/21(月) 02:08:54.33 ID:44J1KF7y0.net]
Chrome拡張機能のjsファイルを修正しようとしているんだけど
(バグが出たのに作者放置で逃亡w)
JSファルダの中にいくつかjsファイルがあるけど、どれが最初に読み込まれるのですか?
また、グローバル変数はファイルを超えて使えますか?



531 名前:デフォルトの名無しさん mailto:sage [2022/02/21(月) 04:36:00.42 ID:YvtULrNjM.net]
>>518
まずは複数の実行コンテキストが存在することを把握するといい
chromiumのmanifest V2拡張機能はこの年末にサポート終了が予定されているので、その拡張機能がV2の場合はV3に作り直すことをオススメする

532 名前:デフォルトの名無しさん mailto:sage [2022/02/23(水) 08:42:30.40 ID:EjF360bu0.net]
質問です。.cgiのページにcanvasの
https://www.google.com/amp/s/torisky.com/javascript%25EF%25BC%259Acanvas%25E3%2581%25AB%25E9%259B%25AA%25E3%2581%25AE%25E7%25B5%2590%25E6%2599%25B6%25E3%2582%2592%25E9%2599%258D%25E3%2582%2589%25E3%2581%259B%25E3%2582%258B/%3famp=1を設定するにはどこのページにコード貼り付ければいいのでしょうか?全部.cgiの中で大丈夫ですか?

533 名前:デフォルトの名無しさん mailto:sage [2022/02/23(水) 10:35:21.54 ID:EjF360bu0.net]
HTML部分

<!DOCTYPE html>
<html>
<head>
って書いてるから無理なんかな……index.htmlじゃなくて.cgi直のURLに設定したいんだけど……

534 名前:デフォルトの名無しさん mailto:sage [2022/02/23(水) 11:28:37.94 ID:hXi3IxJ40.net]
>>521
こんにちは
cgiてのはperlのコトですかね
perlやPHPはHTMLをまるっと吐き出せるんですよ
だからjavascriptの仕掛けのあるHTMLをまず作ってみて、その内容をまるごとcgiでprint文などで出力します

535 名前:デフォルトの名無しさん mailto:sage [2022/02/25(金) 20:59:11.76 ID:zW9WpBq20.net]
てst

536 名前:デフォルトの名無しさん mailto:sage [2022/02/25(金) 20:59:52.69 ID:zW9WpBq20.net]
C#からJavaScriptをコールしたいのだが、このJavaScriptは.jsファイルに入れるのではなく、
htmlファイル内に書かないといけないのかな?

537 名前:デフォルトの名無しさん [2022/03/06(日) 20:50:59.24 ID:Ii2qDZic0.net]
setIntervalでtimer1が起動中のときはtimer2を起動させないようにするにはどうやればいいんですか?

538 名前:デフォルトの名無しさん mailto:sage [2022/03/06(日) 20:59:50.64 ID:EBMcer04r.net]
>>525
setIntervalのラップ関数を作って排他制御する

539 名前:デフォルトの名無しさん [2022/03/06(日) 21:36:36.90 ID:Ii2qDZic0.net]
>>526
なるほどー
それとsetIntervalも戻り値は0になることはないのですか?

540 名前:デフォルトの名無しさん mailto:sage [2022/03/06(日) 22:53:26.23 ID:SX3V4D250.net]
timer の状態を調べる、属性とかは無いの?



541 名前:デフォルトの名無しさん mailto:sage [2022/03/08(火) 21:51:27.12 ID:iL0h68YD0.net]
>>528
返り値はただのNumber値
プロパティは埋め込めない

542 名前:デフォルトの名無しさん mailto:sage [2022/03/08(火) 22:09:04.89 ID:iL0h68YD0.net]
>>527
戻り値は正の整数

543 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 08:20:41.91 ID:U0qNtUpH0.net]
数日前からjavascriptやらされてるんだけど質問
ajax関係の処理が例えばJqueryだと$.ajaxとかで終わった時の処理とか
エラーだったときの処理とかで分かれてるじゃない?
こういうAPIへのリクエストは全部まとめたいからsuccessにreturnするfunctionにしたら
使う側では瞬間帰ってきてundefinedになってしまう・・・
asyncなんだから当たり前だと言われたらそれまでなんだけど
そして毎回$.ajaxをそこら中で呼び出すことになる
これってそういう言語だからあきらめろしか無い感じ?
もちろんasyncをfalseにしろという話になりそうだけどブラウザがメインスレッドでやらんほうがいいとか警告出してくるし

544 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 08:38:01.00 ID:6ktbAzhaM.net]
よく分からんけどコードが間違ってるだけな気がする

545 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 09:30:24.96 ID:Cs4PttVsr.net]
>>531
awaitを使えば返り値でとれる
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await

別スレで似た質問があったが、同一人物ではないよな?
https://mevius.5ch.net/test/read.cgi/hp/1478002550/499
質問者の応対が酷かった

546 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 10:14:14.84 ID:U0qNtUpH0.net]
>>532
>>533
ごめん色々試してみて自己解決したかも
$ajaxをfunctionに包んでたけど単にreturnするのがsuccessに与えてる無名関数へのreturnになってるからな気がした
その質問者はしらんけどそんなすれあるのねスレチならあっちいくわ

function getdata() {
$.ajax({
type: 'post',
url: 'aaaa',
contentType: 'application/json',
dataType: 'json',
success: function(jsondata) {
return jsondata;
});
}
呼び出し元
var a = getdata();
これでaがnullなのはasyncとかだと思ってたけどfunctionの返し先が無名関数だからだと思う
こういう場合javascript的にはどうするのが定石なの?
getdataの引数に結果を入れる変数渡すの?

547 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 10:18:12.60 ID:Cs4PttVsr.net]
>>534
PromiseかDeferredを使う

548 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 10:24:10.95 ID:U0qNtUpH0.net]
>>535
やばいこれおもしろいね
また世界が広がったわありがとう!
javascript始めてみて非同期処理の世界で頭おかしくなりそう
threadやforkとは微妙に違うおもしろさがある

549 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 10:59:23.57 ID:de7whWW50.net]
今時fetch使おうよ

550 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 11:12:57.49 ID:HyI7NswaM.net]
ブラウザ資源を独占できない以上非同期なのは仕方がない
隅っこに入れたWEB広告が通信するから描画スレッド止めますなんて言い始めたらぶん殴るわ



551 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 11:18:48.71 ID:EGYBINjxM.net]
>>531
強制されてるなら別だけど、とりあえずjQueryはヤメた方がいい

552 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 18:13:15.28 ID:U0qNtUpH0.net]
>>539
素?のJavascriptの方が良いって事かな?
ブラウザー対応考えたら楽だと聞いたけど動作対象がモダン環境なら気にしなくても良いとか?

553 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 20:06:52.37 ID:2mwlDhCB0.net]
>>540
caniuseやMDNで互換性を調べ

554 名前:謔、
https://caniuse.com/fetch
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7
[]
[ここ壊れてます]

555 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 20:17:36.42 ID:BHHQkJq20.net]
IE6ぐらいはサポートしとけ
長期デフォルトブラウザの実績は覆せない

556 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 20:24:49.60 ID:2mwlDhCB0.net]
>>542
MSのサポート期限を調べよう
https://www.google.com/search?q=ie6+%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E7%B5%82%E4%BA%86

557 名前:デフォルトの名無しさん mailto:sage [2022/03/09(水) 20:30:03.00 ID:bXFYtOtEM.net]
>>540
IE対応するかしないかでほぼ決まる
お仕事ならお客さん次第

558 名前:デフォルトの名無しさん mailto:sage [2022/03/10(木) 04:35:08.01 ID:mUiYAuMC0.net]
>>540
そうなんだありがとう
caniuseで見たら一番下の緑4個の行だけがターゲットだからfetchで良いんかな
Javascript=JQueryってのが当たり前になってるから意識変えれそうで良かった

559 名前:デフォルトの名無しさん mailto:sage [2022/03/10(木) 16:41:12.37 ID:QC1L9XJq0.net]
>>545
対応ブラウザの問題がないならfetchで良いと思う
未対応ならPolyfillの選択肢もある

560 名前:デフォルトの名無しさん mailto:sage [2022/03/11(金) 21:03:13.79 ID:XGwo6uIj0.net]
JavaScriptに「型」を 〜Microsoftが新構文を提案へ
https://www.google.com/amp/s/forest.watch.impress.co.jp/docs/news/1394/209/amp.index.html

これは気になる
仕様化されるのかね…



561 名前:デフォルトの名無しさん mailto:sage [2022/03/12(土) 12:10:31.15 ID:Nwo5BHml0.net]
VScodeを使っていますが
この画面のカスタマイズはできますか
具体的には、ソース全体の縦長のビューがあってそのうち今見ているところが少し明るく表示されてますよね?その色が分かりにくい!
つかんでドラッグしたくても見つけにくい!
もっとハッキリした色にできますか

562 名前:デフォルトの名無しさん mailto:sage [2022/03/12(土) 12:37:17.47 ID:ilfolIlBM.net]
>>548
Visual Studio Code / VSCode Part11
https://mevius.5ch.net/test/read.cgi/tech/1632311131/

563 名前:デフォルトの名無しさん [2022/03/12(土) 18:02:33.03 ID:gZ07u/du0.net]
<html>
<head>
<meta charset="UTF-8">
<title>てすと</title>
</head>
<body>

<スクリプト>
for(let n=1;n<=300;n++){
let str = "<p>" + n + "</p>";
document.write(str);
}
alert(document.body.clientHeight);
alert(window.innerHeight);
</スクリプト>

</body>
</html>
ページ全体の高さを求めたいけどdocument.body.clientHeightで
695と表示されウィンドウの高さと同じになってしまいます。
どうすればちゃんとページの高さが求まりますか?

564 名前:デフォルトの名無しさん mailto:sage [2022/03/12(土) 21:32:42.84 ID:9cczQYeA0.net]
web 系の質問は、web制作管理板の方のスレで聞いてください!

この板のスレは以前、荒らしが出た時に、緊急避難用に立てたもので、
本来はweb制作管理板の方です

565 名前:デフォルトの名無しさん mailto:sage [2022/03/12(土) 21:36:30.85 ID:5XddXhdb0.net]
>>550
document.body.scrollHeight
document.documentElement.clientHeight

566 名前:デフォルトの名無しさん mailto:sage [2022/03/12(土) 22:58:01.42 ID:iDbN5UB10.net]
>>551はただのコピペなので気にしないように
Web制作板の現状は>>213,253

567 名前:551 mailto:sage [2022/03/12(土) 23:28:29.22 ID:9cczQYeA0.net]
ここはプログラム板

HTML, DOM, CSS/SASS や、ブラウザ・サイトのページの知識などは、
web制作管理板の方がよい。ウェブ制作

それ以上のフレームワークなどは、WEBプログラミング板。ウェブ開発

YouTube で有名な、雑食系エンジニア・KENTA の本でも、
ウェブ制作はフロントエンド・コーダー、
ウェブ開発はバックエンド・SE みたいに、異なる分野となっている

568 名前:デフォルトの名無しさん [2022/03/13(日) 00:51:37.82 ID:zkh0XZKF0.net]
>>552
ありがとう
<!DOCTYPE html>をつけたらdocument.body.clientHeightで取得できるようになりました。

569 名前:デフォルトの名無しさん [2022/03/13(日) 15:40:27.22 ID:jxSWNPd90.net]
オブジェクトの中で別のプロパティを参照するのはどうすればいいのでしょうか?
thisを使うとundefinedが返ってきて、thisを付けないとまだ定義されてないと
エラーが出ます。下記の例だとsideSpaceを参照したいのですが
うまくいきません。

const sp = {
width: 640,
sideSpace: 20,
space: this.sideSpace * 2,
inner: this.width - this.space,
}

570 名前:デフォルトの名無しさん mailto:sage [2022/03/13(日) 15:48:53.49 ID:MhWbhXb10.net]
>>556
getterかProxyを使えば良い



571 名前:デフォルトの名無しさん [2022/03/13(日) 17:18:48.53 ID:jxSWNPd90.net]
書き直してみたんですがやはりgetSpace()が未定義エラーが出てしまいます。

const sp = {
width: 640,
sideSpace: 20,

get getSpace() {
return this.sidespace * 2;
},

space: getSpace()
};

572 名前:デフォルトの名無しさん mailto:sage [2022/03/13(日) 17:25:30.15 ID:gKsfpaAq0.net]
>>558
const sp = {
width: 640,
sideSpace: 20,
get space() { return this.sideSpace * 2; },
get inner() { return this.width - this.space; },
};
console.log(sp.space); // 40
console.log(sp.inner); // 600

573 名前:デフォルトの名無しさん mailto:sage [2022/03/13(日) 17:26:15.54 ID:MhWbhXb10.net]
>>558
spaceとinnerをgetterにすれば良い

574 名前:デフォルトの名無しさん mailto:sage [2022/03/17(木) 19:32:02.34 ID:v8AF8giY0.net]
関数の引数にオブジェクトを使ってる時要素を固定する方法ってある
例えば

function main(obj){
obj.a;
obj.b;
}

みたいなときaとbだけの要素を受け入れたいんだけど

575 名前:デフォルトの名無しさん mailto:sage [2022/03/17(木) 19:36:12.35 ID:v8AF8giY0.net]
一応その要素があるかで判断して返すって方法はわかるどそれ以外でシンプルな感じで出来ないかなと思って

576 名前:デフォルトの名無しさん mailto:sage [2022/03/17(木) 19:38:09.18 ID:N96K+gAsM.net]
理解できないから適当に答えるが
objに必要なメンバーだけを抽出複製するメソッドを作ってみては?

577 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 14:30:35.47 ID:ZaiWDhWv.net]
aysncとawaitで頭がこんがらがってきました

function sleep() {
return new Promise(resolve => {
setTimeout(()=>resolve(),2000);
});
}

async function run(x) {
var a = await sleep();
var b = await sleep();
return x;
}
run(10).then(v=>console.log(v));
//これは4秒後に10と表示されます
//しかし、、

async function run2(x) {
var a = sleep();
var b = sleep();
var _a=await a;
var _b=await b;
return x;
}
run2(20).then(v=>console.log(v));
//これは2秒後に10と表示されます

//一体なぜ・・
var _a=await a; //ここで2秒待ち、
var _b=await b;//ここで2秒待ち、
だと思ったのですが・・・

578 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 14:37:22.28 ID:TKJ0fISW0.net]
>>564
遡ってのawaitは不可能

579 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 14:47:10.12 ID:zP5GoGcDM.net]
>>564
Promise内の処理がいつ開始されるのかを考えてみれば?

580 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 15:19:23.16 ID:ZaiWDhWv.net]
>>565,566
なるほど・・?

runの方では
var a=await sleep()のタイミングで返り値Promise内処理がされてresolve()されるまで(2秒)待ち、
次いでvar b=await sleep()の計4秒
これはしっくりくるのですが

一方、run2の方では
var a = sleep();
var b = sleep();
の段階ではPromise内処理は実行されませんがa,b共にPromise格納
var _a=await a;のタイミングでawait Promise
次いでvar _b=await b;await Promise
だと思っていましたが
>遡ってのawaitは不可
つまり一度変数に格納した場合はrun1のようにはならず、非同期で_a,_b時にPromise内処理がされる
ということでしょうか

run2のようなパターンはあえてそういう処理として使っていいのか、それとも
基本的に変数とかに置かずにawait Promiseした方がいいのか
まだちょっとよくわかりませんがスッキリしました
ありがとうございます



581 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 15:33:49.12 ID:DtRySdf10.net]
runのパターだと非同期ではあるが直列動作
run2はsleepとawaitの間に

582 名前:ハの処理を置いたり並列的な動作ができる
どっちがいいかはケースバイケース
[]
[ここ壊れてます]

583 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 15:41:31.50 ID:VcAQVTiir.net]
そもそもそんな使い方するな

584 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:13:33.28 ID:RNh01PsRM.net]
同期関数の使い方や処理タイミングはともかく、run2(20)としておきながらコンソールに10と出るのはおかしい

585 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:25:28.50 ID:ZaiWDhWv.net]
asyncとawaitのくだりでついでにもひとつ質問です
function sleep(x) {
return new Promise(resolve => {
setTimeout(()=>resolve(),x*1000);
});
}
async function run1(){
console.log("run1 start");
await sleep(5);
console.log("run1 end");
}

async function run2(){
console.log("run2 start");
await sleep(2);
console.log("run2 end");
}
function run(){
run1();
run2();
}
run();

これはrun1(),run2が非同期処理されて
狙った意図になりました
そこで今度はrun1()が処理しきったあとにrun2()を処理したい
つまり、run1 endと表示されてからrun2 startが表示されて
みたいな同期処理をしたいなと思いました
コールバックすれば簡単なのでしょうがせっかくなので
awaitとか活用した感じで書いてみたくrun1のとこにPromiseを返したりしてみましたが無限ループでブラウザが固まりました
何かいい案はありますでしょうかよろしくおねがいします

586 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:32:40.17 ID:ZaiWDhWv.net]
改めてやってみたらできました
おそらくブラウザがフリーズしたのはrunとrun1を間違えてたようです
成功したのはこれです↓
こんな感じで合っているのでしょうか

async function run(){
await new Promise(resolve=>{
resolve(run1())
});
run2();
}
run();

587 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:40:03.87 ID:DtRySdf10.net]
asyncな関数はPromiseを返すので
async function run(){
await run1();
run2();
}

588 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 16:46:15.37 ID:ZaiWDhWv.net]
>>573

なるほど
なんかわかってきた気がします・・!
ありがとうございます

589 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 17:13:19.06 ID:VcAQVTiir.net]
他人がみてわからん書き方すんなよ

590 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 17:41:45.59 ID:ZaiWDhWv.net]
やりたいことはざっくり>>571を例にすると
run1やrun2は非同期、同期どちらでも使えるようにしておいて
awaitするときは同期、しないときは非同期
という感じなのですが
他人からみてわかりにくいですかね・・?

もちろんrunの名前と中身によりますが
run1();
run2();
↑これは非同期だろうな
await run1();
console.log("途中");
await run2();
console.log("最後");
↑awaitついてるから同期だろうな
みたいに直感的にフローがわかるように思うのですが
もしかしてバグ生みそうな何かがあるのでしょうか



591 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 17:44:55.70 ID:ZaiWDhWv.net]
補足
run1,2自体は非同期ではない?ですね
run1,2内のawaitの部分が非同期なだけであって
そこら辺、中身みないとわかりにくいですかね

592 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 18:31:46.85 ID:TKJ0fISW0.net]
>>571-572
回りくどい処理しか見えなくて、その書き方をする意図の理解に苦しむ
run1とrun2をPromise化してPromise.all()ではダメなのか?

593 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 20:13:47.31 ID:ZypCz9jZa.net]
コールバック関数入れ子呼び出し地獄

Promise then数珠繋ぎ地獄

async await
と書き方が変わって来たのでPromise thenとasync awaitを混ぜて書くのはおかしい。
使いやすい方を使えば良いと思うけど非同期処理で取得したデータをいくつも使う場合はasync awaitで書いたほうがスッキリ書けるよ。
Promise thenみたいだとthen途中まで中途半端に行コピペするミスとか起きる

594 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 20:20:09.04 ID:ZaiWDhWv.net]
>>578
ありがとうございますやってみました
function sleep(x) {
setTimeout(()=>console.log("sleep",x),x*1000)
}
function msg(n){
console.log(n)
}
function run1(){
return new Promise(resolve=>{
msg("run1 start");
sleep(3); //この非同期処理を同期処理にしたい
msg("run1 end");
resolve("run1 success");
})
}
await Promise.all([run1()]).then(result=>{console.log(result)});

がsleep(3)のとこが非同期になってしまいます・・

595 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 21:34:54.50 ID:ZypCz9jZa.net]
awaitはasync関数内でしか使えないよ

596 名前:デフォルトの名無しさん mailto:sage [2022/03/19(土) 22:45:17.97 ID:ZaiWDhWv.net]
>>581
たしかにそうでした・・
とりあえずすべてpromise化してnew Promise内にPromiseとかやってみましたが
うまくいかず・・
>>579
そういう系譜があったのですね

とりあえず現状はうまくいっているasync awaitでやってみます
ありがとうございました

597 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 07:50:06.50 ID:8bwKUIJnr.net]
もうめちゃくちゃだなw
そもそも何をしたいのかすらわからなくなった

598 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 09:48:36.58 ID:98wGNFjK0.net]
横からすみません!
async や await は関数の頭だけに付けれる認識でしょうか
単なるメソッドの前にawaitをつけれないんですね
たとえばアラート1と2がテレコにしたくないからといって下記のような書き方は不可ということでよいでしょうか


async hoge(){
await alert("1");
alert("2");
}

599 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 11:26:58.56 ID:4y0+fo7i0.net]
>>584
async function hoge() {
await alert('1');
alert('2');
}

600 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 11:44:24.57 ID:ZsjWra1g0.net]
newmofu.doorblog.jp
このサイトなんですが、RSSはjavascriptで取得しているんでしょうか?



601 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 13:15:28.93 ID:JFBEbRfA0.net]
>>584
classメソッドはそんな感じでok
でもそのalertがwindow.alertなのだとしたらawaitは無意味

602 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 15:09:47.81 ID:98wGNFjK0.net]
>>587
えっ?つまりメソッドにもawaitはつけれるんですかね
いちいちfunctionを小分けにする必要のないこともあるんですね

603 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 17:25:10.29 ID:SwEbiGVb.net]
クラス内で実行中のメソッドを多重実行したくないとき
みなさんはどうしていますか

class hoge{
constructor(){
this.isStreaming=false;
}
stream(){
if(this.isStreaming){
console.log("実行中");
return
}else{
this.isStreaming=true;
console.log("実行");
}
const self=this;
//何か実行中...
setTimeout(()=>{self.isStreaming=false;console.log("終了")},3*1000);
}
}
var h=new hoge();
h.stream();
h.stream();
setTimeout(h.stream,5*1000);

これだと仮にstream1,2,3..と増えていったらisStreaming1,2,3...と増えていくと思うのですが
そういうのを回避するうまいやり方とかあるのでしょうか

604 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 17:38:27.19 ID:SwEbiGVb.net]
補足 クラス内というかインスタンスで、でした

605 名前:sage [2022/03/20(日) 17:49:26.68 ID:OSPfEuDk0.net]
>>589
例えば、クロージャを作って、メソッドのステータスをクロージャ内に格納させるとか。

class hoge {
stream(){
let isStreaming = false;
return function() {
if(isStreaming){
console.log("実行中")
}else{
isStreaming = true;
console.log("実行")
setTimeout(() => { isStreaming = false; console.log("終了") }, 3 * 1000);
}
}
}
}

let h = new hoge();
stream = h.stream();
setInterval(stream ,1000);

606 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 17:56:19.09 ID:SwEbiGVb.net]
>>591
おぉ、なるほど!!
参考になります

607 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 18:00:23.47 ID:2Ue7hGfR0.net]
>>589
WeakMapでプライベートプロパティを作る
https://www.google.com/search?q=weakmap+%E3%83%97%E3%83%A9%E3%82%A4%E3%83%99%E3%83%BC%E3%83%88

608 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 18:25:56.74 ID:SwEbiGVb.net]
>>593
WeakMapオブジェクトなんてものがあるのですね
これだと大量に扱う場合は便利かもしれません
ありがとうございます

609 名前:591 mailto:sage [2022/03/20(日) 19:15:48.99 ID:OSPfEuDk0.net]
>>592
functionを引数で受け取れるようにするといいかもしれない。

class hoge {
makeStream(f){
let isStreaming = false;
return function() {
if(isStreaming){
console.log("実行中");
}else{
isStreaming = true;
console.log("実行");
f();
setTimeout(() => { isStreaming = false; console.log("終了") }, 3 * 1000);
}
}
}
}

let h = new hoge();
stream1 = h.makeStream(()=>{console.log("なんかの処理1")});
stream2 = h.makeStream(()=>{console.log("なんかの処理2")});

610 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 19:54:06.60 ID:SwEbiGVb.net]
>>595
なるほど
これなら分けて管理しつつ多重実行禁止メソッドを量産できそうですね
ありがとうございます!



611 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 22:45:44.89 ID:aLyHOWc60.net]
>>586
サイト分析なら、ここで

https://builtwith.com/

612 名前:デフォルトの名無しさん mailto:sage [2022/03/20(日) 23:28:24.98 ID:1AhGKhB60.net]
今月くらいからyoutube動画埋め込んだページのdev toolコンソール見るとservice workerが大量のエラー吐くようになったんだが
jsでクライアント端末側でどうにかできる?

613 名前:デフォルトの名無しさん mailto:sage [2022/03/21(月) 01:01:24.11 ID:avj/Dp0k0.net]
何かのサービスが終わったとか?
やり方が変更されたとか?

614 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 20:37:07.86 ID:0pE5eZuk.net]
var ary=["a","b","c"];
for(let i in ary){
if(i===0){ continue }
console.log(i,typeof i,"int違う・・")
}

for inの罠にハマってしまいました
こういうiも取りたいときってforEachだったり
配列のlengthとってforで回したりの方がいいんですかね?

615 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 20:55:28.38 ID:IVltSCqHM.net]
>>600
>>iも取りたいとき

何が言いたいのかさっぱりわからん
コードの目的(期待するログ表示)を明示しよう

616 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 20:55:55.62 ID:y95b8UUh0.net]
ixを用意してまわしてもいいし、オブジェクトの
entries 使ってfor ofでまわしてもいい。

正直超些細なことでどっちでもいい。

617 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 21:37:28.49 ID:puY9Jz2N0.net]
>>600
インデックス値のプロパティはString型
int型というものはない

最も、i=1のfor文で十分に読めるがね…

618 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 21:49:07.67 ID:0pE5eZuk.net]
>>601
わかりませんかね?
そんな難しいことは書いてないと思うのですが・・

>>602,603
なるほど、array回すときの何か慣習があるのかなと思い質問しました
600例のary程度ならfor(let i in ary){
i=i-0;であえて数値に変換するか、if(i==0)にするか
とかしようと思っていましたが素直に
for(i=1;i<ary.length;i++)的な書き方で行こうかなと思います
ありがとうございました

619 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 22:04:46.78 ID:puY9Jz2N0.net]
>>604
疎な配列を考慮する場合、for文とhasOwnPropertyを併用する必要がある

配列でfor-in文を使うと他で拡張されたプロパティも拾うので、理由がなければお勧めしない
keysやentriesからsliceしてfor-ofでも良い
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/keys

620 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 22:09:38.34 ID:puY9Jz2N0.net]
keysやentriesからfor文の方がスマートか



621 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 22:40:29.47 ID:0pE5eZuk.net]
>>605-606
なるほどいろんな書き方がありますね
配列の値回すだけの目的にfor-in文だとトラブルとかパッとみ可読性落ちる気もするので辞めといたほうが良さそうですね
ありがとうございました

622 名前:デフォルトの名無しさん mailto:sage [2022/03/24(木) 22:56:29.50 ID:I4v/4Eugr.net]
for-inは非推奨

623 名前:デフォルトの名無しさん mailto:sage [2022/03/25(金) 00:35:38.75 ID:St3aQ5GC0.net]
>>608
for-inは仕様上、非推奨じゃない
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in

prototype拡張したコードを考慮してないコードでバグを誘発させるだけ
https://www.google.com/search?q=for-in+prototype%E6%B1%9A%E6%9F%93
理解して使う分には問題ないが、コーディング規約で縛られていれば使えないし、チーム内に初心者が一人いるだけでバグを作り込むリスクがある

Object.keys() 等の他のプロパティ列挙機能で要件を満たせるなら、for-inを使う理由はない
要件を見直してみれば、ほとんどの場合にfor-inを使う必要がないことが分かるはずだ

624 名前:デフォルトの名無しさん mailto:sage [2022/03/25(金) 02:03:31.28 ID:Yg2YvIk20.net]
if (++score == 10)
if (score == 10)ならばわかるのですが、
ここに++が加わることでどのような意味になりますか?

625 名前:デフォルトの名無しさん mailto:sage [2022/03/25(金) 02:20:07.52 ID:IB939EjQM.net]
>>610
評価前にscoreの値が+1される

インクリメント (++) - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Increment

626 名前:デフォルトの名無しさん mailto:sage [2022/03/25(金) 03:35:53.60 ID:Yg2YvIk20.net]
>>611
ありがとうございます!

627 名前:デフォルトの名無しさん mailto:sage [2022/03/25(金) 22:15:14.80 ID:mxqYNiam0.net]
async/awaitのことですが

await hoge();

としたときに、hogeが実行される前に何かを待つのか、
それともhogeが実行されその完了を待つのか、
どちらでしょうか

それと、promiseを返す関数かそうでないかはどうやって見分けますか

628 名前:デフォルトの名無しさん mailto:sage [2022/03/26(土) 00:51:31.77 ID:m2MNxml2M.net]
async関数は記述は普通の関数だけどPromiseを返す関数。awaitは完了を待つ

629 名前:デフォルトの名無しさん mailto:sage [2022/03/26(土) 08:38:54.66 ID:gURe/O9Rr.net]
awaitは「あ、待って」って覚えるとよい

630 名前:デフォルトの名無しさん mailto:sage [2022/03/26(土) 09:09:03.44 ID:KPWAIzDZa.net]
完了を待つには待つけど
何を以て完了とするかはそれぞれの関数が決めること
見分ける方法は無いしそもそも得体の知れない関数を使っちゃ駄目



631 名前:デフォルトの名無しさん mailto:sage [2022/03/26(土) 10:06:13.85 ID:PyuIzITI0.net]
こんにちは>>613です
蒸し返しですみませんが
awaitをつける行じたいがapiなどの重い処理なんですかね
それともawaitはthenのような意味で処理を待つ行なんですかね
つまりawaitは待つ側なのか、待たされる側なのか、という質問です

632 名前:デフォルトの名無しさん mailto:sage [2022/03/26(土) 10:17:45.12 ID:m2MNxml2M.net]
awaitは非同期処理の完了を待つ。非同期処理を順次実行する時に使う。
処理待ちでブラウザが無反応にならないようにする目的ならsetTimeoutとかsetIntervalとかWeb Workers使うんじゃないかな

633 名前:613 mailto:sage [2022/03/26(土) 11:57:59.24 ID:PyuIzITI0.net]
>>617で書いた、「待つ側」と「待たされる側」てのは同じ意味でしたねw
待つ側なのか、待たせる側なのか、という質問です

634 名前:デフォルトの名無しさん mailto:sage [2022/03/27(日) 05:19:16.05 ID:FEuFUFUF0.net]
>>581
Top-level Await
従来、JavaScriptのawaitはasync function内でしか使えなかったが、
今後はasync functionの外、top levelでもawaitが使えるようになる
ES2022より

635 名前:デフォルトの名無しさん mailto:sage [2022/03/27(日) 15:29:56.04 ID:M7t4c+zh.net]
クロージャーであるsetter,getterを持つクラスを作ったのですが
クロージャーをセットするときにパラメーターを渡したいとき、どうすればいいのでしょうか

class Hoge{
constructor(){
this._f=null;
}
set f(f){
this._f=f();
}
get f(){
return this._f;
}
}
const h = new Hoge(10,20);
h.f = function(){
let r=0;
return {
sum:(a,b)=>(r+=a+b),
r:()=>console.log(r)
}
}
h.f.sum(1,2);
h.f.sum(3,4);
h.f.r(); // 10

↑はこれで良いのですが、例えば
h.f = function(m){
let r=0;
return {
sum:(a,b)=>(r+=(a+b)*m),
r:()=>console.log(r)
}
}
みたいにパラメーターmを渡したいです
しかし、setterには引数1つしか渡せないので詰みました。
かと言って
f(f,prms={}){ this._f=f(prms) }
get f(){}
はできません
setter,getterを使わずに、一時保存的な変数を増やしてゴリゴリ書くしかないでしょうか
つづく

636 名前:デフォルトの名無しさん mailto:sage [2022/03/27(日) 15:32:25.21 ID:M7t4c+zh.net]
つづき>>621
苦肉の策として、h.fに配列を渡すことにしました。
が、、コレジャナイ感が・・
しかし正解がわからないのでこれで良いのかどうかすらわかりません。
何か別にスマートな書き方はあるのでしょうか

class Hoge{
constructor(){
this._f=null;
}
set f(ary){
this._f=ary[0](ary[1]);
}
get f(){
return this._f;
}
}

const h = new Hoge(10,20);

h.f = [function({m=1}){
let r=0;
return {
sum:(a,b)=>(r+=a+b),
r:(msg)=>console.log(msg,r*m)
}
},{m:0.5}];

h.f.sum(1,2);
h.f.sum(3,4);
h.f.r("(1+2+3+4)*0.5 = ");

637 名前:デフォルトの名無しさん mailto:sage [2022/03/27(日) 18:02:56.87 ID:tt2ZDA7G0.net]
>>622
setterに関数を渡すのではなく、クロージャを渡すのではだめ?

class Hoge{
constructor(){this._f=null}
set f(f) {this._f = f}
get f() { return this._f}
}

const h = new Hoge()

h.f = (m => {
let r=0;
return {sum: (a,b) => r+=(a+b)*m, r:() => console.log(r)}
})(3);

h.f.sum(1,2);
h.f.sum(3,4);
h.f.r()

638 名前:デフォルトの名無しさん mailto:sage [2022/03/27(日) 18:23:49.57 ID:M7t4c+zh.net]
>>623
いえ全然アリです
個人的に
function hogeclosure1({m,n}){return ()=>}
function hogeclosure2({m,n}){return ()=>}
var prms1={m:1,n:2};
var prms2={m:11,n:22};

h.f(hogeclosure1,prms2);
な書き方がしたいなと思ったのですが(prmsの精査や加工をクラス側で処理できるので)、

h.f=hogeclosure1(prms);
検討してみます
ありがとうございました

639 名前:デフォルトの名無しさん mailto:sage [2022/03/27(日) 18:42:46.38 ID:V2wsdbVLM.net]
>>621
関数を返す関数を使う
部分適用でググって

640 名前:デフォルトの名無しさん mailto:sage [2022/03/27(日) 19:22:43.75 ID:tt2ZDA7G0.net]
>>622
setterに関数を渡すのではなく、クロージャを渡すのではだめ?

class Hoge{
constructor(){this._f=null}
set f(f) {this._f = f}
get f() { return this._f}
}

const h = new Hoge()

h.f = (m => {
let r=0;
return {sum: (a,b) => r+=(a+b)*m, r:() => console.log(r)}
})(3);

h.f.sum(1,2);
h.f.sum(3,4);
h.f.r()



641 名前:デフォルトの名無しさん mailto:sage [2022/03/29(火) 22:07:09.61 ID:wVAC/++3.net]
頭がこんがらがってくる事象に遭遇しました

var arr=[[1,2,3],[4,5,6],[7,8,9]];
function hoge(){
function h(arr){
var res=[];
for(var i=0;i<arr.length;i++){
var _d=arr[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
return (arr)=>h(arr)
}
var ho=hoge();
console.log(ho(arr.concat()));//1回目
console.log(ho(arr.concat()));//2回目

1回目、2回目
共に.concat()でディープコピーしたデータを渡したはずなのですが
arr[i][1]=arr[i][1]*2のとこでなぜか前回のデータが反映されてます

クロージャーだから・・?という何となくしかわからないのですが
そうならないためにarr.concat()したのにな???という感じです。
for文でvar _d=arr[1].concat()としてやるともちろん1回目も2回目も同じ結果になります。
ただ、arr[1].concat()しなかった場合も、そもそも渡したarrがarr.concat()なので
function hに渡され処理した結果も独立のデータになりそうな気がするのですが、なぜなんでしょうか??

642 名前:デフォルトの名無しさん mailto:sage [2022/03/29(火) 22:19:49.44 ID:wVAC/++3.net]
補足です
改めてクロージャー無しでやってみたら

function hoge(){
var res=[];
for(var i=0;i<arr.length;i++){
var _d=arr[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
var arr=[[1,2,3],[4,5,6],[7,8,9]];
console.log(hoge(arr.concat()));//1回目
console.log(hoge(arr.concat()));//2回目
console.log(arr);

これもまた変更されてました・・

643 名前:デフォルトの名無しさん mailto:sage [2022/03/29(火) 22:22:32.33 ID:wVAC/++3.net]
連投すみません
>>628はhoge()で引数とってないのでおかしいですね
こうでした↓

function hoge(data){
var res=[];
for(var i=0;i<data.length;i++){
var _d=data[i];
_d[1]=_d[1]*2;
res.push(_d);
}
return res
}
var arr=[[1,2,3],[4,5,6],[7,8,9]];
console.log(hoge(arr.concat()));//1回目
console.log(hoge(arr.concat()));//2回目
console.log(arr);

644 名前:デフォルトの名無しさん mailto:sage [2022/03/29(火) 22:37:48.87 ID:wVAC/++3.net]
自己解決しました
.concat()ディープコピーかと思ったらシャローコピーでした・・

hoge(JSON.parse(JSON.stringify(arr)));
で行けました・・

645 名前:デフォルトの名無しさん mailto:sage [2022/03/31(木) 02:46:41.93 ID:MFrlKIWw0.net]
すみません。
初心者なんですが、@などのデコレータ?の意味が調べてもよくわからないんですけど教えてくれませんか?

646 名前:デフォルトの名無しさん mailto:sage [2022/03/31(木) 14:54:28.12 ID:K6LuIPS40.net]
javascriptって、キャッチされなかった例外が最終的に集約されるハンドラってある?
.NETのDispatcherUnhandledExceptionみたいなやつ
ググってみたけど、window.unhandledrejectionくらいしか見つからんかった
これって名前的にpromiseのrejectを実装してないときにしか使われんよね?

647 名前:デフォルトの名無しさん mailto:sage [2022/03/31(木) 16:49:24.25 ID:QdDep3ZF0.net]
onerror

648 名前:デフォルトの名無しさん mailto:sage [2022/03/31(木) 23:41:59.53 ID:K6LuIPS40.net]
dクス
調べてみるとonerrorだとpromiseのrejectはハンドリングしてくれないっぽいね
onerrorとunhandledreject両方を使うのがいいんかなぁ
awaitでrejectしたときってどっちにハンドリングされるんだろ?明日実際に試してみるかー

649 名前:デフォルトの名無しさん mailto:sage [2022/04/01(金) 15:19:09.19 ID:PU7Zi1lY0.net]
非同期は文脈が異なる・異世界だから、通信できない

通信不能な物に対しては、timeout ぐらいしか、やりようがない

650 名前:デフォルトの名無しさん [2022/04/02(土) 18:01:02.86 ID:3Re6Hfed0.net]
スクロールバーがスクロール量500を超えたら画像を徐々に濃くして表示、500より少なかったら画像を徐々に薄くして非表示にするのってどうやるんですか?
スクロール方向で場合分けしてスクロールバーが500を



651 名前:またいだかどうか判定して
setIntervalを使ってopacityで濃くしたり薄くしたりするしかないんですか?
[]
[ここ壊れてます]

652 名前:デフォルトの名無しさん mailto:sage [2022/04/02(土) 18:43:50.54 ID:YPKLSNfQ0.net]
スクロール位置で判定すれば?

scrollTop だったかな?

653 名前:デフォルトの名無しさん mailto:sage [2022/04/02(土) 21:11:08.49 ID:YAja5EWm0.net]
>>636
https://developer.mozilla.org/ja/docs/Web/API/Document/scroll_event

654 名前:デフォルトの名無しさん mailto:sage [2022/04/03(日) 15:30:48.81 ID:oIYvxJGU0.net]
奇抜なアイデアでもググると出てきてしまう昨今ですが
あっと驚く理不尽な処理はありませんか
棺桶あけたら自分が中にいましたみたいな

655 名前:デフォルトの名無しさん mailto:sage [2022/04/03(日) 22:20:40.81 ID:apGbIMaW0.net]
>>639
挙動は仕様書に書かれているため、仕様を理解すればするほど驚く機会は少なくなる
普段から勉強をせず、プログラミング系サイトを巡回すれば、「あっと驚く理不尽な処理」に出会える可能性を高められるだろう
(まともな技術者なら自らの無知を恥じるべきだろうが)

656 名前:デフォルトの名無しさん [2022/04/09(土) 18:27:31.25 ID:d8bX3KTm0.net]
ページをスムーズに移動するときscrollToを使いますが
これみたいにelementをスムーズに移動させる関数はありますか?

657 名前:デフォルトの名無しさん mailto:sage [2022/04/09(土) 19:11:11.85 ID:NsLa5u+dr.net]
jsでスムーズは無理なのでcssでやってくれ

658 名前:デフォルトの名無しさん [2022/04/09(土) 19:46:32.17 ID:mW5Jyv0xM.net]
GSAPとか使えば楽に動かせる

659 名前:デフォルトの名無しさん [2022/04/13(水) 09:13:53.65 ID:Qi5auZGwM.net]
<div id="test">
<a href="aaa.html"></a>
<a href="bbb.html"></a>
</div>
このdivの中にあるhrefを全て取得するには
どうやったらいいんですか?
aにidやclassはつけないものとします。

660 名前:デフォルトの名無しさん mailto:sage [2022/04/13(水) 09:24:08.70 ID:j7E4iT5n0.net]
>>644
https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator
https://developer.mozilla.org/ja/docs/Web/CSS/Type_selectors



661 名前:デフォルトの名無しさん (ワッチョイ b602-9+GH [119.106.222.232]) mailto:sage [2022/04/14(木) 06:34:43 ID:hMI8sVN30.net]
document.querySelectorAll

662 名前:デフォルトの名無しさん (ワッチョイ b72f-jtTv [218.220.251.107]) [2022/04/14(木) 12:38:00 ID:VhBZ5PIH0.net]
document.querySelectorはいま流行りなんですか?
document.getElementByIdしか知らなかったけど。

663 名前:デフォルトの名無しさん mailto:sage [2022/04/14(木) 13:03:41.45 ID:e+FW9n+1r.net]
流行りっていうかもうかなり昔からあるけどな

664 名前:デフォルトの名無しさん mailto:sage [2022/04/14(木) 13:53:57.95 ID:AzvcwCnH0.net]
流行りで決めるスタンスは分からんが、ノード検索系は既に成熟してる感ある
xpathはなぜか最新仕様が実装されないけど

665 名前:デフォルトの名無しさん mailto:sage [2022/04/15(金) 10:18:55.82 ID:sZWwv8hr0.net]
javascriptって初心者向けと言われているけど、難しいよね?

666 名前:デフォルトの名無しさん mailto:sage [2022/04/15(金) 11:05:45.21 ID:DZhoNVLD0.net]
初心者向けと言われてるのを知らない

667 名前:デフォルトの名無しさん mailto:sage [2022/04/15(金) 12:40:06.63 ID:28sm60Uu0.net]
>>650
環境構築の敷居が低いだけ

668 名前:デフォルトの名無しさん mailto:sage [2022/04/17(日) 12:45:46.17 ID:lD7JO0wI0.net]
javascriptの勉強中です。

Wordでコード試作してEdgeのコンソールにコピペしたら、クォーテーションやダブルクォーテーションのある行で必ずエラーになります。
どうもwordで書いたことが問題らしいです。
同じコードを色んなファイル形式で書いてからコンソールで検証した結果、

・最初からコンソールに直接書くと、正常に作動
・テキストドキュメントに書いてコンソールにコピペすると、正常に作動
・最初からコンソールに書き込んだものをwordにコピペして、フォントを適当に変えた後、コンソールにコピペすると正常に作動
・wordに書いたコードをコンソールにコピペするとクオーテーションのある行でエラーになる。
・wordで書いたコード(そのままコンソールにコピペするとエラー)の全てのクォーテーションに、コンソールに書いたクォーテーションを上書きコピペ(元の書式を保持)すると、コンソール上で正常に作動するようになる

という検証結果になりました。
試作コードをwordじゃなくテキストドキュメントで作るようにしてからは、今のところ問題は起きていないです。

で、質問なんですが、
どうもword形式で書いたクォーテーションやダブルクォーテーションは、内部的に問題がありそうなのですが、理由を詳しく知っている方はいますか?
あと、編集や保存が楽なテキスト形式でコードを試作したいとき、みなさんは何を使ってますか?

669 名前:デフォルトの名無しさん mailto:sage [2022/04/17(日) 12:49:32.71 ID:U+v/j1Oq0.net]
文字コードやないんか?

670 名前:デフォルトの名無しさん mailto:sage [2022/04/17(日) 12:51:06.49 ID:U+v/j1Oq0.net]
エディタはvscodeつかったらいいよ



671 名前:デフォルトの名無しさん mailto:sage [2022/04/17(日) 12:55:31.73 ID:TTO+H6Xx0.net]
ブラウザにいれてるviolentmonkeyのエディタ使ってる

672 名前:デフォルトの名無しさん mailto:sage [2022/04/17(日) 13:05:51.20 ID:k8OFv/xgr.net]
wordうんたらはネタだろ

673 名前:デフォルトの名無しさん mailto:sage [2022/04/17(日) 17:04:07.98 ID:lD7JO0wI0.net]
>>654
それだ…!!
「"」で確認してみたけど、まったく同じキーで入力したのに
Wordで入力…レフトダブルクォーテーション、文字コードは201C、文字は「“」
コンソールで入力…ダブルクォーテーション、文字コードは0022、文字は「"」
全く同じ入力方法、フォントも同じ。見た目もそっくりだけど、200%に拡大したら確かに違う文字ですた。

>>655>>656
ありがとん。
vsコード持ってるから今度からそっちにしてみます。

>>657
それがネタじゃないんだな(泣)。
トライアンドエラーでコード構築の練習をしたかったので、楽なソフトでコードを書きたかったんよ。
wordならダブルクリックで立ち上がるし、字も見やすい大きさに拡大できるし、採用しなかったコードも適当にストックできて、楽そうだなぁ、と…。
まさか文字コード違いで問題が起きるとは想像もしなかったにゃ。

674 名前:デフォルトの名無しさん (ワッチョイ d98b-Ckae [210.228.102.1]) mailto:sage [2022/04/17(日) 17:51:02 ID:pn/ClTGJ0.net]
>>658
それWordのオートコレクト機能
オフにできたと思う
でも普通にvscode使う方がいいよ

675 名前:デフォルトの名無しさん mailto:sage [2022/04/17(日) 18:12:43.66 ID:lD7JO0wI0.net]
>>659
オートコレクト機能、そんなのもあるのか!!
了解しますた。
まぁvscodeの方が無難よね。間違いないです。

676 名前:デフォルトの名無しさん [2022/04/17(日) 18:15:32.20 ID:xdoWfkC30.net]
何気にwordでコード書いてる人みたのネット上ですら初めてかもしれん

677 名前:デフォルトの名無しさん mailto:sage [2022/04/19(火) 02:49:01.33 ID:tGbJiwG70.net]
>>644
jQuery で、id="test" 直下・子(a, c)と子孫(b)を取得した

<div id="test">
<a href="a.html"></a>
<div><a href="b.html"></a></div>
<a href="c.html"></a>
</div>

$( function ( ) {
function get_a( selector ) {
return $( selector ).map( function( ) { return $( this ).attr( 'href' ); } );
}

const children = get_a( '#test > a' )
const descendants = get_a( '#test a' )

console.log( children, descendants )
} );

出力
['a.html', 'c.html'] // 直下・子のみ
['a.html', 'b.html', 'c.html'] // 子孫

678 名前:デフォルトの名無しさん mailto:sage [2022/04/19(火) 10:51:06.57 ID:9fIYs0Yt0.net]
proxyってどうやってfor inやforEachすればいいですか

679 名前:デフォルトの名無しさん mailto:sage [2022/04/20(水) 13:31:39.60 .net]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

↑でbindのメリットを考えてみたのですが
const module2 = {x:333}
const hogeGetX = unboundGetX.bind(module2);
console.log(hogeGetX());

xの値を変更しつつmoduleのgetXはそのまま使える、
みたいなことでしょうか??

680 名前:デフォルトの名無しさん [2022/04/24(日) 03:36:46.70 ID:G77ToU3y0.net]
JavaScript初心者なんですが、marindeckっていうTwitterクライアントアプリでとあることがしたくて下のコードを書いて実行したんですがcan't create variable duplicate "title"ってエラーが出てしまいました。調べてみたらwebkitが悪いらしいんですが解決方法が分からなくて困ってます。titleを変えたら次はheaderが駄目になって、headerを変えたらitem、最終的にはtitleのところがエラーになります。constをletやvarに変えても駄目でした。どうすればいいでしょうか?

コード(他の部分は長いので載せてません)

const header = document.querySelectorAll(".column-heading");

const title = document.querySelectorAll(".column-heading,.column-title-edit-box");

const item = document.querySelectorAll(".md-navbar-item");



681 名前:デフォルトの名無しさん mailto:sage [2022/04/24(日) 04:03:59.22 ID:oRZQtxTd0.net]
変数名を手当たり次第変える

682 名前:デフォルトの名無しさん mailto:sage [2022/04/24(日) 06:03:31.51 ID:8Psb/90zM.net]
>>665
スコープを切る

(function() {
const header = …
})();

683 名前:デフォルトの名無しさん mailto:sage [2022/04/24(日) 07:36:29.99 ID:zeaUlF5d0.net]
>>664
よくあるのは、無名のcallback 関数のthis が、window を指してしまうのを避けるために、bind する。
setTimeout( function( ) { this.count++ }.bind( this ), 100 )

この場合、thisをthatに代入して使うのも簡単。
const that = this
setTimeout( function( ) { that.count++ }, 100 )

ES2015では、アロー関数も使える。
setTimeout( ( ) => { this.count++ }, 100 )

だから最近は、bind する事も減った

JavaScript は、thisの変動が非常に難しい。
thisが何を指しているのか分からない

それで、jQuery の$( this ) がよく使われる

684 名前:デフォルトの名無しさん [2022/04/24(日) 15:54:46.75 ID:G77ToU3y0.net]
>>666
>>667
スコープを切る方法で行けました!お二人ともありがとうございました

685 名前:デフォルトの名無しさん mailto:sage [2022/04/25(月) 18:54:55.48 ID:J2rghl7a0.net]
JavaScriptでwebアプリを作るにはNode.jsを使うのでしょうか?

686 名前:デフォルトの名無しさん mailto:sage [2022/04/26(火) 02:37:55.71 ID:JTn9J4710.net]
Ruby on Rails でも当然、Node.js を使う。
ただし、Rails 7, Elixir のPhoenix 1.6 からは、脱webpack でesbuild に変わったけど

それでも開発環境では、webpack-dev-server も使うし、
VSCode, Node.js, npm/npx, yarn, タスクランナーのGulp/npm-scripts なども必須

687 名前:デフォルトの名無しさん [2022/04/29(金) 21:50:48.52 ID:ZLykNYRC0.net]
window.addEventListener(
"load",
function(){
処理
}
);
これだとページ全体のhtmlと画像の読み込みが完了してから実行するみたいですが
画像の読み込みは完了しなくてもhtmlだけ読み込んだら実行とするようにするにはどうすればいいですか?

688 名前:デフォルトの名無しさん mailto:sage [2022/04/29(金) 21:55:56.96 ID:u+oETHzl0.net]
DOMContentLoaded

689 名前:デフォルトの名無しさん (ワッチョイ 0910-6Jp9 [180.12.82.129]) mailto:sage [2022/05/01(日) 18:51:12 ID:oQCfhHaq0.net]
>>673
ありがとうございます

690 名前:デフォルトの名無しさん (ワッチョイ 0910-6Jp9 [180.12.82.129]) mailto:sage [2022/05/01(日) 18:55:01 ID:oQCfhHaq0.net]
let e = new Event('scroll');
window.dispatchEvent(e);

window.addEventListener(
"scroll",
function(e){
alert("スクロール");
}
);
スクロールバーでスクロールしなくてもスクロールイベント内の処理を実行したいんだけど
このようにやってもスクロールと表示されませんでした。
どうやればいいんでしょうか?



691 名前:デフォルトの名無しさん (テテンテンテン MM6b-WFod [133.106.196.99]) mailto:sage [2022/05/01(日) 19:09:09 ID:LZNxkfFyM.net]
単に処理順の問題じゃねぇの

692 名前:デフォルトの名無しさん (ワッチョイ 0910-dnm2 [180.12.82.129]) mailto:sage [2022/05/01(日) 19:47:26 ID:oQCfhHaq0.net]
>>676
スクロールバーを動かしたときとプログラムを実行したときの
どっちでも動くようにしたいので
上ではalertだけど実際はもっと長い処理です

693 名前:デフォルトの名無しさん (ワッチョイ 7b01-z2li [111.188.124.89]) mailto:sage [2022/05/01(日) 19:50:41 ID:MBePrVzJ0.net]
>>675
window以外でscrollイベントが発火してる可能性

694 名前:デフォルトの名無しさん (テテンテンテン MM6b-WFod [133.106.196.99]) mailto:sage [2022/05/01(日) 19:58:27 ID:LZNxkfFyM.net]
>>677
いやじゃなくてリスナー登録する前に発火させてるから

695 名前:デフォルトの名無しさん (ワッチョイ 7b01-z2li [111.188.124.89]) mailto:sage [2022/05/01(日) 20:01:30 ID:MBePrVzJ0.net]
ああ、>>679が正解だな
要件を誤認してた

696 名前:デフォルトの名無しさん mailto:sage [2022/05/05(木) 20:35:17.57 ID:ouaPcFFk0.net]
>>677に限らんが、質問投げっぱなしの奴ばかり

697 名前:デフォルトの名無しさん mailto:sage [2022/05/14(土) 22:48:35.26 ID:6u2rsBseH.net]
obj=document.getElementsByClassName('className');
でclassNameがゲットできますが、
ワイルドカード*(使えない)を使って
obj=document.getElementsByClassName('className-*');
みたいにゲットする方法ないですか?

698 名前:デフォルトの名無しさん mailto:sage [2022/05/14(土) 23:15:15.43 ID:jzLnji7p0.net]
document.querySelectorAllでやれば

699 名前:デフォルトの名無しさん mailto:sage [2022/05/14(土) 23:36:26.94 ID:PViH6pDdH.net]
>>683
できましたありがとう

700 名前:デフォルトの名無しさん mailto:sage [2022/05/18(水) 14:44:39.05 ID:59TKgDoa0.net]
[JavaScript で特定の長さの配列を作成する | Delft スタック]
https://www.delftstack.com/ja/howto/javascript/javascript-create-array-of-length/

で new Array(5)とnewを使ったやつと、ただのArray(5)がでてくるけど、その違いは何?
Array(5)ってnew無しで呼ぶ意味は?
教えてください。



701 名前:デフォルトの名無しさん (ワッチョイ 1901-mvDa [36.240.123.131]) mailto:sage [2022/05/18(水) 18:09:01 ID:SpJKU45h0.net]
>>685
返り値は同じ

702 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 03:10:01.87 ID:mjk3HrMxd.net]
> new Array(3)
[ <3 empty items> ]
> Array(3)
[ <3 empty items> ]
> Array(3).length
3
> a = Array(3); a.length = 3; a
[ <3 empty items> ]
> [...Array(3)]
[ undefined, undefined, undefined ]
> Array(3).reduce((r, _) => r + _, 0)
0
> Reflect.construct(Array, [3])
[ <3 empty items> ]
> Reflect.construct(Array, {length: 3})
[ undefined, undefined, undefined ]
> Reflect.construct(Array, {length: 3}).reduce((r, _) => r + _, 0)
NaN
> Reflect.construct(Array, {length: 3}).reduce(r => ++r, 0)
3
> Reflect.construct(Array, {length: 3}).reduce((r, _) => r + _, '')
'undefinedundefinedundefined'
> Array(3).reduce(r => ++r, 0)
0

703 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 07:19:17.78 ID:BgFJDolr0.net]
>> 686 >>687
ありがとうございます。
もっとも687の途中からは理解できませんが。

しかし、new Array(3)とかしても実際3つの要素(の参照)を格納する場所が確保されるわけじゃないということなんですね

[ <3 empty items> ]

[ undefined, undefined, undefined ]
の違い。

704 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 07:35:12.83 ID:BgFJDolr0.net]
やっぱりArray(3)でも、領域は確保されてるけど、初期化されてないということなのですか?
Javaとかじゃnullで初期化されてるけど。Javascriptじゃundefinedでさえも代入されてない?

705 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 07:39:11.56 ID:BgFJDolr0.net]
a = Array(3)
for(const i of a){
console.log(i)
}
を実行すると、確かにundefinedが3つ要素としてあるみたいですが

706 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 07:43:27.24 ID:BgFJDolr0.net]
以下を実行してみると

> a = Array[3]
> a[1] = 7;
> a
[ <1 empty item>, 2, <1 empty item> ]

empty itemってのはundefinedとは違う? forで取り出すとundefinedになる?
やっまりArray(3)とかでもメモリ領域は確保されてるみたいですね

707 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 07:44:22.36 ID:BgFJDolr0.net]
間違った

> a = Array[3]
> a[1] = 7;
> a
[ <1 empty item>, 7, <1 empty item> ]

でした。書き込み多くなってすみません。

708 名前:デフォルトの名無しさん [2022/05/19(木) 08:39:33.80 ID:YbOBvtu00.net]
素のjavascriptでanimateを使って3秒毎に100pxずつelementを移動したいんだけど
let a=0;
setInterval(
function(){
let aa = a + "px";
let bb = a + 100 + "px";
a+=100;
element.animate(
{left:[aa,bb]},
{iterations:1,fill:"forwords";duration:1000}
);
},
3000
);

何か問題点はありますか?もっといい方法はありますか?

709 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 09:47:03.34 ID:AC6zTZlHH.net]
newをつけないから実体がなくてundefinedなんじゃないの
それに無理やり要素をぶっこんだら実体ができてemptyになるとか

710 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 12:07:22.78 ID:RG1roS1xM.net]
>>693
移動回数が無限ってことならそのままでいいけど、一定条件(動的な条件)を満たした場合に移動を終了させたいならclearIntervalを使おう
移動回数が決まってる場合はハナからそのようなkeyframeを書くことでsetIntervalを使わずに済ませることもできるはず



711 名前:デフォルトの名無しさん [2022/05/19(木) 12:23:52.20 ID:YbOBvtu00.net]
>>695
なるほど
移動回数が決まっている場合のkeyframeはどう書けばいいですか?

712 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 13:28:23.81 ID:Qw9EnnZ00.net]
>>691
Array(3) や new Array(3)
の場合は
{
length:3
}

[undefined, undefined, undefined]
とか
Array(3).fill(undefined)
の場合は
{
length:3,
0: undefined,
1: undefined,
2: undefined
}

arr = Array(3) ってやって arr[0] で undefined が返ってくるのは
arr[100] とか arr[‘hoge’] で undefined が返ってくるのと同じことです
存在しないプロパティにアクセスしたから undefined
疎な配列 とか sparse array で検索するとちょっとは疑問解消されるかもしれないです

713 名前:デフォルトの名無しさん mailto:sage [2022/05/19(木) 18:14:23.53 ID:BgFJDolr0.net]
>>697
ありがとうございます。
JavaScriptって、やっぱりこの辺は特殊ですね。
お手軽なスクリプト言語としてはじまって、オブジェクトがすごい動的でハッシュマップみたいに扱えて、

714 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 17:33:52.64 ID:+N2AIhklr.net]
Winでプログラミングするためにnotepad++とATOMに辿り着いたんですが、ちょくちょくスペル間違いをしてしまい気が付かずに延々と探してるみたいなことになっちゃってます
間違えた場合に色が変わって教えてくれるみたいな機能があれば教えて欲しいです

715 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 17:35:15.16 ID:pMTVA02Y0.net]
>>699
なぜそこまで探してVSCode使わんのだ……?

716 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 17:54:55.74 ID:+N2AIhklr.net]
>>700
かなり前の話なんですけど軽く教えてくれた人からhtmlとかプログラミングはテキストエディタでやればいいとか言われたんで存在も知らなかったです
結構よさげですねコレ

717 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 18:01:49.29 ID:pMTVA02Y0.net]
>>701
ちゃんとプログラミング用のエディタなら
一回設定した変数名はそのまま入力候補として出てくる

もし英語の誤字/脱字が気になるなら
拡張機能のCode Spell Checker辺りを入れれば
一般的に使われる英単語なら誤ってる所に印付けてくれる

718 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 19:08:40.21 ID:NujtHCtT0.net]
はあああぁ Emacs 使わないとか素人かよ

719 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 20:02:16.92 ID:6OeQRku90.net]
エディタ戦争でも始める気か?
主要なエディタを全て試して使いこなせるものを選べとしか

vi
vim
Emacs
Sublime Text
Atom
Visual Studio Code

720 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 21:27:13.02 ID:41Pi679sa.net]
秀まるは?



721 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 21:52:53.33 ID:XDgutXclH.net]
>>704
xyzzyぇ‥‥

722 名前:デフォルトの名無しさん [2022/05/23(月) 22:50:53.85 ID:VcvR62I30.net]
禿丸は使ったらハゲになるから除外。

723 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 22:52:20.76 ID:6OeQRku90.net]
>>705
プログラミング関連機能はないと思ってたが、今は違う?

>>706
懐かしい名前だな
開発停止してるっぽいが、今でも使ってる人いる?

724 名前:デフォルトの名無しさん mailto:sage [2022/05/23(月) 22:58:39.67 ID:XDgutXclH.net]
>>708
のし

725 名前:デフォルトの名無しさん mailto:sage [2022/05/24(火) 08:27:07.85 ID:jLN19JC1M.net]
xyzzy使ってる奴なんてジジイだけ

726 名前:デフォルトの名無しさん [2022/05/24(火) 18:02:01.97 ID:BzukVrXt0.net]
Javascript勉強したらJavaも使えるようになりますか?

727 名前:デフォルトの名無しさん mailto:sage [2022/05/24(火) 18:14:58.22 ID:3sl5OHzvM.net]
勉強しただけで使えるなら試験はいらない

728 名前:デフォルトの名無しさん [2022/05/24(火) 18:16:43.89 ID:EDq4wx2f0.net]
vscode以外は悪として見られる

つらい

729 名前:デフォルトの名無しさん [2022/05/24(火) 18:52:14.84 ID:6jvtixg50.net]
EmacsenやVSCはエディタじゃないかもしれんね。
エディタと言い張る低能が多数派なので、我々良識派が肩身の狭い思いをしてるけども。

730 名前:デフォルトの名無しさん [2022/05/24(火) 19:26:26.98 ID:VAh5gH+20.net]
>>704
今の時代、
VSCode以外は悪ですよ。



731 名前:デフォルトの名無しさん [2022/05/24(火) 19:28:43.15 ID:VAh5gH+20.net]
HTMLやCSSをプログラミングと呼ぶ低能がいる。
それはこの2chを作ったといわれる(彼のスキルで作れるわけがない)ひろゆきだ。

732 名前:デフォルトの名無しさん mailto:sage [2022/05/25(水) 01:56:29.52 ID:Mmr3hh6F0.net]
難しすぎワロスw
片手間じゃ一生まともなの書ける気しない

733 名前:デフォルトの名無しさん mailto:sage [2022/05/25(水) 11:42:51.30 ID:Y26hlNPT0.net]
==の自動型変換?がキモいから毎回確実に===とキャスト使っていい?

734 名前:デフォルトの名無しさん mailto:sage [2022/05/25(水) 11:50:09.46 ID:FOuBKfShM.net]
むしろそうすべき
==をつかっていいのはobj==undefinedとする時だけ

735 名前:デフォルトの名無しさん mailto:sage [2022/05/25(水) 18:08:52.45 ID:cwF0DySLr.net]
これは見とけっておすすめのYouTubeある?
一通り終わって次何するか悩んでる

736 名前:デフォルトの名無しさん mailto:sage [2022/05/26(木) 21:47:12.94 ID:bX/ymiQ/M.net]
HTML/CSSと勉強してきて、JavaScriptの勉強を始めました。
if文やfor文が出てくると一気にプログラミングを勉強してるって感じになりますね。

737 名前:デフォルトの名無しさん mailto:age [2022/05/27(金) 13:56:03.01 ID:tzFUQxnX0.net]
HTMLやCSSも立派なプログラミング言語だぞ!

738 名前:デフォルトの名無しさん (ワッチョイ 8b2f-tVBN [218.220.251.107]) [2022/05/27(金) 14:48:41 ID:dExuQKQN0.net]
>>722
それを言うは低脳。

739 名前:デフォルトの名無しさん (ワッチョイ 8b2f-tVBN [218.220.251.107]) [2022/05/27(金) 14:50:10 ID:dExuQKQN0.net]
自分が「プログラミングできます」と言われたいだけがために
HTML/CSSをプログラミング言語の仲間にしたい。

740 名前:デフォルトの名無しさん mailto:age [2022/05/27(金) 15:09:21.81 ID:tzFUQxnX0.net]
HTML/CSSのプログラマですが質問ありますか?



741 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 15:16:49.16 ID:ZHjBLFll0.net]
プログラミング言語の定義は知らないが
コンピュータに命令する言語とすれば、HTML/CSSも立派なプログラミン言語だよ。
JavaScriptより高水準のね。

742 名前:デフォルトの名無しさん [2022/05/27(金) 15:31:01.51 ID:dExuQKQN0.net]
>>725
きみは低悩
>>726
きみも低悩

これはわたしだけでなくプログラマー99.9999999%のみんなの認識だ。

743 名前:デフォルトの名無しさん [2022/05/27(金) 15:32:12.79 ID:dExuQKQN0.net]
低脳ザルたちは頭が悪いからそれを良く見せようと必死。

744 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 16:15:19.27 ID:5JjyCdCCH.net]
私プログラミングが趣味なんです
へえ、どの言語やってるんですか?
HTMLです

745 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 16:49:48.86 ID:9vqfxpN6M.net]
HTML/CSSプログラマは
XMLやJSONもプログラミング言語だと思ってるの?

746 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 17:13:25.37 ID:VTFlQjvpr.net]
おれトップレベルのhtml css使いだぞ
年収はお前らの5倍くらいある

747 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 17:25:13.78 ID:A0QsKn+t0.net]
RPGツクールはプログラミング言語ですか?
マインクラフトはプログラミング言語ですか?
ポケモンピカチュウを

748 名前:oグらせるのはプログラミング言語ですか? []
[ここ壊れてます]

749 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 18:00:04.78 ID:zOBEp9hN0.net]
英語の動画見てるとhtmlをプログラミング言語と呼んでるな

750 名前:デフォルトの名無しさん [2022/05/27(金) 19:50:11.33 ID:izvqMSf/0.net]
「HTML CSS チューリング完全」と検索してみるが良い。
我々がなぜこ奴らをプログラミング言語とみなしているか理解できるであろう。
そして、プログラミング言語であることを理解せずに使えば、セキュリティ穴になるのだ。



751 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 20:01:09.68 ID:4GpIk9M10.net]
>>732
プログラミング言語ではない

752 名前:デフォルトの名無しさん [2022/05/27(金) 21:09:31.75 ID:dExuQKQN0.net]
>>731
あなた低脳ザル

>>733
You are another tiny-brain monkey.

753 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 23:06:30.96 ID:Xaqhk7aS0.net]
74 デフォルトの名無しさん (ワッチョイ 372f-IS5D [218.220.251.107]) 2021/11/20(土) 20:02:17.98 ID:4VXr5Xxs0
仕事で使ってるサイトをJavascriptで自動化できませんか?
たとえば出勤と退勤のときの時間を管理するのに「勤次郎」というサイトを使ってるんだけど
毎回ログインしたあといちいち入力するのが面倒くさい。

754 名前:デフォルトの名無しさん mailto:sage [2022/05/27(金) 23:50:21.69 ID:3AyZwk8CM.net]
userscript

755 名前:デフォルトの名無しさん mailto:sage [2022/05/28(土) 12:58:35.52 ID:hJZUTFMkH.net]
Tampermonkey使えばできそうだよね

756 名前:デフォルトの名無しさん (ワッチョイ 179a-4uwL [120.75.69.71]) mailto:sage [2022/05/28(土) 16:55:38 ID:HuhrBNQu0.net]
プログラム中でs=文字列という形でsに文字列を格納しました
これをクリップボードにコピーするにはどうしたらいいでしょうか?
ちょっと調べるとselectしてcopyするようなのが出てきたのですが、
変数だけで具体的に文字列をselectできるわけではないのでうまくいきませんでした

757 名前:デフォルトの名無しさん mailto:sage [2022/05/28(土) 17:05:49.60 ID:zElwYawI0.net]
>>740
単純な文字列だけならClipboard.writeText()を使う

リファレンス
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

758 名前:デフォルトの名無しさん mailto:sage [2022/05/28(土) 17:11:13.68 ID:ipcjwkTWM.net]
218.220.251.107は半年の間にずいぶん偉くなったもんだな

759 名前:デフォルトの名無しさん mailto:sage [2022/05/28(土) 17:30:21.43 ID:zElwYawI0.net]
>>737
半年前な上、スレチだけど
そういうのを自動化したいならRPA使った方が早いって今更だけどアドバイスしたい……
UiPathとか使えばわりとサクッと実装できる

760 名前:デフォルトの名無しさん mailto:sage [2022/05/28(土) 19:19:22.03 ID:6Sv+ENTH0.net]
タコペッティのユーチューブチャンネルより

・週4日勤務の導入て゛、従業員の生産性も、幸福度も、お客さんの満足度も、全てが向上するという事実ww
・【朗報】日本企業、めちゃめちゃ働きやすくなっているw
・職務範囲も勤務地も不明確な正社員ってオワコンし゛ゃね?受け持つ仕事が辞令
 ひとつで変更になり、勤務地も会社都合で決まるって冷静に考えてヤバすぎだろ...
・1つの会社に長く勤めるのはもう辞めませんか?勤続年数が増えるほど、生産性は下がります...
・リモートワークとかもう古いからw これからは働く場所も時間も自由に選べる「ABW」の時代です
・【悲報】上場大企業の年収、スタートアップ企業とほぼ同じであることが判明w 
 え?大企業に行く意味ある...?
・【悲報】有名大学を出て大企業に入るという勝ち組ロード、完全にオワコン...



761 名前:デフォルトの名無しさん (ワッチョイ b35f-yO3c [14.13.137.64]) mailto:sage [2022/05/29(日) 17:53:31 ID:IyXpp6fQ0.net]
>>727
それを成立させるために何億人いるんだよ、プログラマ

762 名前:デフォルトの名無しさん [2022/05/29(日) 22:20:48.94 ID:z/FJvc6j0.net]
constだとあとで再代入可の変数にしたい場合letに書き直すのがめんどくさいから
最初からconst使わずに全部letにした方がいいのではないでしょうか?

763 名前:デフォルトの名無しさん mailto:sage [2022/05/29(日) 22:32:45.58 ID:1SJx00EZM.net]
>>746
素晴らしい発想だ
キミは天才か?

764 名前:デフォルトの名無しさん mailto:sage [2022/05/29(日) 22:48:40.87 ID:48OBnFq00.net]
>>746
実際それで何の問題もない

765 名前:デフォルトの名無しさん mailto:sage [2022/05/30(月) 00:56:47.97 ID:aQGXKbLd0.net]
>>746
天才現る

766 名前:デフォルトの名無しさん mailto:sage [2022/05/30(月) 07:24:12.50 ID:aJrcSub80.net]


767 名前:デフォルトの名無しさん [2022/05/30(月) 10:17:04.04 ID:zAJLNfWa0.net]
俺も全てlet使ってる
流石にvarは使わない
何がおかしいのかさっぱりわからない

768 名前:デフォルトの名無しさん (オッペケ Sr93-H/X0 [126.133.245.183]) mailto:sage [2022/05/30(月) 15:29:33 ID://zvb+Vbr.net]
馬鹿!?

769 名前:デフォルトの名無しさん [2022/05/30(月) 16:10:10.56 ID:uE5mh+rL0.net]
【渡辺裕之(66)】 ワクチン鬱? 【上島竜兵(61)】
://egg.5ch.net/test/read.cgi/cafe60/1652426631/l50
o.5ch.net/1yfxm.png

770 名前:デフォルトの名無しさん [2022/06/06(月) 11:49:25.24 ID:eBxFzq660.net]
質問です。
予め指定したフォルダ内にある全てのファイル名を読み取るにはどうするといいでしょうか?



771 名前:デフォルトの名無しさん mailto:sage [2022/06/06(月) 12:09:31.46 ID:IR62wvND0.net]
>>754
サーバのフォルダならサーバサイドスクリプトで読み取る

772 名前:デフォルトの名無しさん [2022/06/06(月) 13:35:42.25 ID:eBxFzq660.net]
>>755
ありがとうございます。
やってみます。

773 名前:デフォルトの名無しさん [2022/06/08(水) 23:55:21.66 ID:YvahfHwm0.net]
ちゃんとした他のプログラミング言語と足並みを揃えるべくES6でスコープを考慮した結果がletのはず
最近出版された本でもvarを使っているのはなんなのか…

774 名前:デフォルトの名無しさん mailto:sage [2022/06/08(水) 23:56:30.69 ID:7YcOaZwm0.net]
>>757
破り捨てよう

775 名前:デフォルトの名無しさん mailto:sage [2022/06/08(水) 23:58:50.30 ID:oUrdFXCt0.net]
どう覚えているのか知らないが、varは禁止されていない
var,let const,関数宣言を全て使いこなすのがベスト

776 名前:デフォルトの名無しさん [2022/06/09(木) 00:01:10.95 ID:DZT4jyMC0.net]
敢えて関数スコープを使うシーンが分からない

777 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 00:14:24.38 ID:ilG0UUWS0.net]
関数コードを巨大にしなければ、関数スコープで十分な局面は多い
パフォーマンスへの影響を踏まえて使い分けてるな

778 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 00:22:00.27 ID:PLMk4iqod.net]
バベルからトランスコンパイルしたらvarって出てくる

779 名前:デフォルトの名無しさん (ブーイモ MM9f-P3ru [49.239.64.75]) mailto:sage [2022/06/09(木) 00:45:27 ID:HJM4k0T5M.net]
再宣言と巻き上げに関するバグを生むリスクを取ってまでvarを使う場面があるのかね

780 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 03:15:19.34 ID:6mot2Q//d.net]
varは初期の数ヶ月から数年の期間Netscapeでは
function F() {var v = 'v';} ;alert(F.v);// v
だった。これは今でいう
class C {static s = 's'} C.s// s

constはmozillaで99年から00年に普通にみんなに使われるようになった。ただし細部で約20年後(というか約15年後かな)の今の仕様とは違う。
あと JScript .netでもconstは使えたから、複数のプラットフォームで20年選手ということになる。

letも今のものとは細部で違うが、私は2007年初期にJS1.7で使っている。
この時期のpython化は黒歴史になっているから、comprehensionは完全に消されたな。
当初は[for (i in [0, 1, 2]) i]と書けた。これは[i for i in range(3)]のこと。
inじゃなくofになって、今はそれも消されたな。
しかし残っているものの方がむしろ多くて、let以外にも分割代入なんかもこの15年前から10年前くらいまでの黒歴史期間で導入されていた。
で、何が言いたいかというと、let要らないんだよな。だって、comprehensionでlet/const無しでレキシカルスコープ実現できてたじゃん。
だから、レキシカルで初登場時に暗黙のletでいいじゃんって思う。



781 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 03:19:09.76 ID:e981VJmIr.net]
javascript → varを非推奨
c# → varを推奨

これだから動的言語は欠陥なんだよな

782 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 10:39:24.14 ID:asu6OMcO0.net]
話の腰を折って知識の開陳したいだけならよそでやってくれるかな

783 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 11:47:04.96 ID:gZS+KUMq0.net]
>>766
すみません。

784 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 18:15:08.29 ID:4vVekUOlM.net]
最近勉強を始めた初学者です
参考書には基本的にletで記述されています
varはこんなのもあるよって感じで紹介だけだなあ

785 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 18:56:04.47 ID:gZS+KUMq0.net]
日本国内でjavascriptのプログラマは何人いるのでしょうか?

786 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 19:53:55.33 ID:qJMpHUUT0.net]
ちゃんと組めるのは50人ぐらいじゃね

787 名前:デフォルトの名無しさん mailto:sage [2022/06/09(木) 21:13:45.42 ID:ObjsHLlTr.net]
人数でいえば300万人はいる

788 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 00:12:00.40 ID:PVhyJTd00.net]
>>771
ええーーーーーーーーーーーーーーーーー。
そんなにいるの?

789 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 00:12:53.26 ID:fPak2i7g0.net]
>>765
論拠になってねえ…

790 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 00:13:04.77 ID:PVhyJTd00.net]
プロで活躍出来る人は10万人位かと思っていた。



791 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 10:36:42.56 ID:Mtfam+l2M.net]
>>773
どう見てもネタやん

792 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 10:49:39.80 ID:/BiTxEDsr.net]
javascriptは初心者向けだから半日もあればマスターできるぞ

793 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 12:19:15.49 ID:W2vGiqFG0.net]
いや、わいは1時間でいけたな

794 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 13:24:03.72 ID:PVhyJTd00.net]
>>776
未だにthree.jsすら使えこなせない俺って…。

で、javascriptのプログラマーは日本国内でどれ位いる?

795 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 13:37:21.85 ID:tfSxvHhSr.net]
プログラマーであればjavascript使えるからほぼプログラマー人口と同じくらい

796 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 15:34:16.82 ID:PVhyJTd00.net]
>>779
https://hrzine.jp/article/detail/2123

日本人プログラマーは約100万人。
でもjavascriptを使いこなせている人はそんなにたくさんいるかな?

797 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 15:36:51.91 ID:PVhyJTd00.net]
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/072100242/072100001/

国内シェアは4.4%だから大体4万4千人程度だった。

798 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 16:11:25.97 ID:tfSxvHhSr.net]
>>781
そもそもその統計はおかしい
一人でいくつも言語を使うのが当たり前
4.4%ってのはjavascript「しか」使えない人口だろう
ということはやはりjavascriptを使える人口は100万人に近くなる

799 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 16:44:02.22 ID:2xPsbg+9M.net]
そもそもオッペケにマジレスするのがおかしい

800 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 19:46:27.69 ID:PVhyJTd00.net]
>>782
アンケートでは、現在使っているプログラミング言語を3つまで挙げてもらった。
JavaScriptは2位。


最も使っている言語を1つだけ挙げてもらった。
上位3位で43.2%を占める。

100万人?43.2%で約4万3千人位がJavaScriptを使えるかと。



801 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 19:47:20.81 ID:PVhyJTd00.net]
約43万人。

802 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 21:29:30.02 ID:tfSxvHhSr.net]
>>785
すごい
43万人がjavascriptのスペシャリストプログラマー
残りの57万人もほぼ使えるのだろうが初心者向け言語だから重視していないんだろうな

803 名前:デフォルトの名無しさん mailto:sage [2022/06/10(金) 21:32:15.40 ID:q2HycVdQM.net]
親でも殺されたのか?

804 名前:デフォルトの名無しさん [2022/06/13(月) 08:40:40.71 ID:am3Wwq1W0.net]
element.animate(
{
left:["100px","200px","300px","400px","500px"]
},
{duration:6000}
);
というアニメーションの場合で
leftが100px,200px・・・500pxになった毎にalert表示したいんだけどどうやればできますか?
各位置に達したら発生するイベントはないんでしょうか?

805 名前:デフォルトの名無しさん mailto:sage [2022/06/13(月) 17:30:17.10 ID:mNIVTbIq0.net]
for(const left of ["100px","200px","300px","400px","500px"]){
await element.animate({left}, {duration:1200, fill:'forwards'}).finished
alert(left)
}

こんな感じだろうが、うちのブラウザではalertと非同期処理の相性が悪くて
期待通りには動かんな

806 名前:デフォルトの名無しさん [2022/06/13(月) 18:03:23.16 ID:am3Wwq1W0.net]
>>789d
どうもっす
awaitっていうのは何ですか?あと1200という数字はどこから来たんですか?

807 名前:デフォルトの名無しさん mailto:sage [2022/06/13(月) 19:32:06.01 ID:GwwyxVQWd.net]
6000/5かな

808 名前:デフォルトの名無しさん mailto:sage [2022/06/13(月) 19:38:33.43 ID:i6A98kDWM.net]
>>790
横からだけど、awaitはpromiseオブジェクトの解決(成功・失敗)まで待機する構文
1200は6000(6秒)をキーフレームの数(ループ回数=5)で割ったもの

809 名前:デフォルトの名無しさん mailto:sage [2022/06/13(月) 21:01:30.83 ID:0JGjDuiuM.net]
>>789
理屈は分からんけどダミーのアニメーションか何かを挟むと上手くいくっぽい
https://jsfiddle.net/0c3hmbok/

810 名前:デフォルトの名無しさん mailto:sage [2022/06/14(火) 07:59:04.85 ID:QblsDI8c0.net]
>>793
>>789の書き方だとプロミスチェーンされないからだと思います

await element.animate({left}, {duration:1200, fill:'forwards'}).finished
await alert(left)

でいけました

await element.animate({left}, {duration:1200, fill:'forwards'}).finished.then( () => { alert(left) } )

でもOK



811 名前:デフォルトの名無しさん mailto:sage [2022/06/14(火) 11:53:12.03 ID:jm08kgMyM.net]
>>794
うちの環境だとalertにawait付けただけでは上手くいかなかったのよ
jsfiddle.net/m3pq6djw/
ダイアログでOK押したときに●がワープしない?

812 名前:デフォルトの名無しさん mailto:sage [2022/06/14(火) 20:15:11.04 ID:QblsDI8c0.net]
>>795
確認しました
朝はSafariだったので
SafariとFirefoxではそもそもawaitつけなくても>>789で問題なく動く
Chromeはawaitあるなし関係なくダメ、全体をthenに書き換えてもダメ
ちなみに全てMac版です

色々試してみた感じ
Chromeはalert()のダイアログを出したタイミングで次のPromiseを実行する
画面は止まってるが計算は実行されているので、OKでダイアログ閉じた時に辻褄合わせでワープする
SafariとFirefoxはダイアログのOKボタンを押したタイミングで次のPromiseを実行する
それまで画面も計算も止まってるのでダイアログ閉じてからアニメーションが始まる
かなあと思ったりしましたが、実際のところはわからないです

まあでもChromeで動かないならダメですね

813 名前:デフォルトの名無しさん mailto:sage [2022/06/14(火) 21:03:39.71 ID:BrOck07XM.net]
戻り値のある confirm() や prompt() ならイケそうな気がするけど、どうだろう

814 名前:デフォルトの名無しさん mailto:sage [2022/06/15(水) 11:59:48.35 ID:1XehFqTjM.net]
>>795をawait confirmに変えてみたけど挙動は変化なし

815 名前:デフォルトの名無しさん mailto:sage [2022/06/15(水) 13:13:12.54 ID:aRosNJ ]
[ここ壊れてます]

816 名前:Ld0.net mailto: そりゃPromise返さないやつにawait付けたところで変わるわけないわな
chromiumのモダールダイアログの処理に問題あるんだろうね
[]
[ここ壊れてます]

817 名前:デフォルトの名無しさん mailto:sage [2022/06/15(水) 19:49:56.67 ID:xgXbyqQZ0.net]
awaitの後の式の値がPromiseでない場合はPromise.resolve()に変換されるってことなので
最初はそこかと思ったんですよね
>>793がどうしてChromeでちゃんと動くのかを考えたんだけど
おそらくChromeはダイアログ出した段階でPromisebフ中身を実行しbトるけど
OKを押すまでPromiseの状態は変えないんだと思います
つまりダミーのアニメーションはすぐ実行完了するけどOKを押すまではPendingなので次に行かない
なのでPendingで返却してすぐにFulfilledになるPromiseにすりゃいいのではと思って試したら多分できた
https://jsfiddle.net/v2c7baL3/

818 名前:デフォルトの名無しさん mailto:sage [2022/06/18(土) 17:12:37.89 ID:AZEFiuqJ0.net]
ようやく大手を振ってIEサポート拒否出来るわ
IEモードなんて知らん

819 名前:デフォルトの名無しさん [2022/06/20(月) 11:37:14.04 ID:L+sRNCcV0.net]
クラス内のコンストラクタについてこの認識で合ってますか?

constructor(引数){this.プロパティ名 = 値;}
1.受け取った引数は値に格納され
2.インスタンス生成することで値が「this.プロパティ名」に代入され
3.同時に「this.プロパティ名」はインスタンスに渡される。

ググれどググれどページによってニュアンスが違くて混乱しております。

820 名前:デフォルトの名無しさん mailto:sage [2022/06/20(月) 18:00:16.96 ID:HWRjc4FJ0.net]
setInterval内でループ毎に変化するelementがあってそのelementに対してのaddEventListenerを使う場合は
イベントが蓄積されていくからremoveEventListenerでループ毎に削除する必要があるけど
プロミスは1回のイベントが実行されれば蓄積されないので削除しなくていいって聞いたけど正しいんですか?



821 名前:デフォルトの名無しさん [2022/06/20(月) 18:10:56.22 ID:HWRjc4FJ0.net]
>>796
animateを関数で囲ってanimation.finished.then毎にその関数を再起呼び出しでできました

822 名前:デフォルトの名無しさん [2022/06/27(月) 11:19:58.02 ID:qD2YGrhX0.net]
これだと、単に変数に文字列 "a" を代入しただけに思えるけど
どうしてobjのプロパティが代入されるんですか?

const obj = {a: 10, b:20};
const num = 'a';
console.log(obj[num]); // 10

823 名前:デフォルトの名無しさん mailto:sage [2022/06/27(月) 11:47:02.50 ID:VP93VLfnM.net]
>>805
下記は共にオブジェクトのaプロパティを参照する式で、結果としてaプロパティの値が得られる

obj.a
obj['a']

824 名前:デフォルトの名無しさん mailto:sage [2022/06/27(月) 16:22:22.11 ID:Xs6h66q80.net]
>>805
console.log(obj['a']) で同じ動作になるから

825 名前:デフォルトの名無しさん mailto:sage [2022/06/27(月) 17:24:02.66 ID:R3+dz0k/M.net]
obj[num]のnumが評価されてobj[‘a’]になる
さらにobj[‘a’]が評価されて10になる

826 名前:デフォルトの名無しさん mailto:sage [2022/07/01(金) 21:12:32.27 ID:e3WLxABv0.net]
varだとこのように書けるけど
if(a > 1){var b = 0;}
else{var b = 1;}
alert(b);
letだと
if(a > 1){let b = 0;}
else{let b = 1;}
alert(b);
のようには書けないので
let b;
if(a > 1){b = 0;}
else{b = 1;}
alert(b);
と書くしかないので行数が多くなるのでvarの方が使える場面もあるってこと?

827 名前:デフォルトの名無しさん mailto:sage [2022/07/02(土) 07:53:03.90 ID:ZhYOvAvRM.net]
代入してん?

828 名前:デフォルトの名無しさん mailto:sage [2022/07/02(土) 08:46:29.95 ID:k/gTnCZpM.net]
>>809
varは「既存コードとの互換性目的で残されているだけ」であって、利用禁止が大前提
無意味にletを使うのもやめた方がいい

例1 - 名付けあり
> const b = a > 1 ? 0 : 1;
> alert(b);

例2 - 名付けなし
> alert(a > 1 ? 0 : 1);

829 名前:デフォルトの名無しさん [2022/07/02(土) 08:46:33 ]
[ここ壊れてます]

830 名前:.37 ID:f8ozX99S0.net mailto: 代入してるよ []
[ここ壊れてます]



831 名前:デフォルトの名無しさん [2022/07/02(土) 08:46:35.20 ID:f8ozX99S0.net]
代入してるよ

832 名前:デフォルトの名無しさん (ワッチョイ 2d01-UYEv [114.48.125.16]) mailto:sage [2022/07/02(土) 09:07:06 ID:7+dzE5OL0.net]
>>809
あなたにとってはそうなんだろうが、letの方が宣言か一箇所で済む分、わかりやすく感じる
最も、そのコードは三項演算子で1行に出来るから比較する必要はないが

833 名前:デフォルトの名無しさん (ワッチョイ 2d01-UYEv [114.48.125.16]) mailto:sage [2022/07/02(土) 14:56:48 ID:7+dzE5OL0.net]
とりあえず、[180.12.82.129]は何か反応したら?

834 名前:デフォルトの名無しさん [2022/07/02(土) 18:09:44.92 ID:5kfVxUizM.net]
iPadでJavaScriptの勉強したいんやけど可能?
一応外付けのマウスキーボードはあって、OracleのJava bronzeを取りたいんたけど。

835 名前:デフォルトの名無しさん [2022/07/02(土) 18:11:06.76 ID:f8ozX99S0.net]
>>814
そうなんですか

836 名前:デフォルトの名無しさん mailto:sage [2022/07/02(土) 18:20:43.79 ID:TQdsQirm0.net]
var は使っちゃいけない。
スコープとか、色々とややこしいから、バグるだけ

そういうのを研究していない人には分からないし、
研究するだけ時間の無駄

varを使うな、という結論だけを使えばよい

837 名前:デフォルトの名無しさん mailto:sage [2022/07/02(土) 18:21:59.34 ID:7+dzE5OL0.net]
>>817
結局、何を知りたかったのか
さっぱり、わからないな

838 名前:デフォルトの名無しさん mailto:sage [2022/07/02(土) 18:35:23.42 ID:6gDxbKhpM.net]
>>816
JavaかJavaScriptかはっきりしてくれ

839 名前:デフォルトの名無しさん [2022/07/03(日) 21:22:54.13 ID:u2gGVzOi0.net]
javascriptでフォーム作ってます。
java scriptからメールを送る方法ってどんなのがありますでしょうか?

840 名前:デフォルトの名無しさん mailto:sage [2022/07/03(日) 21:32:55.50 ID:W01+4hlo0.net]
>>821
マルチポスト先でいわれたSMTPサーバは調べた?
https://mevius.5ch.net/test/read.cgi/hp/1478002550/652
https://qiita.com/ryunakae/items/0ceed3728d46ee67d1f2



841 名前:デフォルトの名無しさん mailto:sage [2022/07/03(日) 22:51:52.67 ID:qXMK1yPV0.net]
javascriptでメールの送信は無理!

rubyを使うと簡単にできるYO!

842 名前:デフォルトの名無しさん mailto:sage [2022/07/03(日) 23:26:54.42 ID:C1pvOjRy0.net]
AWS Lambda/SNS, Ruby など、サーバーが無いと無理

843 名前:デフォルトの名無しさん mailto:sage [2022/07/03(日) 23:41:06.22 ID:W01+4hlo0.net]
無理といわれてるが、SmtpJSでは不可能なのか
まあ、俺もクライアントサイドでやろうとは思わんが

844 名前:デフォルトの名無しさん mailto:sage [2022/07/03(日) 23:44:24.18 ID:QHM3Cg280.net]
ブラウザ上のjavascriptから直にメールを送る機能はないので
822のqiitaで紹介されてるSmtpJSはSmtpJSのサーバーに通常のフォームデータとしてPOSTしてそのサーバーがメール送信を肩代わりしてくれる
信用できないなら自分でサーバーサイドもどうにかする

845 名前:デフォルトの名無しさん (ワッチョイ 2d01-UYEv [114.48.125.16]) mailto:sage [2022/07/03(日) 23:55:04 ID:W01+4hlo0.net]
SMTPサーバーが必要なのは>>822の通り、理解してる
最も、質問者はずっとスルーしてるが

846 名前:メールの質問者@時の旅人 (ワッチョイ 7568-kc9T [112.68.214.52]) [2022/07/04(月) 00:11:28 ID:rXJjm3cQ0.net]
皆さま、ご教示ありがとうございます。
smtp.jsを使い、SMTPサーバーはsmtp.jsで紹介されてるSMTPを使用。

試してみたのですが、うまく動かせておりません。
メールは、サーバーサイドからやるのがベターですよね、やっぱり。。

847 名前:デフォルトの名無しさん [2022/07/04(月) 06:59:27.99 ID:eZVYpHVcd.net]
var yyy =~/g;
var mmm = "$1~”;
aaa[0].innerHTML = aaa_html.replace(yyy, mmm);


で指定する$1の部分は、mmmの変数で指定するか、
複数の変数を埋めるにはどうしたら良いですか?
ようするにyyy以外の変数も埋め込めたい。

848 名前:デフォルトの名無しさん mailto:sage [2022/07/04(月) 07:44:5 ]
[ここ壊れてます]

849 名前:1.83 ID:158REP8JM.net mailto: >>829
マッチ結果とは無関係の変数を使いたいってことなら、普通に変数を連結するなりテンプレートリテラルで表現したりすればOK
ある程度複雑なことをするつもりなら、別途置換処理用の関数を定義した上でreplace()の第二引数に渡した方が読みやすくなるかも(当然ながら「適切な名付け」が前提)

innerHTMLを使っている点については、あえて何も言わないでおく
[]
[ここ壊れてます]

850 名前:デフォルトの名無しさん mailto:sage [2022/07/04(月) 08:16:00.18 ID:X+I6pApT0.net]
>>829
+で結合して代入



851 名前:デフォルトの名無しさん (アウアウウー Sa4d-uVV9 [106.146.72.72]) [2022/07/07(木) 08:46:34 ID:hekaiUDAa.net]
年月を設定した2段階プルダウンを作成しているのですが、JAVAを深く触ったことがない為アドバイス頂きたいです。
wordpressのデータベースからSQLを使います。Java scriptでプルダウン作成。

設計について
Java script→JSONで$(配列)に変える→archive.php→SQL→JSON→Java scriptという流れで良いでしょうか?

852 名前:デフォルトの名無しさん (ワッチョイ 2d01-UYEv [114.48.125.80]) mailto:sage [2022/07/07(木) 08:56:00 ID:sGvZpzJo0.net]
>>832
> JAVAを深く触ったことがない

Java関係ある?

> Java script→JSONで$(配列)に変える

$(配列)とは?

853 名前:デフォルトの名無しさん (アウアウウー Sa4d-uVV9 [106.146.72.72]) [2022/07/07(木) 09:00:19 ID:hekaiUDAa.net]
>>833
JAVAは変換ミスです申し訳ありません。
option valueの値をそのままSQLに渡す事が出来ないとアドバイスもらいましたので、何とかSQLに渡す方法が知りたいです。
また渡したものと一致するデータをSQLで選別してJava scriptに返す必要があります。

コードは以下になります。
<option value="">年を選択</option>
<option value="op-a">2021</option>
<option value="op-b">2022</option>
</select>

<select name="op-a">
<option value="">2021グループから選択</option>
<option value="op-a-1">1</option>
<option value="op-a-2">2</option>
<option value="op-a-3">3</option>
<option value="op-a-4">4</option>
<option value="op-a-5">5</option>
<option value="op-a-6">6</option>
<option value="op-a-7">7</option>
<option value="op-a-8">8</option>
<option value="op-a-9">9</option>
<option value="op-a-10">10</option>
<option value="op-a-11">11</option>
<option value="op-a-12">12</option>
</select>

854 名前:デフォルトの名無しさん (アウアウウー Sa4d-uVV9 [106.146.72.72]) [2022/07/07(木) 09:04:47 ID:hekaiUDAa.net]
>>833
option valueの値をJSONを使い配列に変えた上でSQLに渡すことを考えておりました。

855 名前:デフォルトの名無しさん mailto:sage [2022/07/07(木) 09:57:05.64 ID:D+rw6Zs6M.net]
>>832
一旦落ち着いて、スレタイと>>1のテンプレを熟読しよう

その上で、一連のデータフロー(処理順序と各処理間のインタフェース)の中で「JavaScriptコードに担わせたい機能」をあらかじめ明確化した上で、「同機能の実装上の不明点・疑問点」を質問しよう

856 名前:デフォルトの名無しさん mailto:sage [2022/07/07(木) 12:45:33.04 ID:ywWcbjyb0.net]
例えば、Ruby on Rails みたいなMVC フレームワークなら、

<%= f.select :pet, [["犬", 1], ["猫", 2]], include_blank: "選択して下さい" %>

こういうselect ボックスで、猫を選べば、
データベース(DB)のpet列が、2 で保存される

多分フォーム送信で、value="2" がサーバーへ送られて、
Railsによって、自動的に整数型の2に変換されて、DBへ保存される

このように、Railsのようなフレームワークを使うと、
DBのテーブル構築とか、HTMLからDBの各列への対応付けも全自動

SQL 文を文字列で、自分で作ったりしない

857 名前:デフォルトの名無しさん mailto:sage [2022/07/07(木) 15:15:03.26 ID:1RhWyS0vd.net]
JavaScriptってクラス宣言も関数使ってるらしいけど、関数型言語なの?

858 名前:デフォルトの名無しさん [2022/07/07(木) 16:06:18.67 ID:8vD+8lwxa.net]
return {};

859 名前:デフォルトの名無しさん mailto:sage [2022/07/07(木) 21:11:15.45 ID:/kE53AS+0.net]
>>838
もとはschemeを参考にした関数型言語だったのをむりやり関数型言語っぽく仕立てたから
クロージャや部分適用は普通に使えるのに対し、thisやコンストラクタやメソッドはなんか
残念な仕様になった。

860 名前:デフォルトの名無しさん mailto:sage [2022/07/07(木) 21:11:55.11 ID:/kE53AS+0.net]
むりやりオブジェクト指向言語っぽく
だな。



861 名前:デフォルトの名無しさん [2022/07/07(木) 21:39:11.18 ID:TVMHA1kRr.net]
console.logが1つしか表示されないんですが、何が原因なんでしょうか?
//オブジェクトを定義するvarは受け取る際にエラーが起きそう再宣言のできるletを選択
let objA = {
// プロパティを定義
// キー: 値
year: "2021",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};
let objB = {
// プロパティを定義
// キー: 値
year: "2022",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};

//オブジェクトをまとめる
let allobj = Object.assign(objA, objB);

//JSON.stringifyとは、JavaScriptのオブジェクトや値などのデータをJSONに変換するための関数
let result = JSON.stringify(objA,objB);
//変数「result」に代入
console.log(result);

862 名前:デフォルトの名無しさん [2022/07/07(木) 21:40:14.54 ID:TVMHA1kRr.net]
JSON.stringifyをまとめても、let result = JSON.stringify(allobj);

console.logを2つにわけても2021のみ表示されて、2022がどうしても表示されないのですが、何か考えられる原因はありますでしょうか?console.log=JSON.stringify(objA);console.log=JSON.stringify(objB);

863 名前:デフォルトの名無しさん mailto:sage [2022/07/07(木) 21:56:36.52 ID:E4BLf8JX0.net]
>>840
ありがとう、理解しました
いちいちコンストラクタとか宣言する気起きなかったから良かった

864 名前:デフォルトの名無しさん mailto:sage [2022/07/07(木) 22:25:23.38 ID:1JorfJ+H0.net]
>>843
Object.assignは1番目の引数オブジェクトを直に2番目以降のオブジェクトのキー・値で上書きするものですよ

もしかして
let allobj = [ objA, objB ];
let result = JSON.stringify(allobj);

865 名前:デフォルトの名無しさん (オッペケ Srf9-cwmE [126.254.152.249]) [2022/07/07(木) 23:19:17 ID:TVMHA1kRr.net]
下記のようにしたら表示されるんですが、変数「result」に代入しておく必要があるため困っております。
let result =にobjA,objB別々にすることはできますでしょうか?

//オブジェクトを定義するvarは受け取る際にエラーが起きそう再宣言のできるletを選択
let objA = {
// プロパティを定義
// キー: 値
year: "2021",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};
let objB = {
// プロパティを定義
// キー: 値
year: "2022",
month: "1,2,3,4,5,6,7,8,9,10,11,12",
};

//JSON.stringifyとは、JavaScriptのオブジェクトや値などのデータをJSONに変換するための関数
console.log(JSON.stringify(objA));console.log(JSON.stringify(objB));

866 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 00:03:23.67 ID:PFDPpPXI0.net]
何がやりたいのかサッパリわからん

867 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 00:18:12.73 ID:hP3rbItM0.net]
>>842-843,846
マルチポストか
https://teratail.com/questions/u195apv1x9xtdv
せめてマルチポストのマナーを守れ
https://ja.meta.stackoverflow.com/questions/2418/

>>832,834-835もあなただと思うが、JavaScriptを学習する前にPHPの入門書買うのが先だと思うぞ
form送信するのなら、JacaScriptもJSONも必要ない
PHP側でGETもしくはPOSTでパラメータを受け取れば良い
PHPにはパラメータを配列で受け取る仕組みがあるからな

やりたいことから逆引きするのは止めて、入門書で基礎を固めるべき
回答もらっても理解できんのなら意味がない
回答もらえるだけの明確な質問内容を書けないのなら意味がない
突っ込みどころが多すぎる

868 名前:デフォルトの名無しさん [2022/07/08(金) 00:57:16.92 ID:baa8V49za.net]
>>848
アドバイスありがとうございます
マルチポストはすみません。

form通信ではなくSQLを使いアーカイブを表示させるためにプルダウンを作成しています。

Java scriptのオブジェクトでは配列を渡せないのでJSONでシリアライズしてPHPでデコードしてそれをSQLに渡します。
渡されたものから該当の記事を出力させ、PHPで JSONシリアライズした後にAJAXでJava scriptに送り返します。

869 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 01:59:04.54 ID:FyHcSsdCr.net]
teratailでのやり取りを見てても根本的に理解が足りてないのがよくわかる
プログラミング始めてどれぐらいか分からんけどもPHPとJavaScriptを組み合わせてどうこうするにはまだ早い気がする

870 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 09:14:14.28 ID:XXTPwuyz0.net]
>>832見てると、やり方調べてるうちに、不明点の迷路にハマってる気がする

まずは最低限の実装から順番に理解していかないと、解決するものもしないぞ
①WordPressのフロントエンド側からSQLを呼び出す
 ※SQLの内容は固定、ボタン一つで1つ結果が返ってくれば良い
 ⇒これだけならWordPressのコミュニティやサポートに聞けば解答が来る
②WordPressのフロントエンドからプルダウン経由(動的に値を変えながら)
  SQLを呼び出す
  ⇒これもWordPressのコミュニティで意見聞いてから、JavaScript側での実装を考えて確認
③以降も同じように実装領域に合わせて確認していく

プログラミングだといきなり最終系考えても
初心者だと実装の過程が滅茶苦茶になるから、まずはシンプルに考えた方が良い



871 名前:デフォルトの名無しさん [2022/07/08(金) 14:59:56.45 ID:XF8TEdVua.net]
>>851
アドバイスありがとうございます。
objAとobjBをボタンとしてクリックさせて、それをPHP側で$識別させることになるのでしょうか?

func btnCliked(
)
let objA=[{year:2021,month:[1,2,3,4,5,6,7,8,9,10,11,12],
}]

872 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 15:38:46.43 ID:NjcH7rpX0.net]
>>849
謝罪するならすべきことをやってくれ
https://ja.meta.stackoverflow.com/questions/2418/

form送信しないならどうやってデータを送る?
select要素時点で文字列になってるのに、なぜJSONに変換する必要がある?
PHPでどうやって受け取る?

この辺、ちゃんと質問に起こせてないから、質問内容が伝わらなかったり、基礎的な知識不足を指摘されるんだと思うがな

873 名前:デフォルトの名無しさん (ワッチョイ d15f-fVpq [14.11.8.0 [上級国民]]) mailto:sage [2022/07/08(金) 16:38:30 ID:XXTPwuyz0.net]
>>852
イメージ的にはそんな感じ
ただ>>853も言っているように、フロントエンド(HTML/JavaScript)とバックエンド(PHP)で
どうやってデータの受け渡しをしているのか、っていうのを理解できてないから
本当に入門書読んで勉強し直した方が良いと思うぞ

まずは本当にシンプルに
①Wordpress上でボタンを押して、固定値で値をPHP側に渡す(formのPOST通信)をする
②PHP側で値の受け取りが出来たかを確認する
③確認が出来たら、PHP側からJavaScript側に返り値を固定値で渡す
④WordPress上に返ってきた値を表示できるか確認する

とりあえず最低限の基礎的な動作を実装して、拡張するっていうやり方しないと
この先も大変な事になるぞ

874 名前:デフォルトの名無しさん (アウアウウー Sa4d-uVV9 [106.146.60.34]) [2022/07/08(金) 16:45:31 ID:FYSMny9Ka.net]
>>853
シリアライズするのはJavascript側から配列を渡せないからですよね?
PHPではJSONファイルをnode.jsで作成してそれをPHP側で取得→デコードしてSQLに渡す?でしょうか?

875 名前:デフォルトの名無しさん (アウアウウー Sa4d-uVV9 [106.146.60.55]) [2022/07/08(金) 16:52:48 ID:IP56XoY2a.net]
>>854
アドバイスありがとうございます。
たしかにSQLで記事の検索をかけるならわざわざJSONを使う必要ないですかね

876 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 17:48:25.41 ID:BhrsH9/Er.net]
>>855
これそもそもなんで配列を渡したいの?
見たところ年も月も複数選択できるわけじゃなさそうで「2022/6」とか渡せば済む話じゃないの?

877 名前:デフォルトの名無しさん [2022/07/08(金) 18:08:14.67 ID:iDDaPeaDa.net]
>>857
SQLから該当記事の検索をさせたいからです

RSSとSQLで交互にレイアウトを出力させているためSQLにどうしても配列を渡したいです

878 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 18:09:52.75 ID:RjBHtpmod.net]
PHPはめちゃくちゃHTMLやMySQLと親和性高いからJSは足りない部分補うのが

879 名前:蛯ノなるかな
多分他のサーバーサイド言語だとJSの活躍の場広がるんだろう
[]
[ここ壊れてます]

880 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 18:10:43.61 ID:XXTPwuyz0.net]
>>856
バックエンド側をどうやって実装するかにもよるけど
例えばSQLに必要な検索キーが1つだけなら、単体の変数でも良いし
複数あっても。渡し方は極端に言ったら自由だぞ?

とりあえず動かすだけなら、複数の値をカンマ区切りの文字列として渡して
PHP側でカンマでsplitかけたら配列として使えるようになるから
それこからSQL文に埋め込むとかでも良いし……

それこそJSON.stringifyとかも、JavaScript上の辞書とか配列を
JSONとして対応できるように文字列に変換してるっていう感じだから
応用みたいな使い方だな(PHP側でunserializeすれば辞書とか配列に復元できる)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify



881 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 18:16:53.33 ID:oRgFDmccr.net]
>>858
答えになってない
2022/6ではSQLで該当記事を検索できない理由を書いてくれないと
あと後半も意味不明

882 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 20:40:22.78 ID:NjcH7rpX0.net]
>>855
1, シリアライズする理由は何?
2. どうやってシリアライズしたデータをPHPに送るの?
3. マルチポストは完全無視?

883 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 20:46:54.00 ID:NjcH7rpX0.net]
>>855
> PHPではJSONファイルをnode.jsで作成してそれをPHP側で取得→デコードしてSQLに渡す?でしょうか?

そもそも、これサーバサイド側の処理になってる
クライアントサイドのJSとサーバサイドのPHPを連携させる話じなかったの?
Node.jsが出てくる理由も謎

884 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 21:15:58.38 ID:vEJej2ti0.net]
マルチポスト警察ウザ。

885 名前:デフォルトの名無しさん [2022/07/08(金) 22:52:34.37 ID:X5TUJXwua.net]
これあとでアドバイス貰ったんですがwordpressのSQLにJavascriptを流すって出来ないんですね
フロントデータの送受信が出来ないようなので、という事はwordpressでJavascriptは使えないってことでしょうか…

886 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 23:02:23.38 ID:8WwUcj98M.net]
いよいよ何を言ってるかわかんねえ

887 名前:デフォルトの名無しさん [2022/07/08(金) 23:07:34.08 ID:VQz+8WUxa.net]
>>866
wordpressのJSONをwordpressの SQLに流す事は不可能なようです。
どうやら過去にウイルスを流された事があるらしくAPI通信が遮断されているようです。

jQuearyなどでファイルをクッションにして無理やり送る事は出来ないんですかね…

888 名前:デフォルトの名無しさん mailto:sage [2022/07/08(金) 23:19:43.07 ID:8WwUcj98M.net]
>>867
SQLにJSONを流すってのがどういうことなのか具体的に説明してくれ
よそでアドバイスもらったんならそれもついでに示せ
あと上の方でもらってるレスをほったらかしにしないで返信しなよ

889 名前:デフォルトの名無しさん [2022/07/08(金) 23:26:57.20 ID:rnkihMoNa.net]
>>868
申し訳ありません。
2段階式年月プルダウンをfront-page.phpに設置しております。
そこからarchive.phpのデータベース(SQL)に送りたいです。
プルダウンでクリックされた月を元にSQLに渡したいのですが、片方がJavascriptである場合、wordpressはフロントデータの送受信が出来ない為成立しません。

これを回避する方法が知りたいです。

890 名前:デフォルトの名無しさん (テテンテンテン MM96-E42W [133.106.49.35]) mailto:sage [2022/07/08(金) 23:33:14 ID:v6YmQ/+dM.net]
会話も噛み合わないし最早全コード晒した方がはえーぞ
現状秘密にするほどの価値も無いだろうし



891 名前:デフォルトの名無しさん (アウアウウー Sa4d-uVV9 [106.146.61.244]) [2022/07/08(金) 23:36:09 ID:F1gZYOBca.net]
>>860
ボタンクリックが動的だとすると、JavascriptやjQueryから信号を出さないといけない気がするんですが、両方PHPで2段階プルダウンアーカイブ機能を作る事はできるのでしょうか?

892 名前:デフォルトの名無しさん (アウアウウー Sa4d-uVV9 [106.146.61.244]) [2022/07/08(金) 23:36:46 ID:F1gZYOBca.net]
>>870
wandboxでコードを書いて載せます

893 名前:デフォルトの名無しさん (ブーイモ MM96-SGcD [133.159.153.167]) mailto:sage [2022/07/08(金) 23:37:21 ID:8WwUcj98M.net]
>>869
>片方がJavascriptである場合、wordpressはフロントデータの送受信が出来ない為成立しません。
これが何言ってるかわからん
具体的なphpなりSQLなりのコードも出してみなよ
もう完全にスレ違いだけど

894 名前:デフォルトの名無しさん (オッペケ Srf9-cwmE [126.33.108.116]) [2022/07/08(金) 23:44:33 ID:LpFPYqzOr.net]
https://wandbox.org/permlink/Fal7HBABk3wT4fpd
archive.phpの170行目から2段階式プルダウン、339行目からSQLになります。

895 名前:デフォルトの名無しさん (オッペケ Srf9-cwmE [126.33.108.116]) [2022/07/08(金) 23:52:24 ID:LpFPYqzOr.net]
https://wandbox.org/permlink/ymaf7S1uQ92PbiP8
scriptエラーになってるので変更しました。170~270が2段階式プルダウンです。

896 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 00:02:51.10 ID:R84UyFQQM.net]
>>875
SQLは340行目だけ?
これのどこに画面で選択した年と月が関係するの?

897 名前:デフォルトの名無しさん [2022/07/09(土) 00:06:59.88 ID:cNMjwuhqa.net]
>>876
1.選択した年と月をJSONにして文字にシリアライズします

2.PHP側でJSONでシリアライズします

3.SQLに配列を渡します

4.Javascript側で結果をAJAXで受け取ります

これでプルダウン機能が動作します。
何か間違ってる事はありますでしょうか?

898 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 00:09:11.44 ID:5lHQxv9F0.net]
>>877
1と2で合計2回シリアライズしてるのが意味不明

899 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 00:11:14.44 ID:R84UyFQQM.net]
>>877
質問を変えるわ
>3.SQLに配列を渡します
このSQLで何を取得するつもりなの?

900 名前:デフォルトの名無しさん [2022/07/09(土) 00:18:11.07 ID:iVSPF+ILa.net]
>>878
シリアライズではなく正確にはデコードですかね

$変数に変えてからSQLに渡します



901 名前:デフォルトの名無しさん [2022/07/09(土) 00:18:52.21 ID:iVSPF+ILa.net]
>>879
SQLでwordpressのデータベースから該当する記事を出力してPHPで表示したいです

902 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 00:29:37.92 ID:R84UyFQQM.net]
>>881
該当する記事を取得するための検索条件は?
今は無条件でページングしてるだけに見えるけど

903 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 00:33:28.58 ID:5lHQxv9F0.net]
>>880
やはり…そうか
配列にしたいからJSONにしてるのか?

904 名前:デフォルトの名無しさん [2022/07/09(土) 00:44:35.23 ID:ifkPFCzpr.net]
>>882
もとはこちらでした。SQLに必死でこーどがきえております。
https://wandbox.org/permlink/fhJ2DJMkP50tbNRn

905 名前:デフォルトの名無しさん [2022/07/09(土) 00:45:00.56 ID:9ZaaLUbUa.net]
>>882
条件は日付と更新日です
日付だけでも良いのですが

906 名前:デフォルトの名無しさん [2022/07/09(土) 00:46:14.61 ID:ifkPFCzpr.net]
archive.phpの254行目からSQLを組んでいます。

907 名前:デフォルトの名無しさん [2022/07/09(土) 00:47:27.37 ID:E6hL7TiQa.net]
>>883
配列にしたいからですね

908 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 00:57:10.79 ID:R84UyFQQM.net]
>>885
>AND (post.post_date LIKE %s OR post.post_modified LIKE %s )
この部分?
これに配列渡すつもりでいるの?

909 名前:デフォルトの名無しさん [2022/07/09(土) 01:03:38.45 ID:TjvgNrJja.net]
>>888
$query = $wpdb->prepare($sql, "%$search_query%", "%$search_query%");

配列はこの部分ですね

910 名前:デフォルトの名無しさん [2022/07/09(土) 01:04:31.60 ID:TjvgNrJja.net]
ANDはwordpressのテーブルからカラムで条件を引いてます



911 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 01:08:11.05 ID:R84UyFQQM.net]
>>889
$search_query変数が配列?
$search_queryに具体的にどんな値が入ってる想定なのか書いてみなよ

912 名前:デフォルトの名無しさん [2022/07/09(土) 01:20:47.68 ID:R5/OxtTaa.net]
>>891
よく考えてみると$date_queryかもしれません。
検索は出てきたんですが、アーカイブが出てこなかったためsearch_queryにしてましたが…

913 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 01:26:28.50 ID:R84UyFQQM.net]
>>892
変数名はこの際どうでもいいよ
SQLにどんな値を渡したいのかが知りたいんだから

914 名前:デフォルトの名無しさん [2022/07/09(土) 01:28:08.76 ID:O/RwhBiHa.net]
php get_search_form(); で貰ったワードから検索ページのSQLは出力されています

アーカイブページもおそらくwordpressの既存のアーカイブをクリックしてSQLに繋がるはずです

この配列の渡し方もよく分かってない状態です…

915 名前:デフォルトの名無しさん (ワッチョイ 5e01-KYHT [111.188.56.5]) mailto:sage [2022/07/09(土) 01:31:51 ID:5lHQxv9F0.net]
>>869,877,880,887
要件
- front-page.phpにselect要素で年月のブルダウンメニュー設置
- front-page.phpの入力値をAjaxでarchive.phpにリクエスト
- archive.phpでパラメータを配列で受け取る

実装
1. front-page.php: のselect要素で配列にしたいもののname属性値に [] をつけておく
2. front-page.php: Fetch APIでFormDataをarchive.phpにリクエスト
3. archive.php: 受け取った配列を元にSQL文生成→クエリを発行→結果をJSONで出力
4. front-page.php: JSON.parse()して後続処理

SQLの下りはPHPの処理なので、ここでは言及しない

916 名前:デフォルトの名無しさん (ブーイモ MMfe-x9bc [133.159.153.167]) mailto:sage [2022/07/09(土) 01:39:36 ID:R84UyFQQM.net]
>>894
検索ページのSQLってのはsearch.phpの258行目からのこと?
こっちは$search_query変数はただの文字列でキーワード検索してるんじゃないの?

917 名前:デフォルトの名無しさん (アウアウウー Sac1-dkZz [106.146.61.98]) [2022/07/09(土) 01:45:04 ID:GEdQauyNa.net]
>>896
そうですね…

という事は$date_query=配列or変数で渡せば過去の記事をSQLで検索する仕組みになりますかね…

918 名前:デフォルトの名無しさん [2022/07/09(土) 01:52:27.26 ID:oGz1rKt0a.net]
>>895
- front-page.phpの入力値をAjaxでarchive.phpにリクエスト

についてお聞きしたいんですが、これはフロントデータの送受信にあたらないのでしょうか?
wordpressはJavascriptとjQueryから受け取ることも渡すことも出来ません

919 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 01:57:57.75 ID:R84UyFQQM.net]
>>897
だからなんで配列にこだわるの?
"%$search_query%"って使ってる以上配列は受けとれんでしょ
文字列変数で"%2021-01%"とかではあかんの?

920 名前:デフォルトの名無しさん [2022/07/09(土) 02:01:20.50 ID:bBBYb9fqa.net]
>>899
いえ配列である必要はないですが、SQLで検索する際に文字は無理だと思うので、一回デコードしてデータにする必要があると思います…



921 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:02:16.29 ID:5lHQxv9F0.net]
>>898
勿論、フロントデータだ
HTMLに書かれたselect要素に入力されたデータはクライアントサイドの情報だからな

WordPressがフロントデータを受信できないのなら、プルダウンメニューに入力された情報をWordPressで受け取る手段がないことになる
ブラウザを使えないようだから、サーバにtxtファイルをアップロードするとか、手段を変えるしかないのでは?

922 名前:デフォルトの名無しさん [2022/07/09(土) 02:07:50.54 ID:fbyrksNGa.net]
>>901
やはり1回クッションを挟む必要があるんですよね?

ただ厄介なのはSQLからも送れないことですねwordpressの SQLなので記事の情報を全てファイルに送ってそれを再度Javascriptに送り返す必要があります

923 名前:デフォルトの名無しさん [2022/07/09(土) 02:09:25.27 ID:fbyrksNGa.net]
皆さんアドバイスありがとうございます
とても勉強になりました

924 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:09:27.83 ID:R84UyFQQM.net]
>>900
>SQLで検索する際に文字は無理だと思うので
何を言いたいのか分からん
post.post_date LIKE '2021-01%'
って検索条件にすれば2021年1月の記事は検索できるんじゃないの?

925 名前:デフォルトの名無しさん [2022/07/09(土) 02:11:17.73 ID:fbyrksNGa.net]
>>904
直打ちは考えた事がなかったです…
たしかに可能かもしれません

926 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:13:21.75 ID:R84UyFQQM.net]
>>905
直打ちしろとは言ってない
文字列変数で済むだろってこと

927 名前:デフォルトの名無しさん [2022/07/09(土) 02:14:16.13 ID:fbyrksNGa.net]
>>906
文字列変数ですね、失礼致しました。

928 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:16:02.68 ID:R84UyFQQM.net]
あと君さ、物を知らなくて教えを乞う立場なのに~出来ません、~必要がありますとか断定形使うのやめようよ
君の知らない解決方法なんていくらでもある

929 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:21:08.51 ID:5lHQxv9F0.net]
>>902
1回クッションとは?

フロントデータを受け付けないとは、通信を受け付けないということ
そんなWordPressがあるなら、ブラウザでWordPressを閲覧することすらできない
前提がありえないと俺は思うけどね

あなたは通信周りの知識がかなり怪しい
PHPも明らかに基礎知識が不足してる
この課題は今すぐ解決は諦めて、入門書から始めるのが妥当なんじゃないと俺は思う

930 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:22:46.19 ID:R84UyFQQM.net]
>>907
で、SQLが配列やオブジェクトを受け取る必要がないなら画面からは年のselectから2021を、月のselectから1を渡せば済む話じゃないの?



931 名前:デフォルトの名無しさん [2022/07/09(土) 02:31:00.30 ID:Wx4GDmQ6a.net]
>>908
申し訳ありませんでした。
以後気をつけます。 []
[ここ壊れてます]

933 名前:デフォルトの名無しさん [2022/07/09(土) 02:33:37.34 ID:Wx4GDmQ6a.net]
>>910
たしかに渡す時は簡単な処理で良くなりそうですね

逆に渡す時はファイルを経由してAJAXが必要になりそうですが

934 名前:デフォルトの名無しさん [2022/07/09(土) 02:34:45.13 ID:Wx4GDmQ6a.net]
>>909
外部のJavascriptとjQeary限定ですので内部データは受け付けてるのではないでしょうか

935 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:35:31.13 ID:5lHQxv9F0.net]
> wordpressはJavascriptとjQueryから受け取ることも渡すことも出来ません

これが真実なら、>>877のAjaxがそもそも不可能だし、なぜJavaScriptスレで質問してるんだ?、という話になる

>>912ではAjaxが実装可能かのように書いてるし、説明がちぐはぐ

936 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:36:16.13 ID:R84UyFQQM.net]
>>909
完全に同意する
プログラミング全般についてもググって言葉はあれこれ知ってるけど
知識として吸収できてなくてそれらが繋がってないと感じる
こちらから伝えてることも正しく理解できてないだろう

これ以上続けても得るものも少ないだろうし何よりスレ違いだしここまでにしとく
長々とレスしてしまって申し訳なかった

937 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:38:54.67 ID:5lHQxv9F0.net]
>>913
WordPressから見て、内部データといえるのは、サーバ上に置かれているデータだけ

HTML,JavaScriptは外部データ
ブラウザで入力される文字列も外部データ

938 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 02:41:49.97 ID:5lHQxv9F0.net]
>>915
俺もこの辺で引こうと思う
お疲れ様

939 名前:デフォルトの名無しさん [2022/07/09(土) 02:48:31.51 ID:KXWHUUgBa.net]
>>916
朝起きてからwordpressの問い合わせフォーラムでもう少し詳しく聞いてみます

940 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 05:00:15.88 ID:Eo+xJyold.net]
完全にスレチ



941 名前:デフォルトの名無しさん (オッペケ Srdd-7sqz [126.33.127.222]) mailto:sage [2022/07/09(土) 08:04:40 ID:/eREX8sAr.net]
またあちこちに場違いで意味不明な質問をバラ撒いて場を荒らしていくのだろう

942 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 10:02:17.20 ID:Ed2YpxlV0.net]
プログラミングって「とりあえずやってみて、分からない所を調べる」
ってやり方すると信じられないぐらい余計に分からなくなるからな
体系的に一回勉強して全体のシステムイメージとか
実装のイメージとかがある程度掴まないとマジで意味不明な事をやりだす……

943 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 17:10:46.65 ID:al4zTytR0.net]
YouTube で有名な雑食系エンジニア・KENTA の初心者向けRuby on Rails サロンでは、
半年でポートフォリオを作って転職していく

KENTA は、PHP, Scala をオワコン認定した。
プロは今後、これらの言語で作らない

Rails以外では学習環境がないから、勉強できない。
本屋でWord Press の本を見たけど、ソースコードを書いているような本は無かった。
あるのはデザインの本ばかり

一方Railsなら、黒田努の3冊の本とか、パーフェクト Ruby on Rails、
Ruby on Rails 6 エンジニア養成読本とか、他の著者の本も何冊かある

Rails Guide, Rails チュートリアル、
YouTube のDean など一杯ある

KENTAのサロンには、日本6位の3千人が入っている。
1位はキングコング西野の数万人。
ガーシー・参政党なども、数万人ぐらいかな?

944 名前:デフォルトの名無しさん (ワッチョイ 7602-G37O [113.158.207.182]) [2022/07/09(土) 20:22:33 ID:pnXxhBAU0.net]
なんやかんや言いながら、突き放さずに細かくアドバイスしてる諸兄の面倒見の良さにホッコリしたわw

945 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 21:18:10.25 ID:cRLvSY3PM.net]
正直後悔してる
まず相手のレベルを見定めるのが重要

946 名前:セと悟った
理解できるレベルに達してない相手にアドバイスとか虚無以外の何物でもないわ
[]
[ここ壊れてます]

947 名前:デフォルトの名無しさん mailto:sage [2022/07/09(土) 21:42:04.17 ID:6TIrzOkD0.net]
いきあたりばったり感が前スレのYAGNIの人を彷彿とさせるな

948 名前:デフォルトの名無しさん mailto:sage [2022/07/10(日) 02:20:27.58 ID:4q1Imc8s0.net]
>>925
思想は同じだと思う

(A) 必要になったら調べる(体系的な学習はしない)
(B) 足りない知識は妄想で補完する
(C) 苦言は聞き流す

本人としては調べる時間を極限まで減らして効率的に学習しているつもりなのだろう
実際は理解できてなくて、無駄に学習時間を減らしてるだけだが

949 名前:デフォルトの名無しさん mailto:sage [2022/07/10(日) 11:37:41.66 ID:D2fk2WhOr.net]
まだプログラミング始めて間もないのかと思ったら1年とかやってるのか
https://teratail.com/users/homepage-site?feed=question

質問もいろいろアレだけど限界まで考えたとかあらゆる方法を試したとか言えちゃうのはすごいな

950 名前:デフォルトの名無しさん [2022/07/13(水) 14:00:11.96 ID:HJBy50kar.net]
一応方法はわかりました。
WordPressを通せばそれ自体がフロント動作をしてしまうので、
全部ぶった切って、APIとしての出力=VIEW
STDINを乗っ取ってWordPressの初期化経路を通さずに、
DBを使う



951 名前:デフォルトの名無しさん [2022/07/13(水) 15:08:50.99 ID:1epm7SNo0.net]
ここのスレの住人は自称プログラマーのアホ無職ばっかりだからマトモな回答は得られないよ

続きはコッチでやればいいよ。親切な達人プログラマーが懇切丁寧に教えてくれるから

Ruby 初心者スレッド Part 67
https://mevius.5ch.net/test/read.cgi/tech/1608837867/

952 名前:デフォルトの名無しさん mailto:sage [2022/07/13(水) 15:42:32.38 ID:dcWzCYhCM.net]
JavaScript の質問者をRuby板に誘導する無能あらわる

953 名前:デフォルトの名無しさん (オッペケ Srdd-KYHT [126.166.212.122]) mailto:sage [2022/07/13(水) 15:49:35 ID:deFlrBOmr.net]
>>928はWordPressの質問をJavaScriptスレで質問した質問者の手落ち
マルチポスト先を含めて多くの回答者の時間を無駄にさせた

954 名前:デフォルトの名無しさん mailto:sage [2022/07/13(水) 16:05:33.79 ID:rQQlyOmYM.net]
>>927見たら質問が増えててまだ配列をSQLに~とか言っててため息しか出ない

955 名前:デフォルトの名無しさん mailto:sage [2022/07/13(水) 16:26:27.80 ID:KuhsWpp+M.net]
rubyスレがスレチの質問で溢れかえる分には俺は困らんから好きにすればいいよ

956 名前:922 mailto:sage [2022/07/13(水) 18:08:13.50 ID:EtP8dxEe0.net]
>>922
に書いた

学習環境が無いもので開発したら、勉強できないから数年以上掛かる

一方、Ruby on Rails なら学習環境があるから、
半年ぐらいでポートフォリオを作れる

大切なのは何かを勉強する事ではなくて、勉強する方法を勉強すること!

どういうやり方をすれば、勉強・上達できるのか。
これが成長には大事。
企業が求める自走力。自分で探して解決する能力

だからKENTA が、Django, Laravel で作っても採用されませんと言うわけ。
技術選定で、Railsよりも、Django, Laravelを選んだ理由は何ですか? と聞かれる。
答えられないでしょ

単にこの香具師は、調べる能力がない・適材適所ではないと思われるだけ

957 名前:メールの質問者@時の旅人 [2022/07/13(水) 22:31:32.60 ID:Eqkp2lTo0.net]
>>921
僕のディスはそこまでにしてw

958 名前:デフォルトの名無しさん mailto:sage [2022/07/14(木) 20:00:33.34 ID:AABV7RLe0.net]
「とりあえずやってみる」の人によりけりだから、話が通じにくいね
入門書を一通りまねてみるってなら有りだろ
問題は、初心者がよい入門書を判別できない

959 名前:メールの質問者@時の旅人 [2022/07/14(木) 22:34:10.26 ID:0uPY6WX6M.net]
僕は、逆引きから入るのが良いかもしれないと思ってる人です。
やりたい事がタイトルになってて、サンプルコードも載っている書籍からプログラミングの入り口にちょうど良い気がしています。

960 名前:デフォルトの名無しさん (ワッチョイ 5e01-KYHT [111.188.56.5]) mailto:sage [2022/07/15(金) 10:12:59 ID:MQXq2CEo0.net]
>>929
Rubyセレでもスレ違いの質問は受け入れられないそうだ
https://mevius.5ch.net/test/read.cgi/tech/1608837867/462-



961 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 12:49:24.94 ID:QAgCXqq90.net]
すいません、
文書の中から決まったパターンに合致する部分を全部抽出して配列にしたいので、
matchと正規表現を使ったのですが結果が惜しいです…

a href="hoge"
の「引用符内のみ」を抽出したいので
let regexp = /a href="(.*?)"/;
と書いたのですが結果は
a href="hoge" と丸ごとごろっと抽出されてしまいます

普通にdocument.getElementsByTagName("a");でDOMアクセスすれば?
と思われるかもしれませんが、XMLhttpRequestで取得したテキストなのでできません


どなたかアドバイスいただけないでしょうか

962 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 13:03:11.91 ID:wjgru9qH0.net]
まずはそのコードを提示して

963 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 13:09:51.96 ID:U0JA+oIi0.net]
>>939
DOMParser使えば?

964 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 13:10:59.56 ID:QAgCXqq90.net]
こうでしょうか

 const loadText=//aタグが入ったhtml文書ならなんでも
let regexp = /a href="(.*?)"/g
let result = loadText.match(regexp);
console.log(result[0]);

965 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 13:11:37.96 ID:jpL8yKJIr.net]
>>939
正規表現でも出来なくはないが、DOMParserやinnerHTMLでDOMに変換するのが確実だと思うぞ

966 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 13:12:39.13 ID:5lTMvyOcM.net]
>>939
const targetText = 'aaa"bbb"ccc"ddd"eee"';
const quart = targetText.split('"').filter((e, i) => i % 2 && e != '');

これじゃダメかな?

967 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 13:17:54.06 ID:QAgCXqq90.net]
みなさんありがとうございます!

DOMパーサーってやつ使ったらできました!DOMParserすごい!
正規表現のやり方も後でためしてみます!

968 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 14:21:17.89 ID:R88kcvl50.net]
result[0] だから全部返ってきただけじゃね?

969 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 16:14:33.63 ID:zcNS1AQ+0.net]
>>942
let regexp = /a href="(.*?)"/g
console.log(result[0]);

let regexp = /a href="(.*?)"/
console.log(result[1]);

gフラグの有無で返り値が異なる
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

970 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 21:17:50.79 ID:Fj+O5aYq0.net]
>>945
・属性値がダブルコーテーションで括っている
・属性値内のダブルコーテーション、<>がエスケープされている

上記条件を満たすならば、
/<a\s[^>]*href\s*=\s*"([^"]*)"/i.exec('<a class="foo" href="bar.html">')[1]; // "bar.html"



971 名前:デフォルトの名無しさん mailto:sage [2022/07/17(日) 22:54:51.79 ID:xCeiI5nR0.net]
キチャナイ

972 名前:デフォルトの名無しさん (ワッチョイ cd59-Vb2/ [150.246.105.131]) mailto:sage [2022/07/18(月) 19:41:18 ID:Te2cv+NU0.net]
javascriptで金稼げますか?(´・ω・`)、、、

ストップウォッチ

973 名前:デフォルトの名無しさん mailto:sage [2022/07/18(月) 20:26:01.15 ID:Te2cv+NU0.net]
とりあえずやりたいことは地図のヒートマップを作ることです
https://todo-ran.com/t/kiji/11846
こんなのはリアクトで作れますかね

974 名前:メールの質問者@時の旅人 [2022/07/22(金) 00:25:43.27 ID:j2plnp0L0.net]
>>951
スレッドストッパー力半端ないですねw

975 名前:デフォルトの名無しさん [2022/07/25(月) 17:18:57.58 ID:SC3zs6/n0.net]
初歩的な質問で申し訳ありません
英単語学習用のタイピングゲームを作ってましてその要素が1000ほどあるのですが
csvからランダムに取り込むことは可能でしょうか?
やはり一度コードに記述した方がいいのでしょうか?

976 名前:デフォルトの名無しさん mailto:sage [2022/07/25(月) 17:26:43.95 ID:mBcdUBse0.net]
当然だけどローカルのファイルを直接は扱えない
input fileなどでファイルを指定してそれを解読することは可能だが
ゲームみたいなデータなら予めそのデータをコードにしておいた方が良いだろうね

977 名前:デフォルトの名無しさん mailto:sage [2022/07/25(月) 17:31:13.98 ID:pUxwYfAFM.net]
>>953
もちろん可能
どういうアーキテクチャで実装したいのかによってやり方が違ってくる

978 名前:デフォルトの名無しさん [2022/07/25(月) 17:47:36.16 ID:SC3zs6/n0.net]
>>954
ありがとうございます
やはりコードにしておいた方がいいのですね
レベル分けで3セクションに分けて記述してみます。

979 名前:デフォルトの名無しさん [2022/07/25(月) 17:49:54.22 ID:SC3zs6/n0.net]
>>955
ありがとうございます
できるんですか??
簡単な自己満ゲームなのでブラウザ上で動けば問題ない感じです。

980 名前:デフォルトの名無しさん [2022/07/25(月) 20:08:35.78 ID:wW8PXS4e0.net]
>>953
ぜひ完成させてください。
遊んでみたいです



981 名前:デフォルトの名無しさん [2022/07/25(月) 20:32:00.49 ID:SC3zs6/n0.net]
>>958
ありがとうございます
いま、英語の大文字が反応しなくて困ってます。
条件式でシフトを押しながら入力する記述をすれば良いとのことですが、具体的にどんな風に書けば良いでしょうか。

982 名前:デフォルトの名無しさん [2022/07/25(月) 20:34:39.14 ID:SC3zs6/n0.net]
あと、アポストロフィも認識できるようにしたいのですがご教示くださると幸いです。

983 名前:デフォルトの名無しさん mailto:sage [2022/07/25(月) 20:38:46.87 ID:2fvgenPbr.net]
ブラウザの方がcsvにランダムアクセスするのかえって面倒な気がするが・・・

984 名前:デフォルトの名無しさん [2022/07/25(月) 20:42:57.38 ID:SC3zs6/n0.net]
>>961
ありがとうございます。
ちょっと時間かかりましたがコード内の配列に記述しました。

985 名前:デフォルトの名無しさん (オッペケ Sr0f-k5OS [126.205.247.4]) mailto:sage [2022/07/25(月) 21:20:37 ID:2fvgenPbr.net]
>>959
具体的なアドバイスが欲しいならせめて今どういうコードになってるのかぐらい貼ろう

986 名前:デフォルトの名無しさん (ワッチョイ 5f2c-ofYn [180.44.59.188]) mailto:sage [2022/07/25(月) 22:38:29 ID:gTrk2zFk0.net]
漏れは、英単語テストのアプリを作っているけど、
word.json ファイルに、中高生の単語を書いて、それを読み込むようにしている

[ ["accept","…を受け入れる" ],["achieve","…を達成する" ] ]

ブラウザ用のモジュールで、CSV を使えるものもある?
サーバー用のモジュールなら、あるだろうが

987 名前:デフォルトの名無しさん (ワッチョイ 5301-EENC [114.48.57.70]) mailto:sage [2022/07/26(火) 01:47:59 ID:URJV9HvJ0.net]
>>964
https://www.google.com/search?q=javascript+csv+parser+-node.js+rfc-4180

988 名前:デフォルトの名無しさん [2022/08/06(土) 22:44:05.88 ID:q9NAcyW50.net]
<img src="./test.png" id="test">
これにjsであとからリンクをつけるにはどうやったらいいですか?
htmlで書くと<a href="../"><img src="./test.png" id="test"></a>
のようにです

989 名前:デフォルトの名無しさん mailto:sage [2022/08/06(土) 23:00:00.17 ID:0QdRcuux0.net]
test.outerHTML = `<a href="../">${test.outerHTML}</a>`

990 名前:デフォルトの名無しさん [2022/08/06(土) 23:18:20.35 ID:q9NAcyW50.net]
>>967
ありがとうございます。
$はどういう意味ですか?



991 名前:デフォルトの名無しさん mailto:sage [2022/08/06(土) 23:23:20.66 ID:0QdRcuux0.net]
テンプレートリテラルで調べてください

992 名前:デフォルトの名無しさん mailto:sage [2022/08/06(土) 23:59:57.44 ID:BqHdFQKs0.net]
jQuery なら、

<img src="test.png" id="test">

$( function ( ) {

993 名前:
// 画像リンクを作る。$( 子 ).wrap( 親 );
$( "#test" ).wrap( "<a href='index.html'></a>" );
} );

変換後
<a href="index.html"><img src="test.png" id="test"></a>
[]
[ここ壊れてます]

994 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 00:08:55.51 ID:KRzr0Ia80.net]
PHPでもこんな書き方あるよね

995 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 00:23:34.07 ID:0Ezlk0yu0.net]
PHPはオワコン。
それに初心者には難しすぎる

初心者はRubyから始めるべき

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

996 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 03:30:30.75 ID:5+LGzHnw0.net]
質問です。仕事の業務を効率化したいです。
とあるサイトにログインし、
そのページにある 「30個のボタン」 をクリックするという作業を毎日しているのですが、30回クリックする作業を簡略化したく、方法を模索しています。
 (30個のクリック後の動作はそれぞれ
 「斎藤さんにメールを送る」 「田中さんにメールを送る」
といった感じのものです (例:send_TANAKA、send_SAITOU…)
 (↑クリック後の動作は 必ず send_ という文字列から始まります)
 (斎藤や田中といった名前は100人以上の会員名からランダムに選ばれています)

chromeのデベロッパーツールで
クリックした後の動作を コンソールで直接実行すれば可能であるのは分かったのですが (send_TANAKA 等と直接コンソールに記述する)
30個のclick動作を記述するのは手間がかかるため
もっと効率のいい方法を探しております。どなたか知恵を貸してください。
 sendという文字列を含む命令を30個探し、それらを上から順番に実行する、といったことをコンソール上で実行したいです

997 名前:デフォルトの名無しさん [2022/08/07(日) 03:47:36.25 ID:Zc4u6CYP0.net]
ボタンをクリックすることとJavaScriptの関係が書いてないうえに、ボタンをクリックすると何が起こるのかさえ書いてない。

何をどう答えろというのか?

998 名前:デフォルトの名無しさん [2022/08/07(日) 03:48:21.96 ID:Zc4u6CYP0.net]
>>973
それ広告か?

999 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 06:59:14.67 ID:gU8eDduE0.net]
メタプログラミングか?

文字列で、関数名を作って呼び出す?

1000 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 07:16:41.96 ID:6UBQvGhh0.net]
ブラウザを自動で操作するってやつでは?



1001 名前:デフォルトの名無しさん [2022/08/07(日) 09:40:14.60 ID:zWsPVUqF0.net]
趣味でJavaScript(vscode+nodejs)を勉強してます。
まだよく分からなくて色々なサイトを巡りながら理解を深めているのですが実際何が分からなのか分からない状態です。
初心者向きのサイトを参考にせず入門書を1冊買った方が良いですか?
自分が今参考にしているサイトは

https://www.tohoho-web.com/js/
https://developer.mozilla.org/ja/docs/Learn/JavaScript

です。

1002 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 10:56:23.83 ID:TS5TGpUB0.net]
>>978
「とほほ」は情報が古いのでやめたほうがいい
MDNはMozilla運営で一定の信頼性があるので、9割程度は信用していい(100%とは言わない)

MDNは入門向けコンテンツが少ないので入門書を買ったほうが勉強しやすいとは思う
買うなら外国人が著者の翻訳本をお勧めする
日本人が著者の本を何冊か持ってるが、信頼性が低い本が大半といわざるを得ない
オライリーとか一定の文量がある書籍がいいと思う

1003 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 10:59:45.46 ID:zWsPVUqF0.net]
>>979
レスありがとうございます。
外国人が書いた翻訳本買って勉強してみます。

1004 名前:デフォルトの名無しさん [2022/08/07(日) 11:19:44.72 ID:3UJQLJGZ0.net]
でもその日本語訳の信頼性はどうなのじゃ?

1005 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 11:24:56.82 ID:zWsPVUqF0.net]
何度もすいません。
甘え承知で教えて頂きたいのですが具体的におすすめの本ありますか?
自分は業務(組み込み系)でC/C++言語をやってました。

1006 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 11:27:46.08 ID:JhpYRoYbr.net]
Amazonで評価高いの買えばいいのに
まず評価みれるようになったらどうか

1007 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 11:31:03.03 ID:zWsPVUqF0.net]
>>983
Amazonで評価の良いのってやっぱり良いですか?
Amazonの評価はあまり信用なくて5chでこちらの方々なら色々と精通されているので聞いてみますした。

1008 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 11:52:14.01 ID:JhpYRoYbr.net]
>>984
評価がいいかどうかも他人に判断させるのか
どうせ見てもいないんだろうが

1009 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 12:30:19.38 ID:TS5TGpUB0.net]
>>982
俺は古い人間だから今の時代に合った入門書は知らない
昔はテンプレに定番書籍が載ってたが、今は保守する人間かいなくてテンプレからも消えたしな

とはいえ、JavaScriptは後方互換性のある言語なので、昔の書籍が使えないわけではない
最新情報はネットで補完するとして、お勧めするなら次の2冊

- DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~ (Web Designing BOOKS)
- JavaScript 第7版

JavaScriptで抑えるべきは「ECMAScript」、次に「DOM」
DOM Scripting 標準ガイドブック はDOM中心だが、ECMAScriptにもある程度触れて平易な説明なので入門書向き
基本的なAPIのみしか載ってないので、高度なAPIはMDNとDOM仕様書で補完する

「JavaScript 第7版」は中上級者向けだが、一番重要なECMAScriptについてしっかり解説してくれる
ECMAScriptを詳説してる書籍は少なく、一冊持っておくと大概の疑問は解決する
足りない部分はMDNとECMA仕様書で補完する

1010 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 12:38:51.93 ID:zWsPVUqF0.net]
>>986
ご親切にありがとうございます。
参考にさせて頂きます。



1011 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 12:47:45.09 ID:TS5TGpUB0.net]
>>983
Amazonの高評価と俺の評価は一致しなかったな
例えば、「パーフェクトJavaScript」は概ね良書と認知されてるが、細かい部分で説明に疑問に思う点が散見されて、仕様を確認しながら読んだら疲れてしまった
出版社レベルで見ると「オライリー >>> 技術評論社」の印象
Amazonを参考にしつつ、書店で実物を手にとって確認すればいいんだが、入門者に確認できる方法じゃないんだな
初心者は入門書を選ぶのが非常に難しい

1012 名前:デフォルトの名無しさん (ワッチョイ 3f01-RMnj [36.240.123.227]) mailto:sage [2022/08/07(日) 13:13:16 ID:TS5TGpUB0.net]
>>982,987
スコープが狭いが、Promiseは下記とMDNでほぼ解決する

JavaScript Promiseの本
https://azu.github.io/promises-book/

著者は日本人だが、数少ない信頼できる人だ
同じ人が書いた「JavaScript Primer」はESレベルで読むと疑問に思う説明がいくつかあるが、確度は高い方だと思う
「Promiseの本」は文句なしにお勧め出来る

---
実際のところ、すべてに満足する書籍はまずない
書籍は体系的な知識を蓄えるまとめて得られるのがいいのであって、最新かつ確度の高い情報は公式サイトの「仕様書」のみ
「MDN」から「仕様書」を辿れるようになったら、書籍の利用頻度は下がる傾向にある

当然だが、読むだけでは身につかないから、書籍から学んだ内容から、コードを書いて、動作を確かめることは最重要
初心者を自認する質問は何も確かめないで質問するタイプが非常に多い(このスレの質問者も大半がそう)
普段からコードを書いて確かめる癖をつけたほうがいい

1013 名前:デフォルトの名無しさん (ワッチョイ 8f10-NH+6 [180.50.203.130]) mailto:sage [2022/08/07(日) 13:27:02 ID:zWsPVUqF0.net]
>>989
本当にご丁寧に提示して頂き本当にありがとうございます。
そちらのサイトも参考にしてコード書きながらJavaScriptの勉強頑張って行きます。
本当にご親切ありがとうございました。

1014 名前:デフォルトの名無しさん (オッペケ Srff-xtT/ [126.33.99.231]) mailto:sage [2022/08/07(日) 13:27:06 ID:JhpYRoYbr.net]
>>988
つまりお前の評価が正しいというわけか?
何よりも自分で判断できる能力のほうが重要だろ
読んでみてお前のように疑問を持つことが大事なのになぜかそれを示さない

というわけでコイツは他人の意見だけで動くからお前が一生教えてやればいい

1015 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 13:51:00.89 ID:zWsPVUqF0.net]
>>980を踏んでしまったので新スレを立てようと思いましたがエラーが出てしまいスレを立てることが出来ませんでしたのですいませんがどなたか新スレお願いしますを

1016 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 16:06:09.09 ID:TS5TGpUB0.net]
>>992
立てた

JavaScript の質問用スレッド vol.125
https://mevius.5ch.net/test/read.cgi/tech/1659855460/

1017 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 16:33:46.15 ID:TS5TGpUB0.net]
>>991
質問者にとっては、俺もお前もAmazonレビュアーも赤の他人
「誰が正しいか」は質問者が判断すればいいことだ
俺にできるのは、初心者時代に読んで今振り返っても役に立った本を紹介することだけだ

俺が主張してるのは、初心者にとってはAmazonレビューの正しさをはかる指標がないということだ
中級者以上の俺でさえ、レビューから正しさを正確にはかるのは不可能だ
俺に出来るのは書店で実物をとって自分の知識と本の内容を照らし合わせることだけ
お前は「Amazonで評価高いの買えばいいのに」というが、赤の他人のレビューが信用出来るのか?
初心者でも信用性をはかる方法があるなら、まずはそれを示すべきだろう

付け加えると、初心者に内容の正しさを判断出来るはずがないので、初心者のレビューは信用に値しないと俺は考えている
入門書を読んで数年たって、もう一度入門書を読み直した後にレビューを書くなら、ある程度は信頼出来るだろう
そこまで時間をかけてレビューを書く人はほとんどいないと俺は思うが

> 読んでみてお前のように疑問を持つことが大事なのになぜかそれを示さない

疑問を持つことは大切だが、信頼できる判断材料が必要だ
信頼出来ない情報源(Amazonレビュー)では考えることすら出来ない
無理筋の方法を提案しても意味がない

1018 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 20:29:17.22 ID:JhpYRoYbr.net]
>>994
他人の評価は信頼できなくてお前だけがなぜ信頼できる判断なんだよw
お前何様?

1019 名前:デフォルトの名無しさん [2022/08/07(日) 22:46:56.17 ID:p4VkSvXn0.net]
長文書く奴大体馬鹿

1020 名前:デフォルトの名無しさん [2022/08/07(日) 23:15:25.18 ID:r7YsBDkd0.net]
技術評論社はあまり良い印象がないな。
どうしても必要な時を除き、買わないよう心掛けたほうが良いと思う。



1021 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 23:29:45.93 ID:gU8eDduE0.net]
この2冊のサイの表紙のサイ本は初心者用ではない。プロ用

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

パーフェクトRuby、パーフェクト Ruby on Rails などのパーフェクトシリーズもプロ用

これらは、YouTube で有名な雑食系エンジニア・KENTA の初心者向けRuby on Rails サロンでも使わない。
こんなプロレベルの勉強をしていたら、半年でポートフォリオを作って転職できない

初心者用は、ドットインストール・progate などで、基礎だけサッと学ぶ

深入りしたら切りがない。
それに難しい割には、使用頻度が低い

1022 名前:デフォルトの名無しさん [2022/08/07(日) 23:35:07.06 ID:r7YsBDkd0.net]
技術評論社は、そういう偏った見解が多いよね。
誌面で個人叩きも多いし。

1023 名前:デフォルトの名無しさん mailto:sage [2022/08/07(日) 23:41:06.98 ID:KRzr0Ia80.net]
1000ならnodejsしか動かない世界

1024 名前:1001 [Over 1000 Thread.net]
このスレッドは1000を超えました。
新しいスレッドを立ててください。
life time: 270日 8時間 16分 43秒

1025 名前:過去ログ ★ [[過去ログ]]
■ このスレッドは過去ログ倉庫に格納されています






[ 新着レスの取得/表示 (agate) ] / [ 携帯版 ]

前100 次100 最新50 [ このスレをブックマーク! 携帯に送る ] 2chのread.cgiへ
[+板 最近立ったスレ&熱いスレ一覧 : +板 最近立ったスレ/記者別一覧](;´∀`)<334KB

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