+ JavaScript の質問用スレッド vol.132 +
レス数が1000を超えています。これ以上書き込みはできません。
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【条件】期待する回答の条件を書いてください。(ex: jQuery不可, フレームワーク不可)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです ■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/
◆開発者ツール(Developer Tools)の基本的な使い方 (全部はhttp://fiddle.jshell.net/vSqKr/44/show/light/#Browser-Developer-Tools )
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。) ■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様 ( http://fiddle.jshell.net/vSqKr/44/show/light/#Link も参照 )
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) >>1
有能。
以降lodashもunderscoreも禁止。 ただ単に禁止と書き連ねただけでは原理主義みたいで気持ちが悪い
もしくは喧嘩を売っているようにも見える
きちんとテンプレの体裁を成すくらいの文量で
これまでの経緯と、このスレではそう言った質問・回答を扱わない件、
そしてライブラリ用質問スレへのリンクくらいは無いとね
ただ単にどっかの誰かが一言禁止だ！と言ってるだけで
済んだ気になってるとそれはただ荒れる元になる ということでjQuery, lodash, underscore解禁 改竄前に戻ってるのか戻ってないのかよくわからんテンプレだが
取りあえずいつもの荒らしの立てたスレではないのか DOMの質問も禁止な
純粋なjavascriptのみのスレ 右クリックしても右クリックメニューがでないで広告サイトに飛ばされるサイトがあるんだけど
どうやったら解除して右クリックメニュー表示できますか? javascriptをoffにすればメニュー表示できる jqueryで、選択された要素の中に指定した要素が含まれているかを調べるのは
どうやればいいのでしょうか？
findかと思っていたのですが、findは子孫要素まで検索対象に含められると分かりました
子孫要素まで調べたくはありません よくわからないんだけど
jqueryで、ってjqueryを使えるということは普通のjsも使えるわけで
・普通のjs回答でもいいしjquery回答でもいい
・可能な限り最大限jqueryを使うべき
・jqueryで使えるようになるもの以外は使ってはならない
jqueryを認めるとどれなのか曖昧になって面倒ではないか >>17
意味不明です
jqueryでやる方法を聞いてるんですよ
アスペですか？ childrenって子要素を取得するメソッドですよね
そういう意味ではなくて、
たとえば
$('.hoge')
で選択された要素集合の中に、あるDOM要素が含まれているか調べたい、というような場合です 意味不明です
jqueryでやる方法を聞くならjqueryスレがあるんですよ。
アスペですか？ >>19
質問の仕方が悪い
何のDOM要素なんだよ >>20
jQueryは何で書かれているというのですか？
これ以上言う必要はありませんね？
>>21
任意のDOM要素です
isメソッドで確かめられると分かりました
要素集合の中に一つでも条件に合致しているものがあればtrueになるのがisメソッドだったのですね
要素が一つの時にだけ使えるものと勘違いしていました children からの list で for すればいいとおもうけど
javascript構文は禁止なのかw >1
hcn zaqなんてらってうrlのリンク全部きれてるじゃねぇか >>23
ですからchildrenは関係ありません
それにisメソッド一つで済むのに何故わざわざループ処理を書くのですか？
そういう処理をわざわざ書きたくないからjQueryを使っているのに。
分かりますね？ >>26
検索すれば分かる話をなぜ質問するんだ?
検索したくない。数行のコードも書きたくない。
らくしたいだけ乞食jQueryバカは死ね
わかりますね? 提案
jQureryは荒れることが判明したので分離しよう。 たかだか数行
減らすため
数千バイト
ロードする
これ七五調って言うんだっけ？？ 指定した子要素が含まれているかどうかといっても
className === 'fuga'な子要素とか、.dataset.hoge === 1 な子要素とか、複数の組み合わせとか、
あと含まれているかどうかをどう使いたいか、とかいろいろあるからなあ
「選択された要素」が t で、含まれているときに特定の変数をtrueとしたい、だけなら
var result = function(){
for( var ch=t.children, i=ch.length-1; 0<=i; --i) if( 条件式 ) return true;
})();
が正解な気がするんだけど 例えば、何かの本のようなレイアウトがしたいんです
という質問があった時、
ひょっとしたらjQueryやそのライブラリを使った霞程度のヒントを教えてくれるかもしれないのがjQueryスレ
そしてCSS HoudiniのLayout APIやPaint API勉強すれば自由にできるよ、というのがここ
まれに数百行のコードを貼っつける猛者が現れて荒れることがあるかもしれない
でも質問者にとって一番必要なのは、どっかの馬の骨達が作ったHoudiniフレームワークの海から
超特化超マイナーなライブラリを拾い上げて、それがきちんと使えるものであることを保証し
無に等しいドキュメントの代わりにコードを解析して使い方を手取り足取り解説してくれる存在
今のWebに不足しているところはそこ
最低でもHoudini系のパッケージマネージャが求められるが、
質問スレも、勉強の為のここと、有名ライブラリの為のあそこと、もう一つ居る
じゃないと質問者が無駄骨を折ってスレが荒れるだけになる $('div > p') 直下のみ
$('div p') 子孫も含める
jQueryで子要素を取得するいくつかの方法 children,find,contents
http://www.flatflag.nir87.com/children-996 cssもしっかり勉強して意味と挙動を把握しておかないと微調整必要になったとき詰むからな jQueryなんでこんなきらわれてるん?(´・ω・`) jQuery,lodash, SASS, Ruby など、ライブラリは禁止とか、言ってる奴は、荒らし。
こいつは、色んな板を荒らしてる
無視しろ SASS, Rubyがライブラリとかさすがキチガイお里が知れるｗ >>31
＞質問者が無駄骨を折って
質問者が無駄骨をおるって
そんなの当たり前やろ。
無駄骨折るのは回答者やろ? >>34
料理スレに電子レンジ調理の話しかしない集団がいたら荒れるのは避けられないだろう >>34
jQuery厨は不思議とカスが多いので
深層心理にjQuery自体がカスという意識が広まってる。 そんなところ行ったらみんな達人だからマウント取れない こいつは、色んな板を荒らしてる奴だから、無視しろ
ソースコードを書いていない奴は、基本、荒らしだから、無視でOK jqueryの質問するなら英語勉強してstackoverflowいけってバッチャが言ってた >>45
stackは質問しても結構なスピードで流れていくからね
5chのほうがかえってレスつく
stackは検索用だね
jQurey厨は英語力も検索力もないからこっちくるんだろうけど。 >>15
> jqueryで、選択された要素の中に指定した要素が含まれているかを調べるのは
> どうやればいいのでしょうか？
> findかと思っていたのですが、findは子孫要素まで検索対象に含められると分かりました
> 子孫要素まで調べたくはありません
まあいくつか有るが、こういうHTMLの時
<div id="top">
<div class="stranger"></div>
<div class="child">
<div class="descendant"></div>
<div class="descendant"></div>
</div>
<div class="child">
<div class="descendant"></div>
<div class="descendant"></div>
</div>
<div class="stranger"></div>
</div>
こんな所かな（attrは参考として書いただけで実際には必要ない）
$('#top').has('> .child').attr('id') // => top
$('#top').find('> .child').attr('class') // => child
$('#top > .child').attr('class') // => child
$('#top').children('.child').length // => 2
$('#top').children().is('.child') // => true jQueryの話やめてくれ
javascript勉強スレでライブラリの話するの気持ち悪い
ライブラリなんて自分で調べるのぜんていだろ
あまたあるライブラリの質問されても困るわ そういう面白おかしい反応するから
余計からかわれるなんてこともあるかも からかってるつもりなら
どうでもいいよ
jQuery厨はけっきょく嵐ってこと自白してるだけだしwww いいかたが悪かったかな
ストレートにいうと
構うから居つく
ということを言いたかった 構わないでもキチは居着く
キチが居なくなるのは飽きるか完全に無人になるかどっちかだけ 結局最終的には英語で海外の情報を取得できないとプロにはなれないか・・・ >>13-14
F12 開発者ツールを起動して、1行ずつデバッグ実行するとか。
ソースコードは変更できないのか？
preventDefault()・stopPropagation() などで、
クリックイベントのバブリング (伝播)を止めているのかな？
ブラウザの自動操作なら、Selenium WebDriver で、
登録されたイベントリスナーを削除するとか、
onClick() の内容を上書きするとか >>55
無駄な方法だな
>>13
普通にブラウザのプラグインを使えばいい google spreadsheetってhtml css jsだけで作られてるのかな?
勉強としてスプレッドシートもどきをhtml css jsだけでつくってみたいけどなんかそういうサイトある? プログラミングを趣味でやるならjavascriptっていわれたんですが本当ですか?
プログラミングの知識はまったくないのですが
いまなんとなくjavascriptかpythonかphpでまよってます >>58
決定版は無い
webに興味あるならJS、そんなでも無いならpython 言語としては嫌いだけどユーザーベースの大きいアカデミックでもインダストリーでも普通に使われる質のよいライブラリが豊富に揃ってるので道具としてはよい。 とりあえず手を出してみたいだけならjsでもpyでもphpでもなんでもいい
perlじゃなけりゃ この2冊をこの順に読む
たのしいRuby 第5版、2016
みんなのPython 第4版、2017
たのしいから、先に読まないと、みんなので苦戦する
JS は、言語仕様がクソだから、その後で良い
(易しい) Ruby → Python → JS (クソ) >>65
どうクソなのですか?
こいつ糞だなぁ。こういうとこがまじクソだなぁ。
と思うところを簡単に教えて下さい
自分は趣味だけでやるなら、javascriptは身近だからいいよとススメられたのですが
拡張機能も気軽に自分で作れるし、既存のサイトもすきなように走査できるからと。 クソと言うのはソース表記上メソッド呼び出しとプロパティの違いが分からないようなことかな？
関数の取り回しがしづらいったりゃありゃしない。
proc、block、lambdaとか何の冗談仕様だありゃｗ 身近な面はあるけどバッチ書いて定期ファイル操作とかできないよね 無知識者にnode勧めるぐらいならphpやpythonの方がずっと健全では・・・
この場合一番健全なのはc++だと思うけど (易しい) Ruby > Python >> JS >>> PHP (クソ)
Ruby, Python は、バッテリー同梱(batteries included)。
最初から標準ライブラリに、かなり使いやすいものが入っているけど、
JSは、全く逆の思想。
ほとんど何も入っていないから、jQuery, Lodash などがいる
JSの機能だけで作ると、面倒くさくてたまらない。
バグが多くなる
Rubyは、可読性が高いから、ほとんどバグを作らない。
ビジネスロジックがそのまま、コードに表れる
とにかく、勉強時間が掛からないから、初心者はRubyから、やるべき。
他の言語から始めると、時間が掛かる >>71
そういう論点でいくとphpはクソじゃなくなりそうだが
というかruby推奨は rubyの可読性は高くない。
pythonの「書きにくく読みやすい」と比較して「書きやすく読みにくい」と言われる。
そうなってしまう理由はたくさんあるが、ひとつのことをするのにやり方がたくさんあるというperlとかいう糞言語の信条をそのままパクってしまってることがひとつ。
またよくも悪くも設計が完全なオブジェクト指向にこだわっており、
javascriptなら関数ひとつで実現できることがblock、proc、lambdaと酷い有り様になっている。defで簡単に定義できまーすとかまさに初心者騙しもいいとこ。
また、流行り機能の無節操な取り込みが酷い。記号が足りなくなり、例えばオプショナルチェーンは他言語が?.のところrubyでは&.である。phpで文字列結合が"foo"+"bar"ではなく"foo"."bar"であるようなキモさ。
あとpythonと比べ多分野の優れたライブラリがない。あってもメンテされてない。作ってるやつが実用主義ではなく趣味だから。rubyでもできる！って言いたいだけ。よくも悪くもweb分野、しかもrails使うというやつ以外にはおすすめしない。
事実上rails専用言語。railsのDSLとして以外に存在価値はない。
初心者に勧めるなんてとんでもない。 なんでperlはどこででもクソといわれてしまうん？ 他人のソース引き継いでなんじゃこれってなる構文にクソってなるのが多い
シェルでワンライナーで使うなら今でもpythonよりいいんだけどね >例えばオプショナルチェーンは他言語が?.のところrubyでは&.である。phpで文字列結合が"foo"+"bar"ではなく"foo"."bar"であるようなキモさ。
これ、お前が慣れてる手法以外はクソって言いたいだけだな JavaScript本格入門〜モダンスタイルによる基礎から現場での応用まで
http://gihyo.jp/book/2016/978-4-7741-8411-1
↑を読んだのですが次に
初めてのJavaScript
https://www.oreilly.co.jp/books/9784873117836/
と
JavaScriptパターン――優れたアプリケーションのための作法
https://www.oreilly.co.jp/books/9784873114880/
のどっちをようむか迷っています。
｢初めての｣は出版が最近なので最新の仕様に基づいて書かれているようだけど
一通り｢本格入門｣やったあとにやる必要があるのか、
｢パターン｣は古いけれどここでススメられた本だけど、アマゾンレビュー見ると上級者向けというレビューもあり
まよってます。
できれば３冊とも読んだことある人からのアドバイスあったらお願いします。
読んだことなければその旨示していただけると有り難いです。
ちなみにJavaScriptはじめて1,2ヶ月です。 >>78
75じゃないけど、オプショナルチェーンに関してはswiftも?.で、&.なんて使ってるのはrubyだけ
内容が空値でないか？のハテナと、メソッドチェーンのピリオドの組み合わせが一番可読性が高いのよ、この演算子だけはなんでこれなのか正直理解できないぐらい >の組み合わせが一番可読性が高いのよ
（俺にとっては）一番可読性が高い、ですね >>79
javascript書くのに書籍は要らない >>80
直接的には識別子に?や!が使えるという言語仕様のせいだね。
if文とかif foo.bar? buz endみたいな書き方実際よくされてる。
そういう事情があっても&.はねーわｗｗｗとか思っちゃうが。 >>79
全部読めばいいのと違うの
順番なんて気にしない 俺が慣れ親しんだ記法じゃないからクソ
以外にないの？ 【悲報】Rubyクソ言語とバレてしまうｗｗｗｗ
https://qiita.com/ryo-ma/items/24c46592b45775e8644d
https://www.sejuku.net/blog/21300
何でもなんかしらのクラスのインスタンスという設計だからか関数レベルの取り回しが異常にしづらい。
jsの関数に慣れちゃうとアホ臭すぎるｗ 俺が順応できなかったのは言語仕様がクソだからだ
追加入りました >>87
それ突き詰めちゃうとアセンブリ書け、になっちゃうぞ。
簡単なことが簡単に書ける言語が初心者向けの良い言語、という尺度があっていい。
Rubyはオタク向けの言語だよ(Railsで使わざるを得ない人は除く)
「は〜んこんなエレガントなコード書けたオレって天才〜」って言っていつもシコってるもの。
なおそのエレガント()なコードは初心者には読めないｗ
初心者にRuby薦めるバカは自分がその初心者使ってキモチ良くなりたいだけで初心者のことなんてなにも考えてない。 >>79
初めてのJavaScript 第3版、オライリー、2017
この本は、Ruby, Python とか、10年・数言語以上開発している人向け。
そのレベルの人が、この1冊で軽く、数十時間は掛かる。
初心者が読んでも無駄
JavaScript 第6版、2012、David Flanagan
Google などの開発者の机に必ず置いてある、この本と同じ。
東大とか、IQ 150 レベルの人が読んで、うんうん良い本だねって言う本
死にたいのなら、読みなさい！ まずはどちらも読まずに
とりあえずなにか作ってみてから
パターン読んで
またなにか作って
オライリー読むとか パターン云々を考えたり本がどうのこうのって
いろんなものを自分で作って引き出しができたあとにすべきだな
何を実現するのに何が必要かわからない状態で何を学べるというのか イベントハンドリングをデレゲートする場合、
documentで受けるのが一般的だと思います
documentよりwindowの方が上位にありますが
なぜwindowで受けずにdocumentで受けるのでしょうか？ >>96
別にdocumentじゃなくていいぞ？
実際に発生した要素の上位の要素であればなんでもいい というかなんでもdocumentにしてしまったらまずい局面もあるだろう
一般的と言ってはいけないのでは windowの下にはdocument以外にもいろいろぶら下がってるというのと
windowは普通省略されるからだと思う
http://www.webdesignleaves.com/wp/jquery/1631/ コンソールで
document
window
ってそれぞれうって中身を見てみればいい。 イベントハンドリングをデレゲートする、ってどういうこと? >>102
たとえば<button>で起きるイベントをdocumentで管理する >>102
ある要素のイベントをその親のイベントハンドラで受け取って処理すること
子が増減するたびに新しくイベントハンドラを作らなくて良くなる
その反面documentみたいに、いろんな要素からのイベントを受け取ってしまう場合は
どの要素から発生したイベントなのかをチェックする必要があり面倒くさい
なのでdocumentで受け取るなんて普通するか？ >>103
それだと<button>以外の要素からのクリックとかも
受け取ってしまいますよね？ <input typer="button" id="name">
--
document.getElementById("name").addEventListener("click", function)
こゆこと?
これを
イベントハンドリングをdocumentでうけてデレゲートする
って表現するの? >>104
>>108
コードで書くとどうなるの? document.addEventListener("click", function) >>104-105
発火した要素やparentNode再帰で、idやclassNameを見て切り分けたりする
jqueryのclassNameでのハンドリングがdocumentじゃなかったっけか
当然、<button>の中に<span>が入ってたりすると複雑化したり処理が多くなるが
どっちかっていうと
バブリングを踏まえて処理組んでたり
時系列的に同時に走られるとまずかったり
バブリング停止が混ざると厄介だったり、というほうの影響が大きいと思う
>>109
<div id="p1"><button>b1</button><button>b2</button></div>
document.getElementById('p1').addEventListener( 'click', function(){
if(e.target.tagName==='button'){ /* proc */ }
}, false );
みたいな プログラミング業界ではdelegateは移譲を意味する
一般的な用語でおそらくインターネットが普及する以前から使われてきた用語だけど、
今の話の文脈のdelegateはjQueryが発端なのかな？
jQueryでは1.4.2からdelegateというこのイベントを親で受け取る機能が追加された
（他にも似たようなliveというメソッドがあったがこれらはイベント関連全てを扱うonに統合された）
果たしてこのjQueryのdelegate以前から使われていたのかどうか
ちなみにjQueryだと>>111のような面倒くさいことは必要なく
$('button').on('click', function() {・・・}) だと
$(document).on('click', 'button', function() {・・・}) と書き換えるだけでいい
多くの場合イベントハンドラの中身はそのまま使える、
またdocumentの代わりにbuttonの上位要素でも良い 平日家に届く荷物
通常： 自分が家にいないと受け取れない
(再配達あるが例ということで)
デリゲート： 平日家にいる家族に自分宛荷物を受け取っといてくれと頼んどく
現実だといちいち頼まなくても家族が勝手に取っといてくれるだろうがコンピューターは融通がきかないのだ。
余計なことしないとも言う。勝手に開けられてて死亡したことあるしなｗ >>111のfunctionの引数指定 (e) が抜けてた
まあ上位が取って、下位にイベントを当てる、みたいな雰囲気を理解してもらえればいい
プログラミング的にはできるだけ影響を少なく直上の要素などで受けるのが健全
個別にidをつけたり個別にaddEventListenerしたり、としなくてもいい等の利点がある
といっても高尚なパターンとかじゃなくて
誰でも思いついてやってることだと思う なんでもdocumentで受けるのは
グローバル変数使い放題みたいな印象があるな それよりliが動的に足し引きされるやつとかの対応だろ
動けばいいや派はここで積む >>119
そりゃcreateElementするときに個別にaddEventListenerしてからappendChildすれば済む
問題が出るのは、innerHTML操作しかできないわからない層ぐらいじゃね 書き忘れたが、今の話のdelegateがjQuery由来ではないのか？というのと
もう一つ、なんでもdocumentというのは、liveメソッドが原因じゃないのか？ということ
jQuery 1.4.2で追加されたdelegateは親要素を指定することができるのだが、
それよりも前に1.3から追加されたliveは親要素は指定できずにdocumentになっていた
（これがわかりづらいという意見があって最終的にonに統一されたのだけれども）
$( "button" ).live( "click", function() {・・・}) だと
buttonではなくdocumentで受け取るようになっていたわけだ >>121
その辺考えるとjqueryは
documentへの委譲を理解せず使ってバグを生み出すコーダーを量産してたとも考えられるな >>122
でも当時はdelegateなんて考えなかったからね
だからこそjQueryは内部の処理を隠蔽して
魔法のような機能をしてますみたいな感じだった
また移譲の認識を広めたのもjQuery 1.7から追加されたonメソッドなわけで
ウェブプログラマとDOM APIにかなりの影響を与えたライブラリだな
その数年後にDOM APIにようやくセレクタを使ったアクセスや
比較方法が追加されたわけだしね >>120
動的に要素いじってる奴とイベント設定したい奴が同じならそうだが…
ライブラリがやってる場合とかなかなかそうもいかない >>124
あー、言われてみれば確かに
ライブラリ側で受信と共に自動生成されますー、とかあるわ納得
そりゃ親に当てるやりかた思いつけなくて詰むな >>96
イベントバブリングを少しでも減らすためと思ってる
document.bodyにしないのは、HTMLタグの<body>が省略されてたり、2つ以上書かれてたりすると、
Javascript側のdocument.bodyが不定になるっぽいから
>>111
jQueryのon()を見た感じでは、指定された要素そのものにaddEventListener()してるっぽい
さすがにdocumentだけで全部を処理していると、targetの管理・分岐が大きくなりすぎて処理が重くなると思う
<button><img></button>
という構造の場合、<img>でイベントが発生した場合にevent.targetは<img>になるから、parentNodeをたどって、<button>に内包されてるか確認しなきゃいけない
jQueryもparentNodeをたどってる
第三者のライブラリを使うと自分で書く必要がなくなるというだけの話 >>126
指定された要素そのものにaddEventListenerしているということは
その後に追加された同名classNameを持つ要素に対応できないということになるんだが
それとも、要素追加を監視して逐一リスナ貼り付けてるのか？ >>126
> jQueryのon()を見た感じでは、指定された要素そのものにaddEventListener()してるっぽい
そうだよ。こっそりdocumentになっていたのは古いliveメソッドの話
だからdocumentで受け取るなら
$(document).on('click', 〜
とする。
そして本来の要素は第二引数に、このように書く
$(document).on('click', 'button', 〜
親要素で受け取るという考え方が広まったので、普通に親イベントで受け取る
だけど、簡単に本来受け取りたかった要素 'button' を指定するのは引数一個と簡単で、
さらにthisは本来受け取りたかった要素になっている >>127
classNameで指定されたらclassNameでチェックすればいいだけでしょ >>127
> 指定された要素そのものにaddEventListenerしているということは
> その後に追加された同名classNameを持つ要素に対応できないということになるんだが
だから普通にdocumentにon（addEventListener）するんだってばｗ
そしてonメソッドの第二引数に「指定された要素」を指定することで
まるで「指定された要素」そのものにaddEventListenerしたかのように
違いを吸収してくれている >>129
> classNameで指定されたらclassNameでチェックすればいいだけでしょ
単純なclassNameだけで判別できる場合ならね >>131
その結果がjQueryの複雑なチェック方法なのでは documentをリスナ追加対象にすれば重くなる
最小限の親要素をリスナ追加対象にすればその外に生じた要素に対応できない
対象を考えなきゃいけないのはjqueryなしと変わらない
どこにリスナが追加されるかを意識して使わないといけないのはjqueryなしと変わらない
なんでもかんでもdocumentに追加していては問題が生じる危険がある
いずれにしてもjqueryを使わず普通にできる
なるほど Jqueryは結局のところ初心者向けじゃないのかな
JQ無しでjs仕様がわかっててJQ無しでコード書けててJQの挙動がしっかり把握できてる人
が一行一文字でも書く文字減らしたいために使う DOMはJavaScript初心者には難しすぎる
jQueryはJavaScript初心者にちょうどいい jQuery のソースコードには、IE9 なら、Android 4 ならとか、数十の分岐処理がある
JS で作る人は、これらの分岐処理でバグるから、正常に動作させるのに、10年以上掛かる
例えば、素のJSでは、要素の削除も、一旦その要素の親を取得してから、
親から見て、子供を削除する
var elem = document.getElementById('abc');
elem.parentNode.removeChild(elem);
こういうように書かないと、IE11 では動かない。
だから一々、どのブラウザでは動かないとか、頭を抱える
素のJSで作っている奴は、調べものばっかりして、頭を抱えているけど、
バグの多い製品しか作れないw
基本、調べものばかりしている奴は、コーディングの練習にもならないし、
時間を浪費して、上達しないから最悪 グローバル変数相当に名前空間とクロージャそれぞれどういう長所短所ある？
前者はその都度MyApp.つけなくてはならず
ここの皆はどっち使ってる？ どっちかしか使わないなんてない
名前空間といっても要するに1つのオブジェクトに押し込めるかどうかだけだし >>136
今時趣味で作るならモダンブラウザオンリーで十分だと思うよ
仮に仕事でIE対応が必要だとしても、考え方が反対だと思う
やっぱり、対応方法はわかってるけど、自作するのは面倒くさい
そこで効果を理解してるライブラリを使うというのが正常だと思う
jQueryを何の為かどういう仕組みか分からず使ってる状態っていうのは
絶対に困る場面が出るし、jQueryの良さを引き出せないよ 今の時代は便利なものをどれだけ使いこなすかのほうが重要になっている jQueryあにき今日も全開っすね( ´∀｀)bｸﾞｯ! LSの機能使いたいけど、非対応ブラウザにも対応させたいけど、自分で書くのめんどい！人限定ライブラリ >>132
> その結果がjQueryの複雑なチェック方法なのでは
何が複雑なの？ >>145
使い分けという時点でなんか違う気がしないでもないんだけど
・どう使いたいか・あとから変更したいかどう変更したいか
・状態を持たせたいか持たせるときどんな感じで使うのか
・1個だけあればいいか複数複製したいかnewしたいのかコンストラクタ次第で色々変えたいか
とか色々ある、んだけど
でも手法全体は変えないで後から変更調整を
したいときでもわりとどうにでもなるよね >>142
それはただのポリフィル
jQueryはあくまでjQueryワールドを提供するだけ グローバル変数を1つ宣言するのと
関数を1つ宣言するのとでは
グローバルの汚染度は変わらないですよね？ >>148
console.log(globalOsen?'汚染されてる！':'汚染されてない');
var globalOsen = 'キャラメル';
と
console.log(globalOsen?'汚染されてる！':'汚染されてない');
function globalOsen() {
return 'キャラメル';
}
比べてみなよ。
console.log(globalOsen?'汚染されてる！':'汚染されてない');
var globalOsen = function() {
return 'キャラメル';
};
なら変わらないけど。 なんで汚染だけローマ字なんだよ
グローバルもローマ字にしろや こんな式を見たのですが、これは何ですか？
var data = ('' == 0 ? '' : ''); >>150
そんなことしたらキャラメルが意味不明になるじゃん かんちがいしてた。グローバルをローマ字にって話かｗ >>149
順番が逆
var globalOsen = 'キャラメル';
console.log(globalOsen?'汚染されてる！':'汚染されてない');
function globalOsen() {
return 'キャラメル';
}
console.log(globalOsen?'汚染されてる！':'汚染されてない'); >>157
お前質問読めよ。それじゃ検証にならないじゃん。
関数を宣言文で書くとホイストがあるから同じ位置に書いた変数と有効範囲=汚染範囲が異なることを示してるの。 あんまりグローバルに関数宣言しない方がいいんでしょうか？ >>160
キャラメルとかけてるさっむいギャグがわからんのか >>161
関数も変数もないよ。使うところ以上にスコープ広げるな >>159
そういうことか
スコープだけ見てたすまん
一応、var宣言でも、未定義の変数として存在はしてるけどな var globalOsen = false;
console.log(globalOsen?'汚染されてる！':'汚染されてない'); >>157
初心者で申し訳ないのですがキャラメルとはなんでしょうか？
jsの作法か何かなのでしょうか？ 空にDocumentFragmentに要素を追加していって、最後にそれをDOMツリーに追加する
という方法をjQueryでやるにはどうすればいいのでしょうか？ ×空にDocumentFragment
○空のDocumentFragment
でした >>169
見ましたが書かれていませんでした
引数を指定しなければDocumentFragmentになるんじゃないかと思って
$()
にappendしてからbodyにappendToしてみたりしましたがうまくいきません
jqueryでDocumentFragmentを作成するにはどうすればいいのでしょうか？ ちゃんと書かれてるじゃんｗ
+ JavaScript & jQuery 質問用スレッド vol.8 +
http://mevius.5ch.net/test/read.cgi/hp/1510321470/66
66 Name_Not_Found sage 2018/03/11(日) 14:23:30.11 ID:???
こっちに書けマヌケ >>171
自治厨はほっておきましょう
相手にするだけ無駄です クズめ
67 Name_Not_Found sage 2018/03/11(日) 14:50:07.36 ID:???
マヌケじゃないのでこっちにはかかない 専用スレがある場合はそっちで聞いたほうが、より詳しい回答が得られることがある 普通にjQueryでDocumentFragmentをappendできるんだな。
http://jsfiddle.net/hc5ED/6/
>>173を読むと場合によっては内部でDocumentFragmentが
使われるようであまり意識しないで良いのかもしれないな >>173
ありがとうございます
しかし英語ということもありよく分かりませんでした
jQueryオブジェクトを配列に入れてappendしたら
それはdocumentFragmentにされてからappendされる
ということでしょうか？ >>176
$(document.createDocumentFragment())
という方法は自分もさっき思いついてやってみましたが
無理矢理jQueryを使ってるみたいな感じが若干引っかかります
ある程度抽象化した方法でdocumentFragmentを作る方法を
jQueryが提供していればいいのですが。
配列にして渡したら良きにはからうから気にするなということでしょうか
ありがとうございました >>177
多分そういうことなんじゃないかなって思うけどよくわからないね
単に複数の要素をいっぺんに追加したいだけならjQueryのメソッドで普通にできるし
正直DocumentFragmentを使うほど速度が必要なことってない。
もし本当に速度が必要ならそこだけ局所的にDOM API使うだけだし、
jQueryで明示的にDocumentFragmentを使おうって思ったことがないな >>179
> 無理矢理jQueryを使ってるみたいな感じが若干引っかかります
別にそんな事ないよ。
https://api.jquery.com/jQuery/#jQuery-element に書いてあるとおり、
jQuery関数（$関数）の引数にDOM要素を使うのはごく普通のことで
よく使われる $(document) だってDOM要素を使ってる。
createDocumentFragmentで作られるのもDOM要素の一種なんだから
それはごく普通の使い方 var variable = variable || 'char'; // 'char'以外でも123でもfunctionでも、あるいは2個でなく3個4個でも
この式は、どういう理屈で動いているんでしょうか？
variableの内容がundefinedだけでなくfalseになる値であっても内容が変わってしまう点はおいておくとしても
variableの内容に入りうるのがbooleanだけでないことや
||を&&に変えると右辺全体がtrueにならないと値が変更されないこと
||を&&に変えると右辺全体がtrueになるときでも&&で区切られた最後の値がvariableに入ることなど
どういう動作をするものなのか理解できません 右辺が云々は、単にvariableがfalsyなら新しい値を入れることを目的にしているから
入る値の方がbooｌeanだったりstringなのはそれで構わないコードなんだろう
要するにその変数に対してその段階に置けるデフォルト値を設定したい意図だと思う https://chrome.google.com/webstore/detail/save-my-eyes/mbhpdkldehghoilbopkcpfijdhnincmh?utm_source=chrome-app-launcher-info-dialog
このクロム拡張が勝手にマイニングしてるみたいなので暇なひとソースよんで解析して
自分にはわからなかった。
グーグルには不正行為通報したので削除されるのかな? 👀
Rock54: Caution(BBR-MD5:1777ba470a0705a8ff6b3177e04ccfb6) >>185
面倒くさいんで、ソースコードどこかにアップして >>184
ああ、javascriptの論理演算子の仕様そのものがそういう仕様なんですか
論理演算の結果はboolか、それか0 or 1で返す
ものだとばかり考えていて、特殊な構文か何かかと思っていました cからして似たようなもんだった気が。
式1||式2の全体の評価結果は
式1の評価結果が0のとき式2の評価結果、
式1の評価結果が0以外のとき式1の評価結果(を直ちに返し式2は評価されない)
int a;
if (a = (3+2)||99) {
printf("%d", a);
}
結果は1ではなく5だったかと。 #include <stdio.h>
int main(){
int a;
a = ( 6 + 9 ) && ( 0 || 2 ) ;
printf("%d", a); // 1
} >>192
いいってことよ
C系は原則1/0(true/true)を返すはずでphpやjavaも同仕様だったかと
理由は型どうすんの問題か true/trueってなんだよtrue/falseです >>193
k&rに0か1返すて書いてあったわ
cで仕事してたことあるのにハズカシス 下のコードが構造的にどうやって動いてるかいまいちよくわからない
formElementに2つの要素いれてそれにそれぞれイベントリスナーをついかしてるんだけど
なんでそれぞれ別個に作動するの?
2つめのformElementでcanvasHeightChange()を追加するときは
formElementに2つの要素がはいってるから両方にcanvasHeightChanged()が追加されるような気がするし
関数内でも別個に認識してcanvas.heightとcanvas.width変数を変更できる仕組みがよくわからない
<from>
canvas width: <input type="range" id="canvasWidth"
min="0" max="1000" step="1" value="500"> <br>
canvas Height: <input type="range" id="canvasHeight"
min="0" max="1000" step="1" value="500"><br>
</from>
formElement = document.getElementById("canvasWidth")
formElement.addEventListener('change', canvasWidthChanged, false)
formElement = document.getElementById("canvasHeight")
formElement.addEventListener('change', canvasHeightChanged, false)
function canvasWidthChanged(e) {
var target = e.target
theCanvas.width = target.value
drawScreen()
}
function canvasHeightChanged(e) {
var target = e.target
theCanvas.height = target.value
drawScreen()
} >>196
そういう（両方に…追加されるような気が）考えを持ってるなら
なんでformElementに対して = を使ってんの、というところが気になった formElement = document.getElementById("canvasWidth") // ここでformElementにcanvasWidthをいれる
formElement.addEventListener('change', canvasWidthChanged, false) //formeElement経由でcanvasWidthの要素にcanvasWidthChanged()を付け足す
formElement = document.getElementById("canvasHeight") //上で入れた要素をは破棄されて中身が入れ替えられる
formElement.addEventListener('change', canvasHeightChanged, false) //ここでイベントリスナをついかする
ってことかな?
formElementの変数内でイベントリスナを管理してるわけななくて
経由して各要素に追加されてるってことなのかな? なんで本の疑問をここで聞く？
本に作者のメールアドレスなり最近ならtwitterなり連絡先が書いてあるだろ
書いた人に聞くのが一番だよ、作者自身も今後の参考になるし javascriptの疑問かいたらあかんのかいなここ
じゃあ作者に聞くから英語に翻訳してくれ >>196
変数の節約
こんなん直接著者にわざわざ聞くレベルのことではない >>207
曽言う問題じゃねぇよwww
ここはjQueryと書籍関連の質問は禁止
書籍に関する疑問→著者にきけ
jQueryに関する疑問→該当スレいけ
どっちもスレチなんですがwwwwwwwwwwwwwww
ばかはしね >>167-181
jQuery 3.1 のソースコード内で、createDocumentFragment() を2回使っている。
buildFragment() という内部関数も参照
>>182-195
(易しい) Ruby >> Python, JS, PHP (クソ)
Rubyの偽は、nil, false だけだが、
他の3つは、空配列など、様々なものが偽になる。falsy。
だから、よくバグるから、クソ言語 >>209
易しいとクソは
対局に位置する概念じゃない
ネタだろうがまじでいってるなら知能相当低いなおまえ >>182
順番に真偽判断して
&& ||の真偽がけっていした時点でのその値を返すって典型だろ
ばかなのか >>196-207
2つの<input>タグに、別個のid を付けて、操作してるだけだろ。
何が悪い？
誰でも、こうするだろw >>212
本の質問をここでするな
著者にしろ
それだけ
あとjQueryも禁止
なんでこんな単純なことが分からんの?
ばかなの? >>196
これがjQueryのパワーｗ
<from>
canvas width: <input type="range" id="canvasWidth"
min="0" max="1000" step="1" value="500"> <br>
canvas Height: <input type="range" id="canvasHeight"
min="0" max="1000" step="1" value="500"><br>
</from>
$("#canvasWidth").on('change', function() {
theCanvas.width = this.value
drawScreen()
});
$("#canvasHeight").on('change', function() {
theCanvas.height = this.value
drawScreen()
} jQueryアニキとjQueryアンチ自治アニキのコラボきたーーー HTML/CSS のどんな質問に必ず優しく答えるスレ 31
946 名前：Name_Not_Found 2018/03/11(日) 16:49:34.27 ID:???>>940
sassはスレ違い
こいつは、あちこちのスレを荒らしてる奴だろ。
ちょっとでも、自分の知らない知識が書き込まれると、禁止にする荒らしだから、
相手にするな >>217
スレのルールぐらいまもれ
これだけだ
書籍に関する疑問→著者にきけ
jQueryに関する疑問→該当スレいけ >>218
これがルールなんだよね
なにが気に入らいのか意味不明 >>205
I do not spek English.
Thank you! 本に載っていたことであっても作者にしかわからないことと
誰でもわかることの二通り有るだろ。
作者にしかわからないことは作者に聞くしかないが
この場合は一般的なJavaScriptの話だ
で自治厨はそれに答えず、ただ単に自分が気に食わない話を
追い出してたいだけだってのがわかるだろう？
それもあって俺はずっとjQueryの話をするわけだよ。
>>196
> 2つめのformElementでcanvasHeightChange()を追加するときは
> formElementに2つの要素がはいってるから両方にcanvasHeightChanged()が追加されるような気がするし
変数には原則として一つの値しか入らない。
a = 1
a = 2
とやると最初に入れていたaは2で上書きされる。
だが変数に入っているものが単なる値ではなくオブジェクトの場合、
変数にはオブジェクトが入るのではなく、オブジェクトを示す参照が入る
だからこの時点では、= の左と右は同じオブジェクトを指し示している
formElement = document.getElementById("canvasWidth")
次のこれはそのオブジェクトに対してaddEventListenerするが
formElement.addEventListener('change', canvasWidthChanged, false)
その次のこれで、そのオブジェクトがなくなるわけではなく、
さっきのオブジェクトは生きたままで、formElementが指し示すものが変わるだけ
formElement = document.getElementById("canvasHeight") いいか？ jQueryの話をしている俺が
一番JavaScriptの質問に答えている どういたしまして
jQueryの素晴らしさを分かってくれたようで
よかったです >>227
てめぇじゃねぇとおもうがwwwwwww
jQueryhはレチ
すっこんでろ >>228
いや、>>224は俺だってｗ
俺が一番質問に回答してる。 >>229
>>224はjQuery関係ねぇだろ
ステマすんな >>231
jQuery関係ねぇのに>>227みたいなことかくのの
どこがステマじゃねぇんだよwww >>232
どこがステマに当てはまるというの？
https://www.weblio.jp/content/%E3%82%B9%E3%83%86%E3%83%AB%E3%82%B9%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0
ステルスマーケティングとは、マーケティングの手法のうち、
それが宣伝であると消費者に悟られないように宣伝を行うことである。
ステルスマーケティングは、中立的な立場での批評を装ったり、
当の商品と直接の利害関係がないファンの感想を装ったりして行われる。
商品の特長の紹介や、評価システム上の評価をつり上げるなどの行為により、
多くのユーザーの目に触れさせ、またユーザーの商品に対する印象を上げることが主な目的とされる。 本来なら実装全部貼るべきだが
せめてjqueryロードのためのscriptタグは省くなよ。
数万バイトに及ぶコード省いて何が「数行で書けます」だバカ。 >>233
jQueryかんけいないのにjQueryのおかげで解決したと
さとられないように吹聴してるだろww
どこにjQueryがかんけいあるかいってみろやwwww > jQueryかんけいないのにjQueryのおかげで解決したと
> さとられないように吹聴してるだろww
だからそれのどこがステマの定義に当てはまるの？ってきいてるんだが >>236
それが宣伝であると消費者に悟られないように宣伝を行うことである。
これにまんま当てはまるだろwww
なんの関係もないのに実績をうたう
実績をうたってるが実際はなんもかんけいないjQueryのワードがなぜかできて宣伝をしてる 荒らしと会話するな！
荒らしと会話する者も、荒らしやぞ！
荒らしと会話すると、荒らしが喜ぶだけ。
ずっと荒らされるから、荒らしはスルーせよ！ >>236
まずステマ（ステルスマーケティング）である以上
マーケティングでなければいけない。
何の商品のマーケティングをしているというのか？
無料のjQueryが普及した所でお金は入ってこない
これだとマーケティングではない
また消費者（お金払ってないので消費者でもないが）が
悟られないようにというが、お前は関係ない話だと見抜けなかったのか？
悟ってる以上、ステルスにはならない >>239
マーケティングとはお金とは関係ない
マーケッティングすることな
市場を拡大しようと何らかの行動をおこすとこがマーケティングな
金とは関係ねぇよw >>241
百歩譲ってそうであったとしても
ステルスではない。
誰もが気づいている以上ステルスではない >>242
jQuery関係ないのにjQueryだしてる
ステルスだろ
無知な人ならあぁあれはjQueryに帰依するちしきだったんだなと勘違いするだろwww
これがステルスなのww 荒らしではないステルスではないマーケティングをしてるのだ
堂々とマーケティングをしてるのだｗ そうそのとおり
ステマってのはスレ住人を装って
利害関係者が利害のために書籍のタイトルや評価を書いていったり
利害関係者が利害のために特定の言語を推したり
利害関係者が利害のために特定ウェブサイトのURLを事あるごとに書いたり
というような行為をすることを指すのだ >>246
隠れてするのがステマで
隠れてしないのが許されてるマーケティングだと思うんだが？ >>247
隠れてするステマってぐたいてきにどんなんだよw で結局>>227ってどうjQueryとかんけいあるの?
これがしめせないならステマだわwwww
ステマってのが気にクワないなら嘘まーけてぃんぐでもいいよ。
とりあえず嘘ついたって認めろな? >>215にjQueryで解決してるじゃん
変数がないから根本的に解決できてる jqueryでなくても変数を使わず解決できる
document.getElementById('canvasWidth').addEventListener('change', canvasWidthChanged, false);
しかし質問者の疑問の本質はそこではないのでこれでは意味が無い
まあ質問者が理解できていなかったはずがないので何もかも意味が無いんだが 違う
かっそかその今となってはむしろ
ありがたい質問者様に対して答えさせて頂いてるんだ 違う.lengthだ
'char'.length と ('char').length って何か違いあるんですか？ >>260
一緒
BNF木が一段違うけど、評価の途中で等価になる 裸→逮捕
裸にラップを巻く→逮捕
見た目が変わらないので どういたしまして。jQuery以外の話題もOKだぜ！ >>259
え?どういうこと?
長さの違い?
短いほうが良いの? JavaScriptを使って
意図的にリフローを発生させる方法があった気がするのですが
どういったものでしたか？ >>267
自演だと思う
264の質問に答えたの俺だけど、「どういたしまして」って言ってるの俺じゃないもん >>260=>>264だけど質問者から回答者への礼が届いてればそれでいいと思う >>268
opacity弄るんじゃなかったっけかな
ぐぐればでてきそうだが aタグをクリックされてもフォーカスされないようにしたいです
clickイベントでpreventDefaultするとaタグを無効にできますが
フォーカスはされます
フォーカスを止めるにはどうすればいいですか？ 今セキュリティの本読んでるんだけどもしかしてjqueryより生のjavascriptのほうが強い？
ハッカー的な意味で ハッカー的な意味なら間違いなくjQueryの勝利だよ じゃ、教科書的に解りやすいようjavascriptで書いてるだけか JavaScriptの方が弱いからだよ。ハッカー的な意味で イケメンで高学歴のお前らに聞きたいんだけど
プログラミングを始めたいんだけど
javaScriptを学習するのってどうっすか？
今更、過ぎます？ ハッカー的な意味ならおすすめ
つかちょっと前にこのスレで同じような質問あったから探してよんでみな
それ読んでまだなにかあったら質問してごらん。 javaScriptってブラウザで動く原始的な言語だと思ってたけど
ハッキングにも使えるんか！？
結構優れた言語なんだね その理屈だとアセンブリが最も優れた言語だな。最も原始的だけど。 同じような質問ってのが見つからんです。。。
ハッキングにも使えるスクリプト言語ってなんかすごそうだなぁと思った。
javaScriptを極めれば10年飯が食えますか？
せっかく学習しても10年衰退とかないよね？
教えてエロい人 >>287
今はブラウザ以外でも動くようになったからね
ネットワークコマンドやバイナリデータの操作
ウェブサーバーなどのサーバーまでJavaScriptで作ることができる >>290
マジっすか！？
ハッキングからサーバーまで何でもできるんすね！
JavaScriptって結構優秀なんだねえ。
早速、勉強してみますわ。
ただ、JavaScriptのコード見てると目眩がするんだよな。。。
Pythonとかの方がコードがスッキリしてる感じ？
JavaScriptをすっ飛ばしてTypeScriptとか勉強するのってあり？ >>289
>javaScriptを極めれば10年飯が食えますか？
その質問は意味がないな。
なぜならJavaScriptを極めるためには、他の言語を
知らないといけないから。これはどの言語にも当てはまる。
一つの言語にこだわってもその言語を極めることはできない
何故かと言うとJavaScriptは進化し続けている言語だから。
今のJavaScriptと1年後のJavaScriptは違う他の言語を参考に良い機能を取り入れてる。
進化し続ける言語を極めるためには、言語に搭載されるよりも先に
搭載される可能性がある機能を知っていなければいけない。
JavaScriptだけをやっていても極められない。言語の進化のスピードに追いつけない >>292
なるほどねえ。
JavaScriptは進化する。
それを学習する俺もともに進化せねばならないって訳ねえ。 お前ら、トンクス。
現状JavaScriptが最強そうだね。
JavaScriptの本買ってくるわ。 ＞JavaScriptをすっ飛ばしてTypeScriptとか勉強するのってあり？
誰かこれについて教えろください。。。m(_ _)m ホントはアリなんだけど
現状javascriptの知識がある前提の説明ばっかで辛いよ >>296
そうなんか。。。
やはり、JavaScriptは避けて通れないんだね。。。
ありがとう。
素直にJavaScript勉強します。 移り変わりの速い世界なので実際どうなるか分からんけど
あと10年で廃れることはないんじゃないの? >>281
どれって言うか脆弱性関係の本でXSSやクッキーやセッションを盗むとかHTMLのiframeのなかにjavascriptを埋め込むとか
そういう感じでちょこちょこ出てくるよ
脆弱性関係の本はふるいの多いけど今年の6月に徳丸浩さんの本が改訂されるって本人のブログで読んだ 本来の意味のハッカーじゃなくて
不正アクセスとか乗っ取りなんかの意味のハッカーだと流石に無理があるのでは よそのサイトのソースを持ってくるってのは
同一生成元ポリシーとかで相手側のサーバが許可してない限りは
JavaScriptだけではどうしても無理なんでしょうか？ >>301
情報が少ないから分からんけど、たぶんほぼ無理
jsonpは使えない？ JSというかブラウザのセキュリティ制約上許されない どうもありがとうございます
デスクトップで使う自分用アプリだったのですが
面倒だけどPHP経由させることにします そういう用途ならhtaなりWebExtensionなり検討出来ない？ 関数の定義をどこに書けばいいのよくわからないのですが
極端な場合で関数を100入れ子状態にするとき
一番深いとこ100個目の関数の定義は
function name() {}
で定義する時は階層的にどこに書けばいいんでしょう?
1 どこでもよい
2 一番上の層
3 99番目の層 使う範囲が狭ければ最小限の場所とか広範囲で使うなら最上層とか
要するに自分が無知識状態から改修させられたとき楽なほうを選べばいいんじゃね >>309
どこの層に定義を書いても、どの層からでも呼び出せるってことですか?
勉強しながら、コードのサンプルを1つのスクリプトファイルに無理やり少しずつ入れててってるんですが
ちょっと動かして整理したらうごかなくなっちゃってこまってるんですけど。 >>308
> で定義する時は階層的にどこに書けばいいんでしょう?
それが何の役割なのかによる、まあ少なくとも99番目の層はありえず、
100入れ子状態とかそういうのがそもそもありえない。というか意味がわからない。
>>310
気分次第だけど、そのコードをjsfiddleかどこか編集しやすい所に作ってくれたら
どうするのか良いのか修正してあげるかもよ？ >>285
まず、この本で勉強しろ
「たのしいRuby 第5版、2016」
JavaScript は、ES3 までは、まだマシ。
(だが、これでも、Ruby よりもかなり難しい)
ES5, ES6(2015)になると、手に負えない化物になる
初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017
漏れは、10ほどのプログラミング言語を使えるが、
それでも、この本には頭を抱えるほど
この本を読むためには、まず数年以上、
Ruby などの簡単な言語で、基礎体力を付けるべき
その後じゃないと、読めない クロムでvideoタグのコントロールバーをずっと表示させたいのだけどやり方分かる人います?
↓で出来るらしいのだができない
//assign video element to variable vid
var vid = document.getElementById("player");
function videoTimeUpdate(e)
{
//set controls settings to controls,this make controls show everytime this event is triggered
vid.setAttribute("controls","controls");
}
//add event listener to video for timeupdate event
vid.addEventListener('timeupdate', videoTimeUpdate, false); たのしいRuby→Python
を熱弁すると人ひとちょくちょく見る気がする
このスレ以外でもだいぶ前に同じようなこと言ってる人見たことある
まさか中の人じゃないとおもうけど >>313
まじかよ。
JavaScriptはプロでも難しいのか。。。
トンクス。挫折したらRubyに逃げるわｗ
でも最近Rubyが息をしてないような気がするんだけど気のせいかな？
Pythonじゃあかんの？ >>317
考え方はそれぞれだけどそのレスは真に受けん方が良い
息してないからあちこち宣伝して回る人も現れるって事もある プログラミングを始めたいレベルの人間が
Rubyが最近息してない等と語りだすスレ >>317
Webの仕事してるけど初めてのJavaScriptで頭抱えるは無いわｗ
まあプログラミング自体が初めてというひと向けの本ではないがプロでも難しいは無い。あーまあwebはピンキリだから金もらってりゃプロという定義なら有り得なくもないが…
ともかくこういうのは自分が分からない→自分はそこそこのプログラマのはず分からないのはおかしい→言語が、本が難しいんだ！と心理学で言う防衛規制が絡んでくる話だから、この手の意見はあまり真に受けない方がいい もう何度言ってきたか分からないけど、JSの明らかな難しさってnew演算子の複雑な振る舞いだけじゃん
そのベースのプロトタイプチェーンとか、スコープチェーンっていうのは、簡単過ぎる程単純なんだからさ
ただ深く学ぼうとしたときに、その上に構築されてる旧/新クラスシステムを
シンボルや内部メソッド含めて理解する必要が出てくるから、確かにそれはやや難しいが、
きちんとベースのプロトタイプチェーンや各機能を理解できていれば
あとは仕様書を読む力をつけていけばいい JavaScriptをやる前にRubyをやれとか頭おかしいやろ
Rubyの作者のマッツがネトウヨだということも最近発覚したし
やる必要性はゼロだと断言できる >>319
やっぱり、RubyはPythonに圧され気味だよねえ。
>>321
とんくす。JavaScriptは初心者向けとしてよく勧められてるもんねえ。
とりあえず、JavaScriptとPythonをやってみようかな。
情報も多いし。
その次はC＃当りにしようかなぁ。
VBAはExcelにPythonが統合されたら廃れそうだしな。。。 ブラウザという協力な動線があるようなJSでも、Webを良く閲覧してるうちに興味が出てブログを始めて
もっと細かいことがしたくてHTML、CSSと学んでから来るのがやっぱり理想だと思う
本当に何がやりたいのかも分からないし、条件分岐やループの概念もチンプンカンプンならJSですらやらない方がいい
まずは実用的ではない、お遊びの言語環境から始めるべきだ
それなのに基本サーバーという裏方でREPLなRubyなんかを勧めるのはいけないと思う
学校の授業で先生が良い環境を整えてくれて学習要領も整えてくれるんなら別だけど
やっぱり初心者には基本的にはできるだけ絵を簡単に動かせるものからプログラミングを教えるべきだよ
だからお遊び言語か、オーサリングツールが発達してるもので学んでいったほうが良い excelはしらんけど
libre office やら google spreadsheetはjavascript つかえる 言語選びのセンスは悪くなさげだが何がしたいのかが分からんな
Windowsアプリを作りたいのか？ >>316
ライブラリはなしの方向でお願いします。
でもライブラリでできるってことは生JSでもできるってことだよね
動画プレイヤーにマウスオーバーするとコントロールバーが表示されるのだけど
マウスオーバーを偽装することとか出来たりする? >>330
JavaScriptじゃないけど↓これとか
video::-webkit-media-controls-panel {
display: flex !important;
opacity: 1 !important;
} >>329
機械学習やディープラーニングに興味あり！
WEB（ブラウザ）アプリにも興味あり！
Windowsアプリも作りたい！
色々やりたいんです。
PythonとJavaScriptなどのスクリプト言語でとりあえず学習して、
WindowsでGUIが簡単に作れそうで速度も早いC＃の順で学習しようかと。。。
素人だけどこの3つは10年後も廃れてなさそうと思ったのですよ。 >>330
> でもライブラリでできるってことは生JSでもできるってことだよね
生JSでやるにしても、ライブラリは良い参考書になるよ
実現してるコードが公開されてるんだから、それを参考にしない手はない
それから生JSでできるのにライブラリが有るのは大変だからだよ
自分が今何をやりたいのか、機能を実現したいのか
機能を実現するためのコードの勉強がしたいのか
どちらを優先させたいのかを考えたほうが良いね 本当に良い機能でいっぱいなら仕様に取り込まれてそう そんな単純な話じゃないよ
例えば標準に取り込まれたPromiseだけど取り込まれるまで
年も議論が続いた。今すぐ動くものが欲しい人にとっては死活問題だね
そしてPromiseだけど、さらにasync awaitという形に代わった
Promiseは当時のJavaScriptで実現可能なものだったけど、
そのJavaScript自体を変えていいならもっといい方法が候補になる
つまり仕様に取り込まれるときは代わってしまう
＝ 仕様に取り込まれてないように見えるということ
良い機能でいっぱいであっても仕様に取り込まれないものはたくさんある
それに加えてどうもJavaScriptは方針として言語には必要最小限の
ものしか搭載しないようにしている感じが有る
なぜならRubyで「本当に良いものだから仕様に取り込まれたもの」が
取り込まれていないから。RubyのarrayメソッドにはJavaScriptにはない
便利な機能が沢山仕様に取り込まれている。
https://ref.xaio.jp/ruby/classes/array
「本当に良い機能でいっぱいなら仕様に取り込まれてそう」が真であれば
これらは全て取り込まれているはず。
取り込まれてないので良い機能でも取り込まれるとは限らないという結論になる >>333
若いうちは元気があっていろいろやる気があるのは本当に素晴らしいけど
結論から言うと幅広く手を出すのは人間である限り無理だよ、どうしてもただの器用貧乏になっちゃう
それだけ各言語の環境っていうのは奥が深いし、更新速度も早い
英語もロシア語も中国語もあれもこれもやりたいって言って、
実際に日常会話くらいはできるようになる人はいくらでも居るだろうけど、
それ以上のスキルを付けて各国の事情に付いていくのは困難だよ
なんで困難かというと、そうこうしてるうちにあっという間に５年１０年と経って
そうすると湧いて溢れる若い勢いが絶対に無くなってくるから
プログラミング自体に興味があってそれが目的ならやっぱりメインの言語を決める必要がある
そしてできる限りその言語を極めて言って、その言語で機械学習とか物を作る
もしくはプログラミングは手段だと完全に割り切って、機械学習やアプリとか
ものを作ることだけを目標に据えることができるのなら、手広くやることも可能かもしれない WEB絡みならぶっちゃけhtml/cssとphp/javascriptで十分なんだよな javascriptは初心者向け！
rubyやphpはもう古いPythonがこの先長く生き残る！
これ最近のレスほとんど書籍ステマの自演だな >>339
だがな、機械学習・ディープラーリング
ウェブアプリ、Windowsアプリ、
Python、JavaScript、C#
この程度を覚えるのは大したことじゃないぞ
本気でやれば1年あれば全部できる なにをどう間違えたらラーニングがラーリングになるんだ
PC、タブレット、スマホ、どれでもそうはならんだろ・・・ガラケーとかか？ >>338
Promiseがあってのasync awaitでしょ
各APIがPromiseを返したり扱うことができるから柔軟性がある
これが構文が先ということはできない
構文だけで済ますと極めて限定的だし
あと別に、必要最小限の ものしか搭載しないようにしている方針なんて無い
TC39の10人程度のコアメンバーが興味をもった順から入っていってるだけ
だからわかり易い例としてO.oなんてものが勢いだけで入りそうになる
これがArrayの色んなメソッドよりも重要なものか？と言われればそうではないだろう
まあArrayのメソッド拡張は度々提案があったが、進歩しないのには理由がある
Array.prototypeにメソッドを追加するとWebを壊しうるから
TC39は別にこの機能は世の中のJSerが本当に求めているものかどうか？は然程気にしないし、
方針が曖昧なことが本当に問題で不安要素なのだが、唯一Webを壊すな！ということは頑なに守ってきた
だからSymbol.unscopablesなんてお馬鹿なものまで追加したのだが
それでも一部守りきれなかったのでArray.prototype.valuesが今年までブラウザにOFFられてた
だから、Arrayの便利メソッドとかは、１．モジュールの仕組みを整えて、２．標準モジュールを定義して
それから要る場合にはimportして貰おうということになっていた
今ようやく１が完了して２に入っていくところ
だが今デコレーターとかホットな話題がたくさんあるので取り掛かりが2019年になるかもしれない
そして今valuesが思い切って導入されるように、その頃にはやっぱり思い切って普通に入れようということにもなりそうな気がする
というか現にメソッド１つや配列操作構文の単機能としては今も提案が挙がってる
まあこのように、O.oときもそうだがESは仕様決定がちょっと遅いことでより良い選択肢を取れて救われたことは本当に多い
遅いから、入ったときには役立たずというのだけは大間違い
特にJSでは、JS2.0で互換性破棄とか最も難しい立場の言語なんだから
明確な方針が無い今、これ以上スピードが増すのは危険でしか無い
まあ、ES2020くらいには結構便利なメソッドやら構文やらが入ってきて解決されてると思うよ 常々思うことだが営業みたいなしゃべりが目立つ
人材派遣の顔合わせについてきてる奴みたいな… >>343
> なにをどう間違えたらラーニングがラーリングになるんだ
learning
learing
一文字抜けた感じかな？ >>347
5chは初めてか？
ゆっくりしていけよ >>345
> Array.prototypeにメソッドを追加するとWebを壊しうるから
それはおかしい。
なぜれならArray2 とか "use strict v2;" とか作ればいいからだ >>346
存在しない
もしも超絶ハイパー奇跡的に2050年とかまで仕様策定が続いたら
そのとき最後のバージョンとしてそれを出す可能性だけはある >>339
おお、忠告ありがとうっす。
確かに色々手を出しすぎるのは厳しいよねえ。
できるだけライブラリで済ませられるものはそれに頼って頑張ります。 >>350
それはできればしたくないだろう
ES2015のときの話だが
だからまだましな解決策としてSymbol.unscopablesが導入されたが
それだけでは十分では無かった
だからもうimport "std:Array-Ex"みたいにやってくほうがベターかね
という雰囲気になって、しばらくそれ系の提案は勢いを潜めてるってことだ
物事はもっと複雑で、Web APIが返す配列がArrayを継承してくれる目処も経ってなかった頃だったしな
とりあえず、それ以上議論を攻めるような感じにはならなかったということ なら、Array拡張するモジュールを標準化すれば良いのでは？
デフォルトではArrayはそのまま、標準化された
ArrayExをimportすれば拡張される
まあいいや、
どちらにしろ
> 本当に良い機能でいっぱいなら仕様に取り込まれてそう
という意見は間違いで、良い機能でいっぱいであっても
仕様に取り込まれないことはよくある話ってことだよ ？ 単に良いものなら取り入れられるっていうのは
考えが甘いって話をしてるだけだよ。
良くても取り入れられないものはたくさんあるのが現実 >>354
標準化すれば良いのでは？って……
今まで説明した話を聞いていなかったのか？
標準モジュールの話が本腰入れてできるようになったのは、
ES2015後切り離して議論していたモジュールの構文以外の部分がようやくまとまって実装されだした今だし、
valuesもONにしたりOFFにしたり様子を見てたが、ONにしていって大丈夫だろうという判断が出た今からが
配列のメソッドに手を入れていくムードになり得るということだよ、物事には流れや雰囲気っていうのがあるんだからね
でも今はもう個別のメソッドが提案されてるし、やっぱりまとめてどっさりではなく１個１個入れていく形になるかもねってこと
それはそれで、そっちのほうが良いだろうよ
とりあえずRubyか何かを真似してどっさり持ってくるよりもさ
それでね、一番言いたかったのは、「お前が提案してこいよ！！いやしてください」ってことなんだけど
伝わらなかった？ 伝わらなかった？って俺がいつ標準化しろって言ったんだ？
標準化する方法はあるって話をしただけ
俺は良いものであっても標準化されるとは限らないって話をしてる >>358
俺は良いものであっても標準化されるとは限らないと言わずに
標準化されるように提案しようと言ってる
なぜなら「本当に良いもの」なんて個人次第だから
それを提案して皆に認められて仕様に入って実装されて初めて「本当に良いもの」と言えるんだよ
それには時期とタイミングっていうのがある
Rubyに入ってる「本当に良いもの」だから、今JSに入れても「本当に良いもの」になるというわけではない
JSが大きく関わっているWebの他の物や開発者、実装などの準備やタイミングもあるんだよ
だから、もし今その「本当に良いもの」が「本当に良いもの」になれると思うのなら提案すればいい
それぞれの言語の事情を踏まえないと他の言語を引き合いに出しても仕方がない
俺は、「本当に良いもの」はきちんと然るべきときに導入されてきてると思うよ いや、喧嘩はする気はない、明日仕事６時からだし遠慮してくれ 若いなら色々手を出したほうがいい
でも年取ってものいうのは専門性だから
すこしずつ絞っていくようにすればいい
どれを選ぶかは仕事でなにをやるかとかそういうもので決まっていくことが多い
プログラム以外の強い分野もも1つくらいつくようにするとなおよし 素人の行き方には、根拠が無い。
C#が目標でも、C#からは行けない。そういう道がない。
Java から行かないと無理だろ
JavaScript(JS), Python にも、直接行く道がない。
素人は、行けると思うけど、漏れら、10言語以上知っていると、無理だとわかる
「たのしいRuby 第5版、2016」
これを読んで無理なら、それ以上進めない
JSなどは、オブジェクト指向・クラスじゃないだろ。
いきなりプロトタイプだから、JSの内部の実装を学んだ所で、何もならないし時間の無駄。
ビジネスロジックとは無関係
Rubyで、Sinatra を、full scratch で書く方が速い。
それがRails を作る事と同じ
「Node.js超入門、掌田津耶乃、2017」
この本を読めばわかるが、
Node.jsを、full scratch で書くと、Sinatra と同じ。
Node.js + Express + Bookshelf が、Rails と同じ
「10日でおぼえる jQuery 入門教室 第2版、山田祥寛(よしひろ)、2013」
この本が、RubyのNokogiri と同じ
最初から、JSで苦しむより、Rubyでフレームワークを学んでから、
Node.jsへ行った方が、ずっと速い 今ではマルチパラダイムが主流だし
古典的なクラスに完全に縛られてるクラスベース言語も無くなってきてるんだから
プロトタイプベースのJSで、クラスとはオブジェクト指向に於ける抽象化プログラミングの一種だと
認識していたほうが、他の言語に言っても理解が早い >>359
ならお前が提案すれば良いんじゃねーの？
なんで良いものであっても標準化されるとは限らないよって
言ってるだけの俺に提案しろって言ってるのか意味不明なんだけど Rubyはオブジェクト指向を突き詰めるとの本末転倒ぷりを身をもって示してくれた、クソ原理主義言語。
rails以外に存在価値なし。 >>365
✘良いものであっても標準化されるとは限らない
○俺が考える良いものであっても標準化されるとは限らない 超初心者の質問をお願いします！
iOS safariで、ブラウザ閲覧中のスリープ時に何か処理を実行したいのですが
どのようにすればいいでしょうか？
visibilitychangeとhiddenでiOS以外のブラウザでは実行できるのですが。。。
よろしくお願い致します やさしいRubyアニキとjQueryアニキはどっちが長男なの? スリープ時はタイマーも止まる可能性大だし、処理が継続できる保証もない
PCでスリープした時を考えると当たり前だと思うだろう
スリープ時になにかするという事は避けたほうが良い 改めて質問させていただきます。
MonacaとAngularJSで開発を行っているのですが、時刻を取得し更新するプログラムが動きません。
ソースコードは下にアップロードしています。
https://jsfiddle.net/da5goyvL/1/
(https://gist.github.com/anonymous/31a1c1aa48bfe6673cb97c333b238b43)
一応、実行時の時刻は表示されるのですが、intervalで時刻の更新ができていません。
console.logでnow_secondsの内容を出力させてみると(intervalで)、きちんと取得できているみたいです。
ということは時刻が反映されていないだけだと思うのですが、その方法（時計の作りかた）をどなたかご教示願います。 別タブなり別アプリなり開いてる間も処理し続けるとか、最初からそういうものでなきゃ「迷惑だからやめろ」って思うんだが…… this.seconds に now_secondsを代入した後に now_seconds を変更しても this.seconds とは連動せんからな、そりゃ変わらんだろうよ ライブラリ使うとそんなこともわからない人材ができあがるのか
ソース見てないけど 裏でこっそりマイニングさせようとしてて
スリープとか別アプリとかされた時にサーバに通知させたい動機だったりして var a=[1,{b:true},3];
var b=a.concat();
b[2]=5;
a[1].b=false;
console.log(a);//[1,{b:false},3]
console.log(b);//[1,{b:false},5]
concatでシャローコピーしたつもりなのですが
a[2],b[2]は成功
しかし、a[1],b[1]のオブジェクトはどっちもfalseになっていて
干渉していました・・・
forで繰り返して構築する以外に
完璧なシャローコピー（？）をするにはどうしたらいいですか これはだめ?
b = JSON.parse(JSON.stringify(a)) >>380
>シャロー
シャローではなくディープだろう
シャロー（ shallow ）は「浅い」 JSON.parseは循環参照に対応していないので平坦化/組み立ての作業が必要 質問です
var A.prototype.hoge = function(){
this.array = [];
}
var B.prototype.hoge = function(){
console.log(A.prototype.array.length);
}
とやってもAのthis.arrayが取得できません
どのように取得したらよいのでしょうか？ 何をやりたいのか意味不明だけど、A.prototype.hoge(); しないとarrayが作られないじゃん
それとvarいらんだろ >>377
次のようにコード書き換えてみたのですが、表示が変化しないです。
var date = new Date();
this.hours = date.getHours();
this.minutes = date.getMinutes();
this.seconds = date.getSeconds();
var timer = $interval(function(){
this.hours = new Date().getHours();
this.minutes = new Date().getMinutes();
this.seconds = new Date().getSeconds();
}, 1000);
もしかして、intervalサービス中でUIの書き換えを行うことはできないのでしょうか(デッドロック阻止??)? アドブロックブロックの原理ってどうなってんのあれ?
解除したいんだけど。 ・そのサイトを使うのをやめる
・そのサイトがアドブロックブロックやってることを宣伝拡散 アドブロックブロック対策のために
検出不可能なアドブロックを作りたい tampermonkeyで実行してるスクリプトの変数に
コンソールからアクセス出来る? >>395
今は要素を消したり隠したりを表のレイヤーでやるから感知されうるが
Houdini系APIを利用してレンダリングのレベルで調整すればバレにくくなる
ただそれでも今ではどうしても痕跡が残るが
もし拡張機能からより上位のレイヤーを調整できるようにさせてもらえれば可能かも >>397
完璧を目指すと最悪ブラウザ作ることにはなるんだろうなっては思ってる
あと要素を消したり隠したりするからバレるわけだよね。
それをやらなければいい。やり方はあって（というか昔やってた）
画像の場合は透明画像にすり替える。他の形式もそれぞれダミーにすり替える。
要素は消さない。ただ見えないだけ。
これだけで結構検出は難しくなると思うよ
あとはJavaScriptによる自動操作、HTMLを書き換えると検出されそうだから
ページが読み込んでるいずれかのJavaScriptファイルを書き換えて
匿名関数の即時実行で処理させる。またwindow.openなどの関数を
オーバーライドして処理を割り込ませる
アイデアは有るけどそれを拡張機能として作るのが面倒だなｗ あと拡張機能でHTTPプロキシみたいなことできるんだろうか？
できなければプロキシ作れば良いんだけどhttps対応がめんどいな 逆の観点で言って、プロキシでフィルター通しても
画面に本来必要不可欠な処理と統合されたら対応不可能になるんじゃない？ >>400
そういうのが広告である以上、広告配信側からの制限も有るので
統合するのは難しいと思ってる。つまりサイト側は広告内容には手を出せない
広告を表示しないようにするからバレるわけで
サイト側は広告を表示したつもりだけど広告内容が無害なものにすり替わる
サイト側は広告内容に手を出せないという前提を満たしている限りどうしようも
例えばポップアップウインドウ。これはポップアップを
出さなくするのではなくポップアップを出すのだけれど、
内容を広告ではなく自動でクローズするHTMLにすり替える
これでポップアップウインドウが開いたかどうかの判定を騙せる
透明広告画像にすり替えるのも同じ理由ね。
サイト側は表示したつもりになっている javascript OFF、iframeも遮断、できればサードパーティURLも遮断、が一番
それをわかってるからchromeとかfirefoxはjavascript切る設定を見えなくしてる
結局javascriptが害悪 >>402
その理屈だとHTMLが害悪ってことにならんのか？ イベントリスナーに変数渡したいのだがやり方がわからない
セッションストレージに一旦突っ込んでよびだせばいい?
それともグローバル変数にするか?
検索したら
https://qiita.com/rukiadia/items/03aaa8955c0f6576a5e7
が出てきたけど初心者の自分にはやり取りが難しくて結局どうなのかよくわからん。 害悪はターゲティング広告や（第三者を介した）アクセス解析
HTMLというよりjavascript, cookie, refererだな
iframeですら呼び出し元がわからなければ広告手段としては劣るようになる
これらが欠けるほどターゲティング広告等は成立しづらくなる >>404
前段のどっちでもいい、それで問題がなければ一向に構わない
後段はjavascriptによって
<button>を
<button data-hoge="渡したい変数の中身">にして
関数でdata-hoge（コード中ではbuttonElement.dataset.hogeになる）を使ってるだけ
要するにjavascript側で保持するんじゃなくてhtmlに保持させる格好
これでもいい cssのposition:absoluteと
JSの e.pageX の座標は一致するの? >>404
のコメ欄より
addEventListener を使用している場合は、第二引数で handleEvent プロパティを持つオブジェクトを指定して下さい。
document.querySelector('.jscBtn').addEventListener('click', {name: 'my name', handleEvent: function handleEvent (event) {
console.log(this.name); // "my name"
}}, false); >>405
害悪は派手な広告であって
ターゲティングとかはどうでもいいでしょ >>409
見た目派手すぎる広告をどうにかしたいだけだったら
アドブロックブロック対策的には
広告のサイズをwidth: 10px !important; overflow: hidden; とかするだけで完了すんじゃね
要素消してない、隠してない、srcset属性変わらない、つまり検知できない >>409
どうでもいいなら
ターゲティング広告の法規制が議論されたり対策が進められたり
Google Analyticsが違法認定されたり、なんてことは起きないはずだからな >>408
そういやそういう仕様があったなｗ
jQueryで書くとこうなる。DOM API作ってるやつ
センスなさすぎだろう
$('.jscBtn').on('click', {name: 'my name'}, function(event) {
console(event.data.name); // "my name"
}); >>408
へー。
名前付き引数でhandleEventに関数いれればできるのかあ。
勉強なった。
MDNみたけどそんなん記述見つからんかったなあ。 × console(event.data.name); // "my name"
○ console.log(event.data.name); // "my name"
>>404
リンク先読んで頭痛くなってきた
なんでこいつらこんな馬鹿なやり取りしてるんだ？
あんたが初心者だから難しくてわからないんじゃない。
リンク先の奴らが初心者で試行錯誤してるから、それ見てもわからないのは当たり前
まずセッションストレージはたかがイベントリスナーに変数を渡す程度では重すぎる
グローバル変数も、どこで書き換えられるか分からんのだから使ったらダメ
>>408のようにaddEventListenerの機能に助けてもらうのもありだけど
それを使わないとするなら、最初に出るべきコードはこれだろう
var handler = (function(data) {
return function() {
console.log(data.name);
}
}({name: 'my name'}));
なれないと見にくいだろうけど↑は関数（イベントリスナー）を返す無名関数をすぐに実行する書き方
その関数に変数を紐づけているという形
document.querySelector('.jscBtn').addEventListener('click', handler, false); >>413
その書き方はJavaScriptっぽくないからね
何故かと言うと、その書き方は（昔の？）Javaのように
引数に関数を使用できない言語のための書き方
（DOM APIはJavaScriptだけの仕様ではないことに注意）
引数に関数を渡せないから、代わりに特別なメソッドを用意したオブジェクトを渡す
擬似言語で書くならば、こんな使い方を想定した仕様
class MyHandler implements Handler {
constructor(data) {
this.data = data
}
override handleEvent() {
console.log(this.data.name)
}
}
var handler = new MyHandler({name: 'my name'})
document.querySelector('.jscBtn').addEventListener('click', handler, false); >>414
逆にイベントハンドラで使いたい変数の中身を
addEventListener()後の処理で動的に変えたいとかもありうるわけで
そうすると414の書き方だと固定になるし変数あてても拘束されるのでは
あれはダメ、これはダメ、〜〜べき、って断定し過ぎじゃね？ >>413
JavaScriptは、ハッシュもオブジェクト（Object型クラスのインスタンス）なので
>>416の擬似コードに比べれば、>>408のように簡潔に書けるけど
> 名前付き引数でhandleEventに関数いれればできるのかあ。
解釈としては、イベントハンドラ関数の代わりに
イベントハンドラ関数が定義されているオブジェクトを渡す
と考えたほうが良いだろう そもそもイベントハンドラに何かを渡したいという設計が間違っている
そんなことをするとただ複雑になっていくのみ
イベントはイベントでただの一連の処理を継続するトリガーと考えるべき
つまりPromiseだとかObservableを使って抽象化する Observableと言えばリアクティブプログラミング バグのほとんどは、設計から生じる
素人は思いつきだけで、奇妙な設計をするから、バグる。
よく使われる・普遍的な、設計・デザインパターンじゃない
特に、素人が好きなのは、状態・外部に依存すること。
関数を抜けた後に、何かの状態を保存したがる。
これがダメ
理想的なのは、状態を持たない、関数型プログラミング >>404のそれぞれと>>408と>>414は
どれが普遍的でどれが奇妙ですか jQuery使っておけ。多くのユースケースでベストな方法を用意してる
$('.jscBtn').on('click', {name: 'my name'}, function(event) {
console.log(event.data.name); // "my name"
}); >>422
そうはいっても素人は良い設計なんかわからないからね。
手本が必要。
だからよく設計されたライブラリを使ってみるのが良い。
jQueryとか しつけー自演だな。ライブラリスレじゃねーんだよボケ。
あらゆる質問についてそれ用のライブラリつかえばいいよってのは言語スレで出す回答じゃねーんだよボケ。 え？自演じゃないよ。
単にライブラリの話をしてるだけ じゃあスレ違いだな。
ライブラリスレもjQueryスレもあるし。 ここでjQueryに関連する話が出たら、
そりゃここでもするよ
ここでブラウザの話がでたら
ブラウザの話するでしょ？ >>417が気になるんだけど
これどっちが正しいの JSで何らかのデータを生成しても、
JSはセキュリティ上ユーザのPC上にそれを｢ファイルとして｣データを保存することはできなくなってると理解しています。
でもダウンロードでファイルを保存できるのだから
JSで生成したデータを一旦サーバに送ってサーバ上でファイルにして
それをクライアント側で改めてダウンロードするようにすればファイルとしてデータを保存できるってことですか?
そこで質問なのですが
クライアント側でサーバを介せずに、ユーザスクリプトで生成したデータを
ダウンロードする操作を擬似的に行って
ファイルに保存することってできないのですか?
ーー
まだJSはじめて間もなくてものすごく初歩的で頓珍漢な質問かもしれませんが、
勘違いしてるとおもうとこあったらつっこんでくさい。 >>434
できるよ。
ちょっとアイツが書くから
まっといて >>433
どっちってどの話？
addEventListener()後の処理で動的に変えたいという話なら
こうすればいいわけで、別に何の問題もないよ
っていうかこの場合、dataをイベントハンドラに結びつける必要もないわけで
var data = {name: 'my name'}
var handler = (function(data) {
return function() {
data.name = 'your name'
}
}(data));
document.querySelector('.jscBtn').addEventListener('click', handler, false);
setTimeout(function() {
alert(data.name);
}, 5000)
セッションストレージやグローバル変数の話であれば、
この用途でそんなの使うとかありえないっていうのが正しい
>>417が言ってるのは徒歩1分の距離にあるコンビニに
車で行ってもいいでしょって言ってるレベル それはセッションストレージよりかなり軽いってこと? >>436
こういうことだな
var originalData = 'hoge';
// case2: var originalData = ['hoge'];
// case3: var originalData = {'name':'hoge'};
var handler = (function(recievedData) {
return function() {
console.log(recievedData); // 'hoge'
// case2: console.log(recievedData[0]); // 'fuga'
// case3: console.log(recievedData.name); // 'fuga'
}
}(originalData));
document.querySelector('.jscBtn').addEventListener('click', handler, false);
originalData = 'fuga';
// case2: originalData[0] = 'fuga';
// case3: originalData.name = 'fuga';
値渡しされる内容の変数だと、外部の変更を受けず、
逆に言えば外部での変更を反映させたいと思っても反映させられない
// イベントハンドラ内部のconsole.logを再代入にしてどうすんだ
参照渡しされる内容の変数だと、その変数を参照できれば変更されうる
MyApp.somePropertyみたいな
グローバル変数を使うかどうかは単にその蓋然性の多寡に過ぎない
ついでにstorageは正直ちょっとやそっとじゃ体感できない差だと思うが というか、質問者が変数って言ってるんだから
オブジェクトそのものをそのまま渡すqiitaのURLのコメの条件を採用する必要がない > ついでにstorageは正直ちょっとやそっとじゃ体感できない差だと思うが
速度が問題なんじゃない。適してない道具を使うなということ
セッションストレージは情報を永続化させるもので
用途に有ってない道具を無理やり使うと想定外のバグを引き起こす >>440
> 速度が問題なんじゃない。
> まずセッションストレージはたかがイベントリスナーに変数を渡す程度では重すぎる
言ってることが変わってる 重いっていうのは速度だけの話じゃない
無駄全般の話しだ
メモリも食うしストレージも食う
読み書きするコードも無駄だろう 日本語の使い方がおかしい
わざと曖昧な言葉使ってののか
適当なのかしらんけど
プログラミング言語以前に日本語からちゃんとしたほうがいいわ
セッションストレージが永続ってのもしっくりこんし
重いの範囲も広く使いすぎ 言うに事欠いてどこにケチ付けてんだワロタｗ
計算機科学用語のpersistantの訳語だろうがｗ
もしかして永久に続かないからおかしいもん！とか思ったのかな？アホスｗｗｗ
訳語が日本語としておかしいのは「仮想」とか「束縛」とかもそうだと思うが。数学用語もそう。
ある文脈で通じるお約束でそもそものそこにケチ付けてもしょうがないだろ。
どうしてもやりたいなら言語学板ででもやれば？ｗ localStorageはsessionStorageと比べて
永続性がある、永続的、ということはある ソフトウェアエンジニアリングの世界で
永続とか重いとか普通に使うだろ初心者かよ persistentはIT分野（Web関係では特に）
どっちかっていうと「持続的」じゃないか？
切るまでは持続するってことでpersistent connectionとか
永続はどちらかといえばpermanentな気がする localStorage使うならMap用意するとか共有スコープに変数取るとかでも良いじゃん
そういうパターンと、リスナセット時に指定するパターンと、
同期的に書いてそのままのスコープで変数を使っていくパターンの３つがある
どれを使うかは状況によるし、お好みで ストレージ用語だと
Persistent(永続、ただし永遠に残るわけではなく、消えて欲しくないデータということ)
<->
Temporary(一時、ただし即座に消えるわけではなく、消えても良いデータということ) >>452
というより性質が違うんだから
目的や環境によって、良い悪いや好みではなく使い分けでは 質問者はイベントリスナーに変数を渡したいとしか言ってない
勝手にそれ以上のことをしようとするな 空気を読まないと行けないようなつまらん非効率な職場が理想なんか?
ただ単に上司の指示管理能力不足なだけだろ >>459
だからあいつが書くから待てっていってるだろ >>460
アイツは今忙しいのでおまえが答えてやれよ >>434,>>459
まさに考えている通りの手段で実装できる
今だとURL.createObjectURLを使うのがベターでググればいくつかサンプルも出るよ cssでdiv要素に {draggable: ture}追加して
dragendのイベントが発生した時に発火するイベントリスナーをつくって
要素を動かせるようにしたんだが動かんのだけど?
動かんと言うかドラッグできないんだが
時々まれに何かの拍子でドラッグできたりするんだが
またできなくなる。
なにこれ?
ふざけてんの? divにcssで背景画像か背景色を明示指定してみたら？ まぁ、試しにやってみただけで他にやりようはあるんだけど
draggableつかって変わったやり方ためしてみたかっただけ。 draggable なウィジェットなんて、jQueryUI でも使えば？ var sato = "hello";
function tanaka(v){return v;}
とある場合
tanaka(sato);←"hello"ではなく変数名"sato"が返って来るようにしたい
javascriptで使われた変数名を取得する方法ってありますか？
tanaka(sato,"sato");のような方法ではなく田中関数で変数名取得したいです そのような田中関数があったとして田中(1) とか田中({}) は何を返すことになるのかな それは無理な話
「"hello"」は家では「sato」というあだ名で呼ばれていて、学校では「v」というあだ名で呼ばれているということだから with-proxyを使えば可能かもしれない
value-proxyが無いと完璧な振る舞いはできないが >>463
確かdropだかdragoverだか他のイベントをいくつか処理する必要があったはず
俺も毎回慣れなくて調べる Object.keysとってwindowを走査すれば見つかるとは思うけど
文字列のペアが欲しいなら最初から連想配列として扱うべき >>467
const sato = () => { return 'hello' };
function tanaka(v){
console.log(v.name); //=>sato
console.log(v()); //=> hello
}
tanaka(sato); 前提をイジるという高度なテク。
社会ではよく使う。 エスパーの俺は
変数名取得なんてしないでスタックトレースを手動で出せばいいじゃないかと提案 拡張機能作ってるんだけど(つまり他人が作ったサイト)
同じドメインの別のページの情報をページを移動せずに取得することって出来る? fetchかXMLHttpRequestを使えばいいよ
ブラウザ拡張機能なら大体は同等の拡張用APIもある 各種設定を持たせるオブジェクトって、
今でも普通のオブジェクトでいいのですか？
それともMapオブジェクトの方がいいのでしょうか？ 普通にオブジェクトで良いんでない、JSONと相性良いし
使い勝手に困る様ならそれから変えても遅くはない >>480
ありがとうございます
>>481
何でいきなりスイッチ入ったんですか？ 特に理由がなければ普通のオブジェクトで良い
Mapの方が厳密な実装だが、
書き方が面倒くさい
リテラルぐらい用意しろと >>482
剃れとか言うからだろ！
俺の頭、剃れもんなら剃ってみろハゲ！！ >>483
>書き方が面倒くさい
同意です
いまいちイケてないんですよね・・ せめてこういう使い方ができないとダメだな
var map = new Map({a: 1, b: 2});
console.log(map["a"]);
map["a"]++;
map["a"] = 2; お手軽重複除去のために産まれてすぐ殺されるSetさんよりマシ。
var arr = ['a', 'b', 'b', 'c', 'c', 'c'];
var arrDistinct = [...new Set(arr)]; setは集合mapは写像
数学的周辺ではよく使う
かもしれない 数学者「set（集合）はどういう時に使うものでしょうか？」
プログラマ「はい！重複除去のためです！UNIQする時に使います！」
数学者「・・・」 mapって何のためにあるん？
オブジェクトじゃダメなん？ キーにオブジェクト（っていうかポインタ？）が使える連想配列
って感じ？ var key = 'a';
// var key = '__proto__';
var obj = {};
obj[key] = obj[key] ? obj[key] + 1 : 1;
文書に出現する、単語の数を数える場合、
その単語が未登録なら1、すでに登録されているなら、1増やす
こういう場合に、たまたま、__proto__ という単語を登録しようとするとバグル。
obj.__proto__ を上書きするから
var wordsMap : Map<String, Int> = new Map();
wordsMap["a"] = 1;
trace(wordsMap["a"]);
上は、Haxe のMap のコードだが、ES4 変換後のコードでは、
wordsMap["$" + key]
のように、キーの前に、$ 文字を連結している
他にも、
var obj = {x : {}};
のように、オブジェクト内のオブジェクトを使う事もできるが、
この方法でも、__proto__ ではバグル javascriptに楽に書けて簡単にループ扱えて便利な連想配列が無いのが悪い >>494
結局$連結するなら
毎回key = '$'+key;すればobjでも問題ないのでは・・・ >>495
そこでlodashですよ。JavaScriptネイティブのデータ型を
扱うのにこれほど便利なライブラリはありません
https://lodash.com/docs/ phpですらできるこういう記述がjavascriptにはできない
foreach( 連想配列 as キー => 値 )
foo( 値*3, キー );
>>497
そっくりそのままこれできる？ >>498
https://lodash.com/docs/4.17.5#forIn
var obj = {a: 1, b:2, c:3};
_.forIn(obj, function(v,k) {
foo(v*3, k);
})
または
_.forIn(obj, (v,k) => foo(v*3, k)) ライブラリで定義された関数使っとるだけやんけワロタｗ
「javascriptでは出来ませんごめんなさい」って言うのがよっぽど悔しいんだねｗｗｗｗｗ >>499
わざわざfunction()にしなきゃいけないとか変な仕様 言語構造の問題でそっくりそのままなんて不可能なんだから
そっくりそのままは不可能と言えばいいのに >>498
as構文がないから全く同じにはできないが、似たような書き方にはできる
const obj = {a:1, b:2, c:3};
for( const [k, v] of Object.entries(obj) ){
foo(v * 3, k);
}
const iterable = new Map([['a',1],['b',2],['c',3]]);
for( const [k, v] of iterable ){
foo(v * 3, k);
}
const array = [1, 2, 3];
array.forEach((v, k) => {
foo(v * 3, k);
}); ローカル変数でもconstを使う必要ありますか？
上書きをするかしないかいちいち考えるよりも
全部letにした方が面倒くさくなくていいと思います
使われる範囲が広い変数の場合にはconstにすることにも意味があると思いますが >>505
不意の書き間違いやケアレスミスを防ぐためだけなので
ミスがないのなら、letでもvarでも問題ない 基本全てをconstにしておいて変更の可能性をletで示す
ってのが理想論だけどまあvarじゃなけりゃ良いやって感じ 回答ありがとうございます
ふと思ったのですが、なるべく全部constになるようにするっていう方向もありますね
しかし非破壊的な関数を挟むと再代入が発生するので
破壊的な関数を用意するという方向で。
メソッドチェーンで繋げてコードがすっきりというメリットもありますし >>505
> 上書きをするかしないかいちいち考えるよりも
> 全部letにした方が面倒くさくなくていいと思います
むしろ、上書きされると、この変数はどこで変更されているんだろう？って
考えないといけなくなるので、constの方が良い
もうこれ以上変更されないわけだから >>503
なるほど、lodashのentries（toPairs）はそう使うんですね
const obj = {a:1, b:2, c:3};
for( const [k, v] of _.toPairs(obj) ){
foo(v * 3, k);
} >>508
> 構文は人間様が読めれば良いだけ
でもそれが重要なんだよな。
機械であれば変数名なんて適当でも良い
じゃあ機械様が読めれば良いのか？というと違う
コードは人間も読み書きするものなんだから
人間様が読めなければいけない
機械に合わせるのではなく人間に合わせるべき lodashのwithout関数で
除外するものを配列として与えたいのですが、
それは出来ないのでしょうか？ >>515
あんたがほしいのは differenceじゃないの？ まあ without でも スプレッド演算子使えばできるけど >>516
そうでした
微妙に異なる関数が揃ってるんですね
ありがとうございました 固有とか列挙可とかでうっかり変なバグ出したくないから
ループさせるコレクションは配列使ってるわ
それでもライブオブジェクトとかいう余計なお世話でハマったりするけど >>519
それ日頃からバグになりやすいコードを書いてるってことじゃね？
バグになりにくい（？）データ型を使うんじゃなくて
バグになりにくいコードを書いたほうが良いよ
バグになりにくいという観点で不適切なデータ型を使うと
そのせいで本来ならやらなくてよかったコードが必要になるので
余計バグが増える >>520
フワッとした中身ないアドバイス（）いらん >>521
ふわっとしてるのは、バグになる理由とか書いてないからだよ
ライブオブジェクトでバグとかもさ理由書いてないし
（どうせ要素数でループとかしてるからだろうけど、
それを書いてないからふわっとせざるを得ない） 一般論としてコードというのは一番手を抜いた状態が
最善な方法になっていないといけない
ましてや手を抜くとバグになる状態っていうのは一番やばい
もしそんな状態が有るとするならまずそれを解決すべき pjaxを試してるんだけど
Firefoxでリロードしたとき、挙動おかしくならない？
http://develop.syake-labo.com/pjax/
こういうデモとかで、途中でリロードしたら戻るボタン押してもページが変わらなくなる。
Chromeなら大丈夫なんだけど。
どうすればいいんだろう。 ↑追記
Firefoxでも更新ボタンだったら大丈夫だった。
アドレスバーでEnter押した時におかしくなる。 >>523
その一般論、見たことないんだけど
同様のこと論じてるサイトや文献教えてくれ >>522
だからいらねぇつってんのw
日本語わからんのかw lodashで、_([1,2,3]みたいな感じのオブジェクト指向スタイルにしたものを
生の配列に戻すにはどうすればいいのでしょうか？
toArrayとかそれっぽいと思ったのですが、出てくるのはオブジェクトでした >>525
Fxはキャッシュが良く効くからね
まあChrome以外は無視しとけばOｋ >>526
「バグになりやすいコード」で検索して出てきた一番目
> これに対する私の見解であるが、一言で言ってしまえば、
> 「無理をしない」である。
> あらゆることについて無理をしない。
> 無理をせずに自明なコードだけ書いていればバグの入る余地がなくなる。
> Haskellをやりだしてから細かいことを書かなくなった
> (書きたくなくなった)。やりたいことを書けばいいのである。
> これはある意味で富豪的プログラミングに通じるのであるが、
> 今回の話は富豪的というところにとどまらない。
> 徹底的に首尾一貫して手を抜けというのである。
> 逆に言うと、手を抜くために思慮深くなれ、ということだ。
> プログラムを書く前に、ちょっと待った。
> ゆっくりと考えを巡らせてもっと簡素にかけないかを考える。
> ここで言う簡素というのはプログラムの長さではない。
> コード化する際に、いかに考える余地が入らないかである。 一般論とグーグル検索一番目が一致する概念ってこと? グーグルは検索履歴によって表示する結果をかえるから
一番目に出てくるのは検索者の傾向をふまえた主観といってもかごんではない。 >>536
はい、なのでシークレットモードで検索した
一番目の結果を貼りました。それが>>533です。
リンク貼り忘れていましたねｗ
バグのないプログラムの書き方 - 純粋関数型雑記帳
http://d.hatena.ne.jp/tanakh/20050306 でさー、グーグルトップ＝一般論って理屈はどっからでてきたの? 逆、Googleトップだから一般論なんじゃなくて
一般論だからGoogleトップに出てきた >>540
一般論だからGoogleトップに出てきた
逆の意味わかってんのか?
俺は⇛なんてつかってないぞ?
だからそれを証明してくれw
どっからでてきたんだw 一般論の定義と
グーグルトップのでてくるメカニズム
をそれぞれせつめしてくれ オブジェクトの分割代入で、
キーとは別の変数に代入することは出来ないのでしょうか？
const {width,height} = {width:100,height:100};
これが普通ですが
const {a,b} = {width:100,height:100};
こんな感じに別の名前の変数に代入したいのです >>542
一般論の定義なんてものはない。数学じゃないんだからさｗ
こういう場合は一般論の意味を調べるべき
https://dictionary.goo.ne.jp/jn/13688/meaning/m0u/
出典：デジタル大辞泉（小学館）
ある特定の、または個々の具体的な事柄を考えないで、
広く全体を論じる議論。世間に広く認められると考えられる論。「一般論として述べる」 一般論というのはいいすぎでした。
検索で出てきたサイトでみたことをかきましたって認めればいいだけ。 >>545
グーグルトップにでてくるメカニズム 、は? >>547
ある単語（この場合は「バグになりやすいコード」）に
最も適切なものがヒットする。
そしてそのサイトでも同様のことが語られていた。
一般的なことだからこそ、このスレ以外のその他のサイトでも語られてる 別にGoogleトップであることは何も関係ないんだよ。
一般論の意味より、世間に広く認められると考えられる論なんだから
それが色んな場所で使われていることを証明すればいい
で簡単に見つかったサイトでも論じられていた >>548
ある単語（この場合は「バグになりやすいコード」）に
最も適切なものがヒットする。
はいうそw
一般論＝グーグルトップはどう考えても結びつきませんw
一般論であることを示したいなら他の論拠を出さないと無意味 >>530、>>523と、
>>533の引用部分、似た言葉を使ってはいるけど
内容同じと思いきやそうじゃないな 533を読んでみたけど
難解な処理を書かない、読んですぐ意図がわかるコードを書く、
遠くで宣言された変数の代入・再利用などわかりづらいことをしない、
そうすればバグが目に見えて減ると思う、
と、こういう主張だった
全然違くね？使ってる単語が似てるっぽいURLを後付で見つけてきただけじゃね？ あと、>>533を主張してるURLは、例にならってGoogleで調べたところ
他の1つのURLで引用されているのみだった
これでは一般的、世間に広く認められている、とはとても言えない >>552
いや、あってるよ？
だから俺は疑問なんだ。
>>519がなんで固有とか列挙可で変なバグを出すのか？
ライブオブジェクトで変なバグを出すのか？
俺はここ数年（十年超えるかもね）そんなことでバグを出したことはない
かと言って、ぜったいにバグを見逃ししないぞと気を張って作業してるわけじゃない
俺のコーディングスタイルは最小のコード記述量で書くこと
書く量が少なければそこに入るバグも最小になる
もちろん難解な処理なんてないし、意図が変わるコード
遠くで宣言する変数とか再代入もしない、まさにそのサイトで主張している通り
それで俺はそんなバグなんか起きてないのに、
>>519がそんなことでバグでハマるのはそもそもの書き方に
問題が有るんじゃないかってこと。
おそらく些細なバグが起きないように、毎回対策のためのコードを書いてるのが原因じゃないか？
俺は些細なバグが起きないように、コードを書かない状態で対策されてる状態にしている。 × 意図が変わるコード
○ 意図がわかりにくいコード >>520「書かなくていいコードを書くからバグが出る」
>>533「手を抜いた状態が最善でなければならない」
>>533「手を抜くとバグるというのはヤバい」
Googleで出てきたURL「人間が見てわかりやすいコードはバグが出ないと思う」
曖昧な表現で逃げ、主張をコロコロ変える>>554はバグってるな >>554いわく
>俺のコーディングスタイルは最小のコード記述量で書くこと
>書く量が少なければそこに入るバグも最小になる
>>537のURLいわく
>ゆっくりと考えを巡らせてもっと簡素にかけないかを考える。
>ここで言う簡素というのはプログラムの長さではない。
「まさにそのサイトで主張している通り」って なんか伸びてるとおもってきたら
バカが暴れてるのか >>557
タイプ数って勘違いしたのかｗ
面倒くさいな
そりゃ横に長い行を短くするのに一時変数に入れたりはするよ
そういうことじゃなくて、実行行と言ったら良いか？
定義行（代入行）ではなく処理の数を減らすんだよ。
と言ったら関数の先まで数えて同じとか言いそうだなｗ
コードというのは汎用的な処理とビジネス固有の処理に分けることができる
コード全体から汎用的な処理を切り離すことで、ビジネス固有の処理を減らすんだよ
汎用的な処理っていうのは、他で十分テストされ、例えば他のプロジェクトとかでも使われ
仕様が大きく変化することも、互換性が壊れる形で変化したりもしない、安定しているコード
だから基本読み飛ばすことができる。
読み飛ばせる部分を多くして、ビジネス固有の処理をへらす。これがバグをでなくするための方法
>>519はそういう所を毎回書いてるからバグだしてるんじゃねーのって話 書けば書くほどボロが出る
その口でこうすればバグが最小になると言う じゃあ反論どうぞ
ってか>>519はどんなコード書いてんのかって話なんだ ライブなコレクションってgetElementsByClassName()の戻り値とかでしょ
ループに使うのがforでもfor inでもかかわりなく
ループの最初で別の変数に移して参照を持っておかないと
処理中に対象要素がなくなったら問題が出る
そういうもんじゃないの？ >>562
そういう場合は処理中に対象要素がなくなるような書き方をしなければいい
ループの配列から取り除くのとDOMから取り除くことを同時にやるからそうなる 仮に「最小のコード記述量＝バグが最小になる」が
「コード分離して使い回せば記述量が減る」という意図だったとして
コードを分離できる状況かどうかや抽象性の設定などの問題もおいておくとして
しかしそれでもコード分離の話は>>537のURLには出てきていないな >>563
ライブなコレクション使うときはあれをしてはいけないこれを書いてはダメ
などと神経使わなきゃいけないのは使いづらい
そういう意味では>>537のURLの人が言ってることと同じだと思うんだけど
神経使わないで済むようにポインタじゃなくて文字列使えとか
スタックオーバーフローを怖がらずに定義どおりに再帰関数を書けとか >>537のURLの趣旨はまとめるとこういうこと
「（速度やリソース消費など難が多少あっても）やりたいことをストレートに書けばバグが出ない」
富豪的プログラミングへの言及や神経を使うポインタを避ける
どの辺が「まさにそのサイトで主張している通り」なんですか >>564
> しかしそれでもコード分離の話は>>537のURLには出てきていないな
そりゃそうよｗ
だって>>537のURLを出したのは
>>526が
> その一般論、見たことないんだけど
って言ったからで、その一般論というのは
この話なんだから
> 一般論としてコードというのは一番手を抜いた状態が
> 最善な方法になっていないといけない
>
> ましてや手を抜くとバグになる状態っていうのは一番やばい
> もしそんな状態が有るとするならまずそれを解決すべき >>565
> ライブなコレクション使うときはあれをしてはいけないこれを書いてはダメ
> などと神経使わなきゃいけないのは使いづらい
> そういう意味では>>537のURLの人が言ってることと同じだと思うんだけど
そういうこと。
神経を使わずに適切なコードが書ける状態になってないのが問題という話
コード書く時に神経使っちゃダメだよ？レビューする方も神経使うだろ？
あれこれ考えて抜けがないよな？抜けがないよな？と何度も確認しなきゃ安心できないコードよりも、
ひと目見ただけで、このコードにバグはないと言い切れるコード、
逆にどうやればこのコードにバグを入れられるんだよ？みたいな方が良いに決まってるだろ？ >>569
勘違いさせちゃって悪いんだけど、565のそのレスは
どちらかといえばむしろ>>519のほうが
>>537のURLと同じようなこと言ってると思う、っていう意味なんだ
hasownpropertyとか考えなくて良いようにオブジェクトを使わないで済む方法を選択
バッファ長や\0とか考えなくて良いようにポインタを使わないで済む方法を選択
ほら ライブコレクションでハマるパターンは以下のようなもの
1. ある条件の要素のコレクションを取得
2. 全要素をループ
3. 条件1に該当するものは、要素に対して処理を行う
4. 条件2に該当するものは、要素を削除する
5. 削除によって「全要素」の内容が変わってしまう
6. 2に戻る（「全要素」の中身が代わってしまってるのでバグになる）
これは以下のように書けば良い
1. ある条件の要素のコレクションを取得
2. 条件1に該当するものだけをフィルタして処理をする
3. 条件2に該当するものだけをフィルタして削除
シンプルになってバグではまることもない >>570
ライブなオブジェクトでハマってる時点で
問題解決してねーだろｗ >>571
変換などにより静的な配列を用いるのが確実
参照を保持している限り回収されず他関数等による影響も受けない
処理の順番や構造を気にする必要もなくなる ループを二回に分ければスッキリするのに
なぜか一つのループで別々の処理を行うやつが多い
>>571の例では要素に対しての処理と要素の削除
この別々の処理に対してループを使いまわしするのがいけない
なんでループを使いまわしてしまうのか？という答は
ループ処理を書くのが面倒くさいからではないのか？
だが>>571の下を見れば分かる通り、ループそのものがなくなってる。
ループ処理を書くのが面倒だからというのはわかるが、
1つのループにしてかつ注意して書くよりもそもそもループを無くした方が良い
根本的な問題を解決するのではなく、対処療法的な方法を取るから
逆に面倒になってることに気づこう >>573
> 参照を保持している限り回収されず他関数等による影響も受けない
> 処理の順番や構造を気にする必要もなくなる
じゃあどうするかって話だけど答えられる？
「ライブなコレクション」を保持して、ループで
一つ一つ処理している限りその問題は解决しない
>>571の後者の方法を更にシンプルにしよう（最初からそうしておけって？ｗ）
1. ある条件の要素かつ条件1に該当するものだけをフィルタして処理をする
2. ある条件の要素かつ条件2に該当するものだけをフィルタして削除
たったの2工程。しかもこれ1と2の順番を逆にすることだってできる >>575
君の話は、前提として
・順番を逆にすることができる
・各々の処理が相互に関係しない
という処理である場合のみ利用可能すなわち汎用性に乏しいのでは
静的な配列にしてしまえばまず問題がない
答えられるかというのは何をだ >>576
> 静的な配列にしてしまえばまず問題がない
ではそこが問題だな。
"毎回" 静的な配列になるようになっていないのが問題
静的な配列にするのが "追加作業" になっているならば
それを追加作業ではなく、標準（一番楽な書き方）で
そうなるようにしておくのが正しい
追加作業だとどうしても手抜きで見逃してしまう
ましてや追加作業が必要な場合がレアケースだと絶対にハマる 変な引用文と改行入れてんのはいつもの荒らしだから触んのやめなさいよ
>>544
const {width:a, height:b} = {width:100, height:100}; >>580
そんな書き方があったのですねー
ありがとうございました >>579
オールスターって何？
単に一番単純な書き方が一番安全にするという話だけど
安全側に倒しておくだけ https://dictionary.goo.ne.jp/word/en/all-star/
((限定的)) (ある地域・リーグの中から選抜された)一流選手をそろえた，オールスターの
((限定的)) スター総出演の，人気俳優をそろえた
━━ [名詞] 〔スポーツ〕 ((通例 all-stars)) オールスターチームに選ばれた選手.
やっぱり意味が分からん。何をそろえたの？ ネットの記事で、jQueryやlodashの機能は今では標準のJSに取り込まれているので
使う必要がないという記述を見ました
そうなのでしょうか？
自分はそこそこは取り込まれているものの、
やはり今でも使った方がいいように思います 取り込まれているのが本当なら、
jQueryやlodash使っていれば、これからも使えるってことだよ
だって標準で取り込まれたんだからｗ 必要だと思った奴だけ使えばいい
必要かどうか自分で判断できないと開発はやっていけない なるべくライブラリを使わない方針にしても
生JSがカバーしてない部分が出てくる
→その部分はライブラリを使う
→全面的にライブラリの作法に則った方が全体として綺麗になる
ってなりがちですよね 自分のブログ内の記事タイトルをランダムに表示させるスクリプトを作成することは可能でしょうか？
下記サイトのようにボタンをクリックするとランダムで過去記事のタイトルリンクが表示されるというものです
http://www9.plala.or.jp/oyoyon/html/script/randomlink.html
ツールを埋め込めば簡単なのですが、ページが重くなってしまうのでできればJavascriptやphpなどで対応できたらと考えてます
よろしくお願いします >>587
lodashはおいといて、jQueryで言うとその互換性担保の役割と
仮想DOM的な役割は終わりつつあるのは確かだと思う
jQueryって、荒れた凸凹の溶岩の上でも耐えられるオリハルコンの仮設住居を置いて
強制的にその中で作業させるくような感じだからね
でも今からは地面の荒れもだいぶ収まってきて気が利いた砂利くらいが引いてあるようになったから
いきなり仮設ドーンじゃなくて、舗装から少しずつ構築していって
必要十分な建物を作っていく方が良いんじゃないかって感じなのよ >>592
javascriptにできないことはない
史上最強の言語 jQueryに「仮想DOM的な役割」(ﾌﾟｷﾞｬｰﾊﾗｲﾃｰwww)などない。徹頭徹尾生DOMをイジるためのライブラリだ。 >>593
>>594
>>596
ありがとうございます
トライしてみます たしかにjQueryの互換性を吸収する役割はかなり小さくなったと思います
でもquerySelectorがあっても
removeClassみたいなのはないのでは？
複雑な処理ではありませんが、わざわざ自分で書きたくはありません element.classList.add() / element.classList.remove() のことか？ >>601
ん？あったんですか？
メソッドも揃ってるなら、そろそろ脱jQueryしてみてもいい時期なのかもしれませんね ちょっと前に
子ノードに探してるものがあるかどうかのチェックの質問あって
forで探せよっておこられてたけど
あれもメソッドがあるw その流れは知らんけど既に目当てのnodeが参照できているなら
Node#contains() で結果をbooleanで取れる classListなんてIE10から既に対応しているという >>602
> メソッドも揃ってるなら、そろそろ脱jQueryしてみてもいい時期なのかもしれませんね
脱jQueryを目的としている時点でjQueryは使い続けられることが
容易に想像できるよな。手段が目的になってるわけだから
残念ながらDOM APIにあるのはjQueryのサブセットだ
更に言うならば事あるごとにループが必要でjQueryのような
簡潔な記述は到底不可能だ
DOM APIが勝っているのは、実行速度と初回ダウンロードサイズだが
実行速度はマシンスペックの高さでスマホでも問題になってないし
ダウンロードサイズはCDNを使うことで他のサイトのキャシュが活かせる
そうなるとライブラリを使わないほうが記述量は増えるので
現実的にはjQueryを使ったほうがサイズが減ることも多い ところでCDN使うってことは
CDNにどこからのアクセスかリファラでバレてしまうってことだよね？ >>608
各サイトでバージョンバラッッバラなんだが…
加えてminじゃない奴使ってるクソサイトまで… >>610
バラバラでも無限にあるわけじゃないしw
それから自分のサイトから配信するよりもCDNを使ったほうが高速で、
自分のサイトのトラフィックを減らすという効果もある
全部自分で書くと、その分自分のサイトで配信する量が増えてしまうが
jQueryにそれを逃してやると、減らせるわけさ イベントリスナの掃除とかまで考えると
もうjQuery使えばいいじゃんってなりますね
jQueryを使わなくなるのは、jQueryの代わりをしてくれるライブラリやフレームワークを使う時なのかも >>592-598
JavaScript, jQuery で作れる >>597
あるよ
jQueryは機能の拡充ではなくて基盤から提供し直す
ライブラリというよりフレームワークに近いものだから jQueryのソースコード読んでたら
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
こんな記述があったんだけどstyleがfalseになることってあるの？ >>615
> ライブラリというよりフレームワークに近いものだから
プログラマが書いたコードから呼び出すのがライブラリ
プログラマが書いたコードを呼び出すのがフレームワーク
jQueryはどうみてもライブラリだ そもそもjQueryを使うデメリットってありますか？ もちろん仮想DOM勢には劣るものの大抵のサイトの規模ならDOM操作の保守性は少し上がるかな。ただ一ヵ所二ヵ所くらいしかDOM操作しないのに導入するとたったそれだけのためにjQueryという巨大コードのパースが完了するまで待たされる。容量も増える。
一ヵ所二ヵ所くらいならDOMAPIで書けやと思うじゃん。
ところがあいつら書かないんじゃなくて書けないんだよな。
調べる気もなし。
強いていうならそういうゴミを量産してしまうのがデメリット。 forループ内でsetTimeout書いてsetTimeoutの中の処理がおわったら次のループに行くようにしたいんだけど
どうすればいいのでしょう?
for () {
for () { setTimeout() }
}
な感じです。 promiseとreduceを使え。
setTimeoutのコールバックのケツでresolveしろ >>620
jQueryを導入する無駄な時間を大切にね >>619
> もちろん仮想DOM勢には劣るものの大抵のサイトの規模ならDOM操作の保守性は少し上がるかな。ただ一ヵ所二ヵ所くらいしかDOM操作しないのに導入するとたったそれだけのためにjQueryという巨大コードのパースが完了するまで待たされる。容量も増える。
はっきり書いておきましょう。
ただ一ヵ所二ヵ所くらいしかDOM操作しないのに
"仮想DOM" を導入すると
多数のJavaScriptファイルを読み込んだ上に
HTMLを大きく書き換えないといけないから
仮想DOM勢、つまりReactは導入されないんですよ ついでに仮想DOMが敗北したという話を見つけたので書いておきますね
https://html5experts.jp/shumpei-shiraishi/21754/
> laco しかし、仮想DOMは速かったけど、Angularも追いついちゃいましたね。
> しかも仮想DOMなしで。結局仮想DOMってどうだったのかなあ…と。
> 「ポイント、そこじゃなくない？」っていう(笑)。 (筆者注: ここ、lacoさんがイベントを盛り上げるため煽ってくれてます)
>
> koba04 まあ、仮想DOMだからこそ、ただの関数みたいな形でコンポーネントを簡単に作れるようになったので…。
>
> laco でも、最近Pure Componentって入ったじゃないですか。Shallow Rendererとか。
> あれってどうなんですか？この間ものすごく疑問に思って。Pure Componentにすると、
> オブジェクトの状態を自動で見て、自動で変更検知してくれるってやつですよね。 あれって、Reactがやりたかったことなんですか？
>
> koba04 あれは、オブジェクトツリーがでかくなると仮想DOM比較のコストもバカにならないので、
> その比較すらも飛ばしたい時に使うっていう感じです。
>
> laco 仮想DOMのアルゴリズムが敗北したってことじゃないですか？(笑)
>
> shumpei 煽る煽る(笑)。
>
> koba04 基本的にはそこまで必要とするものでもなくて、よっぽどパフォーマンスが求められる場面で使われるものかなと思っています。
>
> yosuke_furukawa ぼくとしては、パフォーマンスのチューニングポイントが増えたって話だと思ってます。
> 仮想DOMの敗北については、次のサーバーサイドレンダリングでぼくが話をするんで、まあここはこれくらいでいいんじゃないかなと(笑)。 ・一度使い出したら全部作り直す覚悟がないと使うのをやめられない
・そんなん要りません >>624
日本語読めないのかなｗ
>>619が言ってるのは一ヵ所二ヵ所のDOM操作はノー仮想DOMノーjQuery、Yes生DOMAPIだよ？ｗ
藁人形論法かな？ｗ >>621
Promiseで包んでawaitで待てばそれっぽいのは出来るけど
あくまでもそれっぽいでしかない
https://jsfiddle.net/ug62rr01/1/ ajax依存のサイトのアクセス解析って一体どうやってるの？ >>627
アホがｗ そんなことわかってるわ
>>619が一箇所二箇所しかDOM操作をしないなんて
実際にはありえない例を持ち出してきたから、
一箇所二箇所しか使わないのが世の中にありふれてるんじゃなぁ
仮想DOMなんて流行りませんわなｗｗｗ
っていう皮肉言ってんだろうが 生jsで書くのってそんな面倒臭い？
設計段階に比べたら時間も労力も全然かからないから
気になったことがないんだけど >>631
面倒くさい。特に同じ要素が複数あったら嫌になる。
書くのも面倒だし読むのも面倒
本質ではない処理が大半を締め、あれじゃバグはなくならないと思う
関数型言語を勉強すると良いよ >>630
流行る流行らないじゃなく一ヵ所二ヵ所のDOM操作ならjQueryだろうが仮想DOMだろうが等しく無駄。無能の証明。
ゴキブリ潰すのに戦車がないと戦えませんと言って泣いているようなもの。 DOM APIが基本的に手続き型の構造をしているのが問題
一行ずつ処理を眺めていないと最終的な結果がわからない
それに対してjQueryだとコードが宣言的になる。
「なになに（セレクタ）は、こうだ」という風に宣言的に書けるから
状態を気にしなくて良くなる。
それはCSSの書き方と違い。（CSSも宣言的な言語） >>634
> ゴキブリ潰すのに戦車がないと戦えませんと言って泣いているようなもの。
ゴキブリ潰すのにはスリッパ（jQuery）で十分戦えますよ？
例えが変ですねｗ >>633
同じ要素が複数で面倒って意味がわからない
腕が悪いやつのHTML設計で苦労させられてる感じ？ >>632
IE9とIE9以前が対象に入ることがなくなってきた
平和でいいわ >>635
DOMガチャガチャいじらなきゃならない場合結局DOMの初期状態から操作ごとにどのようにDOMが変化するか実行順に追ってかないとセレクトスカるが…
操作対象全要素にidふってあれば別だが。 >>637
普通コンポーネント的に設計しますよね？
例えば画面上にJavaScriptで拡張された入力フィールドが複数あるとか
jQueryを使うと一つだけでも複数あっても
まったく同じ書き方ができます。
それはCSSと同じなんですよ。
.klass { color: red } とすると
class=klassである要素が全て赤になります。
同等のことをjQueryで書くと
$('.klass).css({color: 'red'}) です。
CSSと文法が少し違うだけと考えられます。
でもDOM APIじゃこうは行きません >>639
> DOMガチャガチャいじらなきゃならない場合結局DOMの初期状態から操作ごとにどのようにDOMが変化するか実行順に追ってかないとセレクトスカるが…
そういう書き方になっちゃうからDOM APIはだめなんですね。
バグが減らないといったのはそういうことです。 DOM APIの話でしょ？ 同じことをDOM APIですると
もっとひどいことになるんですからｗ >>640
それこそ意味がわからない
同じイベントハンドラ関数を適用すれば良いのでは
上位層でまとめて面倒みてもいいし
処理が少し違うだけなら大部分を再利用可能に作ればいいし いや、jQuery。
DOMを操作するんだから操作前と操作後でDOMが変化するのは変わらん。
その状態にあったセレクタ書くには結局上から見てくしかない。 >>644
> 同じイベントハンドラ関数を適用すれば良いのでは
今はイベントハンドラの話なんかしてませんが？ >>646
じゃあ「例えば画面上にJavaScriptで拡張された入力フィールドが複数あるとか」のところを
もっと具体的に話してもらえないかな
どんな状況で何がどう面倒なのか全然わからない >>645
> DOMを操作するんだから操作前と操作後でDOMが変化するのは変わらん。
それが間違った使い方。DOMを操作するとメンテナンス性が下がる
DOMは基本操作してはいけない。見た目を変えたいならそれはCSSでやるべきこと
見た目はCSSというのは、なんども言われてる話だろ
CSSで変えるのだから、ウェブデザイナが手動でclassを変更することで
JavaScriptを必要とせずに、状態に応じた見た目を作ることができる。
作業の分担ができる。JavaScriptでやるのは状態（クラス等）を変えるのみ
DOM APIでDOMをガシガシ操作なんかするからバグ減らないんだよ。 ある要素から特定の親の要素取得するのってどうやってやるの？
jQueryでいうところの .parents('.foo') みたいなの
.parent() は .parentNode で取れるけど .parents('.foo') にあたるのはないよね
parentNode でループしながら
if (element.classList.contains('foo')) するしかないのかな >>648
おいおいjQueryは基本DOM操作のためのライブラリだろ…
DOM操作に使うなってんなら用なしだわ。 入力行を増やしたり減らしたりする
これDOM操作ですよね >>651
jQuery君が言うにはそういうことにjQuery使ってはいけないらしい。 >>649
element.querySelector のことかな？ >>647
https://jsfiddle.net/wamwg7b0/
じゃあ例えばコレ
数値を入れたらsuccess（緑）になる入力フィールド×5
JavaScriptのコードだけ転載すると、これだけ
入力フィールドがいくつ有ってもこれだけだし、
ループも条件判定もない。
$('[type="text"]').on('keyup', function() {
$(this).toggleClass('success', $.isNumeric(this.value))
})
keyupというイベントのタイミングで
「入力値が数値ならsuccesである」を適用する
宣言的というのはこういう事 >>649
element.closest('.foo')でええやろ >>656ってイベントハンドラの話だよな・・・それとも俺の目が腐ってるのか >>659
検索に引っ掛かったのがそれだったんだろｗｗｗ >>649
var elements = document.getElementsByClassName( 'footer-menu' ) ;
elements[0].parentNode.removeChild(elements[0]) ;
素のJavaScript だと、自分自身を削除するのにも、
一旦親を取得して、親から子供を削除する
頭おかしいw jQueryはセレクタで選択される対象が仮に存在しなくても
その後のメソッドでエラーが出ないところがいいですね
これは生JSでは出来ないのでは？ >>661
document.getElementById('661').remove()
はい、お前のくそコメント消えましたw >>661
649はremoveするとは言ってないけどな >>665
おい。それclassじゃできないぞ
document.getElementsByClassName('.hage665').remove() $('.hage665').remove()
素晴らしい。これ以上減らせと言われてもできないレベル getElementsByClassNameはネイティブで、対する$の実装は何百行ものjavascriptコードだけどな。
この点はいくら強調してもし過ぎるということはない。 あれ？jQuery君jQueryはDOM操作するものじゃない！jQueryでDOM操作してはいけない！って言ってたのにｗ
意見コロコロ、てのひらクルクル、頭パッパラパーｗｗｗ 汎用性の高いモノに対しての利便性向上、jQueryはこれに尽きる
このことを否定するならプログラミングを否定するのと同様
プログラミングは芸術作品ではなく、コンピューターに意図的に処理をさせることが目的
個人の意図の範疇 生jsでjQueryを再現するには
基本的に配列を生成して配列を返す処理をしなければいけないですね？
たとえ要素が一つと分かっていても、
getElementIdではなくquerySelectorを使って、
たとえ要素がなくてもその後のメソッドチェーンでエラーが出ないようにしないと
再現にはなりません まったく同じにしたいならjQueryくんじゃないがさすがにjQuery使えよ。
jQuery内部でquerySelector使ってるよ。
jQuery再実装とかｗｗｗ それはその通りですね
結局jQueryを使うか使わないかということよりも
関数型パラダイムに則って書くかどうかの方が重要なのでしょうね jQueryを使えば確かにクラスで複数の要素を取得して楽に処理できるけど
普通はそんなことあまりしないからな
jQueryが当たり前なってるからHTMLの段階でなるべくjQueryで扱いやすいように設計してるだけ
jQueryを使う気が最初から無ければそれで組みやすいように設計するだけ
つまりjQueryに考え方が依存して過剰評価しているだけ >>677
> jQueryを使えば確かにクラスで複数の要素を取得して楽に処理できるけど
jQuery君によればjQueryでDOM操作してはいけないらしいぞｗ 簡単に云うとですね
ここの質問に出てくるようなレベル、失礼、用途ならjQueryを使った方が利便性が向上するということなんです 当たり前だ。何百行もコードロードして利便性が下がるライブラリなんか死んでしまえ。
そうではなくてここはjavascript の質問用スレだから。 定期的にjQueryの話題が出てきて不毛な議論がループするので禁止してくれ >>677
> jQueryを使えば確かにクラスで複数の要素を取得して楽に処理できるけど
> 普通はそんなことあまりしないからな
え？ CSSでclass使うでしょ？
そのclassに当てはまるもの全てに処理することってよくあるよ ここいけよかす
日本語読めないのか?
+ JavaScript & jQuery 質問用スレッド vol.8 +
https://mevius.5ch.net/test/read.cgi/hp/1510321470/l50 >>682
いや、そんなにないと思う
どちらかと言えばそれは当てはまるもの全てに処理したいから、class使ってねということだろう
そういう場合はカスタムエレメントでも使ったほうが良い
そうすれば要素が作られた時、挿入されたときに即座に適宜処理ができるんだから
あとから要素をclassで検索して機能を付与するとか、
スマートな解決策のように見えるかもしれないけど、それって実際はただのハックだからね？
どっかの誰かが作った物があって、それに対してハックしたいなら非常に便利が良いと思うよ
でも今どき、オマケでJSによってページを補正するみたいな開発や考え方はしないからね
HTML5の勧告に纏わる公式文書にも書いてあったけど、
HTMLっていうのはアプリケーションプラットフォームになってるんだよ
つまり土台であって、その上にJSとか乗っかって１つのものができるわけ
それが横並びだとか、化粧程度だとか、もしくはJSはHTMLを改造するためのドリルみたいに
捉えてるのだとしたら、その考え方は古臭いと思うよ > そういう場合はカスタムエレメントでも使ったほうが良い
そのカスタムエレメント作る用途で使えるって話でしょ？
っていうか、どうやってそれ作るの
ちょっとサンプル書いてみてよ > HTMLっていうのはアプリケーションプラットフォームになってるんだよ
それは一部の話ね。
ブログ、ニュース、企業サイト、情報掲載と、
これらウェブの大半はアプリケーションじゃない jQueryはいまカスタムエレメントを実現するのに
一番適しているってことで コピペしてやったから
あっちいけ
+ JavaScript & jQuery 質問用スレッド vol.8 +
https://mevius.5ch.net/test/read.cgi/hp/1510321470/l50
あらし行為はやめろ 135 名前：Name_Not_Found[sage] 投稿日：2018/03/28(水) 23:39:20.81 ID:???
685Name_Not_Found2018/03/28(水) 22:28:13.59ID:???
>>682
いや、そんなにないと思う
どちらかと言えばそれは当てはまるもの全てに処理したいから、class使ってねということだろう
そういう場合はカスタムエレメントでも使ったほうが良い
そうすれば要素が作られた時、挿入されたときに即座に適宜処理ができるんだから
あとから要素をclassで検索して機能を付与するとか、
スマートな解決策のように見えるかもしれないけど、それって実際はただのハックだからね？
どっかの誰かが作った物があって、それに対してハックしたいなら非常に便利が良いと思うよ
でも今どき、オマケでJSによってページを補正するみたいな開発や考え方はしないからね
HTML5の勧告に纏わる公式文書にも書いてあったけど、
HTMLっていうのはアプリケーションプラットフォームになってるんだよ
つまり土台であって、その上にJSとか乗っかって１つのものができるわけ
それが横並びだとか、化粧程度だとか、もしくはJSはHTMLを改造するためのドリルみたいに
捉えてるのだとしたら、その考え方は古臭いと思うよ
686Name_Not_Found2018/03/28(水) 23:31:40.90ID:???
> そういう場合はカスタムエレメントでも使ったほうが良い
そのカスタムエレメント作る用途で使えるって話でしょ？
っていうか、どうやってそれ作るの
ちょっとサンプル書いてみてよ
687Name_Not_Found2018/03/28(水) 23:32:38.83ID:???
> HTMLっていうのはアプリケーションプラットフォームになってるんだよ
それは一部の話ね。
ブログ、ニュース、企業サイト、情報掲載と、
これらウェブの大半はアプリケーションじゃない 136 名前：Name_Not_Found[sage] 投稿日：2018/03/29(木) 00:37:32.00 ID:???
jq関係ないけど
HTMLがアプリケーションプラットフォームって考え方は
ぶっちゃけ危険極まりないよね・・・ >>692
俺もそう思う。
HTMLで文書じゃなくてアプリケーションを作るっていうのは
ごく一部だよ
大抵はHTMLとCSS、そしてJavaScriptでちょっと味付け
これから変えていこう！なんて波は来てない
誰も求めてない 素のJS のremove では、動かないブラウザがあるから、
素のJSでは、661 のように書く
だから互換性が高い、jQuery のremoveを使った方がよい
一々、各ブラウザの機能を調べて、素のJSで対応するのが面倒くさい。
古いブラウザを使っている奴もいるし classに対して処理振るのが最善なケースってどんなのがある？
同じ処理つけたい要素を不定数生成しなきゃいけないときは
createElementの時listenerつけたりhandlerの内側でやらせる手がある
classで処理振ると他の場所でclassを
使いまわしされたら想定外のバグが出そう
個人レベルの小規模なら問題にならないかもだけど >>695
それ単にクラスの名前つけルールが無いと困るって言ってるだけだよ。
CSSでも発生する問題
.enabledというクラス名を付けていたら、
他の場所で使い回されて困った。
これと何も変わらん コピペしてやったから
あっちいけ
+ JavaScript & jQuery 質問用スレッド vol.8 +
https://mevius.5ch.net/test/read.cgi/hp/1510321470/l50
あらし行為はやめろ カスタムエレメントどうやって作るの？という質問の意味が分からない
好きな要素をextendsしてregisterElementするだけじゃないか
そこにjQueryを使う？好きにしたら良いと思うが、
やっぱりjQueryありきの考え方だねと言わざるを得ないね
でも他のライブラリとかも使うかもしれないし、
jQueryで処理しちゃあ生要素に戻して他で処理するみたいなクソコードになると思うよ
それなら最初からjQUeryで完結させたほうが良い
jQueryはそういう他との相容れなさが欠点だからね
remove()が使えない？ 使いたい機能があって使えない環境があるなら
ポリフィル書くなり用意するなりすればいいじゃないか
そんな１００も２００も要るようなことなんて無いしね
それが面倒だからjQuery使うというのはOK
だけど最初から使ったほうが良いという考え方はNG
この違いが分かるか？
結局jQueryありきの価値観の人達って、他と相容れないjQueryを使いすぎて
例えばちょっとポリフィルを作って数個の素朴なライブラリを組み合わせて使うとか、
他のフレームワークを使った方が今回は良いんじゃないかとか考える能が無くなってるんだよ
jQueryだってやり方によっちゃ組み合わせて使える力も持ってるけど
上のカスタムエレメントの件で分かるように使いこなせてないしね
要するに考え方がいつまで経っても超古臭くて閉鎖的なんだよね
とりあえずjQuery使っとけばいいだろうみたいなのはやっぱり良くないよ
物は１つ１つ考えて良く使わないと 他と相容れないってw
JavaScriptに取り込まれてること自体が
jQueryの多大な貢献を示していると思うけど >>699
> カスタムエレメントどうやって作るの？という質問の意味が分からない
> 好きな要素をextendsしてregisterElementするだけじゃないか
だから、このスレか、jsfiddleなどに
実際に動くコードを一つ書くだけですよ。 通常四行必要なところが三行になります！とか
一行で書けます！とか
そんなせせこましい次元じゃなくて
100行必要なところが1行になります！とか
一般に実装されてなくて個人で実装するには難易度が高い関数が使えます！
とか、そういうのないの jQueryを否定できるのは生JavaScriptではなくて
jQueryを超克したライブラリだと思います
そういうライブラリないんですか？ >>703
例えば今は必要性薄くなってきたけどsha512使うためのライブラリとか
zip/unzipするためのライブラリとか
自分で書くには行数すごくなるしいろいろと問題もある
むしろライブラリってこういうのが基本で
jQueryみたいなのは今やどっちかっていうと
「ショートカット集＆ポリフィル集」じゃないの？ 悔しかったらjQueryに勝るシンプルなsource書いてね jQueryの代替を提供してるのはフレームワークばかりの感じがします
置き換えたらDOM操作以外の余計なものまで付いてくるので困りますね なにせjQuery君によるとDOM操作用のライブラリでは無いらしいからな。 >>699
横から申し訳ない
カスタムエレメントってどういうときに使うもの？
いまいち理解できんのでよかったら教えてくれ カスタムエレメントがほしいって思ったことがない
つまりHTMLパーツのコンポーネント化っていう
概念がなくて行き当たりばったりでCSSでデザインしてるだけ
こういうやつもいるからjQueryでクラス使って
コンポーネントに対して処理をする便利さが理解できないんだろうな >>708
それな
jQueryの代替のフレームワークはJavaScriptのフレームワークで
HTML+CSSメインの作り方からJavaScriptメインに
代わってしまう。
わかりやすく言えばプログラミングできなきゃ
HTMLも表示できない。jQueryの利用者が今も増え続けてる理由だよ https://w3techs.com/technologies/history_overview/javascript_library/all
ここ二ヶ月の間73.2%から増えてないから
とうとう上げ止まったか？と思ったら今月73.3%になった
よかった。jQueryの利用者はまだ増え続けてたんだ。 >>710
要素をカスタムしたい場合、という回答では不十分か？
今回の件に限らないけど、どうして何かしら例を出した程度の場合に
そいつにその物事についての説明やサンプルを求めるのかがさっぽり理解できない
俺の考えを知りたいのか？、それとも俺を試してるつもりなのか？
そんなの適当にググって出てくるサイトの筆者の方がよっぽど詳しいし
よっぽどためになる事書いてあるに決まってるだろう
俺はカスタムエレメントの申し子じゃないんだからさ
でもとりあえず上のclassの話で回答しておくと、
要素に何かしらの機能や性質を持たせる、という考え方と違うものとして
何かしらの機能や性質を持った要素が定義してあって、それを使うという考え方を挙げた
例えば一部で幾つか配列操作メソッドがほしいときに、
Array.prortotype、もしくはArrayのインスタンスにメソッドがを定義するのではなく、
Arrayをextendsしたクラスを用意しておいて、必要なときではそちらでインスタンスを作るということ、
このたとえならjQueryはlodashを使うことに近いのかもしれない
ただし、そのlodashは入出力がArrayではなく、独自のArrayLikeオブジェクトになってるって感じ
そこがちょっと無視できないポイント
つまり基本的にlodash世界内で完結するように書くものであって、
lodashに一旦通して配列を加工して、lodash空間はそこで一旦終わらせて、
次に別のものに通していくってことが、ロジック上難しいのではないけれど、概念上困難ということになる 俺が変わりに答えてあげるけど
jQueryならサクッとできることが
カスタムエレメントだとすごく大変 >>716
>>685でズバリ具体例を言ってるだろ、コードが欲しいってことか？
具体的に何の具体例をどういう目的で欲してるのかも分からんし
そんなん比較で色々書いてたら俺が書いてきた長文以上の量になるだろう
複数の要素を扱うってことで例を考えるとHTMLだけでもそれなりになるし
書く意味も分からんし書く気は無いよ custom components は、React とかだろ
JS は、Ruby, Python みたいに、
バッテリー同梱(batteries included)じゃないから、
標準ライブラリ・フレームワークが無く、自分で探さないといけない
各ブラウザ・スマホの実行環境を考慮した結果、標準にしない方がよい。
標準にすると、性能などで困るメーカーが出てくる >>720
Reactは１ミリもweb component/custom elementと関係ありません。
知ったかするな！
しいていうならPolymerだバカ Railsにincludedされてるバッテリー風情がイキがっててワロタｗｗｗｗｗ Web Componentsが各ブラウザでネイティブに実装されたら
今のAngularやReactなどのフレームワークは死滅する
一番の問題はフレームワークと共存できないということ
フレームワーク側もシェア維持のためにWeb Componentsに対応するのだろうが
今と作り方がまったく変わってしまう
だけどjQueryはただのライブラリなので、Web Componentsと共存できる
部分的にjQuery、部分的にWeb Componentsを使と言うことが可能
またWeb Components時代になってもコンポーネントとコンポーネントをつなぐ
必要がある。ここにjQueryは使うことができる。
コンポーネントが見つからない場合、今までどおりjQueryを使うこともできる
混ぜて使うことが可能。これがjQueryの大きなメリット カスタムタグとかカスタムエレメントとかウェブコンポーネントとか
正直全部どうでもいい
そんなのより
全部のブラウザでasync/await使えるようにしてくれよ
いつだよ >>713
「jQueryは死んだ」というのが流行ってただけで
実際はむしろ成長中だったのですね urlにおもいっきりJavascriptライブラリって書いてあるやんけ。
しいていうならJavascriptは永久に100%
Javascriptはお釈迦さま。てのひらの上で一番うまく踊れるのが誰か競ってるのがライブラリ。 >>730
ブラウザがお釈迦様。手のひらの上で踊らされてるのがフロントエンドエンジニア。 >>730
リンク先には各ライブラリのシェアだけではなく
ライブラリを使わないというNoneもはいってるよ
だから正確には、どのライブラリ or ライブラリを使わないで競ってることになる
ライブラリを使わないっていうのは素のJavaScriptを使うという意味だ
お前が言うJavaScriptはライブラリを使わないという意味じゃなかったのか？
それともjQueryを使っていてもJavaScript100%に含まれる
（だからこのスレの話題としてOKってことか）
Noneの割合は年々減っている。現在は23.7%。
最近は一年で1%減るぐらいのペース
jQueryはその逆で一年で1%増えるぐらいのペース 正直手のひらの上で踊らされてるのは、
流行りものに流されっぱなしの
JavaScripterだけな気がするｗ
jQuery使いはストイックだよ
もう10年も踊ってない ライブラリは言語に足りない部分を実現して
言語の未来の形を先取りしているものなので、お釈迦様というのは言い過ぎではないでしょうか？
ライブラリに先導されてJavaScriptはその後をヨチヨチと付いてきているのですから
むしろライブラリの方がお釈迦様的です ライブラリはjavascriptで実現可能なことしか実現できない。
javascriptで書かれてるからなｗ 高級言語はアセンブラで実現可能なことしか実現できない。
できることと言ったら実現可能なことを、早く安く作れるだけだ
ライブラリもそれと同じ
こればっかりはアセンブラでは実現できないｗ イベントリスナが効かなくなったのでおかしいな〜と思っていたのですが
ready前にイベントリスナをDOMに直接登録していたからでした
逆に言うとイベントをデレゲーションする場合は
readyをいちいち待たずに登録処理を始めていいということでしょうか？ >>732
その None にはスクリプトすら使わないというのは入っているのかな？ コピペしてやったから
あっちいけ
+ JavaScript & jQuery 質問用スレッド vol.8 +
https://mevius.5ch.net/test/read.cgi/hp/1510321470/l50
あらし行為はやめろ https://w3techs.com/technologies/history_overview/javascript_library/all
ここ二ヶ月の間73.2%から増えてないから
とうとう上げ止まったか？と思ったら今月73.3%になった
よかった。jQueryの利用者はまだ増え続けてたんだ。 >>740
調査方法載ってないんだよな
調査方法載ってないデータはクソ >>741
調査方法は以下に書いてますね
https://w3techs.com/faq
> 調査方法載ってないデータはクソ
あなたの主張からすると調査方法載ってるので
クソではないということになりました。
英語わからないならGoogle翻訳使うといいですよ。
> どの技術がサイトで使用されているかをどのように知っていますか？
>
> 主に、Webページのダウンロード時にサイト自体が提供する情報を使用します。
> 言い換えれば、私たちは検索エンジンのようなWebページを取得し、その結果を分析します。
> さらに、Alexa、Google、Microsoft、ipinfo.ioなどのソースから公に入手可能な情報を使用しています 。 > あなたのウェブサイトアナライザはどのくらい正確に機能しますか？
>
> ウイルススキャナがファイルを検索してウイルスを特定する方法と同様に、
> 技術の使用を特定する特定のパターンをWebページで検索します。この検索には、
> 正規表現とDOMトラバーサルの組み合わせを使用します。私たちは、
> テクノロジーの使用に関する数千の指標を特定しました。これらの指標は異なる優先順位を持ち、
> 具体的な状況における指標の特定の組み合わせの有無に基づいて、我々は結論に至る。
> これらは、指標によって使用される情報の例です。
>
> ウェブページのHTML要素
> 特定のHTMLタグ（ジェネレータのメタタグなど）
> JavaScriptコード
> CSSコード
> サイトのURL構造
> オフサイトリンク
> HTTPヘッダー（Cookieなど）
> 特定の要求に対するHTTP応答（圧縮など）
> アナライザーを構築するためには多くの研究が必要でしたが、
> 私たちは常にそれを改善し続けています。可能な限り最高のウェブサイトアナライザにしたいと考えています。 > あなたの情報はどれくらい正確ですか？
>
> 彼らが望むのであれば、ウェブサイトはほとんどの技術を隠すことができるため、
> このタイプの調査は100％正確であることは不可能です。
> 詳細については、免責事項も参照してください。テクノロジーの識別に何らかの
> エラーを起こさないよう確実にする方法はありません。偽陽性と偽陰性の
> バランスをとる方法を見つけようと試みます（できるだけ多くを削除した後）、
> 残りのエラーは他の技術よりもむしろ一つの技術に集中しないようにします。
> 私たちの目標は、最も正確で信頼性の高いWeb技術調査を提供することです。
> その結果、この質問に対する答えは、可能な限り正確です。我々は、
> 私たちがその目標からあまり遠く離れていないと信じています。
ここまで言ってるからUser Agent使って判断みたいな
単純なことはしてないでしょうね わざわざjqueryスレの書き込みを転載コピペしてまでここでやる根性に脱帽 もう5年以上同じようなことやってるからライフワークなんだろ >>747
マーケットシェア、96.1%もあるんだが・・・
減ったと言っても一年で0.2%
これだと半分以下になるまで何年かかることやら
それよりか、0.8%しかなく一年で0.1%しか増えてないReact、
0.6%しかなく同じく一年で0.1%しか増えてないAngularを
心配したほうが良くないか？ >>747
よく話題になってるVue.jsとかAngularとかReactもここまで使われてないとは・・
lodashよりunderscoreの方が人気なのも意外 > lodashよりunderscoreの方が人気なのも意外
Underscoreの方がオリジナルだからね。
そもそもBackboneのためのライブラリみたいなもんだから
Backboneでも使われてる 証拠なし根拠なしだから論証にすらなっていないので反論の必要がない
データを否定するもなにも
w3techsのはデータじゃなくて妄想
それを根拠に語るお前も妄想 >>751
w3techsはちゃんと根拠書いてますよ？
お前「地球は太陽の周りなんか回ってない」
ガリレオ「証拠あります。地球は回っています」
お前「それは証拠じゃない。お前の妄想だ」
ガリレオ（考えられる脳みそないのかな？）
ガリレオ「じゃあ太陽が回っているという根拠は？」
お前「お前の妄想が間違いなんだから、太陽は回ってる」
ガリレオ「いや聞いてるのは太陽が回っているという証拠ですよ？」
お前「地球が回ってる＝お前の妄想＝それが間違いということは太陽が回ってることだろ！」
ガリレオ（論理的に考えられる脳みそないのかな？）
ガリレオ「太陽が回っているという証拠はないんですね？」
お前「お前が間違ってるのが証拠だ！」 そういやwappalyzerでもほとんど見たことないもんな
angularとか emberっていうのは見る
アップルのサイトがそれ 最近のモダンJSフレームワークがほとんど使われてないとしても
パラダイムが新しいのは確かですし、今後の流れがそっちに行くのも確かなので
勉強しておくに越したことはないですね？ 勉強しないと上手く扱えないフレームワークとか本末転倒だから indexedDB使ったことある人いる?
あったら感想きかせて
面倒くさいとか、かんたんとか、ライブラリ使ったほうが良いとか。
なんでもいいのので 主にトップページしか検索の対象にしてないってかいてるやんw
クソデータ決定だなw ほらな。だから日本語に翻訳してコピペする必要があるんだよ（苦笑）
しっかり書いてある。英語を読まないから見つけられない
> あなたはホームページだけ、あるいは内部のページだけを分析しますか？
>
> それはサイトについて既に知っているものに依存します。
> しばしばそれはホームページでしかありません。
> 多くの場合、我々はより深くクロールします。 > Do you analyze only the home page or also inner pages?
>
> That depends on what we know already about the site.
> Often it's only the home page, in many cases we crawl deeper.
なお翻訳前の英語。短いから手動で訳してあげると
あなたはホームページだけを解析しますか？ それとも内部のメージも？
私達がすでに知っているサイトの内容に依存します。
しばしば、それはホームページだけですが、多くの場合、私達は深くクロールします。 比率は何対何かぜんぜん分からんなこれ。計測仕様もクソもない >>757
> 最近のモダンJSフレームワークがほとんど使われてないとしても
> パラダイムが新しいのは確かですし、今後の流れがそっちに行くのも確かなので
> 勉強しておくに越したことはないですね？
俺の経験から言うと、Backboneが一時期はやったが
俺がまともに勉強する前に消えた
Knockoutも使う前に消えたな
Angular1は仕事で使うから勉強したんだが
名前こそAngularだがコードの書き方は
まったく違ったものになってしまった
これらは2014年ごろ、主流のJavaScriptフレームワークだったものだ
https://qiita.com/takuhito-h/items/15655309aef0889cfb62
https://qiita.com/icoxfog417/items/3c68e1a4de7121658e29
2014年当時は今（非比較的）よく使われてるフレームワークは
生まれてないから生まれて間もない状況
何が言いたいかと言うと、今は新しいパラダイムが普及する前に
更に新しいパラダイムが出てる状況なんだよ
つまり将来主流になるパラダイムは、まだ世の中に生まれてない可能性が高いってこと
そんな中10年以上も生き残ってるのはjQueryだけだったりする >>759
これが必要な場面のほとんどは鯖側でやったほうが楽で健全という結論 >>767
localForage, dexie.js, ZangoDB and JsStore
あたりが紹介されてるの見たけど
dexieってのが一番いいの? >>770
一番かどうかは知らん。ポイントは生で使うより断然簡単になるか、やたら容量増えないか、遅くならないか、かな。
至れり尽くせりの重いライブラリでもいいのか、薄いラッパーがいいのかは用途と好みだろ。 >>771
サーバーと同期したいならPouchDBとかいいぞ！クライアント側はindexedDBが使われてるぞ！ >>759
今だったらPromise化してasync/awaitでやりたいと思うだろうが
イベントループ挟むとセッションが切れるのと、
特殊コールバックのせいで単純なPromise化ができないっていうのが一番のネック
パラメータも構造に依存したりするので構造化もしにくい >>713で
> ここ二ヶ月の間73.2%から増えてないから
> とうとう上げ止まったか？と思ったら今月73.3%になった
> よかった。jQueryの利用者はまだ増え続けてたんだ。
ということだったが、正確には今月（4月）ではなく
3月終わり頃のデータだった。
https://w3techs.com/technologies/history_overview/javascript_library/all
今見てみたら4/1で更新されており、73.4%に増えていたよ。 >>775
> 特殊コールバックのせいで単純なPromise化ができないっていうのが一番のネック
逆、イベント（コールバック）っていうのは大部分が
Promise化できないもので、一部の特殊なものだけがPromise化できる
Promise化できる方が珍しいんだよ いつからjavascriptのライブラリのシェアをウォッチするスレになったのか。
ほんとjQueryバカは各スレでやりたい放題で程度が低い。
崩壊学級の小学生みたいだ。 JavaScript（None = ライブラリを使ってない）のシェアをウォッチするスレですよｗ ライブラリを使うということはライブラリが書かれている言語を間接的に使うということ。コンパイル言語ではないのだから、その言語は唯一、Javascriptのみ…！ 信奉者も何もこのシェアだと使ってない方が異端だろう 信奉者だから
使ってる使ってないじゃないから
日本語も分からんバカなのか もっと正確に言うと
スレ違いのスレで再三やめろといわれてのにしつこくあらし行為を行うレベルでJQueryの話題を出すキチガイな。 その中で重めの非同期処理をするイベントリスナがあり、
処理中には同じイベントが発生して欲しくはありません
これをスマートに書くにはどうしたらいいでしょうか？
簡単なやり方は、イベントリスナの外にフラグになる変数を用意しておいて、
イベントリスナの中でそのフラグを立てて排他的に処理するという方法ですが
外に変数を設置するのはイケてない気がしますし
一度に一度しか呼び出せない関数を、もっとスマートに作る方法がありそうな気がします
どういうものでしょうか？ 「イベントが発生して欲しくはありません」と書きましたが
イベントは発生してもいいですね
その中で排他処理をスマートにしたいのです >外に変数を設置するのはイケてない気がしますし
要件で考えりゃいいだろ
イケてるイケてないって考えを捨てろ >>777
多くのWebAPIを見るにそんな事は無いし
イベントであればObservableやasync generator化すればいいが
IDBの場合、それも難しい >>786
イベントリスナをオプションでonceにして、処理が完了したら登録し直しは駄目なん? オブジェクトオブザーバブルってなかったことリスト行きしたんじゃなかったっけ？ >>790
実は最初に考えたのが、イベントリスナの一時的な付け外しでしたが
なんかうまくできなかったのです・・
結局、select要素のonchangeイベントだったので
select要素をdisableにするという簡単な形で無効にしました
ありがとうございました >>791
Observable != Object.observe かなり前からcorejsにpolyfill入ってるやつ 解釈の原因は解釈者が持つ自分ルール。解釈の自由は責任を伴う
言葉風紀世相の乱れはそう感じる人の心の乱れの自己投影。人は鏡
憤怒は一時の狂気、無知無能の自己証明。中途半端な知識主ほど激昂
「真実は一つ」は錯誤。執着する者ほど矛盾を体験（争い煩悩）
他人に不自由（制約）を与えれば己も不自由（不快）を得る
問題解決力の乏しい者ほど自己防衛の為に礼儀作法マナーを要求
情報分析力の低い者ほどデマ宗教フェイク疑似科学に感化洗脳
自己肯定感の欠けた者ほど「己の知見こそ全で真」に自己陶酔
人生経験の少ない者ほど嫌いキモイ怖いウザイ憎い想定外を体験
キリスト教は世界最大のカルト。聖書は史上最も売れているト本
全ては必然。偶然 奇跡 理不尽 不条理は思考停止 視野狭窄の産物
人生存在現象に元々意味価値理由目的義務使命はない
宗教民族領土貧困は争いの原因ではなく口実動機言訳(原因帰属錯覚）
虐め差別犯罪テロ紛争は根絶可能。必要なのは適切十分な高度教育
体罰は指導力問題解決力の乏しい教育素人の独善甘え怠慢責任転嫁
死刑は民度の低い排他的集団リンチ殺人。「死ねば償える」は偽善
核武装論は人間不信と劣等感に苛まれた臆病な外交素人の精神安定剤
投票率低下は社会成熟の徴候。奇人変人の当選は議員数過多の証左
感情自己責任論 〜学校では教えない合理主義哲学〜 m9｀･ω･) 後ろに書かれている関数は呼び出せるのに
後ろに書かれているクラスはnew出来ないのは何故ですか？
あほなのでしょうか？ 俺もその仕様でえっ？てなった。
ホイスティング理解できないバカに合わせた結果。
今からでもfunction宣言と合わせて欲しいぜ 確かに今から変更しても
よほど変なコードを書いていない限り問題も出ないでしょうし
変えて欲しいですね そもそも関数のときからホイスティングが嫌なら宣言文じゃなく宣言式使って変数に代入すりゃいいだけだったんだ。
クラスだってせっかく文・式両方用意しといて何やってんだと思った。
確かに機能的には困るものではないが、ソースファイル上のコードレイアウトが無意味に制限されるよね。
あほに合わせたせいで。
関数でもクラスでもいいけど、詳細な実装は下に置いといて、上から抽象度の高いコードをサッと読めるってレイアウト好きなやついるだろ。
もしかしたらダメだと言うやつもいるかもしれんがその是非は問題じゃない。なんでそれを言語仕様で制限されんとならんのじゃということ。 勢いというか思想というか、が強すぎてちょっと引くけど
>詳細な実装は下に置いといて、上から抽象度の高いコードをサッと読めるってレイアウト好きなやつ
はい
好きです jQueryでなんとかならないのでしょうか？＞クラス あのーjQueryってDOM操作用ライブラリなんですけど。
最近は調子にのって盛り込んだ本分と関係ない便利機能はコアから取り除いていってるんですけど。 調子に乗って盛り込んだわけじゃなくて、昔はCSSのアニメーションとかなかったし
Ajax周りの互換性がブラウザごとになくて、必要だから入れたんだよ >詳細な実装は下に置いといて、上から抽象度の高いコードをサッと読めるってレイアウト好きなやつ
いや、普通に考えると、1クラスで1ファイルにして、
それをimportするのが普通なので、そもそもやり方が悪いとしか まあ確かにimport使って話だなｗ
でもimportはIEは言うまでもなく、Firefoxは現在の59は対応してないし（次の60から対応する）
Androidも最新以外は対応してないという状況だから
スマホ・タブレット対応するならきついだろう。
だからといって諦める必要はなく、そこででてくるのがbabelなわけ
babelを使ってビルドしてしまえば古いブラウザでも対応できる それが普通だとは思いませんでした
みんなインポートっていうのを使ってるんですか？ 俺はずっと前からモジュール使ってるな。
メンテナンス性をあげようと思ったらファイルに分けるのが普通だし、
昔から <script>を複数書いてたでしょ？
それも多くなりパフォーマンスが気になりだしたから
ファイル結合から始まって、最終的にモジュールにして
webpackとかでビルドするようになったな lodashのdelay関数がsetTimeoutより優れている部分は何ですか？ setTimeoutが発動する前に同じ種類のsetTimeoutを実行しようとしたら
前の分はキャンセルする
という処理をしたいのですが
一番いい方法はどういうものでしょうか？
lodashのdelayはそういう機能を追加してるんじゃないかとも思ったのですが
ほとんどsetTimeoutと同じっぽいですね setTimeoutやdelayの第三引数にchannelを指定したら
その前の同名channelのタイマーはキャンセルするみたいなイメージです ちょとラップして書けばいいだけじゃん
timeridと種類関連付けてmapで持っておけばいいだけなんだから >>813
lodashのdelayの優れている点は引数を持たせられること
>>814
そういうときは、lodashのthrottleかdebounceを使うんだよ
タイマー自体に持たせるんじゃなくて
多すぎるイベント（タイマー含む）を間引く関数を併用する 「表のセルをクリックしたらその列のヘッダーセルの色を変える」とかjquery使わないと面倒くさくない？ >>816
ラップしたものを書いたら、たしかにすぐに書けました
>>817
>引数を持たせられること
なるほど。引数を持たせられるっていうのはなんとなく関数型っぽい気がします
>throttleかdebounce
debounceを見たら、欲しいのはまさにこれでした
ありがとうございました >>819
> 「表のセルをクリックしたらその列のヘッダーセルの色を変える」とかjquery使わないと面倒くさくない？
面倒くさいだろうけどお題が小さいｗ
jQuery使って数行なら、jQuery使わなくても、その2倍ぐらいで書けるので
面倒くさくない、頑張ればできるって言いそうｗ
同じ2倍でも1000行と2000行じゃ大きな差なんだけどね
作ってみた
https://jsfiddle.net/rmhzz1c4/
jQueryで6行、jQuery使わないならその2倍で12行ぐらいかな？
（コードゴルフ的なのは禁止で） classで切り替えるとして、これでいいの？
document.getElementById('targetTd').addEventListener( 'click', function(e){
var children = e.target.parentNode.getElementsByTagName('th')
for(var i=children.length-1; 0<=i; i-- )
children[i].classList.toggle('highlight');
}, false );
ほとんどの場合<th>は<tr>の最初にあるだろうから以下のほうが短い
document.getElementById('targetTd').addEventListener( 'click', function(e){
e.target.parentNode.firstElementChild.classList.toggle('highlight');
}, false ); 特定のtdではなく特定のテーブルや全テーブルの全部のtdだったら
documentやtable elementに対してaddEventListenerして、1行目でe.target.tagNameを見ればいいな >>822
動かん
ぱっと見でもクリックした列を判定するコードがないし
なんでchhildrenの後ろから探索してるのかも分からん
（コピペプログラマに見える）
classList.toggleしかしてないので同じ列をクリックするたびに
反転するだろうってのが容易に想像できる
e.targetがtdだとして、そのparentNodeはtrだ。
複数テーブルが有った場合は、まあもともとの要件には
入ってないが、対応しているとなお良い
これでいいの？って仕様を聞いてるのかと思ったら
書いたコードにバグがないの？って意味かよｗ >>822-823は行
行じゃなくて列なら確かにめんどい
colspanやrowspanがどうなってるかわからん
1つでもあれば盛大にズレるんで
確実なところでtd.dataset.に何か目印つけるな
これが一番健全だと思う これも元の要件に書いてないが、クリックしたらその列のヘッダーセルの
色を変えるとして、その他の列のヘッダーセルの色は解除だろって思う。
そのコードも入ってないな。 >>826
rowspan/colspanは元の要件に入ってないけど使われたら全部瓦解するよな
対応必要じゃないんか？ > colspanやrowspanがどうなってるかわからん
そんなの要件に入ってないだろ
そんな事を考える前に、まずちゃんと動くもの作れｗ >>827
> 対応必要じゃないんか？
これは要件が決まらないと実現不可能だから
対応のしようがない このように設計が重要かつもっとも時間がかかるものなのである
コーディングの時間の多寡を考えてはいけない jqueryがDOM操作で大活躍！できるクソ曖昧な要件出してjqueryをageましょう 客から言われたわけでもないのに、勝手に仕様を
盛りだくさんにしていく馬鹿っているよなｗ >>833
えっ だって要件不確定で実現不可能とか言っちゃうならこれ
>その他の列のヘッダーセルの色は解除だろ
「クリックした列の列の背景色をトグル切り替え」かもしれないじゃん 俺の要件推測は良い推測！
おまえの要件推測は悪い推測！
jq以前の脳の構造上の欠陥問題 俺よりダメなやつがいるから俺は悪くない！
だそうです 要件が曖昧なら、推測で作ってもいいよ。
だけど、動かないのは論外だから っていうか文句言う前に、動くもの作れよ。
良い・ダメ以前の問題。
物を作れなきゃ、論外 っていうか、>>819は
> 「表のセルをクリックしたらその列のヘッダーセルの色を変える」とかjquery使わないと面倒くさくない？
「その列のヘッダーセルの色を変える」と明らかに書いているのに、
>>822は、その行を変えているわけで、問題自体を理解してない。
この問題は「列」だからこそ難しいと言ってるのに
その前提を満たしてない うんうんそうだね>>822君は勘違いだねー
「実現不可能」ｗｗｗｗ はい、ついでに行クリックで行のヘッダを変えるやつ
https://jsfiddle.net/pztcepet/
$(document).on('click', 'tr', function() {
$(this).addClass('selected').siblings().removeClass('selected')
}); >>844
「実現不可能」っていうのはrowspanやcolspanの話だって気づいてるか？
勘違いしてるのはあんたじゃない？ >>822 と同じ仕様ならこんな感じかな。thが最初になくても良い
（正確には複数のtable対応だけど、jQueryだと一つに対応するのも複数に対応するのも手間が変わらない）
https://jsfiddle.net/uwf0xu71/
$(document).on('click', 'tr', function() {
$(this).toggleClass('selected');
}); >>822はお題を間違えている上に
間違えたお題用のHTMLじゃないと動作確認ができず
そのHTMLすら書いてないんじゃ、どうしようもないなｗ
誰も検証できない。せめてお題ぐらい間違えるな。
もしくは動くものをjsfiddleなりで用意しろ あんまりいじめすぎるなよ
問題勘違いしただけだろ
まあ>>822も行なら簡単すぎだなって所で気づくべきだが >>847をアロー関数を使って一行になおしてみた
$(document).on('click', 'tr', e => $(e.currentTarget).toggleClass('selected'));
普通に関数を一行にしたほうが短かったｗ
$(document).on('click', 'tr', function() { $(this).toggleClass('selected') }); 簡単な「行」で遊んでる所悪いが、本当のお題は >>822 の「列」だからな
動くコードで出てるのは、jQuery版のこれだけ（ >>821）
$(document).on('click', 'td', function() {
var index = $(this).siblings().addBack().index(this) + 1;
$(this).closest('table')
.find('th.selected').removeClass('selected').end()
.find("th:nth-of-type(" + index + ")").addClass('selected');
});
アンチjQueryは頑張れ。これ真似するだけだろ？ 短くかければいいのなら単にhoge()と呼べば済むライブラリを提供すればいい
それと同じで君の回答と言うのは質問者の成長を微塵も考えていない自己満足のコードなんだよ
おかしな方向で張り合ってる暇があったらきちんとロジックやAPIの説明を交えた
質問者の為になって次から独り立ちできるような回答を心掛けろ オブジェクトにイベントリスナを登録
オブジェクトにイベントを発火させると、イベントリスナを順次呼ぶ
みたいな仕組みを作る時の定石みたいのありますか？
自分でonメソッドやonceメソッドやtriggerメソッドを実装することも
そんなに手間ではなさそうですが
使ったら便利になるパーツが既に揃ってるんじゃないかという気もします >>854
いろいろ調べたのですが
普通に自分で実装するのが一番早かったです イベントと言いつつただちょっと伝播するコールバックがしたいだけだろ イベントってそんなたいそうなものですか？
https://developer.mozilla.org/ja/docs/Web/API/EventTarget
EventTargetの簡易実装はたった35行ですよ
もともとかなりシンプルな仕組みだと思いますが >>852
> 短くかければいいのなら単にhoge()と呼べば済むライブラリを提供すればいい
そういうライブラリがあるなら教えてくれ >854
> みたいな仕組みを作る時の定石みたいのありますか？
あるよ。EventEmitterとかいうのがそれ
node関連でよく使われているがブラウザでも使える
EventEmitterとかEventEmitter2とかEventEmitter3とかEventEmitter4とか
あるので注意なｗ
なお、いつものことだが
jQueryはDOM要素だけでなく任意のオブジェクトに対してonでイベントハンドラを定義できる
たったこれだけで、あなたの希望のものが実現できるよ
var obj = { foo: 'bar' };
$(obj).on('myevent', function() {alert(this.foo)});
$(obj).on('myevent', function() {alert(1)});
$(obj).on('myevent', function() {alert(2)});
$(obj).trigger('myevent'); >>859
ありがとうございます
EventEmitterというのは、聞いたことのある言葉ですが、
そういうものだったのですね
jQueryも使えることは調べていて知りましたが
イベントを実装するためにオブジェクト自体がjQueryオブジェクトになってしまうのはどうか？
と思ってやめたのでした
ありがとうございました EventEmitterを継承するようにしたら、思っていた感じになりました
ありがとうございました > イベントを実装するためにオブジェクト自体がjQueryオブジェクトになってしまうのはどうか？
別にjQueryオブジェクトにはならないよ var arr=[];
function p(n){
arr.push(n);
}
p({id:'hoge',age:20});
p({id:'fuga',age:18});
console.log(arr);
これをクラスぽく書くにはどうしたらいいですか？
var my=function(){
this.arr=[];
}
my.prototype.p=function(n){ this.arr.push(n);return this; }
var a=new my();
a.p({id:'hoge',age:20});
a.p({id:'fuga',age:18});
var b=new my();
b.p({id:'moge',age:30});
b.p({id:'muga',age:38});
console.log(a);
console.log(b);
この.pを無くしてa({})やb({})という風にしたいのです Constructorから作るインスタンスを素のオブジェクトじゃなくて関数にしたいってことかな
ならConstructor内のthisを無視してthis拘束した関数作ってprototypeに色々付けてそれreturnすればいい Javaの教祖マーティン・ファウラー御大、名著「リファクタリング」第２版にJavaではなくJavascript を採用してしまうｗｗｗｗｗ
https://martinfowler.com/articles/201803-refactoring-2nd-ed.html >>863
それはどうみても、クラスじゃない
new演算子も不要だから、クロージャでぐぐれ >>867
そもそもDOM APIがでてこないんじゃないの？
アレな人はJavaScriptの話題だけしろーっていって
DOM APIの話はOKとかダブルスタンダードなこと言ってるけど
JavaScriptにDOM APIは関係ないからね
その本はあくまで言語の話しかしないでしょう。
でもライブラリを使って短くしましょうぐらいは言うかもね >アレな人はJavaScriptの話題だけしろーっていって
>DOM APIの話はOKとかダブルスタンダードなこと言ってるけど
ここがWEB製作板で扱う話題が以下なんだから当然では・・・
・HTML、CSSなどのサイト制作の技術
・JavaScript、VBScriptなどのクライアントサイドプログラム ついでに言えばテーマがリファクタリングの本なんだから
DOM APIが出ようが出まいが関係ないだろう・・・ >>871
ここはWebクライアントサイド技術の板なんだから
ブラウザに標準搭載のDOMが関係ないわけないだろ
ただオプションであるライブラリの１つを
さも当たり前かのように扱うなということを皆言ってる
料理でいうと、「砂糖・塩」と「親子丼の素・牛丼の素」は
いくら同じ調味料でも違うし
基本的に後者を使うのがスマートだと思い込んでる事自体が
料理愛好家によって批判されてるんだよ クロージャでやってみました>>869
https://jsfiddle.net/4ed98ue3/1/
本当は別のクラスにこういう機能を組み込みたかったのですが
それだとa.p({})みたいに.pを書かないといけなくなってしまうのです
・arrayにプッシュするときは.pみたいなのを書かずa({})でできる
・それ以外の機能は”.なんたら”を書く
みたいな感じです phpの $array[] = $newvalue; みたいな？ こんな感じ？
var my=function(){
var that = this;
this.arr = [];
return function(n){ that.p(n); return that; };
}
my.prototype.p=function(n){ this.arr.push(n); return this;};
my.prototype.get=function(n){ return this.arr[n];};
var a=new my();
var c = a({id:'hoge',age:20});
a({id:'fuga',age:18});
var b=new my();
var d = b({id:'moge',age:30});
b({id:'muga',age:38});
c.p({id:'nuga',age:48});
console.log(c);
console.log(d);
console.log(c.get(c.arr.length - 1)); >>877
そうです
できました！
ありがとうございました。 文章編集用のtextareaと、操作用のbuttonがあります
textareaにフォーカスがある時に操作用のbuttonをクリックした時にも
textareaのフォーカスは奪いたくありません
デフォルトイベントを殺そうと、
buttonのclickイベントリスナの中で
preventDefaultとstopPropagationをしても、フォーカスは失われます
フォーカスを奪わないようにするにはどうすればいいのでしょうか？ >>879
button に focus イベントが来るから
そこで textarea.focus() を呼べばいいんじゃないか？ >>879
ふと思い出してmousedownをpreventDefaultしたら
フォーカスを奪わないと確認できました
こういう場合、
デフォルトイベントを殺すためのmousedownイベントと
clickイベントを別々に設定するのでしょうか？
clickイベントの代わりにmousedownイベントを使うようにしたら、
イベントリスナを一つにまとめることが出来ますが
clickの代わりにmousedownを使うのは、それはそれでどうなのかと思います
どうやるのがセオリーですか？ >>880
それでも同じ結果になりそうですが
出来れば最初からフォーカスを取りたくないです >>881
click イベントはマウス専用じゃないから分けたほうがいいと思う
マウス等は使えない環境だとどうあるべきか考えてみるといいかも スマホみたいにtextarea触ると入力画面に遷移する環境をどう扱うかで分かれそう
PCだけなら地道にtextarea操作時に常時キャレットの位置を記録しておいて
何かあったらfocus()してキャレットを元に戻すまで一まとめにしてしまうのが
面倒だけど一番な気がする
そういう実装をエディタ系でたまに見る >>883-884
ありがとうございます
mousedownはpreventDefaultだけするようにしました
こういう挙動が問題だと今日始めて気づいたのですが、
皆さん色々工夫してるということが分かって何か安心しました
ありがとうございました >>885
今やってるのは要するにあれ？textarea内の一部の文章をマウス等で選択して
ボタン押すとそこの部分だけ太字に => フォーカスがががが そもそも、focus を奪わないって無理だろ
focusは、PC 内で同時に、1つのアプリの、1つのコントロールしか持てないから、
コントロールに入力する・ボタンを押すなどの際には、focusを奪う必要がある
また、focusを持つコントロールは、見えていないといけない
focusは、PC の資源。
何かのアプリが動くと、しょっちゅう、focusが奪われる。
それがウザイ クリック対象がフォーカスを持たないものなら
フォーカスを奪わなくできる tabでフォーカス移動でいるかどうかとは違って
divだろうとspanだろうとimgだろうとフォーカスは持つし取れるんじゃないの JSは即時関数やら関数定義を大量にする必要が出てくるのに
functionって長いじゃん、それが理由
#案とかいろいろあったよ >>890
関数の引数に、値のように見える関数を渡したいから
array.sort(比較関数) みたいにね。
ここ、比較関数を渡すんだけど、function() だったらいかにも関数じゃん？
じゃなくて、比較処理値みたいに関数っぽくないものを渡したくない？
array.sort( (a, b) => b - a ) みたいにね。
ほら、これ引数に関数を渡してるように見ないでしょ？
まるで値、実体は関数なんだけど、関数に見えない。値みたい
それがアロー関数の素晴らしい所
これは関数なんだけど、関数だとおもっちゃいけない。
値だ。そういう処理をする値だ。と考えると
thisが変わっちゃうなんてありえないって思えてくるでしょ？
それがアロー関数の素晴らしい所 >>892
javaやらrubyやらが涙ぐましい努力をして導入したのとは違い、javascriptは元から関数が第一級オブジェクトであるのでその通り。
でも短くかけるようになるだけでも嬉しいじゃん。
this使う場合もたいていbindしなくてよくなるから短くなるぞ。 まあ使えなくても困りはしない
アロー演算子は言語仕様だから
オレオレライブラリで代用したりはできないけど
どうでもいいけど
function( ... ){ ... }( ... )[ ... ]
とかのクソわかりづらい記述が俺は大嫌いだ (function( ... ){ ... })( ... )[ ... ]じゃないか？ｗ
そういうときこそ変数に入れて分けよう。
var hoge = function( ... ){ ... }
var fuga = hoge( ... )
var piyo = fuga[ ... ]
一行で書くのはたいていはパフォーマンスのためというより変数の名前考えるのがダルいから。ソースは俺。
分からないなら分かりやすく書こう。 クソな書き方するワンライナークズって死ねばいいよね という話だろ 変数名かんがえるのが面倒なので便利サイト教えてください >>896
アロー演算子は言語仕様だから
オレオレライブラリで代用したりはできないけど
トランスパイラを使えば代用できる >>903
すまんすまんｗ
>>896に引きづられた（っていうか前半はコピーしただけ） new演算子と併用できないんだし
=>がアロー演算子、アロー演算子を用いて宣言された関数がアロー関数、なんじゃないの？ どこぞの書き方がいっぱいある言語もクソだと思うが
省略できます省略できます省略できますもクソだと思う
多少なら構わんが >>907
なんのこっちゃ
仕様で演算子の定義にないでしょ >>909
両方rubyじゃんクソ過ぎワロタｗｗｗｗ 保守するのが自分じゃないならどんな書き方してもいい
6重IFネストしてもいいぞ focusoutした時、イベントオブジェクトのrelatedTargetには新しくフォーカスされた要素が入っていますが
ネットでこれはchromeでしか使えないという情報を見かけました
同じものはdocument.activeElementにも入っているはずなので、
汎用性を考えてこっちを使う方がいいでしょうか？ >>916
ありがとうございます
chromeでしか使えないというのは古い情報だったようですね
またactiveElementは、focusoutの時点ではまだ設定されていませんでした >>917
jQueryはそこらへんの違いを吸収していた気がする >>905
質問者じゃないけどこれ凄くいいですね
早速プラグインをphpstormに入れました localStorageは保存時にJSON.stringify
読み込み時にJSON.parse
をかけて使うものなのでしょうか？ だとすれば、setItemやgetItemにJSONへのエンコードとデコードを組み込んで
デフォルトで文字列以外の値も受け取れるようにした方が良かったのではないでしょうか？ >>920>>921
localStorageがドキュメント型DBなのならそうだけど、あくまでキーバリュー型DBだから。
保存されるのは文字列。
それ以上でも以下でもない。
そこを勘違いさせるようなAPIを標準で入れてしまうのはよくない。
オブジェクトのようにアクセスできるようにしたらオブジェクトと同じように使われることを促進してしまうが、API下ではたとえ一部のキーが対象の操作であっても文字列全体の読み出しや文字列全体の書き込みが発生してしまう。
用途によってIndexedDBやその他のローカルDBライブラリを活用を検討すべき。
内部でIndexedDBを使い(非対応ブラウザのためのフォールバックあり)、ドキュメント型DBのインターフェースを提供するようなのもある。
簡単だからと言って何でもかんでもlocalStorage使うのはよくない。 >>921
ありえないな。
JSON使ってディープコピーを実現するとか
馬鹿なことを言ってるやつがいるが、
そんなことをするとデータが壊れる。
その前提を知ってるならJSON文字列に
変換するのは自分でやることもできるんだから
あえてlocalStorageにもたせる必要性がない >>924
> localStorageがドキュメント型DBなのならそうだけど、あくまでキーバリュー型DBだから。
> 保存されるのは文字列。
それは説明になってない。
キーバリュー型DBだからって文字列専用じゃなきゃいけない理由なんてない 仕様の話ならまだしも策定された仕様の是非の話はきっと別に良い場所があるんじゃないかな オブジェクト丸ごとぶち込む様な雑な使い方すんなって事だよ >>924-925
なるほど
確かにそうですね
ありがとうございました var constant = (any) => {
return (_) => {
return any;
};
};
ってコードがあるんだけど
二行目のカッコの中にあるアンダーバーって何? それよりもな。一般的にアロー関数はreturnや{}を使わないもんだ
var constant = (any) => (_ => any); おっと質問に答えてなかったな。
引数は利用しませんっていう時に時々使われる変数名だ 配列から任意のオブジェクトを破壊的に削除するシンプルな方法ありますか？
lodashのwithoutはシンプルですが非破壊的です
ループとspliceを使ったらできそうですが、そんなにコードを書くならwithoutの方がいいです どのくらいのコードなら
破壊的という要件を満たさない方がいいと判断するのか書いてくれないと 非破壊でなく、何かしら変化させちゃったらみんな破壊的なんだから今回どういう条件なのか書いてもらわないと…
例えばfindIndexとdeleteで短く書くと歯抜けになるがそれでいいの？
もちろんインデックス連番になるよう詰めることも出来るが当たり前だがその分のコードは増える。
条件をだな、 lodashのwithoutの破壊的版ってことだろ
それぐらい読み取れよ へー、今見たら、lodashのドキュメントページにREPLがついてた。
つまりその場ですぐにサンプルコードを実行、
そして書き換えて実行してみることができる。
便利だな。いつからだろ 読んだがこれを破壊的にやりたい理由がさっぱり分からん。何かしらメリット出るのか？
非破壊ならvanillaでもfilter一発なのに。 許してやってくれ
ライブラリ好きの彼は破壊的という言葉を使ってみたかったんだ >>939
配列を参照している何かが他にある場合とかじゃない？ 再代入しなければ宣言をconstに出来ますし
配列オブジェクトを作り直すより維持する方がイケてると思います
lodashのpullで出来ました >>940
おいおいｗ破壊的なものがすきなわけ無いだろ >>941
イケてる感がどこに由来するのかと考えるとそういうことだと思います
広い範囲で使われる、スカラー値以外の変数に再代入するのは抵抗あります
クロージャに入り込む可能性もありますし 普通はバグりたくないから、非破壊的なものを使う。
破壊的なものを使う場合は、メソッドチェーンとかで、処理を続けたい場合だけ
ところで君ら、lodash 厨に聞くが、
日本語に翻訳したドキュメントページを作ったかね？
もし作っていなければ、早く作りたまえ！ > 破壊的なものを使う場合は、メソッドチェーンとかで、処理を続けたい場合だけ
メソッドチェーンは同じオブジェクトに対して操作するものでなければならない
という定義があるのかどうか明確じゃないし、
あんたがどういう意味で言ってるのか知らんが、
単にメソッドの連続で処理を続けたいだけなら非破壊的であってもできる
例えばこんな感じだな。メソッドの連続で処理を続けているが非破壊的
https://lodash.com/docs/4.17.5#prototype-chain
var users = [
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 40 }
];
// A sequence with explicit chaining.
_(users)
.chain()
.head()
.pick('user')
.value();
// => { 'user': 'barney' } 配列で、頭の要素内の何かを使いたくて、頭が[0]と保証されてない、ってどんだけ異常な環境で仕事してんの >>945
バグりたくないから非破壊的にするとは？
オブジェクトは普通上書きしませんし
配列オブジェクトもオブジェクトのように扱うようにするということで
バグは関係ないと思いますが・・
ローカル変数ならオブジェクトをポイ捨てするのもいいですが
公的性質を持っているオブジェクトなら上書きする方がバグに繋がると思います 配列に配列を破壊的に追加したい場合
Array.prototype.push.apply(array,array1)
とやりますが、
これと同じことをやる関数はlodashにないのでしょうか？
こういう書き方はシンプルじゃないので、
こういうのこそlodashにあって欲しいのですが見当たりません
他のやり方があるのでしょうか？ javascriptで作ってもらったウェブアプリの出来がいいかわるいか
どのあたりを見てどうやって判断すればいいんでしょうか？ >>952
いや、lodashは関数型っぽくするライブラリだから
破壊的なメソッドの方が違和感あるよ
ただの便利ツールじゃないんだからさ
そこの所は認識間違ってるので訂正しておいてね >>952 array.push(...array1)でいいじゃない
>>953 全部を見て君が素直にどう感じるか 回答ありがとうございます
>>954
関数型言語的な性質が大きいのは確かですが
破壊的メソッドも複数提供してるのでそこは是々非々では？
>>955
その書き方をすっかり忘れていました
こういう場合に使うんですね・・！
ありがとうございました chromeで画像検索結果等から、画像を自PCにダウンロードして自分のブログへ画像アップロード
というような画像アップロード簡易プログラムといったものを作成したいと思っています。
この一連の処理を一度行うプログラムの開発を試みています。
画像を右クリックすると「ブログにアップする」などみぎっクリックメニューなどを作成するのが目標です。
PHPで自分のブログに画像をアップロードする、というものは一応できたのですが、
chromeで画像のURLを取得するといった、
ブラウザ上の処理はjavascriptと思うのですが、
javascriptでもしURLを取得できたとしても、PHPの側に変数をどう受け渡せばよいのか
調べてもはっきりわからない状態です
そもそもの言語も大体javascriptとかPHPあたりでよいと思うのですが、
どうすればうまくいきますでしょうか…。 >>958
いえ、認められているフリー素材のみです！！
javascriptでサーバーにアップロードうんぬんというそういうものは出来ないし、
PHPでブラウザ上のものを色々操作したりデータ取得等できないし、
ここをどう融合するのか…という
クリップボードを利用して変数の出し入れ、など思ったのですが
そこもよく分からず・・
しかし、画像右クリック、デスクトップ等に保存、
それぞれの自分のブログで画像アップロードボタン系を押して、画像を選択して、
などここは絶対にプログラミングの知識がすごく使える場面だと思うのですが…。 //JS側
fetch('PHPのURL', {
method: 'POST',
mode: 'cors',
body: new URLSearchParams({url: '画像のURL'}),
});
//PHP側
header("Access-Control-Allow-Origin: *");
$_POST['url']; //これが画像URL >>953
変数名や関数名に一貫性があるかとか
複雑なプログラムのデザインが正解かどうかなんてプロでも簡単にはわかんない
メンテしやすいかどうかとかムード。 javascripter()らしいお粗末な回答どうもｗ http://webings.net/js/dentaku/
このソースコードのjavascriptの部分の流れが良く理解出来ません
1.
if(val >= 0 && val <= 9) { // 電卓に表示する数列を作成
if(flag == 0) {
disp = val;
disp2 = "0";
flag = 1;
}
else {
disp = disp + val;
disp = parseFloat(disp);
}
数字のボタンを押した際の処理内容はここですよね？
どうして129と連続で入力した際は出力に129と出るのですか？
何故毎ループでdispが1→2→9と上書きされていかないのですか？
2. else {
if(disp) の部分
if(disp)は何を判定してるのですか？
switch(flag)で計算内容を判定していますが、このflagは、このあとの処理の
if(val == "＝") {}で設定されるのではないのですか？
質問多くて申し訳ないですがよろしくお願いします >>957-959
スクレイピングは、Ruby で、Selenium WebDriver を使う。
静的なページなら、Mechanize
ブラウザで、ページの画像を右クリックすると、画像のURL がわかるとかは、
ブラウザのプラグインを使わないと無理だろ >>963
こういう、1行ずつ説明していない、日記のような、
他人に教えていない、サイトを見たらダメ
他人のプログラムを解析するのは、自分で書いていないから、やたらと時間が掛かるし、
その割には、自分で書いていないから、いくら分析しても、自分の力が向上しない
他のサイトを見て、1行ずつ自分で書いて、実行して確かめながら、勉強すべし 下のコードを実行するとnが9000超えると
Uncaught RangeError: Maximum call stack size exceeded
というエラーがでるのですがどうすればいいのでしょう?
7万回くらい回したいんですが。。。
var locateBalls = (n, array, func, ) => {
if (n > 8900) {
//console.log(balls)
return balls;
} else {
//console.log("n: "+ n)
//console.log("x: " + ball.x + " y: "+ ball.y)
return locateBalls(n+1, func(), func);
}
}
locateBalls(0, balls, createBall) >>963
dispっていうのはおそらくdisplayの略
画面に表示されている文字列
valっていうのはおそらくvalueの略
現在入力した文字
> disp = disp + val;
文字と文字を+すると、くっつく。
例えば "a" + "b" だと"ab" になる
よってこの行で、画面が "1" で入力が "2" だと
dispには"12" がはいる。同様に"9"を押すと "129" となる
> if(disp)は何を判定してるのですか？
正直言ってぱっと見じゃ分からん。
＋−×÷押した時にdispが空になってるから
それ以外の時に処理するものなんだろうけど
なんでこんな判定になるのか。そもそも普通の電卓は画面が空白に
なったりしない。直感的でないので分からんし、
クソコード（俺ならこんなコード書かない）なんで読み解きたくもない
>>965も言ってるけど、これは自分で勉強して、こんなの作ってみましたって
だけなんで勉強には不適切 どうしても動きを知りたいならローカルで実行するとか、
https://jsbin.com/ とか https://jsfiddle.net/ とかに貼り付けて
書き換えて違いを見てみたら？ >>966
ちなみに公開とかするコードじゃないので自分の環境だけでできればいいです。 >>966
>どうすればいいのでしょう?
7万も再帰させない方法を考えればいいでしょう >>961
同意
設計まで踏み込まにゃならんからな
逆にいえば一目見ただけで判断出す奴は
歴史に残る程の大天才か、もしくは人間未満のクズ >>966
JavaScript には、末尾再帰が無いのか？
末尾再帰すると、スタックに積まずに、
while loop の形に展開してくれる最適化
それか、スタックサイズを大きく設定するとか。
ただし、swap が起きて、すごく遅くなるかも >>971
出来の良さにコードの質は関係ないよ
逆にコードの質が良いことをアプリの出来が良いとは消して言わない >>972
あるがまだSafariくらいしか実装していない ecmaの仕様に入ったから末尾再帰はいずれすべてのブラウザに実装されるがあえて言いたい。
末尾再帰は甘え。
なぜ末尾再帰にするのか？
それはブラウザでループに置き換えられるから。
そんな志と抽象レベルの低いこと考えながら使うくらいなら再帰なんてやめちまえ。
再帰はアルゴリズムをスマートに書き表せるから素晴らしいのだ。
forループに変換できるかどうかは関係ない。
それが目的なら最初からfor書け。 要らないところでむやみやたらに再帰使っても可読性が落ちるだけ フォルダ内のサブディレクトリ含むすべてのファイルの列挙とか、ツリー構造扱うときは再帰使わないと逆に分かりにくい。
何でもかんでも可読性が落ちると言ってるバカは自分が理解できないから貶めてるだけ。
分からないのお前だけだよｗ コード中のハンドラ登録部分が探しにくいのですが
いい方法はありませんか？
だらだら長いメソッドチェーンになって関数単位になっているわけではないので
何で検索したらいいのか？ってなります なれると再帰による反復のほうがシンプルで読みやすいのに なれるも慣れないも再起なんて意識するようなものではないと思うがな くっだらないマウントｗ
意識しなくてよかったならわざわざ言うまでもない。
慣れなかったなら慣れればいいだけ。
それだけのこと。
俺様は賢いから慣れるもなにも意識したことなんてない！ないんだ！聞いて聞いて！誉めて讃えてーっ、てかｗｗｗ >>977
それは「再帰しなきゃできない」じゃない？
あれ？できるか、まぁ泥臭いこと書きたい初心者はほっときましょう。 >>980
そりゃ980は頭いいのかもしれないけどな
普通プログラムはじめて再帰処理ってのはこんがらかるポイントだと思うよ
自分で自分を呼ぶ？なんじゃそりゃー つってな
あと三項演算子とか正規表現 JavaなりCなりどっちだったか忘れたけど
サブディレクトリ漁りとかで再帰覚えたっけな
JavaScriptだと……なんかいい例が思いつかん
入口がJavaScriptだと再帰を勉強する材料が少ないのかも >>965
>>967
ありがとうございます
自分で1から考え直しているのですが、
var operatpr に"+"や"x"を入れた際に、
switch(operator)
とやるのは面倒くさいので、
ans = parseInt(disp) operator parseInt(disp)
みたいにする方法有りませんかね？ >>985
追記
文字列で全部連結してevalで実行するような感じです(ただ、evalは使いたくないです) 動的型付言語ウザすぎる
Int型じゃねーのかよお前死ね なんで、stringはval.toString()なのに、intはval.toInt([radix])じゃなくてparseInt(val[, radix])なんですか
統一性がない 文字列は文字列で
parseInt("0"+variable, 10)なんてキモい書き方しないとNaNになるクソ言語 >>957
あえて省いてるのかも知れんけど
もし拡張機能の使用を前提にしてるならそう書かないと答えようが無いよ >>989
parseInt("123") で 123 になるが？ｗ parseInt('123'); // int 123 妥当
parseInt('0123'); // int 123 わかる 頭が0な文字列でも第2引数省略しても8進数扱いされなくなった
parseInt('abc'); // NaN わかりたくないけど、100歩譲ってわかるとしておこう
parseInt('abc123'); // NaN クソが
parseInt(''); // NaN shine よく分からんが、abcという文字列も数値に変換しろ！
って言ってんのか？ c++やjavaで文字列値・整数値のキャストに面倒があっても許容できる
php 柔軟
js クソ jsは動的なのがそもそもゴミ
キャストが面倒くさいのもゴミ >>994
いや、数値以外の文字が入っていても
無視するほうがおかしいだろｗ っていうか、 parseInt('123abc');
これ123になるじゃん。
C言語のatoiと同じ仕様なはずだぞ？
http://hitorilife.com/atoi.php このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 42日 7時間 16分 59秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
