+ JavaScript の質問用スレッド vol.141 +
レス数が1000を超えています。これ以上書き込みはできません。
JavaScriptの質問スレ。次スレは>>950が立てる事
■ 質問者向けルール
・メール欄は空欄にしてIDを出す事
・テンプレ使う方が回答率が高い。使用は自由
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問・回答以外は他所で
・分からない単語は無理に使うな
■ 質問テンプレート
【何をどうしたいか】 簡潔に
【jQueryがNGかどうか】 jQuery使いたくなければ「NG」と記述。
【サンプルコード】以下シミュレートサイトを利用の事
http://jsbin.com/ http://jsfiddle.net/
■ 回答者向けルール
・煽り、批判に意味はない。代案を出せ
・多様性を忘れるな。クソコード、クソ環境が好きな土人も世界にはたくさんいる
・HTML・CSSで実装しても良い
■ 参考URL
jsリファレンス https://developer.mozilla.org/ja/docs/Web/JavaScript
jQuery 便利ライブラリ。wordpressには標準で組み込まれている http://jquery.com/download/
AngularJS フレームワーク https://angularjs.org/
Node.js フレームワーク https://nodejs.org/ja/
threejs 3DCG用ライブラリ http://threejs.org/
■ 前スレ
https://ff5ch.syoboi.jp/?q=JavaScript%E3%80%80%E8%B3%AA%E5%95%8F%E7%94%A8 JavascriptでDataTablesが使われているときに
左上のselectをTampermonkeyから自動でselectedにしても
表が更新されません。
どうすればいいのでしょうか。 let ooo={a:"hoge", b:"huga"};
let c = ooo?.a;
としたときの'?'は何んと言いますか そしてその働きはどのようなものですか おけ https://tc39.es/ecma262/#prod-OptionalChain
Optional Chainingという構文で、foo?.barはfoo.barと似た動作をしますが、
fooがnullやundefinedのときはエラーにならずに結果がundefinedとなります。
なる WEB components の質問
https://pastebin.pl/view/b2947a05
で、id="NG" のタグがうまく(id="OK"のように)レンダリングできないのは仕様？
仕様なら、どこを見れば載ってる？ OKの方は既にDOMに追加されてるのでコンストラクタが呼ばれた時には中身のtextContentも存在するけど
NGの方はtest-elemがcreateElement相当された時点でコンストラクタが呼ばれるのでまだ中身は無いという単純な話だが
仕様のどこにあるかは知らん >>9
HTMLの読み込みで
OKのほうは読み込んでいたノードに対する適用
NGのほうは読み込みながら適用
これに差が出るってのはどうなんでしょう？
という疑問はやはり拭えません
で、関係はしていますが別の質問です
属性は変更イベントを受け取れますが、textContentだとユーザー入力でない変更なのでchangeイベントも発生しません
今はtextContentは諦めて属性に逃げてますが、イベントがあれば問題は解決します
なにかイベントありませんか？ >>10
自力で部分的に解決
MutationObserver で childList を監視させると取れます
chrome, edge なら！
firefox ... MDNで読んだのになんで？
救われることに、firefox は connectedCallback で取れたりするんですが、
まさかのブラウザ依存が…… >>11
connectedCallback で監視開始の observe() を呼んでいたため、
firefox だけは DOM に突っ込む前に textContent が設定されていたためイベントを拾えなかった
ということに気付きました
お騒がせ申し訳ない
https://pastebin.pl/78eec28c VScodeについての質問なんですが……
delete this._observe;
と、オブジェクトのプロパティを削除しようとしているのですが
';' が必要です。ts(1005)
とのエラーになります
ファイルは普通の js (ES6) なのに TypeScript として lint が走っているように見えます
拡張機能は日本語パックと Go と Markdown 関係しか入れていないつもりですが、知らないだけで TypeScript 関係まで入っているかと思います
どの設定が悪さをしているのか分かりませんでしょうか？ >>14
クライアントのスクリプトなのでリソース扱いであり
支障はないと言えばないのですが、気持ち悪くて 「vscode linter 設定」とかで、検索すれば？
それか、プログラム板のVSCode のスレで聞くとか？ >>17
TypeScript の設定を見ろという記事を見つけて、
設定をすべてオフにしたら出なくなりました その場しのぎではなく、きちんと拡張子に応じた動作をするよう設定しないとまた後で困るぞ 一時的なノードを作ってインナーテキストを全選択してコピー→削除
というコードを仕込んでるんですが文字化けして困ってます
別のブログとかでも試したのですが1つのサイトだけで起こるんですよね
何が原因なんでしょうか・・ >>21
metaとかscriptタグのcharset属性のことで合ってます？
そこら辺は大丈夫そうなんですよね・・
JSのコード内でエンコード指定するというのはやり方がわからないです コードもサイトも公開せずに質問しても誰も答えてくれないよ
まずは再現可能な最小限のコードを公開する努力をして 画面の上部に常時表示される角丸のメニューを、
ディスプレイに嵌る場合はなるべく一杯上に嵌めたいです。
どのようにディスプレイの角のパスを取得して計算することができますでしょうか？
１．ぴったり嵌るときはぴったり表示する
２．鋭角過ぎるときは、上に詰めて角を余らせる
３．鈍角過ぎるときは、横で引っ掛けて上を余らせる
どうぞよろしくおねがいします 私が試したこととしましては、角を無視して表示するモードにして、
角の境界見込み位置で1pxだけ反転させたり点滅させたりして、
ユーザーが気になって触れば角からその点は外れているとして統計を取りましたが、
iPhoneXRなど、既にマップがよく分かっているものを
1px単位で実際に見える範囲を突き止めるのには使えそうでしたが、
マイナーな機種だと数が集まらず難しそうでした >>22
JS は、UTF-8 だけじゃないの？
他のエンコードなんてあるのか？
HTML が、sjis とか、保存したファイルが、sjis とかで、
エンコードの不一致が起きているのかも
最近は知らないけど、5ch も、sjis じゃないの？ jsはunicode
幾つで分割するかは指定はない
文字列は16 確かに、単純にString取り扱う場合でもutf16だから、サロゲートペアとかで化けてる可能性もあるよねー。
ガチで文字コードとやり合うなら、TextEncoderは対応UTF8だけになっちゃったよね。TextDecoder使えば一応、ガチにutf8以外でもデコード出来るかもだけれど、商用で使うにはまだ怖い感じ？
https://developer.mozilla.org/ja/docs/Web/API/TextDecoder
html読みこんでDOMにパースしてる場合、文字コードはBOM、HTTPヘッダでも指定可能だから、その辺のチェックも面倒臭いよね。 JSの問題じゃない
JSには直背データをやり取りする仕様はない
JSのコードも書かれている物が直接評価されるわけではない
エンジンが直接ファイルを開くわけではない
その前にブラウザだったりオーナーが適切にデコードしたものが渡ってくる
そこの問題だからJSでどうこうしようと考えるのが間違い chromeのデベロッパーツールのコンソール画面で、例えば「window」と打ち込むとでてくる要素を
chrome extensionで使うjsで取得したいのですが可能でしょうか？
jsの方で単純にwindowを取得しても別物になってしまいます >>31
コンテンツスクリプトからwebページにscript要素作ってスクリプト注入
注入したスクリプトとやり取りしたいならpostMessage、カスタムイベント、隠し要素等を使う
Firefoxなら非標準だけどwrappedJSObjectとかもあるんだけどね 質問文でググったら詳細で具体的な方法がいくつも出てくるのに
こんな短文でしかやり取りできないところでわざわざ聞く意味な せやな、イヤだからイヤと言ってるだけ。
なんどもイヤと言い続ける
イヤと言われるのが嫌なら見なきゃ良いじゃんｗ >>38
お前大丈夫か？
なんでググらないの？と疑問を呈しているだけ
もとい、質問文でググったら案外分かるよというアドバイスを
率直に言うのも2chらしくないのでちょっとひねくれて面白く書いただけで
嫌もクソも無いんだが ＜script
document.addEventListener('DOMContentLoaded', function() {
var mql = window.matchMedia('(max-width: 780px)');
function checkBreakPoint(mql) {
if (mql.matches) {
実行1
} else {
実行2
}
}
mql.addListener(checkBreakPoint);
checkBreakPoint(mql);
});
＜/script
こんな感じのやつをコピペしてもってきたんですが
ウィンドウサイズを変更すると780pxの境目で実行1、2がちゃんと実行されます
最初から780px以下の状態でページを表示したときに実行1が動くようにするにはどうすればよいのでしょうか AudioWorkletで鳴らす音がどうやってもぶつ切りになる
process()で処理されるサンプルが綺麗に繋がらんのだが
どうやれば隙間無く繋げられるのか 仕様がまだワーキングドラフトじゃん。
ブラウザベンダもまだまともに実装してないだろ。 >>46
ぶつ切りになって正解
オーディオエンジンもハードもしっかりしてて
不意な他プロセスの横やりも入らない
コンシューマーゲームでも音飛びすることはあるでしょ
ならブラウザでリアルタイムに再生する音が
どうしてぶつ切りにならないと思うの？
難しく考える必要はない。ぶつ切りには絶対になる
ならないほうがおかしい。
もしどうしてもなるべくそうなってほしくないなら、
リアルタイム性を犠牲にしてバッファを増やせばいいだけ
バッファを増やせば増やすほどリアルタイムは損なわれるが切れにくくなる
それ以外に良い方法など一切無い。 質問いいですか？
ボタンを押したら、ヘッダーに認証情報を設定して、別サイトに画面遷移する仕組みを作りたいのですが、どのようにすれば実装できるでしょうか？
XMLHttpReqest使えば、通信は送れるけど画面遷移できない事まではわかりました。
2つのシステムを連携する仕組みで必要なんですが …そりゃそうだ。ありがとうございます。
頭にその発想が全くありませんでした >>50
駄目でしたぁ…帰ってきたhtmlを、window.openして、document.write(戻り値)で、書き込み。
ページは表示できるけど、urlは元ページから変更されない為、相対パスで記載されてるjsをロードできずエラー。 サブウィンドウ開いた後、url変更しても
document.writeした時点で、呼び出し元のurlに戻ってしまう。
何か方法ないでしょうか？ むしろ別サイトの画面から、CORS使って別サイトからのアクセス許容させた認証サイトにPOSTしてトークン貰ってきたらどうだろうか？ aaa.jp サイト名1
bbb.com サイト名2
↑html内にこういうリンクとサイト名があった時
↓htmlを実行した時にだけこういう風にプルダウンメニューで自動でタグ挿入するjavascriptはどう記述すんの
<select>
<option value="">リンク
<option value="aaa.jp">サイト名1
<option value="bbb.com">サイト名2
</select>
optionタグ大量に記述するより開いた時にだけ挿入する方がソーススッキリするし <select id="">
<option value="sitelinks">リンク
</select>
<スクリプト>
const links = [
['aaa.jp', 'サイト名1'],
['bbb.com', 'サイト名2'],
];
document.querySelector('#sitelinks').innerHTML += links.reduce((acc, [url, name]) => acc + `<option value="${url}">${name}`, '');
</スクリプト>
なんかスクリプトタグで書き込みエラーなったみたいだからカタカナで。 質問いいでしょうか。当方、かなりのJavaScript初心者のため、質問の意味が分かりにくかったらすみません。
スマホ上で、図のようなドーナッツ型の要素の上を①から順に指でなぞり、一度も画面から指を離さずに③までなぞったら背景色が変わる、⑥までなぞったら背景色が変わる、一周して①まで戻ったら別ページに飛ぶ(斜線部にはみ出たらだめ、最初からやり直し)というものを作りたいのですが、可能でしょうか。
touchmoveイベントで、①から⑧までの通過点を指定して、それらの通過点まで来たら何か起こるようにする、ということは出来ますか。
もし分かる方がいたら、教えてもらえますか。よろしくお願いします。https://i.imgur.com/XLq3URL.jpg できません。
スマホの基本はボタンを画面に並べてそれを押してもらうことです。
まず、小さな画面のラインを精密になぞり続けるというのが不可能な人間が大勢います。
そして、世の中にはそれをWebで実行するだけのハード性能と精度を備えていないスマホが大量にあります。
日本で人気のあるスマホは大画面で特別高スペックなので勘違いしがちですが、
スマホでそのようなことを考えることがそもそもナンセンスです。 基本なんか聞いてません。
ジジイのUX論なんか聞いてません。
発展途上国のことなんか知りません。
分からないなら黙って発展途上国にお帰りください（笑） >>57
できます。実装方法はいろいろあると思います。
原始的で素朴（だけどめんどくさい）実装は、①から⑧までのx座標とy座標と半径または直径の情報を持っておいて、
さらに①通過フラグから⑧通過フラグまでを初期値falseでグローバルに用意しておきます。
touchstartとtouchendには①通過フラグから⑧通過フラグまでのfalseリセット処理を書いておきます。
touchmoveには、ドーナツ外の座標だったら①通過フラグから⑧通過フラグまでのfalseリセット処理と、以下の判定処理を書きます
①領域内(①のx,y,半径と現在x,yから計算)なら
①通過フラグから⑧通過フラグまですべてtrueなら別ページに飛ぶ処理
そうではなく①通過フラグから⑧通過フラグまですべてfalseなら①通過フラグにtrueセット
そうではなく①通過フラグがtrueかつ②通過フラグから⑧通過フラグまですべてfalseならなにもしない
それ以外なら①通過フラグから⑧通過フラグまでfalseリセット
②領域内(計算)なら
①通過フラグがtrueかつ②通過フラグから⑧通過フラグまですべてfalseなら②通過フラグにtrueセット
そうではなく①通過フラグがtrueかつ②通過フラグがtrueかつ③通過フラグから⑧通過フラグまですべてfalseならなにもしない
それ以外なら①通過フラグから⑧通過フラグまでfalseリセット
③領域内(計算)なら
①通過フラグがtrueかつ②通過フラグがtrueかつ③通過フラグから⑧通過フラグまですべてfalseなら③通過フラグにtrueセットし、背景色を変える処理
そうではなく①通過フラグがtrueかつ②通過フラグがtrueかつ③通過フラグがtrueかつ④通過フラグから⑧通過フラグまですべてfalseならなにもしない
それ以外なら①通過フラグから⑧通過フラグまでfalseリセット
という風に地道に書いていきます。 そんなアホな実装があるか
Canvas使えばパス内に座標があるか教えてくれるのだから
ドーナツパス内に無ければリセット、
各数字円パス内あればその数字に触れたとすればいいだけだろ へえ、canvasでtouchmoveイベント使えるんだ。知らなかった。
あと、回答してやれよ。他人にケチつけてないで。 回答になってる
できるかできないかというだけの質問に対して道筋まで示してるんだから十二分だろ
これ以上は余計なお世話と言うもの
それにどうせ細かく示しても質問者がそのとおり作れるわけではないんだから
流石にそろそろPointerEvents使えよとか一々突っ込むのも面倒だし
あとは「自ら」頑張ればいいさ >>62
あとお前にケチつけてるわけではないから
質問者に安価つけてもとてもまともじゃなさそうだから
お前に言っただけだから 57です。>>60 >>61回答していただきありがとうございました。あとは自分で取り組んでみます。 あとは と言いう言葉が出る時点でもう成功することはない
君はまだスタートラインにも経っていない 1mmも進んでいない
あとは ではなく 全部 君が取り組もうという気がなければゴールにはたどり着けない 自己紹介乙。
お前みたいなミジメな人生にならないよう頑張るわｗｗ >>67
お前キチガイか？
ここの住民と人生比べてるようじゃオシマイやぞ
ちゃんともっとマシなところを見て黙って頑張れ お前の人生そんなに終わってるのかｗ
かわいそｗｗｗ 同情は良いから 勿体ない
お前に人に同情できるほどの余裕はないだろ
自分だけを可愛がってろ 以上
GPT-3どうしの日本語レスバトル
いかかでしたでしょうか？
面白いと思ってくれた方はこちらのリポジトリをフォローください
https://github.com/openai/gpt-3 canvas上にある座標x,yをclickイベントでクリックしたいのですが可能でしょうか？
canvas上のx,yにのせた現在のマウスポインタの位置をクリックでも構いません。
もしやり方があったらお教え下さい。 質問文の「clickイベントでクリックしたい」は書かれたままの意味なんだろか？ >>74
ありがとうございます
早速見てきます
>>75
domelement.click()とかでbuttonやaやimgなんかを押すように
canvas上に配置された非html要素のボタンを
マウスでクリックした時同様に押したいという意味です ページによってはevent.isTrusted見てスクリプトから作ったイベントは弾くかもしれんけどね 一応、現状でV8だと、配列のindex値と見なせるもの(0,1,2,...)の昇順に続き、それ以外の文字列プロパティ定義順、が得られる。Object.keysとかだとこれにSymbol値が続く。
オブジェクトのプロパティの列挙順は仕様上保証されているものではない。
従って、プロパティの順序が重要であれば、Mapを使うか、他の方法で順序管理するか、で対応するべき。 仕様上保証されていないわけないでしょ
なにさらっといい加減なこと言ってんの >>82
仕様にも明記されてるんだけど
なにいい加減なこと言ってんの？ >>85
嘘つきとまでは言う気はないが、仕様について語るのなら
ちゃんと仕様を確認した方が良いわな >>86
>>84が噓つきだと言われてんだぞ
本人なら救いようがないかも 13.7.5.15 EnumerateObjectProperties
The mechanics and order of enumerating the properties is not specified
https://tc39.es/ecma262/#sec-enumerate-object-properties
ES2020で関連箇所に変更が入ったけどそれはfor-inの列挙順が仕様で保証されるようになったわけじゃない
(これ勘違いしてる人が多い)
https://github.com/tc39/proposal-for-in-order ProxyでownKeys使えば、Object.getOwnPropertyNamesとかReflect.ownKeysとかでイテレートすると任意の順でイテレート出来るって話も。
enumerateとかは廃止されたけれど、あれはfor...inの順序は弄れなかった？
その辺の拡張を意識して、列挙順を保証したくないんじゃないのか、という気がするねぇ。もう10年したら保証されてたりするのかねぇ？ >>88
いや、勘違いしてるのは君だから
ちゃんとその下読んでる？
互換性のために定義されていないのはProxyだったり外様オブジェクトが介在する特殊な状況だけ
そしてそこで定義できないのはある意味当たり前
しかし一般にはCreateForInIteratorで処理するとされてその順序は定義されている ☓定義されている
☓定義されていない
○ECMA仕様では一部定義されるようになった
○ECMA仕様では定義されたが例外も多い
そもそも>>80がECMA仕様のことを聞いてると考えるのが間違っている
普通の人はECMA仕様にどう書いてあるかを考えたりはしないし興味はない
昔は順番が保証されないと聞いたが今はどうなのかという質問だろう
とすると昔が実際にバラバラだったが、今は揃ってきてるよ
でもいつも絶対に同じになると思ってると怪我するかもしれないよと
質問者が昔聞いたであろう雰囲気的に答えるのが良いのではないのか？ >>90
噓つき君まだ息してたのかw
そしてさらに嘘を重ねるw
某総理大臣みたいだなww 「The order of enumerating the properties is not specified」ってはっきり仕様に明記されてる
「嘘つきとまでは言う気はないが、仕様について語るのならちゃんと仕様を確認した方が良いわな」 またstaticおじさんばりの言い訳がはじまりそう
997 名前:Name_Not_Found Mail:sage 投稿日:2020/10/23(金) 06:42:33.51 ID:???
>>992
すまんけど俺は仕様書を読めるし長年読んできたし、
ES6の前からDiscasにも参加してクラスシステムやthisが絡むの議論にも
さんざん参加してきたし、十分深く理解してるから 最近、「わからせおじさん」というのが流行っているらしい
どんな生意気なガキも「わからせる」ことができるすごい「おじさん」らしい >>96
2つ間違ってる
一つは意図的だろうがEnumerateObjectPropertiesが返すイテレータが
CreateForInIteratorと同じように動作しなくてもいいケースってのは決して例外的ではない
もう一つは勘違いだろうけどCreateForInIteratorと同じように動作すべきケースであっても
列挙順序が保証されてるわけじゃない
https://github.com/tc39/ecma262/issues/1819
結局最初に>>81の人が書いてるように
「オブジェクトのプロパティの列挙順は仕様上保証されているものではない」が正しい >>97
>>決して例外的ではない
例外的かどうかというのは主観の問題なので君がそう思うということを否定したりはしない
>>列挙順序が保証されてるわけじゃない
確かに[[OwnPropertyKeys]]で順序が確定しないタイプのオブジェクトもある
だがそれはプロキシやモジュールや外様であって、既に省かれているでしょう？
もし他に具体的ケースがあるなら教えてほしい
オーソドックスなオブジェクトはOrdinaryOwnPropertyKeysを経由するので順序は保証されている
https://tc39.es/ecma262/#sec-ordinaryownpropertykeys
重箱の角をつついてちょっとでも齟齬があれば認めないというのは自分は違うと思う
>>80はプロキシをfor-inにかけたり、列挙中にオブジェクトを弄くり回したりと極端な状況下での挙動を想定してるのか？
実際に同じ質問を隣の席の人から聞かれたら、モジュールには使えないしとか言うのか？
素直にシンプルに答えるなら「保証されている」と答えるのが良いと自分は思う
もしそれが言いすぎだという人がいるなら、たしかにそうかも知れないけれど、
少なくとも昔にくらべて、「今」はここまでは「保証されている」というのが決まっていて
それはオーソドックスな状況下に適応されるものなんだから、
保証されていないというのも言いすぎじゃない？
保証されていない 外様、と表現されているもので挙動が変わり得る、を以て「仕様上保証されているものではない。」と書いたのだが、理解頂けなかったようで。
そんなもんはぶっちゃけ、どうでもいいんだけれど、V8でMapやSetが重い点に関して、何か情報頂けないか。
Objectのプロパティアクセスがカリカリチューニングで早いのは当然、と言うかそうじゃないと使い物にならない、のは想像に易い。
MapやSetの速度改善は、
・あり得るのか
・進む予定はあるのか
・進む可能性はあるのか
例えば万単位でPush的な操作した際の処理時間がObjectよりかなり遅いと思っている。
logとか手元に残してなくてごめん。 仕様に大変詳しいここのお偉方様に質問です
配列の要素やオブジェクトのプロパティに値を代入する変数に対して、
constを使わずにletを使う例を見るのですが、これはconstの意味の取り間違えですか？
それとも"内容を変更する可能性がある"という目印のため、あえてそうする風習があるのですか？ >>101
いやいや、流石にそれはない
JSは拡張自由であり、基本的に実行環境で拡張して使うスクリプト言語なんだから外様のことまで考えてたらきりがない
例えばオブジェクトをブーリアン型に変換したらtrueになるが、document.allなど外様を考えたらその限りではなくなるでしょ
外様を考慮するのは流石にバカとしか言いようがないよ “外様”なんて書き方してる時点で理解してないの丸わかりだよね >>105
let a = [];
とか
for (let a of array)
でその後a自体に代入しないケースです for...ofやfor...inについては、for文の印象を引き摺って、考え無しにletを使ってしまっているのではないか。varしか無かった時代の名残りとも言えるかも。
let a = [];についてはもしかすると、aに対して要素の編集、変更をしたいんだよ、と明示したくてletにしているのかもしれない。編集したい内容次第では、代入した方が早いような配列操作は結構多い。その辺の修正を見越してletで定義しているのか？
根本的には書いた人間に聞くのが良いのかと。 for..of/for..inのパターンは考えなしにletでもいいんじゃないかという気がしないでもない
このケースで誤って再代入して困るようなコードってどんなの？ ふむふむ
皆様ありがとうございました
個人的にはconst厨なので気になるのですが（というかJSにconst厨なんてあり得ないと思ってる）
varからの移行で、というのはあるかもしれません
for-ofにconstが使えなかった時もありましたしね >>109
そりゃあうっかり再代入したあとに再代入してないつもりで使ったときに困るんじゃないですか
constの利点は意図しない再代入をエラーで気づかせてくれることですから
それ以上でもそれ以下でもないと思います イミュータブル流行ってんのも巨大オブジェクトの差分検出に必要とかいうクソどうでもいい理由だしな。
俺は全部letで書くぜ！ for..ofとかのスニペットはletでそろえておいて
eslintのprefer-constでfixすることにした letでも再定義はできないのだから
値を設定するときにlet x=vの形で書く以上うっかり再代入なんてありえない
例えば関数頭でこの変数の値は不定だと思って定義して
その中のクロージャで、よし弄るぞってなることもありえない
まずより広範囲で使われることになるオブジェクトをfreezeするとか
プロパティごとに設定すべき（privateも含めて）という話なら分かるが
constだけに拘っても得られるものは自己満足だけ あるとすれば、後続処理でブロックスコープなり、即時関数なり使っていて、その中でletで再代入を前提とした同名の変数を定義していて、何かしらの修正時に、この同名変数の定義部分が無くなったが、この同名変数への再代入処理が残っている、と言う場合くらい？
そもそも別スコープとは言えど、同名で変数定義するのは避けよう、と言う程度な問題ではある。 >>115
なるほどねー
自分の場合はループ内にそんな長々と処理かかないからその問題はまず発生しないな
for-of/for-inでletにするかconstにするか一瞬考えたりconstからletに変更するほうが無駄に思えてきた >>114
「うっかり」が「ありえない」と考えるか「ありえる」と考えるかの違い
結局好きにすればいいと思うよ >>117
先の理由で広範囲だったり遠方で使う一部の定数になら使う意味があると思う
ということはそういう定数をそういう定数ですよと効果的に示すために使ったほうが
あるかないかもわからない「うっかり」のために全部constにするよりはメリットが大きいんじゃないかという話
そうじゃない大部分の変数はスコープを短くするのが基本なんだから
痴呆でも無い限りそんなうっかりが起こることはない
それが起こる確率とconstとletで２文字多い分打ち間違えやらでトラブる確率どっちが高いのかって話だよ
拘るのは結構だが、constだけに拘ってオブジェクトを放置したり
型周りを放置するのは本当に理にかなっているのか？
まあそこまでするなら結論altJSでやれと言いたいけどな お前の意見には全然賛同できないし
お前もこっちの意見には絶対に靡かないと分かってる 個人的は、
全てconstに出来ないのは能力不足だとは思う。
全てconstにせよ、は合理的じゃないから採用はしない。
だからどうした、俺の美学…と言う話だなぁ。
ついでに言えば、varはもう、特殊過ぎて使いこなせる気がしないから使わない。昔使ってた自分を褒めてあげたい。 特殊過ぎ？
関数スコープであることとカツ上げ以外何かあったっけ？ Win7-Pro，Chrome86.0
JavaScriptで変数に割り当てられるバイト数（使用メモリ量）で質問です。
例えば、var kazu=123.56 も Number.MAX_VALUE も予め割り当て同じバイト数で、
その中で2進法で表現されているのでしょうか？
つまり、どちらも2進数でNビット使われているとか。 レガシーでvar hoge=1とかfunction hoge{}とかグローバルに書くと、window.hogeが生えるのがクソキモイ。怖くて使えなーい。
もう、関数宣言とかvarとか使わないから、モジュールでどう動くのかは知らないけど、多分使わない。
Numberって、IEEE 754 の倍精度 64ビットバイナリ形式な浮動小数なんじゃなかったかい？
プロパティ拡張とかも出来ないはずだから、多分ほぼそのまんまだとは思うけれど、V8の実装の詳細は知らない。
探せばV8のソース見れるから、ソース見て追うのが間違い無いとは思う。 すみません。質問させてください
Math.floor(Math.random()
でテキストを5～6項目程度
setInterval('location.reload()',timer);
で自動でランダム表示させてます。
その際、テキスト内容をgetElementById("span1").innerHTMLでフォーム入力で書き換えたいのですが
location.reload()でクリアされてしまします。
フォーム入力で設定したテキスト内容をlocation.reload()でも反映させ続ける方法は
ないでしょうか？
基礎知識が無い中、見様見真似で作成しており不明瞭な点ばかりかとおもいますが
なんとかご教示のほうよろしくお願いします。 setInterval('location.reload()',timer);
文字列で処理食わさずに、関数食わせましょう。
setInterval(()=>{location.reload();},timer);
getElementById("span1").innerHTML
書き込む場合はinsertAdjacentHTMLを使う癖を付けた方がいいと思うよ。文字列書くだけならtextContentを使えばいい。
location.reload()はHTML自体を読み直す命令だから、inputの属性値も初期化される。
書き換えたないだけなら、reloadせずに、直接エレメントの属性値書き換える処理を呼ぶべき。
reloadで復元したいならば、localStrageとかsessionStrageとか使えば復元は可能。
oninputとかonchangeでストレージに値保存しておいて、読み込み時にそこから読み出せば復元できる。
けれど、ぱっと見た限りでは、やりたいことの正攻法はストレージではない感じ。reloadしなければならない必然性はある？ >>126
エンジンがどんな最適化をするかによる
V8などで昔っから使われている数値に関する有名な最適化はアドレスに畳み込んで参照を省略するというもの
例えば変数aとbにnumber型が入っているときに、a+bをすると
普通なら例えばaはアドレス1001、bはアドレス1010というのが入っているポインタであって、
まずそれを解決して各参照先からdouble（8バイト浮動小数点型）を取ってきてから演算を行う
だが、これではあまりに効率が悪い
ところでアドレスはこの例では4桁あるが、その全ては必要なくて1000～1111で十分だとする
そうすれば0000～0111までが特別なアドレスとして扱える
そこで000～111までの数値のときには、参照先というものを作らず、頭に0をつけて
0000～0111という形にする
そうすれば、aが2でbが3などの小さい整数のときは、参照先を解決しなくても、
アドレスをそのまま演算すれば計算結果が得られる
この「小さい整数」をSMIと言って、実際はアドレスは32bitなので31bitで表せる整数までSMIとして特別扱いされていた。
ただし近年64bit環境では32bit intのフルの範囲の整数が対象になることになって分かりやすくなった。
そして実際には各エンジンは、float型やint/uint32型など、たくさんの型を認識して最適化できる
ただそれらの多くは型付配列だったり、asm.jsなどに時の最適化のためで、
多くの場合普通の数値はdoubleかSMIとして扱われることになる
なぜかというと、あまりに細分化すると、異なる型同士の演算が増えて逆に非効率になるから
今でさえV8が吐くアセンブリで最も目立つものは、ポインタがSMIかどうかのチェックになっている
あと他にも文字列型で、utf16で1文字2byte使う代わりに、アルファベット列等の場合に
（不要になる1byteを省略するという形で）utf8で扱ってメモリを節約する処理系もある
そのように実際値の確保に何bit使われるかというのは、エンジンによるし、その最適化段階にもよる >>124
巻き上げられない変数など存在しない
変数というのはスコープに属していて
その割当範囲で有効になるものなんだから存在や定義が
巻き上げられて行われるのは当たり前のこと
let.constがvarと違うのは当該宣言に達するまで初期化まではされないということ
よって仮想的にスコープの先頭から当該宣言までの間が
変数が定義はされているけれど未初期化なので使えない区間（TDZ）となる。 >>129
ご返信ありがとうございます。
質問テンプレート無視してました。すみません。
事務所の大画面スクリーンに周知事項や注意喚起のメッセージを
10項目程度ランダムで表示させております。
終日表示させているので規則性があるとキツイかなと思いまして。
現状はhtmlソースを上書き更新しているのですが
誰でもテキストボックスやformから入力更新できるようにしたいと
考えております。 >>131
hoistされないとかあるの！？ってなったのでスッキリした >>126
JSのスペック的にはNumberは64bit
Chromeの場合はsmall integerなら32bit, それ以外は32bit(ポインタ)+64bit(ヒープ)
細かく使用メモリサイズを意識する必要があるならまずはプロファイラを使って計測すること あ、small integerってのは31bitで表現できる符号付き整数(-2^31～ 2^31-1)
>>130に書いてるようにアドレスが入ってるのか値が入ってるのかの識別にbottomの1bit使ってる
(tagged pointerっていう実装パターン) >>129
> 文字列で処理食わさずに、関数食わせましょう。
なぜ？
> 書き込む場合はinsertAdjacentHTMLを使う癖を付けた方がいいと思うよ。
なぜ？ textContentプロパティとinnerHTMLプロパティの違い
https://itsakura.com/js-textcontent-innerhtml
<h1>あ</h1>
などと、タグを入力された場合に、挙動が異なる
innerHTMLでは、h1タグが解釈されて、文字が大きく表示される 文字列で食わせると、evalとかfunctionコンストラクタ的な挙動になって結果動くんだけどね。デメリット挙げれば「実行される文字列の内容次第ではセキュリティ上まずい」とか「エスケープ書かなければいけなくなる」とか「呼び出してる変数のスコープが...」とか「タイマーが満たされる都度コンパイルが動く」とかかな。面倒事のが多いから使わない。
追記せず、操作せず、上書きだけできればいいならinnerHTMLで良いんだけれどね。innerHTML触ると該当ノード内部が再パースされる。変更の都度、対象の.childNodesが作り直される。対してinsertAdjacentHTMLは兄弟ノードは保たれる。
つまり、
document.body.innerHTML = '<div id="dv"></div>';
const dv = document.getElementById( "dv" );//これに何かイベント付けたり追記とかするかもよ。
document.body.innerHTML += 'hoge';//ここはinsert(略)で処理するべき
const dv2 = document.getElementById( "dv" );
console.log( dv == dv2 );
これはfalseになる。
innerHTMLに何か流し込みたい場合、HTMLTemplateElement.innerHTMLとか使うと言うのも一手。
Documentのノード操作でinnerHTMLって、全childNodes消したい時くらいしか。 >>138
ご返信ありがとうございます。
ランダム表示は絶対にしたいので
location.reload()以外の方法で対応するしかないようですね。
・テキストをランダム表示
・フォームからテキストをタグ入力
なにかいい案はございますでしょうか？ id="hoge"なエレメントが居るとして。
const hoge = document.querySelector("#hoge");//Domの参照取得しておく
const randamHoge = ()=>{
const r = Math.random();
const str = ( r < 0.5 ? "ほげ" : ( r < 0.8 ? "ふが" : "ぴよ" ) );//乱数から適当に文字列選択。
hoge.textContent = str;//Domに反映
setTimeout( randamHoge , 1000 * 5 );//とりあえず5秒で更新
};
randamHoge();
こんな感じでやれば終わる話じゃないのかい？
これは即席コードで修正した方が良さげな箇所多いけど。 >>139
どうしても自作でやりたいわけじゃなければ出来合いのカルーセルとかスライドショーを使えば？
例えばslickなら毎回ランダムなスライド番号でslickGotoを呼び出すような関数をsetIntervalに渡してやればok
スライドのHTMLへの追加/削除はslickAdd/slickRemove
https://kenwheeler.github.io/slick/
追加された内容も含めて表示内容を永続化する場合は
入力者が1つのPCの1つのブラウザを使う前提ならlocalStorageでも可
そうじゃなければ最低限のWebアプリ作ってファイルかDBに保存 あと、こういうのって誰でも直接書き込めると問題ある内容を書き込んじゃうやつもいるから
ログだったり反映前に承認を得るか通知を飛ばすような仕組みを用意もあったほうがいいかも
それができなければ面倒でも1~2人の担当者を経由させたほうが無難
会社の規模とか民度による 何事もそうだが内容を規制しようというのは非常に難しい
それよりも信頼できる人を厳選して誰が書き込むかの部分で規制したほうが良い 全体リロードするからおかしくなるんだから、fetchで事足りる、
あるいは更新したい部分だけiframeに切り出したら済むのではないだろうか？ （JavaScriptで変数に割り当てられるバイト数（使用メモリ量）の質問）
皆さん有り難うございます。
レスアンカーを列挙したら「ERROR; レスアンカーがおかしいです。」とか表示された、 ひょっとして、レスアンカーの個数制限とか、あるのか？ 皆様、レスありがとうございます。
返信頂いた内容への理解が難しく申し訳ないです。
勉強してまいります。
ありがとうございました!! もしかして、Chromeでローカルの XMLHttpRequest は不可になった？
去年5月のコードに書いたコードをテキストファイル読み込みに使ったら
from origin 'null' has been blocked by CORS policy ・・・ と出た xhrもfetchもfileプロトコルは同一生成元ポリシーでエラーになる。
同一生成元ポリシーが、fileプロトコルは全て別のオリジンと見なす、と言う動作になっている。
一応、起動オプション触れば同一生成元ポリシーは抜けられたハズ。
ただ、モジュールスクリプトは確か、起動オプション触るだけだと上手く動かなかった気がする。
ローカルにWebサーバ導入する頃合い、と考えた方が良いかもしれない。 VSCode の拡張機能、open in browser では、ローカルファイル・アクセスだから、CORS 制限あり
file:///C:/Users/Owner/Documents/test.htm
一方、Live Server では、サーバーを立てているから、CORS にならない
http://127.0.0.1:5500/test.htm
同様に、コマンドプロンプト・PowerShell から、
1-liner で、Ruby で作られた遅いウェブサーバー、WEBrick を起動すると、
ruby -run -e httpd . -p 8080
これも、サーバー経由だから、CORS にならない
http://localhost:8080/test.htm
Ruby on Rails では、Node.js のwebpack-dev-server を使っている moduleはfile:だとmimetypeでダメなんじゃなかったか。
これって何か抜け道あるの？ >>148です。ゴメンなさい。2行目の日本語がおかしかった。
正） 去年5月に書いたコードをテキストファイル読み込みに使ったら moduleはJSを読み込むため専用の構文じゃないからmimetypeが必要 ひさびさにjavascriptいじってますがpromiseの概念がさっぱりわかりません
これっていつごろから当たり前に使われはじめてますか？ >>154
ES6なので2014～2015年頃から >>154
プロミスは非同期(イベントが起きたタイミング)で、事前に設定しておいた正常/エラー処理関数を呼び出してくれるクラス
これが無い時代は、例えばHTTP通信でサーバが結果を返してくれるまで処理が止まる(同期) 普通は結果に対して何をするかでロジックを書くが、
プロミスは結果が出てるかもしれないし、まだ出ていないかもしれないという抽象体で
それに対する処理もまたプロミスとなるということが味噌でしょ Promiseは「処理が終わったら結果をこの箱の中に入れておきますから」という箱
その箱に対して「結果が出たら箱の中身を取り出して次にこの処理をしてね」という
処理の予約を付け足すことができる
付け足された処理も「終わったらこの箱に結果を入れておきますから」というまた別の箱を返す
終わってるかもしれないし終わってないかもしれないというコンテキストで値を包む箱がPromise
そのコンテキストを楽に処理できるようにするための機能がいくつか付いてくる箱 >>154
初期の頃からある資料はこれだったかな？
http://wiki.commonjs.org/wiki/Promises
概念的には結構前から有るはずだが、JavaScriptに登場したのは2009年頃
このページを見る限りフレームワークのDojoがDeferredとして取り入れた
その後CommonJSでPromise/AやらBやら、いろんな仕様で検討が行われた
とはいえCommonJS自体がそんなに使われていたわけじゃないので
この時代に気づいている人は少ないと思う
多くの人がPromiseを認識したのは2011/1にリリースされたjQuery 1.5のDeferredだろう
当時のDeferredは今のPromiseとは仕様が異なるが概念的には同じもの
Deferredとはなんぞや？と人々が四苦八苦したのはこの頃
そしてES6でPromiseとしてJavaScriptの仕様になったのが2015年だね
もちろんその少し前からES5で使えるPromise実装はでていた
つまりは10年ぐらい前から使われ始めてた ES6のまえにHTML5ムーブメントの初期にDOM Promiseが入ってる DOM Promiseって実装されたの？
検討だけで使ったことがある人はいないと思うんだけど 普通に使われてた
ES6は機能が多すぎて勧告後も実装率は低かった
勧告の前後１年くらいは実際はDOM Promiseの実装が機能していた >>166
DOM Promiseは当たり前には使われてないでしょ
ES6のPromiseは勧告1年前の2014年前半には主要ブラウザに実装されてたぞ
その頃からpolyfill使いはじめて徐々にPromiseが当たり前になっていった V8だと3.23には実装が移されたがそれはDOM PromiseV8推しの独自Promiseであって
仕様にほぼほぼ準拠したのはようやく4.9になってから
要するに30～50くらいは実はDOM Promiseだった ようやく書けた(；´Д｀) bbx規制食らってました
皆様レスありがとうございます
大変参考になりました
jQueryのDefferdという別アプローチを示していただけたのが幸いして
いい資料にありつけて結構理解は進んだと思います ブラウザの戻るボタンで戻ったとき、どこのページのURLから戻ったのかURLを取得する方法は？
document.referrerでは取得できませんでした divの中にある他ドメインページを表示するiframeの部分をクリックしてもクリックしたことにならないです。
どうすればiframeもクリックしたことにできますか？ iframe 内は、自分のサイトじゃなく、別人のサイトだから、アクセスできないのでは？ >>173
プロキシかましてAccess-Control-Allow-Originを上書きしてやると自由自在 >>175はスクレイピング用ね
自分がWebサイト提供側ならやめとけ >>172
SPAで設計しとけば当然分かる
その範囲で判決できないのなら無理・無謀 jqueryのiframe trackerというプラグインでiframeクリック判定できたで Chromeだとwindow.open()で共有ファイルサーバへのリンクがブロックされるんですが、回避できる方法はないでしょうか。
Chromeのプラグインとかは入れたくないです。。。 VSCode の拡張機能、open in browser では、ローカルファイル・アクセスだから、CORS 制限あり
file:///C:/Users/Owner/Documents/test.htm
一方、Live Server では、サーバーを立てているから、CORS にならない
http://127.0.0.1:5500/test.htm
同様に、コマンドプロンプト・PowerShell から、
1-liner で、Ruby で作られた遅いウェブサーバー、WEBrick を起動すると、
ruby -run -e httpd . -p 8080
これも、サーバー経由だから、CORS にならない
http://localhost:8080/test.htm
Ruby on Rails では、Node.js のwebpack-dev-server を使っている このrubyさんはあちこちでrubyならrubyならって言ってるが
誰もrubyの質問なんてしてないんですよ？
糖質なんですか？いい加減にしてください！！！！ とあるショートコーディングで、
C=[t=[b=[{max:M,min:N,random:R}=Math]]];
というのがあったのですが、
{max:M,min:N,random:R}=Math
は分割代入でM,N,Rがそれぞれmax,min,random 関数になってるのは
理解できたのですが、その外側のC=[t=[b=[...の部分はそれぞれどういう意味を持っているのでしょうか？
また、この記法に何か特別な名前はあるのでしょうか >>186
難読化したコードかな？
bやtという変数に値を代入する式でその式の評価結果をarrayの要素にしてる 展開するとこうかな。最初の３行より後は意味があるとは思えないけど…
M = Math.max;
N = Math.min;
R = Math.random;
b = [Math];
t = [b];
C = [t]; select で選択した項目のvalueを引数としてメソッドを呼ぶ…という作りにしたいのですが、
2度目にメソッドを呼び出すとエラーがでてしまいます。
単純に上書きされて呼び出せると思っていたのですが、何が工夫が必要なのでしょうか？ >>189
ちょっと言ってることわからないから
サンプルコードとエラーメッセージの内容を書いて >>189
どうも
メソッドの作りが複雑でエラーは直接関係無さそうなもので、 Uncaught Error と出ています。
作りは簡略化していますが下記のような感じです。
select のプルダウンで選択した項目の value を引数としてスムーススクロールの easing関数を
都度変更する…といった感じです。
初回は問題ないのに、2回目の呼び出しでエラーが出ています…
<select id="easingSelect">
<option value="linear">linear</option>
<option value="easeOutExpo">easeOutExpo</option>
...
</select>
var obj = {
easing: 'easeOutExpo',
...
}
var easingSelect = document.getElementById('easingSelect');
easingSelect.addEventListener('change', function() {
var value = easingSelect.value;
obj.easing = value;
scroll(obj);
}); 何回か選択して、F12 開発者ツールのコンソールで確認すると、ちゃんと代入されているから、
scroll という関数内の処理が、間違っているのでは？
obj.easing = easingSelect.value;
console.log( obj );
scroll( obj );
出力
{easing: "easeOutExpo"}
{easing: "linear"} Uncaught Errorじゃエラーの中身わからないじゃん
イベントリスナー呼ばれるところからデバッガでステップ実行して直接のエラー原因を把握したら？ マジかw
それでいままでよく開発できたな
最初はdebugger;って書いて後は流れで まずvar easingSelect = document.getElementById('easingSelect');
とする時点でバカ
Id属性を持つ要素はそのId名でwindowに登録される
この１文が丸々不要 >>196
お前がアホやろww
ネタならいいんだけど ぷっ
まさか知らなかった？
ハズいね(｡>﹏<｡) >>198
ネタじゃなくマジだったのかーww
グローバル経由でアクセスできてもそれに依存するコードは書くなって話
そんなコード書いてたら速攻辞めてもらうわ そもそも教えられないだろｗ理由知らないで言ってるくせにｗ 理由は昔は独自実装だったから
でも今は2020年、サイバーパンクが発売される年だ
老害に巻き込むな！！（怒） バカ「こうしろ！／こうするな！」
ぼく「根拠は？」
バカ「う、うるさい！俺たちは昔からこうしてきたんだ！」 >>192-193
JSで作ったスムーススクロールでして、そのスクロール関数を呼び出すときのパラメーター代わりが>>191の obj になります。
エラーの内容をしっかり見たところ、 throe new で自前エラーの振り分けの中の1つで、
パラメータで渡したIDが存在しないよ…というものでした。
初回はOKで2回目がNGな理由がサッパリわかりません…
↓あたりが原因なのでしょうか？
javascriptで同じ名前で複数の関数
ttps://teratail.com/questions/101023 >>205
デバッガでパラメータで何が渡されてるのか確認しなって
ステップ実行して動作を確認するのが見るのが一番確実
1. 開発ツールのソースタブでブレークポイントを設定する
2. ソースにdebugger;と書いてブレークポイントを設定してからページ全体を実行する
3. 例外が出た時にデバッガを起動するようにソースタブから設定しておく
のどれか >>206
検証ツールのデバッグ?使ったことないので、調べて試してみます。
>>207
こちらになります
Uncaught Error: ID name [[object HTMLDivElement]] is not defined.
at 〇〇〇.js:1415
at Array.forEach (<anonymous>)
at getAnchor (〇〇〇.js:1410)
at smoothScroll (〇〇〇.js:1488)
at HTMLSelectElement.<anonymous> (index.html:192) >>208
>Uncaught Error: ID name [[object HTMLDivElement]] is not defined.
throwしてるところ見れば分かるんだと思うが
本来ならID name ‘easeOutExpo’ is not defined.みたいなエラーになるはずじゃないの？
もしそうならHTMLDivElementが渡ってるってこと
デバッガの使い方
https://developers.google.com/web/tools/chrome-devtools/javascript >>208
>>191の簡略化ってのが正しい前提とするけど
scroll(obj)でイージングの種類を変更するんじゃなくてスクロールしようとしてない？
イージング変更するだけならアンカー（リンク）をgetする必要はないと思う
自分も試してみたけどselectの値はちゃんと取れているから
>>192と同じ意見で、scroll(obj)に問題がある可能性が一番高いと思う xhr = new XMLHttpRequest();（中略）xhr.send(formData)でPOST送信するとフォーム要素名１＝フォームの入力値１＆フォーム要素名２＝フォームの入力値２
というような形式ではなくバウンダリで区切られた形式になってしまいます。
どうすれば前者のような形式で送信できますか？ >>212
https://developer.mozilla.org/ja/docs/Web/API/FormData
これは、エンコーディングタイプを "multipart/form-data" に設定した場合にフォームが使用するものと同じ形式を使用します。
だからFormDataオブジェクトを使わずに送信するしかないんでね？ addEventListener で追加したイベントを removeEventListener で削除したいと思っています。
その際に引数を渡す必要があり、handleEvent を用いると実現できそうでしたが、2点疑問がわきました。
①下記のようにvar宣言しない場合のオブジェクトのプロパティの寿命ってどこまででしょうか？
②きっちり変数内でvar宣言して、オブジェクト名でメソッド呼ぶべきですか？
var sample = function(targetId, arr) {
abc.addEventListener('click', {
targetId: targetId,
arr: arr,
handleEvent: test
});
}; >>215
その疑問の前に・・・
listenerとしてaddする関数を関数宣言するか変数に保存しておくかして
removeEventListenerに渡すもんでしょ？ 複数の変数を返すときはreturn｛a,b,c｝;
受けとるときはvar {a,b,c}=func1();という書き方でも問題ないですか？ >>216
すみません。はしょりすぎました。
改めて下記でお願いします。
var abc = function() {..};
var sample = function(targetId, arr) {
abc.addEventListener('click', {
targetId: targetId,
arr: arr,
handleEvent: test
});
}; 特定のtable内にあるリンクや画像にtabキーでカーソル移動できないようにするにはどうしたらいいんですか？ 特定の要素の背景色によって条件分岐したいのですが、条件の判定に失敗します
背景色Greenの要素ですが、if文がfalseになり処理されません
#00FF00にしてもダメです
どうすればいいでしょうか？
jqueryを適用してます
html
<div id="yen1"></div>
css
#yen1 {
background-color: green;
}
js
$(function () {
$("#yen1").click(function (e) {
if (e.target.style.backgroundColor == "Green") {
event.target.style.backgroundColor = "Blue";
}
e.preventDefault();
});
}); getcomputedstyle で "rgb(0, 128, 0)" 知らんけど >>219
余計わからんなったわw
removeEventListenerの第二引数にlistenerを渡せなくて困ってるのかと思ったが違ってたのかな
>その際に引数を渡す必要があり
何の関数にどの引数を渡す必要があるの？ >>225
一応できました。ありがとうございます。
プロパティを条件に指定するだけで、javascriptだと記述量多めですね…… >>219
無名オブジェクトであってもイベントリスナが有効なうちは参照が存在するわけだから勝手に消えない
イベントリスナ内でremoveEventListener("click", this)するのは当然問題ない >>219
targetIdやarrにthis経由アクセスするvar test = function(){…};をhandleEventに設定しようとしてるのかな？
クロージャで外の変数にアクセスする必要がある場合でも
後からremoveしたいならその参照を後からでもアクセス可能なように
どこかにとっておく方法が普通だと思うんだけどな >>228
>イベントリスナ内でremoveEventListener("click", this)するのは当然問題ない
そういう用途ならわざわざhandleEvent使おうとしない気がする >>226
渡せなくて困ってたところに解決方法を見つけたので、試してみつつの質問でした…
>>228
無名オブジェクトと呼ぶのですね！
レス内容を見るに、イベントリスナからの参照が終われば消えるのですね。
もしかしたらグローバル変数扱いになるのかも…？と思ってました。
>>229
とっておかないと上手く行きませんでした…
上手く説明できないのですが解決しましたので、次のレスに一応書いておきます… >>230
意図としましては、メソッドを細かく作りつつ入れ子で宣言しないようにしてみたいといった感じです。
>>231の続きです
var abc = function() {
...;
abcToggle(this, 'remove');
};
var abcToggle = function(obj, str) {
if (str === 'add') {
abc.addEventListener('click', obj);
return;
}
abc.removeEventListener('click', obj);
};
var sample = function(targetId, arr) {
var obj = {
targetId: targetId,
arr: arr,
handleEvent: abc
};
abcToggle(obj, 'add');
}; >>232
イベントハンドラ実行時にremoveしたのでよければ↓こういうのでよくね？
var sample = function(targetId) {
const listener = () => {
console.log(targetId);
element.removeEventListener('click', listener);
}
element.addEventListener('click', listener)
} 今時はIE捨てられるなら、イベント１回だけ実行はaddEventListener第三引数の{ once: true }でいいし >>233
モーダルスライドで複数の閉じるボタンへのイベント付け外しで >>232 を利用しています。
>>233 のような作りに落とし込もうと考えてみましたが今は思いつかなそうです…
後々パッと思いつくかもしれませんので、いただいた記述はありがたく取っておきます。
>>234
会社がIE捨てれてないので、ザックリ学んだもののたまにアロー関数を見るとテンぱってしまいます… 別にIEを捨てる必要は無いでしょ
Edgeを使えばいいだけ js のforループでhoge in Arrayの時ってなにがhoge にはいりますか？ chromeの検証ツールでデバッグについて勉強中です。
breakpointを設置してElementsタブでイベントを設置した要素を選択すると
Sourcesタブに強制で移動されてVM〇〇〇〇といった謎のファイルの処理が始まってしまいます。
自分で調べてみたところVMがvirtual machineの略っぽいことまでしかわかりませんでした。
これって何なのでしょうか？
また、表示されない方法があれば教えていただきたいです。
強制でタブが切り替えられるのはかなりイライラしてしまいます。 format() やfストリングで、例えば普段は小数点以下第2位までの数値表示で、整数部桁が大きくなる場合は小数点以下は第1位にしたりして、数値全体の最大桁数は固定にすることってできますか？ >>240
あ、すみません。pythonスレと間違えてしまいました… >>239
breakpointをElementsタブから設定してるんだと思うが
Sourcesタブに移動せずにElementsタブに居座って何をしようとしてるの？
breakpointはJavaScriptの実行を一時停止してそこからステップ実行等をするためのものなので
どのソース行で停止してるかわかるようにSourcesタブに移動するのは当然だと思うんだが
VM〇〇〇〇はコンソールから追加したコードを実行する箇所がbreakpointになってたんじゃないのかな
adblockとかのプラグインとかもVMから始まる名前になることがあったかも >>243
breakpointはSourcesタブで設置しています。
イベントリスナをしっかりremoveできているか確認するためElementsタブに移動して
該当要素を選択しEvent Listenersタブをチェックしようとしたとき
または更新ボタンを押すとVM〇〇〇が表示されてしまっている状態です・・・・・
コンソールからは何も追加してないので何故表示されるのかわからないですね・・・・・
>>244
ショートカットありがとうございます。
凄い沢山あるのですね。かいつまんで覚えます。 >>245
あーそういう確認方法なのか
じゃElementsタブかSourcesタブを右クリックしてMove to bottomして両方を同時に開くようにでもしたら？
あとChromeの開発ツールだとgetEventListeners(element).clickでイベントリスナの一覧が取得できるので
コンソールでgetEventListeners($('.title')).click.forEach(x=>console.log(x.listener))とかやれば
.titleのclickイベントのリスナが確認できる クッキーの有効期限を更新しないでデータだけ更新するにはどうしたらいいんですか？
例えば1日のクリック数をクッキーに書き込む場合クッキーの有効期限は最初のクリックで
1日に設定されるけど2クリック以降の有効期限はそのまんまにしておきたいので >>247
おまえ何言ってんだ？
有効期限を更新したくなかったら、今と同じ有効期限を設定すればいいだけだろ
赤子でもわかるぜそんなこと getElementsByClassNameってdocumentとelementあるけど
要素の場所絞れてる場合element使う方がよいですか？
cssみたいに子要素から探していく仕様なら狭い方が多少は早い可能性ありそうかなと。 でもまあ良い子はquerySelectorAll使うけどね >>252
ありがとうございます
狭めるよう努めます。
>>253
元々querySelectorAllを使ってたのですが、そっちは遅いと見たので
作り変えている最中に思った疑問が>>251です。 > cssみたいに子要素から探していく仕様なら狭い方が多少は早い可能性ありそうかなと。
まったくないよ > 元々querySelectorAllを使ってたのですが、そっちは遅いと見たので
全く遅くないよ > 作り変えている最中に思った疑問が>>251です。
無駄なことに時間を使ってるよ 少なくとも早いかどうかを気にするのではなくて
複数同名のclassが出て来るかもしれないから要素起点にするかとか
その要素下でなくなるかもしれないからルート起点にするかとか
そういうことを打ち込む直前に無意識にさっと考えて
自然で妥当なコードを書いていくもの
それとquerySelectorが遅いだろうと決めつけるのはダメ
エンジンはよく使われる機能をよく使われるように最適化されていく
単純に考えたらgetElementsByClassNameの方が早いはずだが
セレクタ探索は複雑だからこそ最適化しないといけないので
キャッシュを効かせたりだとかもされている
今はgetElements早いかもしれないが、今後もそうだという保証はない
そして速度の最適化は最後、実際に足を引っ張っている部分があれば
きちんと分析して改善していくというのが基本 >>258
わかりみのよいレスありがとうございます
現状若干getElementsClassNameの方が速いのと
動的・静的で使い分けろとあったので、思考停止で動的のがいいでしょ
ってことでclassNameを選んでしまいました。
昔querySelectorで組んだやつをメンテナンスがてら
書き直してみようと思ってましたけど止めますわｗ 素人・・・速いって聞いたからこっちに書き換えよう
プロ・・・速い？ならどのくらいか計測するべきだ。1ミリ秒以下？
誰がそんな違いわかるんだ？そんなことのためにお前は無駄な人件費を使うのか？
損してるだけだろ Image オブジェクトについてお聞きしたいのですが
単純に、inputタグの file で選択した画像情報をFileReaderに読ませて、
Imageオブジェクトに設定し、読み込み完了したら～というコードをだいぶ端折ってますが簡単に書いてみました。
iObj = new Image();
iObj.onload = function() {
console.log( "読み込まれた" );
};
iObj.src = FileReaderで読み込んだ画像情報;
これ、PCのブラウザとAndroidのChromeではすべて正常に動くんですけど、
少し大きい画像(3MBくらい)の画像で試すと、
AndroidのFirefoxだけ、Imageオブジェクト関連が正常に動作しません。
setIntervalなどで、completeを監視しても false しか返してくれません。
小さい画像だと問題なく動くのですが…
他の手持ちのブラウザは全部試して動作確認出来たのですが、AndroidのFirefoxだけダメでした。
調べても同じ症状の人がおらず、原因がつかめないので困ってます。
なにか画像サイズの制限でもあるのでしょうか？
よろしくお願い致します。 自己解決しました。
海外の掲示板に同じ人がいました…
AndroidのFirefoxはバージョンが古い上に、URLの文字数の制限が極端に短いらしく
blob形式に変換する事でうまく行きました。 fetch(url).then(response=>response.json()); // 実際はasync/awaitを付けています
こんな感じのコードなんですがpendingがコンソールに出力されています
でも特にエラー等なくデータを取得できており動作も兼々期待通りなのですが
これはどういうことなのでしょう？ >>264
console.logみたいな出力するコードはないです
fetchがpromiseを返すからコンソールに表示されているんだと思ってましたが… あー、コンソールに直接打ち込んでるのかな？
関数定義にはasync/await付けてるけど実行時にawaitつけてないからじゃない？
async function foo() {
return await fetch(url).then(response=>response.json)
}
foo()
//=> Promise {<pending>}
await foo()
//=> json >>265
Promiseを返すとなぜコンソールに出力されるんだ？ >>267
大正解
>>268
アスペ
二度と書き込むな iframeでonmouseoverは動作したけど
document.createElement("iframe");で作ったiframeではonmouseoverが動作しませんでした
どうすれば動作しますか？ ブラウザが同期的に出力してるだけなんですね
勉強になりましたありがとうございました >>270
まず最初に問題が再現できるコードを提出しましょう >>271
自分で出力しなければコンソールには何も出力されないよ
少なくともChrome, Firefox, Safariなどの一般的なブラウザでは
>>267
awaitしてる(らしい)のに？？ >>273
もう終わったことにしつこい
二度と書き込むな awaitしてるのにpendingはたしかに謎ですね。 うっわ、これ自演なのか
ここまでヒドイのは久しぶりに見たな
>>271の意味不明なレスも納得 イベントリスナーって設置しっぱなしでよいものでしょうか？
イベントを設置している間はそれに伴う変数などが保持されたままになってたりしますか？
解除できるタイミングがあれば解除しておく方が良いのですかね・・・・・・？ >>277
自演じゃなくて君が皆から非難されてるだけ
現実を見ようね マウスが左クリックされたか調べるのはどうやればいいんですか？
onclickだとインラインフレームとかでは反応しないので
どのフォームでもとにかく左クリックされれば反応するようにしたいんで XHRでwgetみたいにクロスドメインで公開しているjsonファイルをGETしようとすると、エラーになります
開発者ツールでネットワークを見ると応答は200で内容も戻ってはいます(読める)
しかし、受信結果としてはCORS違反としてエラーにされてしまいます
xhr.open("GET", url);
xhr.onreadystatechangeにハンドラ設定
xhr.send(null);
ブラウザのJavaScriptでは別のドメインのファイルは取れないのでしょうか？
単純リクエストにしたいのですが…… >>282
>ブラウザのJavaScriptでは別のドメインのファイルは取れないのでしょうか？
取れる場合/方法もあれば取れない場合/方法もある
CORS違反と出てるんだから何が原因で違反に該当してるのかを確認すればいい
CORSはJS使うなら必須知識 >>283
Access-Control-Allow-Origin: * 返してくるサーバだけなのか
デフォルト設定の S3 じゃダメということになる >>283
GETでヘッダを返すようにしたらCORS違反は消えました
ありがとうございました
S3とGCPは設定したけど……apacheの静的ファイルにも設定しなきゃ……調べるの面倒
いや、XHRでのGETのCORSを誤解していました
XHRでは単純リクエストでGETできないとは思いませんでした
普通に静的ファイルとして公開しているファイルならば、クロスドメインで取得不可にするほうが稀のはず
だから、GET応答にCORS関連のヘッダが無い場合には*扱いに倒すだろう、という思い込みです 最近は指定無しだと制限が厳しいほうに倒されるよ。chromeに限らず。 FireFox 用、常に同じ表示サイズでスクリーンショットを取るために
ポップアップウィンドウを表示して自分自身のHTMLコードをコピーしています。
width=617 は、私の環境だとこれで 600x300 で撮れるための調整が入ってます。
\u003c はブラウザの誤認識回避用です。
一応これで大抵のブラウザでエラーにならないと思います。
というか、こういう書き方でエラーになるブラウザを知ってる人は教えてくれたら嬉しいです、
ってことでよろしくお願いします。
function popupSnapWin()
{
let aHeadInrHTML = document.getElementsByTagName('head');
let aBodyInrHTML = document.getElementsByTagName('body');
let sCloneHTML = ''
+ "\u003c!DOCTYPE html>\n"
+ "\u003chtml lang='ja'>\n"
+ "\u003chead>\n"
+ aHeadInrHTML[0].innerHTML
+ "\u003c/head>\n"
+ "\u003cbody>\n"
+ aBodyInrHTML[0].innerHTML
+ "\u003c/body>\n"
+ "\u003c/html>\n"
;
//console.log("(test) sCloneHTML ↓\n" + sCloneHTML );
let oPopWinObj = window.open('about:blank','forSnapShot','width=617,height=300');
oPopWinObj.document.write( sCloneHTML );
} ポップアップブロックに引っかかるので
むしろエラーにならないブラウザのほうが稀 >>288
他で使ってもらう場合にはポップアップ禁止を解除しなきゃダメなのね。
私のブラウザは以前他の用事で解除してたのを忘れてました、注意しないと駄目ですね。
あと、ブラウザというかアプリのリサイズフリーソフトはPCを変えるたびに消失してるのと、
Windowsのアプデで使えなくなるソフトが多すぎて、
ソフトはなるべく増やさない方向で考えてます。 >>285
>クロスドメインで取得不可にするほうが稀のはず
それを認めれば、自分のコンテンツが、
訳の分からない・犯罪的なサイトに使われるので、危険！ >>287
Ruby みたいに、HTML エスケープ出来ないの？
html = <<'HTML'
<!DOCTYPE html>
<html lang='ja'>
</html>
HTML
require "cgi/escape"
puts CGI.escapeHTML( html )
出力
<!DOCTYPE html>
<html lang='ja'>
</html> これで動くかね？
let aHeadInrHTML = document.getElementsByTagName('head');
let aBodyInrHTML = document.getElementsByTagName('body');
let sCloneHTML = `
<!DOCTYPE html>
<html lang='ja'>
<head>
${ aHeadInrHTML[0].innerHTML }
</head>
<body>
${ aBodyInrHTML[0].innerHTML }
</body>
</html>
`; vueスレが死んでたのでお願いします
ちょっと興味があるのでどんな風に使われてるのか調べてみたんですが
使ってるらしいサイトのソースを見てもそれっぽい痕跡がありません
痕跡というのはvue.js読み込んだりvueインスタンス作成したり
html中に{{var}}みたいなテンプレート変数のようなものやv-forみたいな属性がありません
チュートリアルの最初のほうに書かれてるやつしかまだ見てないのですが
本当にvue.jsを採用してるサイトのソースを見てるとしたら
なんか思ってるのと違うのかな？という感じなんですが
確実にここはゴリゴリにvue.js使ってるよ！ソース見ればわかるだろ？
というようなサイトあったら教えていただけませんか？ 可読性は悪いしオーバーヘッド大きすぎて遅いからねぇ ソシャゲのサイトで申し訳ないけど
http://kirafan5ch.info (ビルドされてない)
と
https://wiki.kirafan.moe/#/ (ビルドされてるけどソースマップファイルあるしそもそもオープンソース)
がある 申し訳ないと思うのであれば、別のサイトを用意していただけませんか？ イベントハンドルをグローバル変数にしてイベントを追加した場合は
イベントの重複登録が起こっても、重複にならないようです。
逆にローカル変数だと重複が起こるのですが何故でしょうか？
var handle = {
obj: hoge;
handleEvent: hage
};
window.addEventListener('resize', handleObj); それはグローバルかどうかじゃなく
同じインスタンスを登録してるのか
異なるインスタンスを登録してるかの違いでしょ
中途半端なコードじゃなく
問題が再現できる最小限のコードを出してね >>296
レスありがとうございます
ビルドされているということは>>294であげたようなコードから
一般的なhtmlに変換されるような感じなのでしょうか？
ビルドされていないという状態は一般的ではなさそうなので
もう少しチュートリアル読み進めてみようと思います javascriptからアプリを起動しツイートしようとすると
このページをtwitterで開きますか？のように確認ウィンドウが出てしまうのですが
これを回避することは可能なのでしょうか？ vscodeでconsole.logは可能でしょうか？
ターミナルでただファイル名を指定しただけでは、jsファイルが開くだけどす(´・ω・`) youtubeのトップページのおすすめを削除したいのですが、特定のチャンネルだけ残すという処理はCSSだけでは無理ですよね？ CSSのみで指定できる箇所にチャンネルを識別できる情報があれば可能なければ不可能
それすらわからない君にはどのみち無理ですね firefoxアドオンで特定のチャンネルだけなんてことできたらなと >>303
VSCode はエディタだから、実行環境がない
実行環境にはブラウザか、Node.js を使う。
Ruby on Rails などを使う人は、Node.js もインストールしてる
VSCodeの事は、プログラム板のスレで聞いて下さい スレここであってるかな？
fancybox3に詳しい人います？
マイナーなのか調べてもあんまりヒットしないし公式ドキュメント見てもわからんくて。。
いわゆるモーダル系のjsライブラリなんだけど背景クリックしてもモーダルを閉じないオプションあれば教えてください >>310
clickSlide: falseかclickOutside: falseあたりじゃない？ 子要素のイベントを親要素が取得する方法ってイベントバブリングだかで取得するしかないのでしょうか？
例えばモーダルの中にアコーディオンメニューがあった場合、アコーディオンをクリックすると高さが増えるので
ブラウザの高さよりも高くなることもあると思います。
その場合に、クラスを付与してモニョモニョしたいといった用途です。
また、モーダルの中でアコーディオンメニューが開くに限定せず、何かがクリックされて高さが変動する、
不特定な状態で進めたいと考えています。
現状イベントバブリングで対応できそうだったのですが、不特定なクリックイベント側で
e.stopPropagation(); の記述があったら詰んでしまうと思いまして代替案が無いか質問いたしました。 子要素の高さに合わせて親要素の高さが可変するように作っておくべき モーダルがブラウザの高さを超えた場合にレイアウトがが変わる仕様なので、質問しました。
バブリングを使わなくても、同等のイベントを記述すれば、捕捉できそうなので解決ということで。
ありがとうございました。 すみません。
どちらかというとプログラミング一般の質問になってしまうのかもしれないのですが
ご意見をいただけますと幸いです。
なにかしらのフォームがあるとします。
ちなみにサーバーはNodeですが、あまり関係ありません。
UXのためにフォームにはバリデーションがしっかりかけられており、
ユーザーが期待しない値を入力したときには親切なエラーが定義されています。
こういう状態で、サーバー側に意図しない値が来たときの挙動はどうすれば良いでしょうか？
それが悪意のあるものであれば、どのように対応しても良いと思いますが、
ブラウザが古い、何かしらのアシストツールの効果、（想定外の）APIとしての利用なども考えられると思います。
ケースバイケースだと思いますが、ベテランの人たちの直感的に、
サーバー側でもきっちり値の判定をして、HTTPエラーコードを返すのが良いのか、
親切なエラーメッセージを返すのが良いのか、どちらでしょうか。
それとも、校正はバリデーションに全て任せて、値を有効値に加工してそのまま鵜呑みにするのが良いのでしょうか。
例えば値Xがユーザーの年齢なら、Xは1桁か2桁の数字列文字列を確認した後数値に直し、if(X<=3)throwなどとする代わりに、
X = +Xなどとして、Xがたとえ0や負値になっても（それが脆弱性に繋がりそうでない感じなら）そのまま扱う、ということです。 サーバー側でも基本的に同じチェックをして入力が不正ならエラーとして扱う
ただし親切なエラーメッセージを出すかどうかはものによる
不親切でもよければ汎用的なエラーメッセージを使うことはよくある
クライアント側に比べてサーバー側の入力チェックを緩くするケースは
種類の異なる複数のクライアントをサポートする必要があって
一番緩いクライアント仕様に合わせる必要がある時くらい 悪意について書いてるから理解してるじゃない
それが最低ラインだから当然だよね
鵜呑みにというか忖度すると、思ってもみなかった所で躓くから、俺はサーバでは厳密にエラー入力として処理
それが不便なら入力の方でマイナス符号とかの不正入力はバリデーションすればいいって主張
エラーメッセージは好きにすればいいと思うけど、そんな物を利用者に見せたりしても仕方ないと思う
親切なエラーメッセージに凝るくらいなら親切な入力で弾いとけよと なるほど。
・手を抜くなら徹底的に手を抜く
・厳密にするなら徹底的に厳密にする
という２択に自分の中で無意識に絞っていましたが、
正解はその間にありそうだということに気づくことができました。
どうもありがとうございました。 関数のイベントオブジェクトを引数として利用する場合、他の引数ってどうやって渡せばよいのでしょうか？
下みたいなときにイベントオブジェクト以外渡せなくないでしょうか？
var hoge = function(e) {
console.log(e.currentTarget);
} >>319
自レスです。
条件を追加でコールバック関数の場合でお願いします。
さらにイベントだけでなくロード時にも発火します。
var target = .....;
obj = {
fuga: fuga,
handleEvent: hoge
};
var hoge = function(引数1, 引数2) {
console.log(e.currentTarget);
}
hoge(str);
target.addEventListener('click' obj); 部分適用して一引数関数にすればいい
var hoge = function(a, e) {
return function(e) {console.log(a, e.currentTarget)}
}
とか
var hoge = (a, e) => (e) => console.log(a, e.currenTarget)
とか
でtarget.addEventListener('click' hoge(str)); あとは引数で渡すんじゃなくclosureで外側のスコープの変数をキャプチャするか クロージャーはクソ仕様
C言語にそのようなものはない 関数に放り込むべき2つ目の引数はいつ決定するの？
まさかクリックした瞬間って訳でもないだろうし
年取ったせいかコード読んでも意図が読めん addEventListenerした後に追加の引数の値が決まるなら
オブジェクトにしておいて値を変えればいい
handleEvent()実装したオブジェクトを使うなら
そのオブジェクトのプロパティを使うようにメソッドを実装しておいて
あとからプロパティの値を変更する >>323
JSには基本的に「クソ仕様」というものはない
主要なコミュニティがあってスタイルが決まっている言語とは違って
そういう束縛がなくバリエーションに富んだ書き方が自由にできるのがJSの良さ
それが嫌なら幾らでもaltJSがある
JSをわざわざ使っていて厳格だとか単純性にこだわるのはアホ
JSをあえて使うのならその奥深い複雑性を活かして効率化を図り、
厳格性ではなく曖昧性を生かして問題を問題でないように吸収するのがJSの使い方
それが嫌ならJSで頑張ろうとせずに素直にaltJSを使うのが1000倍賢い
Cが使いたかったらCで書いてemscriptenでも通せばいいだけ
無理してJSでC風に書く必要はないし、ましてや他人にそれを押し付ける理由は１つもない Rustとかもクロージャあるぞ。
てか最近は言語にクロージャ無いとweb用だろうがシステム用だろうがバカにされるのでJavaにもC#にもSwiftにもKotlinにもあるもしくは追加された。 >>332
私は「基本的に」と言った
var、undefinedもそれ自体がまるごとクソ仕様なのではない
使い方、組み合わせによっては注意すべきポイントが出てくるということで
そういう機能までクソ仕様と言ったら多くの言語の多くの機能がクソ仕様になる
var、undefinedも他の言語も含めて広い目で見たとき取り立ててクソ仕様と断定できるほどではない
分かったか？（ﾄﾞﾔ） クロージャーって1回しか使わない処理をエレガントに書くためのものだろう？
簡単な条件式で内容変える程度なら三項演算子とかでもいいけど（あれはエレガントとは言えぬが） クロージャってjsだと劣化クラスみたいな感じだよな
他の言語のクロージャとは違う >>336
1回しか使わないんだったら引数で渡せばいい話で、外のスコープの変数にアクセスする必要なんてない。
>>337
javaと間違えてね？ >>336
それは単なる無名関数では？ｗ
使わなかろうがクロージャくらい覚えとけよｗ
なんで知らない段階で否定すんだよｗ
否定するにしても知ってて否定するほうがカッコいいぞ？ｗ >>337
>他の言語のクロージャとは違う
何が違うの？ >>339
別に否定なんてしとらんが
ていうか無名関数とクロージャーって同じものじゃないのけ 関数とスコープは直交した概念だから比較対象として不適切 んでもクロージャーって、意図からしてスコープの追加じゃない？ >>341
JSは全てのユーザー定義関数がクロージャと言って良い
クロージャにならない関数はビルトインとかnew Functionで生成したものとかごく一部 new Function 構文を使った事なかったんで知らんかった
ローカルではなくグローバルのレキシカル環境を参照するから個別なクロージャには出来ないのか Shadow DOMのようにこの先スコープの浸透を防いで隔離する機能が入る可能性は高い
最近盛り上がってるのだとモジュールブロックとか
https://github.com/tc39/proposal-js-module-blocks >>334
基本的にどんな言語にもクソ仕様はあります
JavaScriptも例外ではありません 私の中ではJavaScriptはクソじゃないんですよｗ だれもJavaScriptはクソだとか言ってないが あるid の要素を削除するとか、
あるclass の最初の要素を削除するのを、
一々、削除する要素の親を取得してから、
その子を削除するように書いているのですが、
これを関数でまとめられないですか？
あるインスタンス.parentNode.removeChild( そのインスタンス ); みたいに
var elements = document.getElementsByClassName( 'abc' ) ;
elements[ 0 ].parentNode.removeChild( elements[ 0 ] ) ;
var elem = document.getElementById( 'xyz' );
elem.parentNode.removeChild( elem ); element.remove()
IE未対応だがポリフィルで実現可能 remove( ) で出来ました！
var elements = document.getElementsByClassName( 'abc' );
elements[ 0 ].remove( );
var elem = document.getElementById( 'xyz' );
elem.remove( ); jQueryなら
$('.abc').remove();
$('#abc').remove(); ・馬鹿の例
var elem = document.getElementById( 'xyz' );
elem.remove( );
・チキ外
$('#xyz').remove();
・俺
xyz.remove();;;;;; 根本的にdocument.getElementByIdとか使うのはアドホック的で美しくない
ユーザースクリプトとかでないのならもうすこしスクリプトドリブンでDOMを作って
美しくアクセスできるvDOMを使ってやるべし 色んなサイトで散々解説されてる
具体的に言えないのであれば勉強しろ >>358
abcクラスを消す場合はどうするの？って言われたら困るやろ？
やぶ蛇になるようなレスしないでおこうね 特定のクラスの最初の要素をターゲットにするというのはナンセンスなので問題ないよ。 >>361
まずES5までのクラスシステムをnew演算子のふるまいとプロトタイプがどう扱われるかしっかり理解する
そしたらhomeObjectとnewTargetの概念が分かれば理解できる。 Showroom を見るときに、Ruby のSelenium Webdriver で、
邪魔なアバター・アイコン・メニューなどを削除してから見てる
漏れは、動画しか見ないから、他のサービスはいらない <li>
<input>
</li>
という構造で、通常時はliにborder付けて、
input:checkedの時はborderを消すということをしたいのです
プログラムはさっぱりなので、ざっくりtoggleを調べてみましたがinputがcheckedかどうかの状態を取得する方法がよく分かりません
このページの例が結構近いのかなと思いましたが、この例だとonclickで判定してますがcheckedで判定する方法はあるんでしょうか
https://web-tsuku.life/classlist-toggle/ >>368
DOMからinput要素を取得すると
checkedというプロパティを持ってて
booleanでチェックされてるか否かが取得できる
ので
li要素とその子要素のinput要素をセットでDOMから取得しておいて
input要素のcheckedに応じてliのclassNameを差し替える関数を用意して
input要素のonchangeイベントにフックして実行するといいよ input type="checkbox"
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox
checked は、チェックボックスが既定で (ページが読み込まれたときに) チェックされているかどうかを示します。
チェックボックスが現在チェックされているかどうかを示すものではありません。
チェックボックスの状態が変化した場合、このコンテンツ属性は変化を反映しません。
(HTMLInputElement の checked IDL 属性のみが更新されます。)
だから、チェックの有無に応じて、適当なクラスを付け外して、目印にすれば？
例えば、チェックされたら、class="abc" を付ける。
チェックを外したら、class="abc" を削除する 試しに書いてみたが考慮点が多すぎて気軽に書くには割に合わないな
https://jsfiddle.net/Lqhm8ot0/
気軽にやりたければ親要素を変更するよりも
子要素か兄弟要素にしてCSSで対応する方法で我慢
親要素を変更するなら自分で状態をオブジェクトや配列で管理して
ユーザーアクションに応じて状態を更新する関数(イベントハンドラ)と
状態の更新に応じてUIを更新する関数は分けたほうが見通しがいい IE以外はtoggleの第二引数がサポートされてるから
li.classList.toggle(‘active’, input.checked)みたいに書けるよ closestを使う場合はul/liがネストしてるケースや
nullを返すケースも念のため考慮しておくといいかも
https://jsfiddle.net/32d6uzox/ 一部を抜粋してきたのでわかりづらいかもしれませんが
下記はキー入力などを停止するための記述の一部です
if文の条件の意図って何なのでしょうか？
イベントオブジェクトがあればpreventDefaultメソッドは必ず持っているものだと
思うのですが、何を確認しているのかわかりません。
イベントオブジェクトを取得できたか確認しているのですかね？
var e = e || window.event;
if (e.preventDefault) e.preventDefault(); >>379
ありがとうございます。
IEがpreventDefaultに対応していなバージョンに対する振り分けだったのですね。
そんな時代があったこと知りませんでした。 >>381
2000～2010年に世界でWEB制作に使われた労力の
半分はIEに対応するためと言っても過言ではない >>382
ie死ねって本気で呪ってた
今はmacのsafariが怨めしい >>383
whatwgの中心メンバーのくせに対応遅いよね SafariはIEとは大きく違う
Apple製品が欲しいけど、他を買わざるを得ない人は居ても、その逆は基本的にはない
最先端とか最高のものを求める人はApple製品は買わない
ブランドが持つ総合的な価値で買ってる
つまりそもそもSafariでChromeと同じように表示する必要はなく
どちらかといえば差別化をしたほうが良いくらい >>386
いやレンダリングは同じじゃなきゃ困るだろw そりゃ大体は同じでないといけないが、
細部は異なって当然でしょ
だって違うブラウザなのだから
車でもメーカー・車種によって細部の操作感は違うでしょ
ブランドごとにむしろ細部が違うからこそ価値が出てくるわけで
その価値を認めてる人たちがそのブランドを使ってるんでしょ 今のSafariは細部とは言い難い差異があるから困るんじゃね？ もともとSafariは、KHTMLのブラウザエンジンをパクって作ったもの
KHTMLをパクってWebKitにしたのがApple
そのWebKitをパクってBlinkにしたのがGoogle
そのBlinkを搭載したChroniumを利用してるのがEdge
つまり全ての成果をMicrosoftが利用することとなった 最新のBlinkを利用する、ChromeとEdgeからすれば
旧世代のWebKitを使ってるのSafariという扱いなんだよ IEユーザーにはどれだけこちらが正当なことを言っても全く通じないが
Safariユーザーにはその機能がないのはAppleの方針だと一言言うだけで納得するよね
努力すればできることでどうしても対応して欲しいという話になったら最近は海外に投げてる
椅子に座ってひたすらキーボードを叩いて解決するような仕事は日本人プログラマがすることではないし、
逆に言えばスピードとコストでは奴らに遠く及ばないと思い始めてる >>391
別に古いわけじゃなくない？
blinkがWebKitからフォークしたのが数年前ってだけで
オープンソースはあまり得意ではない？ iphoneのユーザー数とIE含むレガシーブラウザのユーザー数はそうは変わらないしな 今javascriptとnode.jsを勉強してるんですがこの2つだけじゃ身につけにくいプログラミング言語の特徴みたいなのありますか？
型とかポインタ？とかかなと思うんですが 実業務でポインタなんか全く使わんからいらん
型はTypeScriptにすりゃええよ >>399
型もポインタも明示的に指定しない分余計に意識が必要
コードに書かないということは自分の頭で分かってないといけないから
JSで学べないことはないよ♡ >>394
WebKitは旧世代だよ
Googleの開発スピードにAppleは追いつけない
ウェブは高速で進化してる、その中でAppleは置いてきぼり >>403
どの辺が旧世代なのかは説明できないんでしょ？
だからお前はダメなんだよ >>399
型に関係する部分くらいだね
静的型付け/型チェック、クラスベースのオブジェクト指向、インターフェース、
関数の型、メソッドオーバーロード、Enum, ジェネリクス、代数型、Null Safetyなど
あと強いて言えばマクロ、メタプログラミング、マルチスレッド辺り >>398
世界平均ではごく少数だけど
日本、北朝鮮、アフリカ諸国、東欧、南米とかに
偏って存在してる
日本以外ははふっるい中古PCが多いせい
日本は00年代の早くから
IEをフロントエンドとする企業向けWebシステムを
企業毎に高いお金かけてオリジナルで導入した
っていう、当時としては先進的な動向が原因
フロントエンド開発者はずっと
IEはクソだから見捨てようって言い続けてきたけど
SIerも広告代理店もそれを客に進言できなかったし
企業のシステム担当もChromeのインストールを認められなかった
そして今に至る >>404
https://gigazine.net/news/20200629-apple-web-api-decline/
Safariが使えないAPI
・Web Bluetooth
・Web MIDI API
・Magnetometer API
・Web NFC
・Navigator API: deviceMemory
・NetworkInformation API
・Battery Status API
・Web Bluetooth Scanning
・AmbientLightSensor API
・EME Extension: HDCP Policy Check
・Proximity API
・WebHID API
・Serial API
・WebUSB
・Idle Detection Safariが使えないと考えるからおかしい Chromeが積極的なだけ
何かの導入に消極的なことは、ただ遅れてることとは違う
消極的というのは積極的とおなじだけ特徴的だし、特長になりうる
どうしても先進機能を使いたい・使わせたいならChromeを使えばいい
でもSafariを使っている人はそもそもそういうことを求めてはいない
アイホンは諦めろ それだけでしょ >>407
それらは遅れてるんじゃなくて明確な意図を持って実装しないという話では
ほとんどのものはブラウザにハード触らせたいGoogleが自分の都合で実装して
それをブラウザにハード触らせたくないAppleが自分の都合で実装しないと言ってるんでしょ
それらに関してはMozillaもApple寄りだし
その件に限ってはAppleの方針に賛成だな
何でもかんでもブラウザが触れるのは嫌だ >>409
他のブラウザができることをSafariはできないんだよ
だから旧世代
アップルがiOSアプリを売りつけるために
ブラウザの機能を制限してるのはわかるけどなｗ >>410
つまりIEは良かったと？
そんなばかなw ループ処理の中でイベントを設定して、呼び出されるコールバック関数側で
どうにかインデックス番号を取得する方法はありませんか？
無名関数を使わない方法が知りたいです。
よろしくお願いします。
var sample = function() {
console.log(i);
};
var arr = [xxx, yyy, zzz];
arr.forEach(function(v, i, arr) {
arr[i].addEventListener('click', sample);
}); >>412
>>321と同じ部分適用のパターン
第三引数のarrは必要ないよね？
v.addEventListenerで事足りる >>413
失礼いたしました。
イベントリスナで呼び出す関数に無名関数使わない方法で対応できたらと考えています。
>>414
ほんとですね！！！
全然気づきませんでした。
ついでに質問についても教えていただけますと幸いです。 >>415
>>321を読んで考えて
もしわからないなら何がわからないのかを書いて >>416
すみませんが何が行われているのか全くわからないです
どうしましょ・・・・・・・・・・・ >>417
まじかー
アロー関数じゃなくて普通の関数で書けば↓こんな形
var sample = function(i) {
return function() {console.log(i)};
};
var arr = [xxx, yyy, zzz];
arr.forEach(function(v, i) {
v.addEventListener('click', sample(i)); //← sample(i)を実行した結果のfunction(){console.log(i)}がイベントハンドラになる
}); var sample = function(i) {
return function() {console.log(i)};
};
↑をアロー関数で書けば↓こうなる
var sample = (i) => () => console.log(i); >>418-419
アホ向けの解説多謝です
コールバック関数ってカッコ付けてよいのですね！！！
絶対カッコ取らないと駄目だと思ってました
少しいじってみますね この場合のsampleはコールバック関数ではなくてコールバック関数を生成する関数だよ 今はもうだいぶ一般的になっちゃったけど昔は高階関数ってJSのお家芸みたいなとこあったよね。
いやlispとかまで言われたらあれだけどメインストリーム言語としては。 >>421
ありがとうございます。
ちなみになのですが、関数の中で関数返しているのでsampleメソッドはクロージャ扱いになるんでしょうか？
また、詳細を調べる際のワードとしては「部分適用」になるのでしょうか？
部分適用という使い方としては出てくるのですが、今回のようにコールバック関数に引数を渡すための
手法の名前がありましたら、詳しく調べたいので教えていただけないでしょうか。 >>424
ならない
この中でクロージャは 変数 i
function(i){...} だけで有効であるはずのローカルスコープの変数 i が、sampleが返してくるコールバック関数を実行した時にも参照される
これは i の内容が、function(i) が実行された時のスコープの環境を参照して決定されるため
この様に、それが定義された環境が記録されていて、実行時に参照される変数をクロージャという >>424
sampleが返す関数がクロージャ
sample自体はクロージャではない
コールバック関数に引数を渡すための手法の名前は聞いたことがない
インラインの関数式でクロージャを使うほうが一般的なパターン
arr.forEach(function(v, i) {
v.addEventListener('click', () => console.log(i));
}); 部分適用は↓ここではちょっと違う解説をされてるけど
JSに限らずいろんな言語に共通する考え方
JSの場合は部分適用するのにクロージャを使うというだけ
https://ja.javascript.info/currying-partials クロージャを使う？
意味不明 JSのユーザー定義関数はほぼ全てクロージャになるんだが >>425-426
ありがとうございます。
クロージャはsampleの中の変数なのですね。
勘違いしていたようです・・・・・・
インラインだと冗長な気がしてしまって、名前付けた関数を
使うようにしてみているのですが、質問しました引数渡せない問題など
色々詰まってしまってますｗ
リンク先でしっかり学んできます！ 引数にこだわらずにhtmlエレメントに値持たせてもいいんやで？
var sample = function(event) {
console.log(event.target.dataset.index);
};
var arr = [xxx, yyy, zzz];
arr.forEach(function(v, i) {
v.dataset.index = i;
v.addEventListener('click', sample);
}); >>411
IEが良かったなんて言ってないけど？
Chrome or Edgeはいいよ
最先端だよ >>432
だって他のブラウザに出来ないことができるのが良いって判断なんでしょ？
まさにIEじゃん、00年代の >>431
JSの関数コンテキストは定義された場所のスコープを引き継ぐのだからクロージャと言える
（実エンジンではデバックのための情報を除いてカットされる） 横レスだけど偏屈になると歪んだ考え方しちゃうのね
IEができたこととは全く意味合いが異なると思うけどｗ
完全に拗らせてるわ そのうちNetscapeが1990年代の最先端で～とか言い出しそう >>435
俺も横レスな上に
IEを擁護するようであれなんだが
IEが先進的だったこともあったんだぜ
xhrもネットスケープより前に出来てたし
まあそのせいで
向こう20年の悪夢を産んだわけだが どう見ても現代の話しているやつに、なんで唐突に20年前の話振り始めたん？
コミュ障なの？ ごめーん
俺は見ててちょっと懐かしくなっちゃっただけ
スレ違いすまぬ >>440
スレは合ってるよ
空気嫁ないガイジなだけだよ ガイジってよく見るけど実はよくわかってない…
それを書くと俺はどんなダメージを負えばいいのん？ >>433
> だって他のブラウザに出来ないことができるのが良いって判断なんでしょ？
そんなこと一言も言ってないよね。お前の思い込みだよね。
特定のOS専用や非公開な仕様ではなく
オープンなウェブ技術を開発、採用ししているブラウザが最先端のブラウザ >>438
その通り。技術自体はIEは先進的だった。
良くないのはその技術がクローズドだった点
オープンな場で議論して仕様を策定するのではなく
MSの気分次第で実装されていた
Chrome or Edgeではそうじゃないので最先端のブラウザだし
それに追いつけないSafariはもはや過去のブラウザ
Safariのために特別な対応が必要だったり
Safari自体を非推奨にしなければならなくなってる 日本の与党と野党みたいなもんでしょ
本当であれば皆で方策を出し合って決めるのが理想だが
力ある者が思いついたアイディアに対して力なき者はただ難色を示すことが仕事になってるんでしょ
そこでとりあえずストップして内容を改めましょうかとか、
皆でミニマムなところからやってみて意見を出し合いましょうかとかなればいいんだけど、
意見が割れてるのね、じゃあそれぞれの方針でそれぞれでやって確かめていきましょとなって
結局は力ある者の意見が通ることになってるんでしょ
力関係が崩れている期間が長くなりすぎるとお互いに対する緊張感がなくなって
他所を見るより自分自身がどうやって行くかが重要になってくるからこうなってしまう
SafariもHTML5ムーブメント初期はデザイン方面などで色々とやる気だったけど
やる気だった方向性ではそんなに急には伸びそうになくて覇権は取れないし、
アプリプラットフォームとしてのWebという方向性ではビジネスの観点からやる気を出すことができない
だからこうなってしまうのは仕方がなかったこと
それとそもそもオープンオープンって言うけどさ
昔ながらの草案から段階踏んで比較的幅広いメンバーで議論を重ねて勧告へ向かっていくのとは違って
どっかのチームがGitHubに公開して、issueを受け付けとくね、聞くかどうかはしらんけど
とりあえず実装初めて使ってみながら変えていこう的なノリが最近多いのよ
公開ドキュメントによく鍵かかってたりもするし、リクエストしても承認されない
恣意的ではないかも知れないが、どうせ関係者しか関わってこないだろうという気持ちがある証拠だと思ってる
そういう機能をたくさん積んだブラウザが最先端のブラウザなんだろうか？
確かにプログラマとしてはまともで使える機能が多く乗った環境のほうが良い
でもユーザーにとっては例えばアクセシビリティが高いとか、セキュリティに拘ってるとかいうのでも
十分「最先端」のブラウザなんだよね
そんな今年１回使うかどうか分からない機能よりも、毎日の使い勝手のほうが重要なんだから linear-gradientで、transparentが使えないのはsafariだけ！ IE問題とSafari問題は質が違うよね
ま、どうでもいいけど VSCodeで簡単なオススメlintってない？
ESLint は設定のやり方を読んだだけで投げ出すヘタレ >>418について再度質問させてください
条件を追加してしまい申し訳ないのですが、addしたイベントをremoveしたいと考えています。
このときに引数を渡す書き方だとremoveできないようで、振出しに戻ってしまいました。
引数を渡しつつ、どうにか解除する方法はありませんでしょうか？
元も子もないのですが、引数を渡さなければ解除できるようです。
var test = document.getElementsByClassName('test'),
removeBtn = document.getElementById('removeBtn');
var sample = function(i) {
return function() {console.log(i)};
};
Object.keys(test).forEach(function(v, i) {
test[v].addEventListener('click', sample(i));
});
var removeEvent = function() {
Object.keys(test).forEach(function(v, i) {
test[v].removeEventListener('click', sample(i));
});
};
removeBtn.addEventListener('click', removeEvent); >>449
それがダメなのはaddの時に渡すsample(i)とremoveの時に渡すsample(i)が
違うオブジェクトだからじゃないかな
removeに渡すのはaddと同じじゃないとダメだと思う
なのでaddの時に引数をキーにしたMap作っとくとか？
質問とは関係ないけど今はvarじゃなくてletとconst使う方がいいと思う
（略）
const map = new Map();
Object.keys(test).forEach(function(v, i) {
const func = sample(i)
test[v].addEventListener('click', func);
map.set(i, func)
});
var removeEvent = function() {
Object.keys(test).forEach(function(v, i) {
const func = map.get(i);
test[v].removeEventListener('click', func);
map.delete(i);
});
};
（略）
動作確認はしてない removeEventListenerするならsample(i)で生成された関数はaddEventListenerするのと同時にどこかに保存しておく必要がある
イベント付け外しするなら>>430の方が簡単 ボタンならリスナー削除するよりDisabledにしたほうが親切だよね
リスナー削除して同じボタンに別のリスナーを追加するような使い方してるなら別だけど >>450-451
ありがとうございます。
きっちり動作していました。
まだしっかりと動作を把握できていないのですが、
渡す引数を含めて、ループごとに関数を保存する必要があるということでしょうか。
だとしたら思った以上に大掛かりなことになってしまっていますね。
引数渡すだけで処理難度凄い変わるのですね・・・・・・・・ やり方に問題があるだけだと思うけどな
処理を無効にしたいだけなら、disabledってクラスでも付与して、
イベント内のif文で無効にすれば済む
イベント自体を削除する必要はない >>455
ボタン処理などではなく、、自作したメソッドのプレビューページでの問題発生でした。
メソッドを呼び出すにあたり、選択できるオプションが複数ありまして、
その項目をselect要素で選択すると、引数を上書きして、都度メソッドを読み直すという構成になっています。
同じメソッドを読み直すと、イベントが重複登録されてしまうようでして、それを解除しなければならない
という状態でした。
もっと良い方法がありましたら、改善したいと思っていますのでお知恵をお貸しください。 なるほど、わからん
それは引数で渡すんじゃなくイベントリスナーの中で
選択したオプションを読めばよくね？ 昔と違ってremoveが必要なケースってそれほどない 今はremoveするんじゃなくてclassを変更して
その表示状態を非表示に隠すだけだよ
JavaScriptの処理はclass属性の変更だけでDOM構造の変化もなく
ブラウザがネイティブに表示状態を処理するだけだから高速 >>457
いくつか平行して進めておりまして、その内1つは
ご指摘いただいた通りselectで選択した値を取得させたところ、
あっさりできてしまいました。
恐らく他の自作メソッドでも対応できてしまいそうです。
イベントの設定と解除についてや、コールバック関数に引数を渡すという
テクニックが身に付いたのはとてもよかったのですが
どうやら無駄だったようです・・・・・・
楽しかったので気にしない方向で・・・・・ 関数に引数渡すなら関数自身にプロパティ追加するのもありじゃない
何かデメリットあったっけこの使い方？
var fn = function() {console.log(fn.str);};
fn.str = 'hoge';
fn(); 無理に組み込んでfn.strなどととしてアクセスすることになるよりも
バラバラに親関数でstrとして受け取ってstrとアクセスできる方が普通でしょ
strがfnの関数としての性質を表すプロパティならfnがstrの入れ物になるというのは分かるけど
そうではないのなら不自然でしょ 沢山渡す必要があるときも、同列にまとめて
{fn,str,......}の形で渡すとかにしたほうが良い スコープ狭めたいとかbindとか使うよりもと思ってたけど止めた方がいい？
普通にbind使うべきかな？ ごめん質問の意味がよく分かんない
その「普通にbind使う」とやらのコード貼って >>460
無駄にはならない
常識レベルの基礎知識だから >>461
面白い気もするけど
それってfnの外に変数置いてるのと
やってることそんなに変わらなくない？
変数が散らからないだけで 便利でよく使ってる、実数の小数部を切り捨てるテクニックの
const a = 3.9 | 0;
console.assert(a==3);
は、どうして機能するのでしょうか？ >>467
JavaScriptがビット演算するときは64ビット浮動小数点数から32ビット整数に変換される
上位ビットは切り捨てられる 整数部が32bit超えるとバグるし意図も伝わりにくいからMath.floorとかを使ったほうがいいんじゃね ありがとうございました
意図が、というのは問題ですが、
サイズに関しては2Dグラフィックでの長さ分割計算用途で、オーバーフローする可能性はない(あったら別のバグ)ため、
速度優先で行きます 質問、というか単なるこだわり
確実に、好きにしろとか言われるはず
JavaScriptの業界だとメソッドやらプロパティやら頭小文字にしろとかうるさい(小文字で始める「べき」です)けど、自分のライブラリでは逆らって頭大文字で行ってる
そんなに非常識に見られるの？ >>472
個人的な拘りだとか言いながらドレスコードガン無視した衣装で来店する程度には非常識 何回注意しても屁理屈捏ねてマスク着用拒否して飛行機下ろされる非常識客くらい >>471
計測して比較したのかな？
bitwise ORとMath.floorやMath.truncとの速度差をケチるくらいに
速度重視のアプリはそもそもJavaScriptに向いてないと思うぞ >>476
例えば
https://q-az.net/javascript-math-floor-other-method/
その他で、微妙に |0 が速いという記事はわりかし見かけます
ただ、欲しいのは切り捨てなんで比較すべきは floor じゃなくて ceil
ceil だと |0 より速かったりしますかね？ いや、Math.trunc の方がいいのか？
なんで選択から外してたんだ？あれ？ >>472
Ruby on Rails では、
ローカル変数は、snake。item_name
モジュール・クラス名は、Pascal・upper camel。ItemName
JavaScript では、
ローカル変数は、camel。itemName。少数派で、snakeを使う人もいる。
モジュール・クラス名は、Pascal
基本、フレームワークのプロジェクト規約に従う。
Railsでは、ファイル名・テーブル名の単数・複数形なども、命名規約で決まっている
勝手に決めると、ESLint などでも警告されるかも >>479
うーん、Goユーザーなんで小文字だとprivateスコープに見えちゃうという非常に個人的な感覚
#付けるとprivateになるという仕様候補の現状がとても気になる 推奨ＮＧワード： Ruby
推奨ＮＧワード： Rails ところで、また特に回答が無くても困らない質問が一つ
querySelector のセレクタで妙な仕様を見ました
例えば id="abc¥def" とエスケープコードを入れたセレクタを指定するとき
"abc¥¥def" とエスケープを重ねて指定
……では駄目で "abc¥¥¥¥def" と二重にエスケープする必要があるとか
なんで？
こんな文言を id とか class に使うくらいなら自分は長い文言を使うんで困らないけど、なんで？
仕様書のparseについての項を読んでもよく分からなかった
querySelector の中ってJavaScriptとは管轄が違っていて、再び文字列解釈されるってことだよね >>477
Math関数は中間表現から始まって最終的にアセンブラレベルに落として最適化されるので
何か最適化を妨げる状態でなければ十分に早いんだが、
厳密に言うとtruncはx86だとfloatなどに比べて冗長な命令を出さざるを得ない
対応SSEのバージョンが古ければ古いほど冗長になる
だからCPUレベルで原理的にどうしても遅くなる
ただしこの冗長というのは浮動小数点を丸めて整数にしたい場合、という注釈が付く
JSの場合は浮動小数点型がデフォなんだから
所謂ネイティブ言語では扱いにくい、浮動小数点型のまま0丸めする命令は使える
ただしここでも穴があって、V8は結果として内部整数を期待するので、
この命令を使う場合でもわざわざ整数に直してしまうこと、
そしてアセンブラ上で見かけ上命令数を同じにできても、
CPUに対する命令は更にCPUの中で独自の小さな命令にデコードされ最適化されることになり、
実実行時間で言うとやっぱりfloat系に比べて遅くなるということ
この手の演算を効率よくやりたければSIMD命令を使うのが良い
JSから表面的に触れるAPIは削除されてしまっているが、Wasmをちょっと噛ませてやれば使える こんなに頑張って説明してくれてるのにばっさり切られてて笑う
普段、そこまで深く考えないから、中々興味深かったけどな XSS(クロスサイトスクリプト）なんかを使ってjavascriptで悪さしようとしても限界あったりしない？
ブラウザを強制終了したら悪さはおしまいじゃないの？
もちろんcookieを盗み見てその情報を自分のとこに送ったりすることは出来るけど、パソコン自体に悪さをすることってできなくない？
結局ブラウザができることが出来るってだけだよね？
たとえば身代金を取るためにディスクの内容を全部暗号化するなんてことは出来ないよね？ せやね。XSS使ってもネットワークつながっていない相手の家の鍵を
開けることは出来ないから限界あるよね
どんな犯罪道具にも限界はあるよ思うよ。うん。 context.putImageData() で 1 ピクセルの操作を行えません
https://jsbin.com/kuwideyejo/edit?html,console
どうやれば良いでしょうか？ >>489
一部間違えていました
console.assert(dot2[0] == 0);
console.assert(dot2[1] == 10);
console.assert(dot2[2] == 20);
console.assert(dot2[3] == 30);
しかし問題はここではなく、
"[0, 0, 0, 0]" を "[0, 10, 20, 30]" に書き換えたのに "[0, 8, 17, 30]" になってしまう点です。 >>488
「ネットにつながっていないパソコンには何も出来ない」ってことじゃなくて、
ネットにつながっててもパソコン本体に何か悪さをすることは出来ないんじゃないか、ということ。
ブラウザを強制終了させてしまえばその「悪さ」は終わるよね？ということ。
ブラウザの動作がおかしくなったってパソコンの通常のファイルまで書き換えられるなんてことはないはずだから。 >>487
個人の情報にはそんなに期待してない
セッションIDが抜けるのが本命 あれ待てよ、ブラウザでファイルをダウンロードしてローカルなディスクに保存することできるよな
逆にブラウザを使ってローカルなファイルを選んでネット上の場所にアップロードすることもできる
ということはブラウザからローカルなファイルシステムにアクセスすることは出来るってこと？
普段はユーザに許可求めてるけどやろうと思えばそれを無視しちゃうことも出来るとか？ >>492
それを入手するとそいつにとってどういう利益があるの？
「ログイン済み」の状態を作れるとか？ httponly属性付けないでセッションid送るようなカスって居たりするの？ >>493
人間がブラウザを操作して出来ることと、html内に書かれたjavascriptで出来ることは別だったな
javascript でローカルなファイルを好き勝手にダウンロード、アップロード等で読み書きすることはさすがに普通は出来んよな >>489
MDNにあるputImageData の参考実装例を見ると、fillStateで rgbg()で色を設定して拡大範囲に対してfillするみたいだから、もうputImageDataの限界みたいですね
コンテキストのスムージングも弄ってみましたが効果なし
別の手段を考えます >>490
Chromeは[0, 8, 17, 30]
Firefox、IEは[0, 17, 25, 30]
アルファチャンネルが255以外の時のRGBはFirefox/IEは取りうる最大値、Chromeもよくわからんけど何らかの正規化がかかってる感じだね >>494
セッションID手に入れば
わりと乗っ取れるよ
わりと >>491
XSS使って相手にウイルス実行させれば
パソコン本体に悪ささせられますが？ >>500
xssとウィルス等は全く関係ないので無理 明治時代以前に写真を撮られると魂を抜かれるとか思ってた人を笑えないんだよなぁ >>496
お前プログラム板で頓珍漢な質問してるやつやろ
知ったかぶりはやめて基礎を勉強しろな >>491
XSSは目的を達成する各種ステップの初期段階だからな
XSS対策すらまともにできてないサイトが
その他の対策は万全なんてことはありえないので標的にされやすい >>501
> xssとウィルス等は全く関係ないので無理
その理屈で言えば、バッファーオーバーフローも
ほぼすべての脆弱性も、バックドアも
ウイルスとは関係ないしパソコンに悪さをするものではない
それを使ってウイルスを侵入させるためのものでしかない
XSSもウイルスを侵入させるためのものであるということは同じ >>502
写真撮ってあげましょうか？から始まる一連の騙し手口みたいなもの
色よい返事が貰えれば脆弱であることが分かるので次のステップに進む
写真撮ってあげましょうか？はKill Chainの第一段階のreconに相当する >>505
ウイルスという言葉の意味を広げすぎじゃね？
たとえばメール送りつけて偽のネットバンキングのサイトに誘導してパスワードを盗むのはウイルスではないだろ
あるいはメールに実行ファイルを添付してそれ実行したらすべてのファイルが消去される、なんて荒っぽいのを「ウイルス」と呼ぶのは変だ
ウイルスってのはもっと巧妙な、しばらくは潜伏期間があるようなもののことじゃないか？ そもそもXSSでウイルスは仕込めないだろ
どうやって増殖するのよ ウイルスは自己増殖するものに対する名前だったが
“ウイルス対策”という場合はその他の種類のマルウェアも含むのが通例
“マルウェア対策”のほうが用語としては正確だが
一般ユーザーには定着してないから便宜的に”ウイルス対策”と言う ウイルス（ラテン語: virus）は、他生物の細胞を利用して自己を複製させる、極微小な感染性の構造体で、タンパク質の殻とその内部に入っている核酸からなる。生命の最小単位である細胞やその生体膜である細胞膜も持たないこと、小器官がないこと、自己増殖することがないことから、生物かどうかについて議論がある[1]。一般的には、ウイルスは生物ではないとされる。
ウイルスは自己増殖するものに対する名前（笑） >>510
生物学的なウイルスや自己増殖の定義は詳しく知らんが
コンピュータウイルスの狭義の意味はホストを介して自己増殖(self-replication)する特徴を持ったもので間違いないで >>487
お前は毎日ポエムを日記サービスに鍵付きで投稿してるが
脆弱性のせいでそれが流失したら恥ずかしくて死ななきゃならなくなるだろ
まあそれは冗談だが、大事なデータはHDDにあるとは限らんだろ
Webサービスに非常にセンシティブなデータがあるかもしれないでしょ
それが漏れてからブラウザを強制終了させても遅いんだよ >>490,498
ふたりとも正気？
最初の「透明な黒」の背景に対して不透明度30/255のRGB(10,20,30)を描画したら
そのままRGB(10,20,30)になると本当に思うの？
ブラウザによって結果が違うのも当然
だって「透明な黒」に対して「半透明の色」を混ぜるという
非常にわけの分からないことをしているのだから XSS使えば正規のサイトに悪意のあるサイトを重ねてID/パスワードをだまし取ったりできる
ひっかかったやつがいればそれを活用して信頼できる相手からの無害なファイルに見せかけたペイロードを送る
それにも引っかかれば無事データぶっこ抜き >>505
ウィルス注入は言い過ぎな気もする
仮に最終目的がウィルス注入だとしても
そのためのドアのこじ開けくらいじゃないかなあ
んでXSSの主だった攻撃は
個人のパソコンをどうこうすることではなくて
個人が使ってるサイト、ウェブサービスをごにょごにょすることにあると思う
んでんで
ドアをこじ開けた先でする悪さは
XSSとはまた別の名前がついてるんで
XSSでできることはブラウザの中だけ
って考えても間違いとは言い切れん
気がする 使わなくなった配列とかオブジェクトのプロパティって都度空にしたり削除したりした方がよいのでしょうか？ >>516
作っているものの内容によるけど、通常は気にしなくていい >>516
わざわざ削除しなくてもGCされるようにスコープ切って使えばいいんじゃないの
手動で削除したほうが望ましい場合ってあるのかな？ >>513
putImageDataですよ
アルファ値も何もかも全部上書きする関数の話 >>513
なお、[xx,xx,xx,0]を書き込むと無慈悲に[0,0,0,0]とRGBは無視されちゃう模様
透明なのに色があったらおかしいよね、という話だろうけど余計なお世話だなぁ
JavaScript だと低レベルAPIは存在せず、高レベル描画でエミュレートしてるようだから逆に仕方がないと諦め
どうしても必要だったら、サーバにimagedataデ＝[タ渡してPNGにして返してくるWebAPI作ろうかな >>518
古代のVBAだとガベージが超頭悪かったんで、自分でデータのツリーとか末端まで参照を解放しておいてやらないと砂時計の刑
今時のガベージなら問題は少ないはず >>490
推測だが、
アルファ、30 / 256 = 0.117
つまり、0.117 減衰する。
つまり、1 - 0.117 = 0.883 倍になる
10 * 0.883 = 8.8
20 * 0.883 = 17.66
切り捨てて、8, 17 >>515
そうだよ？
だから脆弱性には、例えばバッファーオーバーフローなどという
別の名前がついていて、それ自体はバッファーオーバーフローするだけで
悪さをするものじゃないって言ってるの >>519
違う違う、誰がそんなことを言った？
上書きではなく、上塗り
背景色とブレンドされる APIの概要、仕様の基本的な部分を承知してないのに
よくブラウザの問題だとかあれこれ言えるなと思う
仕様調べるか、挙動から類推するか、自分で実験してみるか
何かしら確かめる作業をすれば気付けるだろうに
問題解決において実行系のバグを疑うのは
多くのステップを踏んだ最後の最後
質問者と頓珍漢な解答をした者ははまずその事から覚えた方がいい 質問いいでしょうか？
jsonで下記のような配列を取得しまして、これを「3月3日」のような
文字列でも日付型にでもかまわないので変換したいのですが、
まとめて行うことは可能でしょうか？
[ "2021-03-03T00:00:00+09:00", "2021-03-04T00:00:00+09:00", "2021-03-05T00:00:00+09:00", "2021-03-06T00:00:00+09:00"] mapだと個別に処理することになりませんか?
今32スレッドの5950Xを使っているので、要素が32以下の場合まとめて処理したいのです。
昔同じようなことをしようと思いFirefoxでparallelMapだかを使ったのですが、今はなくなっているようです。
どうしたらよろしいでしょうか? replaceでも出来なくはない気もするけど
一番早いのはmapなんじゃないかなあ
どうせシングルスレッドですしお寿司 他の言語でもやたら並列化使おうとする人たまにいるけど
単純すぎるものは素直に処理した方が速いよ スレッドプールが立ち上がっててデータが大量にあるなら並列にやってもいいけど
そんなクソでかいjson扱う前にできることあるよね そんなに並列でスレッドを開始したり、終了を知らせたりする処理挟んでたら、
そっちに掛かる時間の方が日付型への変換より時間掛かるまでありそう web workerで出来るけどそんなレベルなら並列化にかかるコストの方が大きい 並列化のほうがコストかかるかどうかはデータ量次第でしょ
決めつけはいかんよ
Firefoxの話を書いてるけどブラウザで実行する前提かどうかもわからない 来年度予算案並に106兆とかあるかもしれんね
戦略の見直しが必要ですわ もしwebworkerでやることになった場合
やっぱ配列の中身を一個ずつ
postMessageしていくことになるんじゃろか？ >>529の要件なら、正規表現で置き換えれば済む気がするけどな
何故こんなにも複雑な話になったのか >>542
んなわけない
そんなことしたらデータ量に限らず低速化する >>546
丸っと渡した場合は
それが別スレ化するから本線が遅くならない
くらいのメリットですかね？ >>545
時刻は全部00:00:00+09:00のデータで、月日をフォーマットするって内容だろ？
どこでロケールの問題が出てくるの？ >>529 です。たくさんのレスありがとうございます！
初学者なのでうまく説明ができずすみません…
mapで繰返し処理が出来るのはわかったのですが、
どのような記述になるんでしょうか…？
先程のjsonの配列[0]を取り出して、
date = new Date( json配列[0]);
var month = date.getMonth();
var day = date.getDate();
nDate= month + '月' + day + '日';
これで○月○日に変換できたのですが、これを
json配列の要素全てに繰返し処理したいんです。
要素数は10個ほどなので速度云々は問題無いと思うのですが… const input = [
"2021-03-03T00:00:00+09:00",
"2021-03-04T00:00:00+09:00",
"2021-03-05T00:00:00+09:00",
"2021-03-06T00:00:00+09:00"
]
//1. DateTimeFormat
const formatter = new Intl.DateTimeFormat('jp', {month: 'long' , day: 'numeric'})
input.map(x=>formatter.format(new Date(x)))
//2. Regex
const regex = /¥d{4}-(¥d{2})-(¥d{2})T.*/
const replacer = ($0, $1, $2) => `${Number($1)}月${Number($2)}日`
input.map(x=>x.replace(regex, replacer)) すごい… 高度なコードです…
参考にさせていただきます。 Node.js なら、Date 型へ変換できるけど、
環境依存だから、Moment.js とか使うのかな？
ブラウザは、よく知らない
const input = ['2021-03-03T00:00:00+09:00', '2021-03-04T00:00:00+09:00'];
let results = input.map( (str) => new Date(str) );
console.log(results);
出力
[ Wed Mar 03 2021 00:00:00 GMT+0900 (GMT+09:00),
Thu Mar 04 2021 00:00:00 GMT+0900 (GMT+09:00) ] HTML5 で name が非推奨になって、
forms['formName']['childname'].value
っていう、名前でのアクセス方法の代替方法を探してるんですが、id では出来ないようです。
children や elements を使ってるんですが、name と同じうように id 名でアクセスするいい方法を教えて下さい。 >>554
getElementById でも querySelectors でも好きにしろ form の name は非推奨になってないんじゃないか？
非推奨になっちゃうとGETで &name=value という形でURLで値が渡せなくなる
namedItem(’id名’) というのが使えるようだ
forms['formName']['childname'].value は、nameの代わりにidを使って
forms.namedItem('formid').elements.namedItem('childId1').value
と書ける ありゃ
forms.namedItem('formid').elements.namedItem('childId1').value
を略して
forms['formid']['childId1'].value
でも行けたぞ 「非推奨」と「廃止」は違う
「非推奨」とは即ち今はバリバリ使えるということだ
仮に「非推奨」な機能を使ってコンテンツを作り、その直後にメジャーブラウザが廃止を発表したとしても
実際に廃止される前にコンテンツの寿命が尽きる事が殆ど
よって何が一番ダメかというとこの手のことに真剣に考える事自体 >>554
jQueryを使うのが一番
$('#id') でもなんでもすきな方法が使える ちょっと有り得ない現象に遭遇したのでどうしたらいいか指南お願いします
console.log(a)// -> {hoge:0}
console.log('hoge' in a)// -> true
console.log(a['hoge'])// -> undefined <-！？！？！？
console.log(a)// -> {hoge:0}
オブジェクトそのまま出力したらhogeってプロパティがある
プロパティ名をチェックしてもあると帰ってくる
なのにアクセスしたらundefined
行き詰まった＼(^o^)／
データがバイナリ的に壊れてるとかですかねこれ
同じようなケースの経験ある人いますか？ そのオブジェクトをどうやって生成したか？
それにどうやって、hoge 属性を追加したか？ ajaxでDBから読んだデータをdatatableというライブラリに読ませてる中で発生
属性はajaxで取得した時点で付加されてます
それを弄らずに渡してるだけ
ある特定のデータだけで起こる
この変数をObject.assignでコピーした変数でも同様の現象
DBに格納されてるデータが壊れてるのか？🤔 出来ないですね
マジで不思議
特定のデータで100%再現するからデータの問題かな
というかそう思いたい
他の言語でもこんなこと起きたことない
javascriptも10年以上世話になってるけどこんなの初めて var foo = {'hoge': 37};
コピペできるかな 同じかどうかはわからんが不可視文字ってのがあるから
それを確認できるエディタかバイナリエディタで見るといい
>>567のやつコピペしたらfoo.hogeはundefinedになるはず 実際にはプロパティ名は変数に格納されてるのそういう単純なミスではないです 明日データベースの中身をバイナリエディタでみてみます ヘボですみません、色んな本読みましたが
var str = "a@b@c@d";
を[a, b@c@d]と分割する方法がわかりません。
最初の1回目の@だけ判断してsplitみたいに二つに分けたいんですがさっぱりです。 単純でお馬鹿な方法だと、全部分割してから、二番目以降を連結したらどうか？ 正規表現使っていいなら
str.split(/@(.*)/,2) 他の言語のsplitでlimit引数与えると571みたいな動作になるのに
なぜjavascriptのsplitは全部分割してlimit以降を捨てるようにしたんだろう？ var str = "1@2@3@4@5"
var splited = [str.slice(0, idx =
str.indexOf('@')), str.slice(++idx)] また、どうでもいい質問
window.requestAnimationFrame() の戻り値の requestId
window.cancelAnimationFrame() に渡すと callback は呼び出されない
こんな仕様があるんで騙されたけど、このリクエストって callback で次のリクエストを自分で呼ばないと駄目なのね
周期的に呼び出し続けるものだと思ってしまった
この仕様って何を考えて作ったんだろ？
呼び出すとは言ったが、(略)十年二十年後ということも！！ Ruby では、
str = "a@b@c@d";
# 左からコロンで、2つに分割する。最大分割数・limit は2
p ary = str.split( '@', 2 )
出力
["a", "b@c@d"]
Lo-dash には、無いの？ >>577
ありません、かならず@が存在します
綺麗に書くの難しいんですね、これ ペチパー的には>>573か
pos = str.indexOf('@');
[str.substr(0, pos), str.substr(pos)];
だな const str = '';
const pos = str.indexOf('@');
let ary = [ ];
if (pos >= 0) {
ary = [str.substr(0, pos), str.substr(pos + 1)];
}
console.log( pos, ary )
出力
-1, [ ] >>573 のようなsplitにおけるキャプチャグループの挙動を知らなかったので、以下のように書いただろうと思う。
str.match(/(.*?)@(.*)/).slice(1) str.split(/@(.*)/)
で十分じゃん 横にそれるがsliceじゃなくsubstr使う派って何を意図してるの？ ‘@‘の場合にどういう結果を得たいかで微妙に変わるな >>588
見てから言ってる
３つ目に空文字が入ったとして問題になることは希有でしょ webページの操作をjavascriptを使ってカスタマイズしたい
たとえば複数のページに分けられている文章を一度に読み込んで表示したりしたい
具体的にはローカルファイルでhtmlファイルを作ってその中でiframe内に他人が作った
web ページを表示させてその中身をjavasccripで操作したいんだけど、
こういうのはクロスオリジン要求ってことで基本的にだめだよね
でもそんなにマズいことか？と考えてみれば、ユーザが自分で知った上でやる分には危険はないはずだし、
「開発者用ツール」を使えば他人の作ったwebページの表示を変えることだって出来る
（htmlファイルののコピーはローカルにコピーされてるから）んだからそういうのをJavascriptで出来てもいいんじゃないの？と思う
できない？
selenium IDE とか言う、web 操作を自動化するツールがあるのは知ってる
そういうの使うしかない？ >>592
そんなにマズいことだからだよ
任意のサイトをフレームに読み込んでJavaScriptから操作させたとする
それは相手のページに自由にスクリプトを埋め込むことと同じ
つまりは歴としたCSRFだから、ハマチちゃん大増殖 >>592
自分のページに
明らかに小さいフレーム埋め込むのしか想像してないっしょ >>594
それは偽サイトが作りやすくなるからダメってこと？
偽サイト作るなら別にそれなくても出来るよね
HTMLの中身全部コピーしてその偽サイトに置いちゃえばいいから
それやらないで、1枚HTMLの皮かぶせるだけで被害者を騙せるようになる？
ただ、そのHTMLの皮だってそれなりのURLのとこに置かないと騙せない気がするが >>595
うん
HTMLは一旦ローカルにコピーされてから表示されるわけで、同じオリジンのHTMLのコピーはjavascriptで好きに改変できるんだから、
iframe で表示するためにローカルにコピーしたHTMLだって好きに改変させてよ、と思う
開発者用ツールでは出来るんだし >>596
> ただ、そのHTMLの皮だってそれなりのURLのとこに置かないと騙せない気がするが
あ、メールの添付ファイルで送りつけちゃえばいいのか HTMLファイルを添付ファイルで送るんじゃなくて、メールをHTMLで書いてaタグのhref属性でヤバいとこにリンクして表示はまともなURLを表示すればいいか >>596
違う
もちろん自前で使うならば問題はない
しかし万が一そんなものが出回った場合に、製作者の責任とか難癖つけられて、とっても非難されるのは目に見えてる
だから、誰もそんなものは作ったとしても公開とかしない
具体的な攻撃シナリオを提示
ページに「視認できないサイズのiFrame」でアマゾンを開いておく
大体の人はログインしっぱなしだろう
そして iFrame の JavaScript を操作して、とにかく注文しまくる >>600
なるほど
それはヤバそうだ
基本的に人間が手動でできることはやりたいと思ってたからそれができるとその攻撃でやられちゃうな
自作のブラウザ作ってそれ出来るようにしちゃうとヤバいな
まあそんなブラウザ世の中に存在しないだろうからそういう攻撃もないかも知れんが ブラウザにブロックされるクロスオリジンはhttp proxy使ってレスポンスヘッダを変更すれば回避できる
スクレイピング時はよく使う >>601
ヘッドレスクロニウムでいくらでもできるんだが 拡張機能にユーザーが権限与えて通信する分には問題ない
勿論怪しい拡張機能もあるがそこはユーザーの判断 クロスオリジンがブロックされるのはブラウザのユーザーを守るため
ユーザーがリスクを理解してブロックされないようにするのは自由 >>592
銀行のサイトから預金残高を取られて
病院のサイトから健康情報を取られてもいいなら
問題ないかもね 全く関係ないw
クロスオリジン理解してないやつ多いんやな 消えた理由は聞いたことないけど、一時期採用されてたユーザースクリプトも、悪用の可能性を消せなくて消えて行ったんだと思う
あれもクロスオリジンの壁を越える一つの手段だったから ユーザースクリプトは今でも普通に使える
クロスオリジンの制限はあるけど >>606
その程度なら
見やれてもそんなにダメージない気もするw 「要素をクリックしたら」というイベントを設置しつつ、フラグを仕込んで処理が終わるまで
重複で発火しないようにしてあります。
ですが、androidのchrome、もしくはPCのchromeの検証ツールでスマホ表示にすると、
何故か何度もクリックできてしまうようです。
ただし、クリックするたびに画面がガクガクもたつくだけで、イベントの処理自体はフラグで中断されているようでした。
何が原因と思われますでしょうか。
イベント発火後に対象要素全てに対してpointer-events: none;を付けてみましたが、
それでもクリックできてしまっています。
var btn = document.getElementsByClassName('btn');
var flg = false;
var btnClick = function() {
if (flg) return;
flg = true;
処理
flg = false;
};
var fn = function() {
Object.keys(btn).forEach(function(v) {
btn[v].addEventListener('click', btnClick);
});
};
fn(); >>611自己レスです
対象要素ではなく、どこをクリックしても画面がもたつく感じですので
タッチイベント周りかもしれません。 JavaScript はシングルスレッドだからフラグで排他処理しようとしても意味がないんだと思ってたけど、
思い込みで間違ってる？ 処理中はボタンをdisabledしとけばいいのでは？ メインスレッドだけなら1つの関数が同時並列に実行されることはない
がクリックイベントはJSのmessage queueにキューイングされるんで
ボタンがクリック可能なら何度でもクリックできる
だいたい防げればいいのであればとりあえずボタンをdisableにすればいい
OSのイベントキューもあるから100%複数クリックを防ぐのは無理 >>611
event.preventDefault()してもダメかね？ >>614-615
btnという名前のa要素でして、disabledと同等だろうpointer-events: none;を
使っておりましが駄目でした。
>>616
クリックイベントが原因ではなく、タッチイベントが原因だったようです。
処理中にタッチイベントの停止と開始を組み込んだところ、画面を連打しても
ガクガクしなくなりました。
皆さまアドバイスありがとうございました。 タッチイベントで何してるかは分からんが、passiveで良いものはpassiveにしないとダメだぞ >>613
間違ってる
JavaScriptはシングルスレッドだから
JavaScriptを呼び出す側をマルチスレッドにすることで
擬似的にJavaScriptがマルチスレッドっぽくなるように作られてる >>618
タッチイベント自体は何もしていないです。
スムーススクロール中に発生していたのですが、利用しているのはクリックイベントでした。
何が原因かさっぱりですが、他イベントでpassive: false;にすると影響出たりするのでしょうか？ >>619
Web Worker なら変数のスコープは独立してるからフラグにはアクセスできないよね？ >>613
ストレージ系は共有されているので排他処理が必要になる
そうでなくとも１つの動作が非同期処理含むものだと
その間に他の処理が割り込む余地が生まれるから
広い目で見て排他処理が必要な時はある >>621
そんな話はしてない。シングルスレッドでも排他処理は必要という話だ。 >>623
ワケわからん
シングルスレッドならば処理途中に割り込みされない
擬似的にマルチスレッドすれば割り込まれる
しかし擬似マルチスレッドでは、排他以前に変数アクセスできない
排他したいが変数じゃ無理でしょ、と言ってるんだけど >>619の認識は間違ってるから掘り下げても無駄だぞ >>622
JavaScriptはシングルスレッドだから「フラグで」排他処理はできないんじゃない？
と言ってるんだが
排他処理の是非なんて話してないよ >>626
「是非」という言葉の意味を分かってる？
>>622のどこをどう読んだら是非について語ってると思えるのかが分からんが
そこに拘ってたら話が進まないのでリセットする
別にフラグでも排他処理はできるでしょ
たとえばコンテンツの表示内容を通信で取ってきて更新するupdate関数を考えたとき
通信開始して更新が完了するまでの間に関数が多重に呼ばれることのないようにしたいでしょ
そしたらフラグを使ってこのように書いてもいいじゃん
let flag
async functuon update() {
if (flag) return
flag = true
elm.textContent=await (await fetch('......')).text()
flag = false
}
他にもアニメーションの関数があれば
アニメーション中に再び呼ばれることがないようにしないと
アニメーション中にアニメーションが開始されたら
よくイメージできるようなガクガクブレブレの表示になるでしょ
それも同じようにフラグによって回避できる
ちなみにフラグを使うときの注意点は例外が起きたり、
うっかりフラグが立ったまま抜けてしまうこと
本当に複雑に非同期が絡み合うと、どうしても予想外なデッドロックが起こりがち
そういうときにはタイムアウトを入れたり
定期的にタイムラインを精査して「掃除」したりして
最悪ごまかしで対処しないといけなくなる 複数回クリックさせたくないならどこかのレイヤーでスロットルしないと
キューイングされた処理を1つ1つ逐次処理してるんだから
>>611のように非同期でない1つ処理を変数で排他制御しようとしたところで意味はない >>624
排他処理がなにかわかってるのか？
共有のリソースを、片方が使ってる間に別のものが使うのを防ぐものであって
複数のスレッドとは限らないんだが 超初歩的な質問なんですけど
var array = [0,1,2,3,4,5,6,7,8,9];
っていう配列があったとして、9を消したかったら[0,1,2,3,4,5,6,7,8]となって1を消したかったら[0,null,2,3,4,5,6,7,8,9];になるメソッドってありますか？
nullじゃなくてemptyでも空ってわかるものなら何でもいいんですけど >>632
ないんじゃね？
Arrayを使うユースケースじゃなさそうだけど なんでfor?
末尾ならpopしてそれ以外ならnullかemptyで上書きするメソッドを書けばいいでしょ？
でも結局nullかemptyのハンドリングが必要だから末尾でも同じように処理して問題ある？
もしデータ量が多くてコンパクションが必要なケースならpopしただけじゃダメな気がするので
コンパクション目的の処理を別途切り出したほうがいいかも そこら編のアルゴリズムはlodashにたくさんあるだろう 9を消したいってのがindexの9なのか中身の9なのか あの〜馬鹿馬鹿しい質問なのかも知れないのですが。。
let newArr などで宣言した変数がブラウザのコンソールから呼べません…
varならどこからでも参照できるのかなと思ってvarにしてもダメ。
全部外して、newArrだけにすると呼べます。これはナゼですか？ ある要素にホバーすると、その要素の上端に高さ不定のホップアップが表示されるようになっています。
このホップアップが位置次第ではbodyの上端を超えてしまいます。
ホップアップはposition: absolute;で座標を指定しているので
bodyに高さは反映されません。
このような場合にホップアップの分だけ上にスクロールしたいのですが
何か良い方法はありませんでしょうか？
jsでホップアップの高さの分だけbodyに高さを付与しようと思っていますが
恐らく高さが増えた瞬間に表示位置がずれてしまうと考えています。
表示位置が変わらずに対処する方法はありますかね？ >>640
トライした結果のコードか
トライする前の状態のコードを
最小限のサンプルにしてjsfiddle辺りに上げて 配列同士を比較して値が含まれてたらそのインデックスを返させるには
どうすればいいの？ あ、配列同士？
なら要件による
>>644 でははしょられ過ぎで分かんない >>646
ごめん、説明が足らんかった
['1', '2', '3']に対して['3','4','5']を比較して
= index[0]って取得したいの あ、もしかしてそんなメソッドは存在しなくて
右の配列から１つづつ取り出して、何個目でヒット
みたいなのをIndexOfとかforEachなんかでやるしかないっぽいかも。。 ['1', '2', '1', 3’]に対して['3', '1', '4', '5', ‘3’]なら？
データ量と返したインデックスをどう使いたいかとかによっていろんなやり方あるね >>647
とりあえずこんな感じか？
細かいところは好きに調整して
var a = ['1','2','3','4'];
var b = ['3','4','5','6'];
var result = b.map((v,i) => {
return a.includes(v) ? i : null;
}).filter(v => v != null);
console.log(result);
console.log(result[0]); 質問者が自分にとって自明で、回答者にとって自明でない、本来質問に必須のコンテキストを削ぎ落としてしまいがちなバイアスのことなんて言うんだっけ？ アンカー要素をクリックするとスムーススクロールをする場合に
スムーススクロールをするメソッドには手を加えずに、一部のアンカー要素では
スクロールさせないといったようなインターセプト的な技法はありますか。 >>655
早速どうも
剥がすというのはremove.eventListenerのことでしょうか。
そうであれば剥がすためにスムーススクロール側のスクリプトに手を加える方法しか
私では思いつきませんので、やり方をお教えいただけませんか。 >>656
スムーススクロールをどうやってるのか知らんが、
セレクタを変えるだけだろう？
$('A').smoothScroll() から
$('.target').smoothScroll() に変更するだけ >>657
スムーススクロールはhrefに#があれば自動でイベントの対象となる作りになっています。
また、セレクタを変更するのはスムーススクロール川のスクリプトに手を加えているので
希望の対処法ではありません。
すみません。
>>658
具体的にはどのような手順になりますか。 capture:true
stopImmediatePropagation >>659
その実装は
うんことまでは言わんまでも
10年前のやり方なんでやめた方がいいんじゃない？
今みたいに困るから 私の状況を助けていただけませんでしょうか。
職場にキオスク端末に今までブラウザのキオスクモードで
Flashコンテンツを表示させていたのを、
JSとHTMLで刷新することになりました。
端末は旧新混在しており大きく分けて感圧式と静電容量式があります・
Flashを使っていたときは気にすることはなかったのですが、
ボタンなどをDOMで構築するとかなり押し心地が異なります。
おそらく感度や制度、画面の厚みからくるものだと思います。
（Flashコンテンツではなぜかある程度調整が効いているようです）
そこで端末がどちらに含むのかを認識して調整をかけたいと思い奮闘したのですが
UAなどJSから簡単に取得できる情報は際がありません。
あとはmatchMediaくらいかなと思っているのですが、
このAPIの掘り下げ方が分からず行き詰まっております。
助けていただけませんでしょうか？ すみません。徹夜続きで寝ぼけていたのもあり誤字があまりに多いです。
失礼しました。 ajaxを使い動的に生成した要素の親要素を基準として.childrenで動的要素を取得すると
漏れてしまう要素があります。
動的要素ってそういうもんですか？ もしかしてお望みの物はchildNodesですか？ >>662
面白そうな仕事で裏山
質問に質問で返すようで悪いんだけど、そもそもHTMLで作る際に調整なんてあるの？
touch系のイベントを使ってなくて、clickしか設定してないとか、そういう基本的なことではなくて？ >>659
> スムーススクロールはhrefに#があれば自動でイベントの対象となる作りになっています。
それを修正するだけで終わる話ですね APIでjsonデータを取るようになってから、クラウドDB使用時のfirefoxの
アドレスバーの左端に「以下のサイトが、あなたがこのサイトにいる間、
クロスサイト cookieとサイトデータにアクセスできます。」
って表示されてるんですがこれ危ないやつですの…？ >>660
おぉ！！！
ありがとうございます。
まさにインターセプト的な割り込みです。
capture: true って親子関係にある要素の同イベントの例ばっかりで、
今のところ使いどころないなと思っていたのですがこんな使い方があるなんて。 >>670
おれも気象庁のデータ引いたらそれなった。
平気なんじゃね？知らんけど。 >>647
配列を集合と見立てて、配列同士の積・intersection とか、Lo-dash に無いの？
Ruby なら、
[1, 1, 2, 3] & [3, 1, 4] #=> [1, 3] Arrayにわんさかメソッドが入る案がES4時代から合ったが
少し入っただけで今は鳴りを潜めてる
近い未来で機能が増える予定はない
一方集合関係のメソッドがSetに追加されることはほぼ確実
その他に[1,2,3]==[1,2,3]の性質を持ったTuple型が入る予定なので
今後はArrayではなくそれらに期待すべき >>673
結局for文の中でfor文回して2つのカウンターで
取り出して比較しちゃった
4行で済んだし とりあえずは事足りたなり >>676
初級者だからO(N^2)？なにそれ？だったけど
調べてみたらソレだった…！ 状況次第
データ量が少なければO(N^2)でも別に構わない 7 * 12くらいの処理だし平気かな…
O記法とか知らなかったし学びになった 感謝 ちょっと手を入れればN^2にはならんと思う
チェック先の3,4,... で「最初に」ヒットしたインデックスが必要なら、チェック元1,2,...の順序は関係ない
だからチェック元はソート
あとはチェック先の要素を回して二分探索 配列が大きくなったらチェック元はSetに突っ込んじゃうのが楽だと思う 計算量が多くてアカンと考えるのが間違ってる
計算量が多い計算をするためにコンピュータはあるんでしょ データ量が多ければ・・・
O(1) > O(log n) >> O(n) >> (超えられない壁) > O(n^2)
みたいになるんだから計算量を減らす事は考えなきゃダメでしょ
前の人らが言ってる少ない配列なら大差ないけれども >>683
計算量が少ない計算ってなんですか？
例えば+1するだけの計算でも1京回繰り返せば
あなたがコンピュータでやりたいと思っている計算量が多い計算になるんですが？ >>683
それはちょと違う
一回毎の時間と精度が違うだけなんだ
量については
人間の暗算でも、そろばんでも、コンピュータでも変わらん 計算量はcomplexityの訳語
アルゴリズムの計算量(complexity)とは
そのアルゴリズムを実行するのにどのくらいのリソース(主に時間と空間)が必要になるかを示すもの
ビッグO記法はアルゴリズムの計算量の表現形式 漏れらは、n^2 を見たら、
反射的に、n log n にならないか、考える Google などのプログラミング・コンテストなどは、計算量の見積もりする
1秒間に数百万回ループできる。
Ruby などの動的言語では、1秒間に百万回ぐらいだけど
n log n の形とか、グラフ・動的計画法・メモ化とか 推奨ＮＧワード： 漏れ
推奨ＮＧワード： Ruby >>684
データ量がもう常識はずれに明らかに多ければね
でも原則最適化は実際困ってからしっかり分析して考えるべきものでしょ
それ自体が良いことと信じ込んで目的化したり、感覚でやるものじゃない
それよりもコーディング速度重視で愚直に仕上げて
最後に問題になったらそこを潰すほうに時間をかける方が
１つ１つのことに考え出すよりよっぽど建設的で効率的
プログラムっていうのは全体で動いているのであって、
君が拘ったコードが実際は１回も働かないということだって十分ありうるのだから
人にアドバイスするにしてもどこに力に入れるべきかはよく考えたほうがいい 最適化するかどうかは状況次第だがアルゴリズムのオーダーは把握しておいたほうがいい
かといって競プロみたいのばっかりやるのは逆に害のほうが大きいけど 最適化はエンジンの仕事
俺らのしったこっちゃねえ
エンジンが状況を慎重に判断して
より高速で等価な演算に変えるべきだろ
人間は何をしたいか意思を示すことが仕事だ >>694
量子コンピュータってのは
今俺らが使ってるコンピュータのすげーやつってわけじゃないんだ
名前が似てるだけの別のもの
JavaとJavaScriptくらい違う >>696
今回の質問のような検索は量子コンピュータに向いてる HTMLスレとどちらに書こうか一瞬迷ったけど
最新版のChromeに更新したらcoverageバグってないか？
通してないifルートもパスしたことになっちゃう
ブレークポイント仕掛けてもブレークしないから実際に通ってない
Promiseのcatchというかrejectルートはパスしてない表示なんで、全部おかしいわけじゃない >>704
https://jsfiddle.net/yrhnkmjf/
最小限だとこうかな？
if (false) {
console.log("pass");
}
の pass は通らないがパスした色で表示される。 >>704
開発者ツールのSourcesでCoverage出して再読み込み
カバーされてない行は行番号横のラインが赤く表示される
関数内の通してないifブロックの行も今までは赤く出てた、と思う
昨日、Chromeの更新マークが出てたんで更新した
そして今日Coverageを実行したら赤く出なくなってた >>704
今日も更新されてたみたい
バージョン: 89.0.4389.90（Official Build） （64 ビット）
でも現象は未だに再発する あのねぇ……
関数っていうのは定義時に例外判定で捜査される以外に、
呼び出しの瞬間に中の（ネストされた関数内を除く）構文が一度すべて評価されるの
じゃないと変数宣言とか処理できないでしょ？
だから関数が呼ばれた時点で中身はすべてカバーされたことになるのよ
わかる？
いくらif(false){}だろうが
もしif(false){var x}みたいな記述があったら当然関数全体に影響するでしょ？
実行系のバグを疑うのは最後の最後
最低でもbugs.chromium.orgくらいは見て考えてからにしたほうがいいよ
「。。。と思う」とか最悪だから
なんで君の妄言に俺らが付き合わないといけないの？ 付き合うも付き合わぬもあなた次第
気に入らなければ喧嘩売るよりスルーしましょう >>708
うーん、Chromeのカバレッジって元々C0にすら対応してなかったという話なのか？
対応してたと思ってたのが買い被りの勘違いだったんだな >>708
いや、カバレッジ設定を見直したら Per block 指定があるじゃないか！
アプリの更新で何故か外れてしまっていたための異常だと判明 87と89で試したけど動きが変わってるのは確かだね
87だとなぜかPer functionでもif(false)を含めた3行が赤くなったが
89だとPer blockにしないとダメだった
修正項目にはあがってないけどなんか手入れたんじゃね？ 89でも関数の先頭行にブレークポイントを設定してF8とかで最後まで実行した時は
Per functionを選択しててもif(false)を含めた3行は赤くなるな
ブレークポイントの位置でも結果が変わるから
こういうやり方でカバレッジを見るのは想定してないのかもしれないが そうか逆なのかもしれませんね
今までも Per function だったけど何故か Per block として動いていたのがバグで
今回の更新で正しく Per function として動くようになった
と イベントリスナの登録順序って先に読み込まれた方が上に来ると考えてよいのでしょうか？
2つの.jsファイルがあって、それぞれload完了後に処理が走るようになっているのですが
ファイルを読み込む順番を変えてもイベントリスナの登録順序は変わらなかったです。
今はcapture tureを使って制御しているのですが、可能であれば登録順序側で
制御したいです。 $('#flg_' + n).attr('checked', !0) みたいな記述で、
1 や true でなく !0 とするのはどんな意味があるのでしょうか？ >>717
boolに変換するため && コードをコンパクトにするため その場合1だとchecked="1"になるが、!0はchecked="true"になる
tureより2文字短いというだけ 年食うと細かい文字がキツイんでtrue/falseで通すがlinterが ! 使えば？とか言ってくるのがウザい
どの言語でもlinter導入すると、まず改行系と省略系を殺す設定を探すところから始まる >>717
javascriptにおいてはまったく無意味なコードなんで格好つけてるだけですよ >>720
linterが!を使えばって言うのは変数をboolに変換する時じゃないのかな？
>>721
!0や!1は人間が書くコードじゃなくminifyされたコードだぞ >>722
いや例えば boolean 返してくる感じの関数の戻り値の否定で if (false==contains(hoge)) {}とか書くと冗長ですとか言い出すlintってたまにあったりする
simple: false とか冗長警告を切る設定をまずは見つけないと minifyってなんだろうーと思って調べてみたら
web系はインデントなんかも読み込み遅くさせる要因なのか…
初学者にはお勉強になりました 完成したら改行程度は残して詰めちゃおっと >>724
うーーん・・・
ヨーダも気になるがboolean以外のfalsy/truthyを考えてなさそうだからすごく気持ち悪い >>725
世界的には数十Kbpsしか出ない環境もまだまだあるからminifyが流行ってるが
日本じゃインデントをどうにかしたくらいじゃ誤差程度にしか変わらん
やるとしたら今策定中のバイナリastを送るのはパースまで含めて大きな効果が期待できる。
あと５年まて >>728
そっ そうなんですね…
じゃあ読みやすさ重視でいいか… だから人間が書く時にやるんじゃねぇって
network traffic的にはgzipしてればminifyの有無では数%しか変わらないがそれに価値がある場合もある
network以外でもparse & loadはサイズが小さいほうが有利 >>728
うそーん
そんなしょうもない理由？
送出の総量を抑えるため違うん？ >>723
策定中ということは、ファイルの読み込み順序を変えることは意味がないってことなのですか？ あと５年待てと言うが５年後には状況変わってると思う
来年には待望のIntel7nmCPU(PC向け)が出る
３年後には5nm、そしてチップ積層化、メニーコア化
５年以上前からIntelのＰＣ向けCPUは大きく成長していないが、漸くここ数年で大きく成長できそうな目処が付いてる
パース周りは勿論、他にもworklet系もそのメニーコアを活かす形でまともに使えるようになってるでしょ
ミニファイとかアイコン画像を１枚にまとめていたような半ば黒歴史になるだけだと思うけどね >>733
その辺の事情はあまり関係ないと思う
コードの圧縮や画像のスプライトは
1ページのユーザビリティを考えて出来たものではなく
大アクセスのあるサイト運営のコストとなる
伝送量やリクエスト数を減らそうというものだから
なのでその辺のテクニックが黒歴史化するのは
ハードウェアやブラウザなどの進化ではなく
サーバと回線を売るビジネスが変わったときになるはず それは理想的な話
この世界は理想通りでは動かない
実際ベストプラクティスみたいにされて
そんな伝送量気にしなくていいサイトまで使ってたしな
ただハードの事情が直接関係ないというのは合ってる
そういうのはただの流行り廃りでしかないからね クラウドで従量制の時代こそシビアになるもんかと思ってたけど >>740
そうそう
この手の技術が生まれた頃は
伝送量いくらまでおいくら万円という
携帯電話のプランのような段階的な契約を
データセンターやサイト自体が回線事業者としていた
それが現代ではAWSのようなクラウド鯖や
akamaiのようなCDNになって
もっと細かな従量課金になったので
小アクセスでもこの手の伝送量削減のテクニックは
むしろ活かされやすくなった アイコンをまとめても伝送量削減にはならんでしょ
使わないアイコンだって含まれているだろうし
もし１００％使うとしてもそれを制御するJSやCSSの分伝送量が増えるんだから
それで伝送量を減らそうというのは継続的に相当難しいことだと思うよ
レスポンスの事考えてもHTTP2で数が多いファイルの伝送効率上がったしね
Googleくらいのアクセスがあって初めて効果があるようなこと
そのGoogleでも1回しか使われないアイコンはインラインSVGにするとか
１枚に組み合わせるのではなくて何枚かに分ける
（１つの目的は読み込み順と表示位置からくるレスポンス担保のため）
とか本当に様々な工夫と組み合わせて使ってるし
ただアイコンは１枚にバンドルすればいいというものではけしてない
素人は勿論、普通レベルのデベロッパーもやらない方がいい http2で思ったほど効率上げられなくてあっという間にhttp3策定されちゃったよね >>742
いつまで無知な言い訳を続けるのかww
もういいよ 同一ページや共通ページで使う画像とかに対して普通やるもんだから
いらん画像なんて入れるのはただのアホやで gifアニメーション的な動きを多方位でやらせるために
html5ベースのゲームで多用されてる 種々の最適化は手間と効果の兼合いだから採用しないってのも十分あり
minifyについてはそんなん考える前にビルド時に自動で走らせる場合が多い気がするけど KeyboardEvent で code, shiftKey,... とかの組み合わせ値から現在のキーボードレイアウトでの key を事前に求める、または逆に key から(ShiftLeftとか無理ですが)組み合わせを推定する手段は、標準では用意されてないでしょうか？ >>751
>KeyboardEvent で code, shiftKey,... とかの組み合わせ値から現在のキーボードレイアウトでの key を事前に求める
keyを事前に求めるとは？ >>752
KeyboardEvent にはキーを特定するために key を使う方法と code を使う方法があります
key は大文字小文字が別扱いです
code はキーボードレイアウトごとに同じ文字でも別扱いです (code==KeyZ でも key=='Y' だったりします)
例えば W というキートップであるキーを、上に移動という機能に割り当てたい、というケースに対して
一例として、key の値として 'w' と 'W' に対して一定値になる code を事前に求めておいて、イベント発生時には検索して目的の機能を呼び出すとか
そのために変換手段があればと考えましたが、見つけられませんでした
まあ w, W の両方を登録しておけば済む話ですが WASDを使うならユーザーにWASDを使いますと案内するわけで
キーボードの全体図を出してこの位置のキーを使いますと案内するわけじゃないでしょ
だったらcodeで認識するのは変で、keyで素直に認識すればいいだけ
ユーザビリティを考えるのであれば、キーコンフィグ機能を付ければいい
それで解決 >>754
手段は標準では存在しない、でいいんですね？ 君がどういう目的で、どういう結果を求めているかイマイチわからない
そもそもキーボードっていうのはOSに複数接続可能だし、ソフトウェアキーボードもある
形も配置も、どんなキーがあるかも様々だ
それを踏まえてもまだ何かをしたいっていうのであればもっと詳しく書いてくれよ ぶっちゃけ keydown と keyup で key は違ったりすることもあるので key は使いにくい
keydown shift
keydown A
keyup shift
keyup a
どちらも code="KeyA"
かといって code はキートップ文字を表さない位置情報だからコンフィグで指定させるキートップ文字と対応できない
ブラウザは現在のキーボードレイアウトを参照していなければキーを返してくることは出来ないのが道理
ならば、code + shiftKey等を元に key
もしくは、key + shiftKey等を元に code
と片方からもう片方を求める手段は、標準としては用意されてないでしょうか？
と質問しています まだ良くわからんのだが
keyを元に、実際のキートップに印字されてる文字を取りたいってことなら、
KeyboardAPIのgetLayoutMapを使えばできるけどそういうこと？ >>758
そうです！
と、調べてみると実験的で Firefox だと動かないのか……残念 質問です
JSのプロパティとは、他の言語で言うところのフィールドと同じような意味と
捉えてよいでしょうか？ いや、例えばC#のプロパティと同じでフィールドとは別に存在してるよ
this.xxxx = xx;
として作るフィールド
get xxxx() {return xx;}
として作るプロパティ(setter では get ではなく set)
どちらも instance.xxxx としてアクセスできる >>760
オブジェクトのプロパティはオブジェクトに定義されてるkey-value pairのこと
JavaやC#で言うフィールドとは少し違う
var foo = {
bar: "foo",
baz: "30",
qux: function() {
console.log(this.name, this.age);
}
}
上の例ならbar, baz, quxすべてオブジェクトのプロパティ
(それ以外に__proto__も定義されるけどそれはおいおい理解すればOK)
オブジェクト自体をkey-value pairを格納するものだと捉えておけばいいと思う
classの定義で使うconstructor()もプロパティの1つ
プロパティの値が関数になってるだけ
>>761に書いてるgetやsetで定義するのはアクセサプロパティというプロパティの一つの形態 >>761
>>762
回答ありがとうございます
オブジェクトの構成要素=プロパティ、と考えていいんですか？ >>763
>オブジェクトの構成要素=プロパティ、と考えていいんですか？
いいです usestrictモードでIE11で検証したところ、正しく変数宣言できていないとエラーが出ていましたが、
chromeでは何もエラーが出ませんでした。
基本chromeで検証しているので、こっちでもエラーが表示されるようにしたいのですが
何か方法はありますでしょうか？
エラーとしては下記のように連続して変数宣言をする際にカンマで繋げるべきところを
セミコロンを打っていたと言った感じです。
var sample1 = 'text';
sample2 = 'text; npm inint npm install で ローカルに wscatをインストールしたんだけど
ターミナルから npm run wscat で 起動できません
なぜでしょう？ 無名関数は同一ページに何個も定義できますか？
無名関数はそれぞれ中身は違うものとする >>769
経験的だけど上限に達したことはないです
Promiseのthenとか普通にみんな無名関数だし
よほど極端な使い方をしていなければ、気にしても仕方ないのではないかと >>767
外部ファイルの先頭に 'use strict'; と書いています。
その状態でIEでだけエラーを拾ってくれたので、他のブラウザでも
拾ってくれたらなと思っています。 >>770
無名関数を複数定義したら
どうやってどの無名関数を使うか区別するんですか？ 区別なんてしないよ
その場で作ってその場で使うだけ >>772
Promiseとかイベントハンドラは名前じゃなく処理実体として関連付けてるわけだから、どれを使うも何もないよね？
関連つける先もない無名関数ってどう使おう、というかどう書こうと考えてるの？ >>772
自然の殆どの生き物名前が付けられていないが
問題なくやりくりされてるでしょ？
それと同じ 無名関数なんてその場限り1度しか使わんだろう普通
何回も呼び出すようなら普通に関数にすればいいだけだし イベントみたいに内部変数に格納したり、配列化したりはするけどね
774でも書いたけど、無名関数を作ったって格納しなきゃ保持はできない(と思う)んだから、そもそも意味がわからない 【何をどうしたいか】
多数のオブジェクト(連想配列)を、1つずつMapオブジェクトに変換したい
【jQueryがNGかどうか】NG
N個のオブジェクト(連想配列)が配列Array1に入っている。
Mapコンストラクタの初期値に連想配列のキーと値を取りだして渡し、
できたMapオブジェクトを配列Array2にpushする。
これをN回ループする。
↓
for (i=0; i < N; i++) {
Array2.push(new Map(Object.entries(Array[i])));
}
としたところ、参照渡しとなり
Array2の先頭から末尾まですべて同じもの、
即ち「N番目の連想配列からできたMapオブジェクト」が格納されてしまいました
参照渡しを値渡しにするテクニックには
Object.assign(コピー先オブジェクト,コピー元オブジェクト)が使えるようですが、
変換先（コピー先）がMapオブジェクトだからか、
これではうまくMapが作成できません
初心者なので説明が下手ですみません
どうか、うまい方法をご教示いただけますと幸いです。。。 コピー(object.assign)してから変換(object.entries)すりゃ良いんじゃね
というかコピーしたいのか変換したいのか両方したいのか区別して書いてくれ 大前提としてJSに参照渡し・値渡しという区別はない
他の多くの言語でも～渡しというのは
アノテーションをつけるなど「渡し方」によって決まるもの
「渡し方」が同じなのに（型によって）「渡され方」が変わると考えるのは不自然だといい加減気づいたほうがいい
JSでは全てが名付けの連鎖、所謂共有私によって為されている
基本的に値は複製されることはないし、消えることもない
新しく作られた値に様々な形で様々な名前が付いていくだけ 基本、動的言語では、コピーは作られない。
Ruby で、clone, dup しても、浅いコピー(shallow copy)となり、同じ参照を指す
再帰的な深いコピー(deep copy)は、
JSON・marshal とか、一旦文字列にしてから、
その文字列からオブジェクトを構築するとか、
再帰的な参照のリンクを断たないといけない
jQuery, Lodash などで、deep copy する関数を探した方が良いかも >>779
>Array2の先頭から末尾まですべて同じもの、
>即ち「N番目の連想配列からできたMapオブジェクト」が格納されてしまいました
ならないけど？
https://paiza.io/projects/EIuHctan5fXBzYq4-joEfA Array.prototype.map() を使えば？
map() メソッドは、与えられた関数を、配列のすべての要素に対して呼び出し、
その結果からなる、新しい配列を生成します 私も手元で試したけど、そんな事態にはならないな
根本的に入力の時点で間違えている気がする 沢山レスありがとうございます！
結論から言うと、再度デバッグしたら
正しくMapオブジェクトに変換できました…
https://paiza.io/projects/e/7X-qC5P4_-YkGbeIfU-AcQ
お手数おかけしました
>>780
MDNのObject.assignメソッドの記述(コピー)と
やろうとしている意図(変換)が
自分の中でごちゃごちゃになってしまいました。失礼しました
>>781
＞「渡し方」が同じなのに（型によって）「渡され方」が変わると考えるのは不自然
これはずっと思っていました
＞JSでは全てが名付けの連鎖、所謂共有渡しによって為されている
すごく勉強になります。覚えておきます！
>>782
コピーが作られないのは動的言語の仕様なんですね
今後の心構えができました
Array.prototype.map()も使用頻度高そうなメソッドなので勉強します
ありがとうございます！
>>783
>>785
以前事象が発生したときはループの設定をミスっていたのかもしれません…
失礼しました Primitive
https://developer.mozilla.org/ja/docs/Glossary/Primitive
JS には、数値・文字列など、6種類のPrimitive 型がある
これらは、immutable で変更不能だから、
常に新しい値が作られるので、参照とは無関係です
これらについては、参照のトラブルは起こらない 動的言語で、複合オブジェクトをdeep copy するのは、大変。
なかなか、再帰的な参照のリンクを断てない
オブジェクト内のオブジェクトを再帰的にたどって行って、
Primitive までたどり着いた所で、初めて値をコピーできる
こういう関数を作るのが面倒だから、
複合オブジェクトでは、一旦文字列にしてから、
その文字列から、新たにオブジェクトを作ったりする。
それが、JSON・marshal など
他には、jQuery, Lodash など、何かのモジュールに、deep copy する関数があるかも C では変数は、値を入れる箱だけど、
動的言語では、変数は名付け・ラベル
箱に入れるようなイメージをしてると、参照のコピーで苦しむ 話がややこしくなるからRubyガイジは出ていって。 >>787
immutableが保証されているのはSymbol型だけだよ
その他のPrimitive型は現状標準で変更手段が提供されていないというだけで
拡張するのは自由だし、例えばセキュリティソフトが文字列のメモリを
書き換えるということが起きてもES仕様としては矛盾しないようになってる
エンジンとしては不整合が起きる可能性高いけど
一方immutableなObject型というのも存在する
immutableかどうかという点についてはSymbolかそうでないかの区分で差を語れても
PrimitiveかObjectかという区分では差を語ることはできないよ
Objectはimmutableでないからではなくて、Primitiveでないから、
つまり素でなくて集合だから要素とのことを考える必要がでてきて
その語れる差が生じるんだよ >>787
あと、
常に新しい値が作られるので、参照とは無関係です
っていうのも変じゃない？
例えば概念世界の共有渡しって実装世界では参照の値渡しに近いわけで
つまり
a = 'foo'
b = a
とあったときに、もしaに入っている文字列が変更されるようなことがあったら
ESを自然に解釈するとbはaと同じ実体を参照しているはずだから
b == 'foo' とならないといけないよね
大前提としてその対象の値がimmutableであれば、
参照の値渡しなのか、値渡しなのか、区別しなくても
どの手段使っても等価になるということでしょう？
ただし文字列型はimmutableではなくて、
現状immutableのように解釈しても等価になるという
２ステップ挟んで成り立っているものっていうのが厄介だよね >>792
string って java と同じに flyweight パターンが使われてるのか、"abc"==="abc" になるというimmutableを越えた面倒さも undefined っていらなくね？
全部null でとういつすればいいのにな 長文君よりルビキチ君のほうがいろいろとまともに見えるな
二人ともコテハンつけてくれると助かるんだが >>793
なにが等価になるかっていうのは値の構造や特性というより
演算子がどう定義されてるのかっていう話になってくるからそうだね >>794
確かに似たような概念では有るがundefinedはまだ値が割り当てられていない状態を指すのに対して
nullはNaNに雰囲気が似ているが、明示的に（適した）オブジェクトが無いことを表す値という違いが有る
最近のJSからはnullとundefinedをまとめた「nullish」という概念が入ってて２つを一緒に扱いやすくもなってるから
２つあることで不便なことよりも使い分けて便利なことのほうが大きいとは思う 本気で困ってるんだが質問いいか？
$(document).bind('paste', function(e){ hoge; });
でペースト処理を掴んでペースト内容を正規化した後に、その値を直接val()で入れると、
Ctrl+Z とか右クリックからのアンドゥリドゥで値があべこべになるんだが解決方法知ってる人いたりするか？ SQL でも、null, undefined を区別する事を提唱した学者もいるけど、
クエリ文を書くのがあまりにも面倒で、undefinedは採用されなかった >>799
やっぱり独自ペースト処理じゃどうしようもないのか… good parts
多くのブラウザではif文の中でfunction文を使うこともできるが
その際のそれぞれに異なっていまっている。
これはポータビリティの問題を引き起こす。
とあるのですが、
if文でfunction文を書くと、ブラウザで挙動違うってことですか？
ポータビリティの問題って何ですか？ >>805
JavaScript: The Good Parts の話なら出版は2008年12月。12年前
IE8の登場が2009年だから、その本はIE7時代の話
Chromeの登場が2008年9月だから、Chromeもでてない
そんな古い本なんか参考になるわけがない >>805
>if文でfunction文を書くと、ブラウザで挙動違うってことですか？
そういう時代があったということ
ES2015でblock-levelのfunction declarationについても定義されたので
よほど古いブラウザ(主にIE)に対応する必要がなければ気にしなくて大丈夫
>ポータビリティの問題って何ですか？
ブラウザ間で挙動が違うと同じコードが異なる環境(=異なるブラウザ)で
意図したように動かなくなるという問題
The Good Partsは主にES3時代のノウハウ
JSに詳しいわけじゃなければES6対応してる本を読んだほうがいい >>807
横からですがあざす
あの辺の古い本安いから買ってみようかと思ってましたw JavaScript学びたいならjavascript.infoがオススメ >>806-807
ありがとうございました。
もうかなりgood partsの中味が
古い現在のブラウザ挙動が違ってきているのですね。 訂正します。
もうかなりgood partsの内容が古く
現在のブラウザでは挙動が違ってきているのですね。 挙動だけじゃなくPromise sync awaitの記述の有無って重要じゃね？
単にwebのスクリプトとして使ってるからだけかもしれんが もうES6は当たり前って時代だからな
classもimport/exportもなかった時代の本は流石に… <tr id="aaa" style="display:none">
上のようなテーブルの行（tr部分）を表示・非表示で切り替えたいけど
document.getElementById("aaa").style.display = "table-row";とすると行が表示されるけど
document.getElementById("aaa").style.display = "none";としても非表示になりません
どうすれば非表示になりますか？ 趣味(仕事でために使用する勉強のためでもあり)で
javascript勉強しているのですが、
もう、javascriptでclass使うのが普通なのでしょうか？
仕事でjavascriptで使用している方の場合は？
私の会社ではjavascritpでclass使用はしていませんね。 >>814
Chrome, FireFox, Safariはそれで非表示になるな
ちなみにJSでstyleを直接編集するよりもclassの追加・削除をしたほうが汎用性が高くていいぞ 無理にクラスを使う必要はない
だけど、ある程度の複雑なデータを扱うならばクラスを使わなければスパゲッティなスクリプトになってしまうから使うようになる テーブルの行だけど、visibility: collapse というCSSがあったな ん？Reactで使うのはコンポーネントなのでclassなんてもう使いませんキリリ！？ いえ単なる関数です
単なる関数でコンポーネントを表現することをFCと言います
思えばreactのコンポーネント作成法はReact.createClass()呼び出しからReact.Component継承したclass、単なる関数(FC)へとどんどん単純になっていった。
hooksAPIの整備でclass形式で作らないといけない機会はゼロになった。 ユーザーは作らないけどreactが内部で作ってるって話じゃないの データは基本的にツリーやリストといった構造を持つが、FCがどうやって構造を構築するのかさっぱりわからん？
ので、ちょっとググってきた
GUI構築の話であって、ロジックじゃないんだな ハローワールドでクラスシステムを無理に使う必要はないが
自然とクラスシステムを使うのならfunctionに頼るよりはclass構文に頼ったほうが良い typeofはfunctionだけど[[Call]]すると例外になるし、日本語で【関数】か
と聞かれると１００％そうとは言えないな new.targetをチェックして例外を投げる関数やぞ >>826
それは間違ってはいないが、どんな言語だって突き詰めれば機械語、と言ってるのとそう変わらないと思うが？
高級言語の存在意義を考えてよ >>829
全然違う
Reactがclassやめてfunctionに移行した理由を考えてよ ウェブコンポーネントの過剰なclass推しが緩和されたからそれに乗っかっただけでしょ もしclassが高級言語でfunctionが機械語なら
好んで機械語使う人がなぜ増えてるのかな？ >>830
横レスだけど
状態管理を外部ライブラリに切り出すことで、SSRやSSG環境で最適化の余地が出来るからだって聞いたけど
他に何か理由があるの？ 関数コンポーネントはクロージャで値を保持ってるのかな >>832
普通に考えたらclass構文の使用率はまだ増えてる最中だと思うが
明らかに減ってるという統計でも持っているのか? 表紙にサイの絵が描いてある、2冊のサイ本。
必ず、Google などの開発者の机に置いてあった本。
今は、ES2015
JavaScript 第6版、2012、David Flanagan
初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、2017
ES3 時代の本
Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012
JavaScriptデザインパターン、Addy Osmani, 2013 classがコンストラクタ関数の糖衣構文だってことを知らんやつがおるんやな
時代を感じる prototype構文もまだ現役みたいなのに居るのかそんなん？ classが糖衣構文と言ってる奴はアスペなのか?
goto文じゃなくてif文使おうというような話だということが本当に分からないのか すみません質問です。
空のdivがあり、この中でJavaScriptを動かしたいです。
ただ、div内に直接スクリプトを書き込むではなく、
外部からのアクセスでスクリプトをdiv内で動かしたいのです。
どのようにするといいでしょうか？ const hoge = function() {}
function hoge() {}
とかいろいろ書き方たくさんあってどれが何だか未だにわかりにくい
newしていいものとnewしない場合はどうのこうのとか{}()とかも >>837
単純な糖衣構文ではないけどまあ本質は一緒だよね
もう5年以上経つからclassしか知らない人がいても別におかしくない
特にフロントエンドは3年も経てばメインストリームがガラッと変わるから >>841
scriptタグは知ってる？
div内でスクリプトを動かすってのがよくわからないけどそうしたいと思う理由は？ >>843
prototypeにメソッドを追加したりする技はもうバッドノウハウなのかな？
バッドだとは常々思っていたけど >>839
へぇー
if文はgoto文で置き換えられるのかー >>844
scriptタグは知っています。
理由は、JSを実装するかどうか確定していない+実装しても取り消す可能性がある。
そこでid付きの空のdivだけ作ってそこにJavaScriptの結果を反映させたいのです。 >>848
divのDOM要素を特定して、あとは例えばinnerHTMLプロパティに値をセット element.outerHTML="ほえほえ";
とやるとelement変数がもはや新しく更新した内容を持つ場所を指さなくなっていますが
前のelement変数しか書き換えたい場所を指せる情報がないとして
outerHTMLで書き換えた後のノードを指す変数を取得する方法はないんでしょうか？ >>850
idとかセットしとけ
というかouterを何故使う 下記のnodo.jsコードで、すいまんせんが教えてください。
req.on("end",function(){});の中が実行されていないようです。
どうしたら直りますでしょうか？
var http = require("http");
var SRV = http.createServer();
SRV.listen(8080, "127.0.0.1");
SRV.on("request",function(req,res){
//リクエストを取得する変数DATの宣言
var DAT;
//リクエストの中のURLを取得してDATに代入
DAT = req.url;
console.log("WDAT="+DAT);
req.on("end",function(){
//この中が実行されていないようです。
console.log("sssbbb");
//HTTPヘッダの発行。第1引数の200はHTTPコードの200（OK）
//第2引数はContent-Type
res.writeHead(200, {"Content-Type": "text/plain"});
//ensでこれが最後のレスポンスだよと宣言しています
res.end("aaaaaa");
});
}); req.on("data", ～);を書いてないから >>853
ありがとうございます。
無事動きました。 素人が、Node.js で、サーバー側を始めるのは無謀
サーバー側なら、Ruby から始めた方がよい phpでフレームワーク使ったことない程度のカスですが、laravelやってみるのとnode.jsっに手を出すのと、どちらが良いでしょうか？ >>849
ありがとうございます。
うまくいきました。 var{nnn,mmm} = test();
alert(nnn);
alert(mmm);
function test(){
var aaa=100;
var bbb=200;
return{aaa,bbb}
}
これでundefinedなんだけどどうしてですか？
複数の戻り値は{}で囲むって書いたあったのに >>862
nnn,mmmってキーがないからだよ
{}はオブジェクトの定義で、例えばこう書く
return { nnn:aaa, mmm:bbb }; >>862
ていうか、やりたいのはこっちな気がする
var [ nnn, mmm ] = test();
return [ aaa, bbb ];
[]は配列の定義で、この場合はキーは必要ない >>859
laravelはフレームワークでnode.jsはフレームワークじゃないのに比較する意味あるのか？ フレームワークという言葉は意味が広く
プログラムでライブラリと対比して使われる以外の使われ方をする
例えばUnityはゲームフレームワークとか
だから間違いではない >>863>>864
どうもっす
やりたかったのは>>864の方です
{}ではなく[]にすればいいんですね 基本はRuby または、Ruby on Rails から始める
Node.js は、Ruby をコピーしたもので、
非同期の書き方をするから、Rubyよりも難しい image.onload = function aaa(){略}
image.onloadで画像を読み込んでからsetintervalを呼び出すにはどうしたらいいんですか？ onloadでresolveするPromiseを返す関数を定義してawait
まあでも>>871のやり方で用は足せるよね >>873
言葉でなくコードで示して下さい
3分以内で コード書いたらCloudflareにはじかれたわ
3分以内に“onload promise”でググれカス 下記のsortなのですが、firefoxでは効くのですが、
Edgeとchromeでは、効きません。
ブラウザで挙動違いましたか？どうすればいいでしょうか？
data_array.sort(function(a, b) {
return a.keyword > b.keyword;
}); >>877
それだと比較関数の戻り値がbooleanだから
数値で返さないとだめよ >>878
ありがとうございます。下記のようにすると直りました。
if(a.keyword < b.keyword){
return -1;
}
if(a.keyword > b.keyword){
return 1;
}
return 0; >>877
let comp = new Intl.Collator;
data_array.sort(function(a, b) {
return comp.compare(a.keyword, b.keyword);
}); eval("123_456")
-> 123456
parseInt('123_456')
-> 123
Number('123_456')
-> NaN
法則がわかりません
どうしてですか？ >>882
eval("123_456”)は単に123_456と入力するのと同じ
separator付きのnumericリテラルとして解釈される
(numericリテラルでseparatorがサポートされたのはES2021)
parseIntやNumberはそういうルールで実装されてるからとしか言いようがない
どういうルールで実装されてるのかリファレンスを読んで >>883
書いていただいていることまでは分かるのです
問題はどう決められているかではなくどうしてそう決められているかなのです
神様が決めたわけではないですから理由はあるとおもったのです
リファレンスはどう決められているかは書いてあっても
どうしてなのかは書いていないのでここで聞きましたのです わかってないのにそれはわかってると言うやつ
なんなんだろな insertAdjacentHTMLやinnerHTMLで表示する文字を変えることは出来るのですが、
HTMLのソースコード自体をJavaScriptで変更するにはどうすればよいでしょうか？ >>886
ありがとうございます！
日本語が通じる方がいてうれしいです！ ローカル変数だけど関数の中にある関数も宣言の範囲になる方法はありますか？
例えば function test1(){
var a =1000;
function test2(){
alert(a);
}
}
これだと test2のaは宣言されてないことになるけど
関数の中にある関数の変数にもスコープが届くようにしたい
グローバル変数は使いたくないので test2(a)のように引数で渡せばいいと思うかもしれないけど変数の数が１０個以上あると
引数のところが長くなって見にくくなるので test2の中は普通に変数aのスコープ内では？
つまり、
function test1(){
var a =1000;
function test2(){
alert(a);
}
test2();
}
test1();
で、alert(a)のとこで1000ちゃんと表示されない？ >>893
ちゃんと参照されてました。
でも
function test1(){
var a=1000;
test2();
}
function test2(){
alert(a);
}
test1();
とした場合スコープが届きませんでした。
これでスコープが届くようにするのは無理ですか？ >>885
自分が分かってないことを自覚できてないから適切な問いが立てられないんだよ
それに加えて”自分は分かってるという思い込み”と”ささやかなプライド”から「それは分かってるんです(ｷﾘｯ)」て返しちゃう
前者は思考力の問題で後者は性格の問題
「いや、お前わかってないじゃん」てなるけど5chはそういうのが集まるところだから諦めろ さんざん偉そうに語るが結局質問者が何が聞きたいか分からないというオチ >>894
そういう風にしたい場合は自分でも言ってるようにグローバルでなければ引数で渡すくらいかな。
渡す変数の数が多くなって嫌だというなら、
function test1(){
var o = {};
o.a = 1000;
o.b = 2000;
o.c = 3000;
test2(o);
}
function test2(obj){
alert(obj.a);
alert(obj.b);
alert(obj.c);
}
test1();
とでもしたら？配列でもいいけど >>882
Ruby でも関数によって異なる
String#to_i では、前から数値に変換できる部分までを変換する！
Rubyでは、数値リテラルの任意の位置に、_ を入れる事ができる
一方、Kernel.#Integer では、全部を評価して、数値に変換できなければ、nil
p "12ab".to_i #=> 12
p "12_34".to_i #=> 1234
p Integer( "12ab", 10, exception: false ) #=> nil 変数や関数名の重複回避について
名前空間を使って
var APP={};
APP.hensuu ="aaa";
APP.func=function (){}
とするより
var APP = function(){
var hensuu = "aaa";
var func=function(){}
}
とした方がその都度変数名や関数名にAPPつけなくていいのでいいと思うけど
何か問題ありますか？ >>908
> 何か問題ありますか？
それは10年前の手法です。 >>900
オブジェクトも関数も名前の重複を回避する目的で定義するものじゃないけど
個人開発なら好きに使えばいいよ
それを名前空間って呼ぶのは初めて聞いたけど >>901
今はどうやるんですか？
>>902
解説サイトでそう呼んでいたので ただ単にスコープ区切ってるだけやん
「名前」の必要がないただの「空間」やん
ブロックとlet使えばええやん var val = "most";
var array = []
array[0] = "almost"
array[1] = "curriculum"
array[2] = "attention"
array[3] = "portion"
array[4] = "most"
の場合、valの値が"most"なので、
array[0] = "most";に並び変える
valの値が"portion"の場合
array[0] = "portion";に並び替える
っというふうにしたいのですが、
配列の先頭をvalの値と同じにしたいのですが、簡単にできる方法ってありますか？
このとき配列の中の値の重複はないとします。 >>908
それじゃわかないのでvalがportionのとき
array[0]~array[4]をどうしたいのか書いてみて >>906
これでいいの？
array = array.filter(item => item !== val);
array.unshift(val) >>909
var val = "most";
var array = []
array[0] = "almost"
array[1] = "curriculum"
array[2] = "attention"
array[3] = "portion"
array[4] = "most"
このとき
array[0] = "most"
array[1] = "almost"
array[2] = "curriculum"
array[3] = "attention"
array[4] = "portion"
です。 >>900
javascriptには名前空間ないですね。
1つのシステムで、オブジェクトを1つだけ定義して、
その中にプライベート関数を作ってみたいな流れで
ES3のjavascript good parts時代の2010年ごとからやっていました。
現在のやり方は、知りません。
class使えるようになったので、class使うオブジェクト指向の言語と同じようになったのかもしれません。
下記が2010年ごろからやっている私のやり方です。
//関数の呼び出し部分、htmlのscriptタグで呼び出す
test.app.fire()
//text.jsにtestオブジェクトを定義しておく
// testオブジェクトが定義されてた時用に、このようにする(10年前に書籍に書いてあった手法)
var test = test || {};
test.app = (function() {
//myspaceオブジェクトの外からアクセスはthatオブジェクトだけ
//myオブジェクトはmaspace内しかアクセスできないオブジェクトになる
//myオブジェクトに関数を格納すると、「なんちゃってプライベート関数」になる
var that = {},my = {};
//情報を表示する
my.show = function() {
};
that.fire = function(id) {
$('#' + id).on('click', function() {
return function() {
my.show()
}());
};
return that;
})(); >>911
ありがとうございます。
こんな感じの並び替えがやりたかったです。
>>910
配列である必要があります。
自作の英単語帳(自分用でアプリで外部公開なし)のwebアプリ作っているのですが、
検索する文字列と「keyword」という配列に格納した文字列を比較して検索結果を出しています。
このとき、検索結果を出すときにa-zのアルファベット順にした場合、
keywordで並び変えを行っているのですが、
keywordの配列の中身の並び替えをどうしようか？っと悩んでいたのです。
{"item":[
{"itemCode":"1 - 1","keyword":["〇〇"]},
{"itemCode":"2 - 1","keyword":["〇〇","〇〇","〇〇"]}
]}
http://demon-uploader.rosepink.us/uploads/2021042123012394865.png >>914
自分で使う道具を作ってて偉いな
並び替える必要性はよくわからないが
用途的に複数キーワードでのAND/OR検索くらいは
加味しておいたほうがいいんじゃないかとは思う >>916
>用途的に複数キーワードでのAND/OR検索くらいは
>加味しておいたほうがいいんじゃないかとは思う
現在はAND/OR検索は未実装ですね。
今は、前方一致、後方一致、完全一致モードがあり
検索する母集団は「word」、「description」、「note」から選択でき、
「description」で「some people」で検索すると
例文がヒットする仕様になっていますね。
http://demon-uploader.rosepink.us/uploads/2021042123373267979.png 構造がしっかり定義ができるのに配列の並び替えという操作がさっぱり分からんというのが理解できない
普通まず操作を想定した上でそれに合うように構造を定義するものでしょ 自分のためのアプリ作ってるの素敵
ここにいるの奴隷ばっかだからなｗ firefoxアドオンなんですが、タブをアクティブにしている時間というのはjavascriptで取得可能なんでしょうか？
タブを開いているだけではカウントしません。
アクティブにしたときにカウントします。 生のjavascriptでやるわけでもないですかね >>925
api使わずに、生のjavascriptでカウント出来るものだと考えていました。 罰ゲームかなにかかな？
DOM APIも使えないってことだろうからJavaScriptで何するんだろ？ アドオンの場合はTab APIを使えばいい
Visibility APIだと各タブにJavaScriptを注入することになるので非効率 API=ネイティブコードとでも思い込んでるのかしら？ タブにJavaScriptを注入
という段階で理解できない言葉だ Webページのコンテキストで実行するJavaScriptと
アドオンのコンテキストで実行するJavaScriptの違い
前者はページ遷移が発生するたびにWebページのコンテキストでJSを実行して
その結果をアドオン側で受けとる必要がある >>927
滞在時間をモニタリングするアドオンを作ろうかと
api＝ネイティブと思っているわけではなくて、ネイティブのjavascriptのみでそういう仕組作れるのかなーと >>933
だったら>>923はちゃんと読んだのか？ 滞在時間を算出するには少なくとも現在時刻をAPIを通して環境に「ちょうだい！」する必要があると思うがJavaScriptに限らず言語のネイティブ機能だけで取得できる言語ってあるのだろうか？ 分かりません。
生まれてからこれまでできたことはありませんが、その事実では今後できないことを保証することはできないからです。 JavaScript始める前はいましたが、始めてからは全く気配もありません >>933
コンテンツ側ならこんな感じ
https://jsfiddle.net/vf2zru61/
バックグラウンドスクリプトならタブ別に状態記録するMapなりオブジェクト用意して
browser.tabs.onActivated/onCreated/onRemoved等のイベントでやればいい >>941
performance.nowなどのPerformance "API"
document.addEventListenerなどのDOM "API"
等々"API"を使ってるからダメですね。
ネイティブのjavascriptのみで作ってください。 そんなことできる言語ある？
C言語ですらAPIでOSのシステムコール呼ばなきゃできないと思うけど… API使わずとか言ってるやつは頭おかしいの？
それとも質問者と同レベルのnoobが何人もいるの？ >API=ネイティブコードとでも思い込んでるのかしら？
↑この意味不明な指摘が状況を悪化させてるな 質問者様がAPIん使うなとおっしゃられてるんだ。
従え。 だからそんなことできる言語ある？
CかアセンブラでOS無しの組み込みプログラミングでハード直叩きしか無理だろうそんなの。
実際はハードからOS、ブラウザ、JS実行環境と何階層あると思ってんだ。
上位レイヤーから下位レイヤーの機能を呼び出すとき、その呼び出し方・作法すなわちAPIなんだからAPIなしでってのは意味不明だよ。
JSがどうのじゃなくてたとえCでもOS上で動かすならAPIとつくもの何も使うなと言われたら何もできんわいやOSによってはアドレス直叩き行けるか… ほな無理ちゃうか…
オカン他になんか言うとらへんかった？ good partsには
string.deentityifyメソッドという実体参照を特殊文字に変換するメソッドが
出てきますが、deentityって英単語は存在しないみたいです。
deentityて検索しても特に何も引っ掛かりません。
<→<って変換をdeentityifyと言うのでしょうか？
deentityってde+entityで実体化が否定って意味の造語なのでしょうか？
<→<って変換って、正式な言い方ありますか？ >>943
モダンOSでは時刻はユーザーランドに再マッピングされてるから
シスコール使わなくてもメモリのアクセス制限取っ払っとけば取れる そろそろgood partsの取り扱いについて考えたほうがいいと思う
ここは自ら学ぶ者を手助けするスレではあるが
その学ぶというのは「歴史を学ぶ」ということではないはずだ
good partsはJS仙人になりたい者がJSの歴史を学ぶのにはいいが
今よく動くJSを書けるようになるために読むのは非効率だ
ましてやそんな古い本の文言の解説なんてこのスレが負う責務はない 回答したいやつが回答しているだけの場で責務がどうとか
何いってんだこれ >>951
<みたいなのをHTMLエンティティと呼ぶ
それに-ifyやde-をつけた造語
entity-ifyはエンティティ+化
de-entityifyは非+エンティティ化
decodeHtmlEntityやdecodeHtmlEntitiesみたいな命名のほうがわかりやすいけど
クロックフォードのおっさんはdecodeとは呼びたくないこだわりがあったんだろうな 当時は、このサイの表紙のサイ本が、プロ用のバイブルだった。
Flanagan は「プログラミング Ruby」の著者。
JavaScript 第6版、2012、David Flanagan
他には、
Stoyan Stefanov 著
Stefanov は、React の本も書いてる。
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012
JavaScriptデザインパターン、Addy Osmani, 2013
今は、このサイ本から始める。
初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、2017
ただし、これらは既に数言語を知っていて、Google の開発者とか、プロ用の本。
プログラミングの初心者用の本では無い
good parts も、プロ用の本。
質問の内容から判断して、君には無理だと思う
事前に、Rubyとかで、プログラミング自体を学んでないと無理 私は、10年のjavascriptの知識から脱却しようかと思っているのですが、
ES6の時代になって皆さんvarの代わりに、let使っていますか？
let x = 1;
let x = 2;
としたときにエラーになり
var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined
のように、varと違いwindowオブジェクトのプロパティにならないようですが、
ES3時代のvarすると、なんでもかんでもグローバルオブジェクトになっていたのが、
グローバルオブジェクトにならなくなったのですね。 別にvarでIIFEで囲ってもええぞ。
10年前はそうしてたろ？ >>964
基本はconst
再代入するときだけlet
varは基本的に使わない node jsを使ったプロジェクトを作る場合、node moduleがプロジェクト内に作られますよね。
バックアップなどとるときにファイル量が膨大になって嫌なんですが、どう作ればいいもんでしょうか？ >>965
私は、htmlのscriptの領域にIIFEで囲って、その中で～.jsの関数呼び出すやり方してます。
今のまま使えそうですね。IIFEは別に悪手ではないと思われますので。
>>966
2010年代では
var app = app || {};
と1つだけのグローバルオブジェクトを宣言して
色々と、この中に関数追加していましたが、
ES6のやり方だと
let app = {};
になるのですね。
あとは、関数内でvarで変数宣下してもグローバルには
なりませんが、ここがletとconstで置き換えで使いますね。
varで宣言するとグローバルオブジェクトなるため、特に使わなくいいみたいですね。
app.getJSONDATA = (function() {
varで宣言してもこの中はローカル変数になるが
letとconstを使用する
})(); >>967
Git 使って .gitignore で制御したらいいと思うよ やっぱりapi使わない生のjavascriptの方がやっていて楽しいな >>969
var app = app || {};
は
globalThis.app ??= {};
と書くのが今風
でも今風というだけで別にvarも使ってもいいよ
基本constで書こうというのは馬鹿げてるので無視していい
ESメンバーが公演で使うコードやGoogleのプロダクトなんか見てても
そんなことをしてる人は居ない
それならTypeScript使ったほうがスマート >>971
その考え方はおかしい
JSはスクリプト言語
プログラムっていうのは入力を加工して出力してなんぼ
でもJSはあえて標準のIOを持っていない
それは色んな環境にフレキシブルに入り込んで
環境が提供するAPIを利用して機能する言語だから
JSとAPIは切っても切り離せない
それにAPIというが、JSで実現できることは
内部的にも生のJSで実装されていたりもする
（その方がJS間でインライン展開してから最適化とかできる）
だから大きい機能に見えてもおおよそJSは低レベルなIOとかを
提供してもらってるだけということもある
だからそんなにAPIはJSから遠い存在ではないし毛嫌いしなくていい >>969
>let app = {};
appに再代入しないでしょ プロは、VSCode, Node.js を使う。
Ruby on Rails でも必須。
Webpack, Babel, Bootstrap, React とかも
var を使うことはない。
最初から、let, const。
それか、Type Script
Ruby の埋め込みERB を使う人は、
a.js.erb と、JS コード内に、<%= ～ %>, <% ～ %> で、Rubyの式を埋め込む
もちろん、b.html.erb にも使える。
あらゆるファイルに埋め込める 推奨ＮＧワード： Ruby
推奨ＮＧワード： Rails >>972
var app = app || {};
は
globalThis.app ??= {};なのですね。
現在では、「globalThis」と「Null 合体代入 (??=)」があるのですね。
ありがとうございます。 constってconstantで定数なので、アプリのなんらかの閾値などに
使うかと思います。なんでもconstに入れるのは違う気がします。 constでいーじゃん、と言うプログラマーは数えた訳じゃないけど意外と多い気がする
再代入しない変数がはっきりするから、俺もそう思う const con = {foo: 42};
con.foo = 69;
console.log(con.foo);
//=> 69 GoogleもMozillaもChromeやFirefox内のJSでconstなんて殆ど使ってない
Mozillaは最近書いたテストで使い始めてるがそれくらい
一方V8内部だと昔は表層部分は普通にJSを使ってたが、
さらなるパフォーマンスを求めるため
ネイティブ-JS間で最適化が効くように大改造してネイティブで置き換えた
しかしきちんとパフォーマンスとセキュリティを担保して実装するが難しいということで
最近はTSを更に型方面に改良したような独自言語に切り替えた
オナニーでしかないconstばかり使ったコードを書いたりはしない
constを徹底するメリットは2文字増えることに劣る
そもそもconstを徹底するのならするで、それに加えてオブジェクトをfreezeしたり
全体的に管理しないと効果はない
でもJSでそんなことをやるのは極めて非効率的だと皆知ってるから
皆TSだったり、適切なaltJSを使ってる
いつまでも生のJSで半端なことにこだわってると新しい機能や環境に適応できない人だと思われるよ
生のJSでconstを使うのはその特性よりも読む人間に対してのアピールとして使う方が賢い レコード（#{foo: 42, bar: 64}）
タプル（#[42, 64]）
が出てきてからが本番だな。
現在ステージ２ まあRecordはプリミティブしか扱えないから
DOMの参照とかも含められないし限定的ではある 定義からしてdeeply immutableなデータ構造だそうだからDOMの参照なんか持てないだろうね。
ブドウジュースではワインのように酔えないと言ってるようなものでは？ >>988
だからRecordが入っても結局使い分ける頭が居るわけで
使える人にとってはそりゃあ使える機能は多ければ多いほど良いだろうが
一般レベルのJSのコードがRecordが入ることで安定・安全の方向に向かうかと言うと
そうはならないだろうねということ JSに限った話ではないのでは？
各実用言語の新機能って今まで許可されてたことを急にできないようにする変更ってないし。
使ってもいいよ、うまく使うと便利だよというものばかり。
でもそれって実用言語である以上当たり前では？ 「JS」って最近は女子小学生のこと指す名称と一般に広がったよな
javascriptの拡張子はJSって悲劇だな 居酒屋で「俺JS好きなんだーﾌﾋﾋ…」とか言ってるグループいて戦慄した。
よく聞いたらどうもWeb系だった。 10～15年くらい前までは
エロ動画のタイトルに「JS」、「JC」、「JK」って付いていただけなのにさ
2021年現在一般に広まりすぎた。
「JS」って気軽に言えない世の中になってしまった。
私は、居酒屋や人のいる場所では「javaScript」と「TypeScript」と「ECMAScript」という呼称しか
使わなくなってしまった。 居酒屋や人のいる場所でJavaScriptの話してるやつとかヤバすぎだろ
そんなのは自宅か社内で完結させて外に持ち込むんじゃねえ function aaa(n){
n++;
return(n);
}
setinterval(aaa,1000,20);
setintervalの第３引数に20を入れるとaaa(20);を呼び出すこと同じことらしいですが
この場合、戻り値はどうやって受けとればいいんですか？ 疑似プロトコルで"row"クラスまでスクロールしたいんだけどなにか違う？
javascript:getElementByClassName('row').scrollIntoView() >>995
callbackを使う
function callback(n) { do_something(n); }
function aaa(n, callback) { callback(n);}
const intervalId = setInterval(aaa, 1000, 20, callback);
指定回数実行したらclearIntervalしたい場合なら
setIntervalをwrapしたPromiseを返す関数を定義する
ちなみにそのn++は毎回20が++されて21になると思うんだけど意図通りなのかな？ >>997
1. 初学者がよく陥る誤り、getElement s ByClassName()
2. s がついてることで理解できると思いたいが、こいつの戻り値は複数なので配列風のオブジェクトを返す
[0]とインデックスを付ければ多分動くが
老婆心では id にして getElementById 使った方がいいと思うよ このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 693日 19時間 24分 20秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
