jQuery 質問スレッド vol.8
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptでDOM用ライブラリであるjQueryのスレです。 次スレは>>950 が>>2 のテンプレ案(本スレで改善案があれば考慮)を元に立ててください このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。 jQueryを使って作る側のスレであって、こんなプラグインありませんか?と聞くスレではありません。 そういうのは自分で探してください。 ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。 JavaScriptの質問は関連スレで質問して下さい。 ■前スレ jQuery 質問スレッド vol.7 https://mevius.5ch.net/test/read.cgi/hp/1478055094/ ■関連スレ JavaScript の質問用スレッド vol.130 https://mevius.5ch.net/test/read.cgi/hp/1501503056/ ECMAScript デス 6 https://mevius.5ch.net/test/read.cgi/tech/1483332914/ JavaScript ライブラリ総合質問所 vol.5 https://echo.5ch.net/test/read.cgi/hp/1465399470/ jQuery → DOM React → 仮想DOM → DOM React では、DOMを更新しない場合に、React内の仮想DOMに問い合わせるだけ。 DOMにアクセスしない React内に、DOMのコピーを持ってる 状態を問い合わせるだけとか、DOMを更新しない場合に、 ブラウザにアクセスしないから速い >>694 それって単に変数に問い合わせたいものの 情報を持たせればいいだけだよね? >>694 状態を問い合わせるだけとか、DOMを更新しない場合に、 レンダリングされないのでDOMにアクセスしても速いよ >>696 それだけじゃあんまり意味なくて、効率的な差分更新アルゴリズムが事実上必須。 >>698 マッチポンプって感じだよねw やらなくてもいいのに仮想DOMとかいう無駄な仕組みを追加して、 仮想DOMという仕組みのせいで遅くなっちゃった、 だから遅くならないように差分更新アルゴリズムを作らなきゃ!w 最初から仮想DOMなんてものがなければシンプルで 無駄のない処理を書くことができるのに。 やっぱり馬鹿対策なのかな? 馬鹿が無駄なコードを書いてもなるべく遅くならないように する防御策が仮想DOMw >>699 > 馬鹿が無駄なコードを書いてもなるべく遅くならないようにする防御策が仮想DOMw いやこれマジこの通りだよ。 現在のDOMがどうなってるか気にしないで書けるんだから。 天才が常にありうるすべての場合のDOMの状態を把握して狙い澄ました最小限のDOM変更コードを書けるならそっちのほうが速い。 ところがいかな大企業と言えど天才のみでチームを組めないし、ライフサイクルの最後までそいつらをそのプロジェクトに縛り付けることも出来ない。 カップ麺スゲーと言ってるところにラーメン屋のラーメンには敵わないだろwと言ってるようなもん。 >>700 天才は現在のDOMを意識なんかしてねーよ その時点でずれてるんだな。 天才っていうほどでもないが普通は DOMが変化しても柔軟に対応できるように作る idやclassや属性を使うことで、実際のDOMが 変わったとしてもコードはそのままで動くようにする それは作業分担にもつながる。DOM(HTML)を書くのは ほかの人に任せることができる。同様にCSSもだな 仮想DOMを使うとプログラマがHTML相当のものを書かなければいけなくなる。 自分の担当の部分に集中できる仕組みにするのが常識だと思ってる俺に なに?天才はありとあらゆることを把握してる? アホかw 前提が間違ってるんだわ。 あらゆることを把握するのが無理だから仮想DOMが必要だって思ってるようだが こっちはあらゆることを把握しなくていいから仮想DOMは不要だって言ってるんだよ > idやclassや属性を使うことで、実際のDOMが変わったとしてもコードはそのままで動くようにする そうなってないコード山ほどあるよね? 理由は出来ないやつ気にもしないやつがたくさんいるから。 できないやつは何を使ってもできないだろ 人間の問題は技術の話の対象外だ 程度と言うものがあるだろ。 DOM直接操作に比べて仮想dom使ってるライブラリは簡単だよ。 だって宣言的に書くだけで操作しなくていいんだもの。 diffしてパッチ作って実domに反映はライブラリがやってくれる。 だからバカにウケてる。 カップ麺が低所得者層にウケるのと同じ。 それを言うならHTMLを書くだけで 画面にレンダリングされるが? プログラム一切不要 Reactの良さはDOMからセマンティクスやなんやかんや とにかくレンダリングに必須でない部分を削ぎ落としたスマートな仮想DOMを提供してくれることで もっと言えばDOMから離れたReact Nativeとかその逆輸入版のReact Native for Webが良さを体現してる > もっと言えばDOMから離れたReact Nativeとかその逆輸入版のReact Native for Webが良さを体現してる 俺に言わせれば、それらが、世界に多数存在するウェブサイトに どう適用できるの?って感じだけどな Reactは完全にオーバースペックなんだわ >>708 そもそも既存のWebサイトに適応するようなものではないということ 出発点が違うからオーバースペックとかいう話にはならない 嫁さんがちゃんとご飯作ってくれてるのにわざわざカップ麺買ってきていつ食べるか悩んでるようなもの。 でも独身には人気。そういうこと。 よく分からんけど、画面側とか作ってくれる人が別にいるのに 自分一人で画面も何もかも作っていた人にとっては Reactは便利ってことかな? 俺の嫁さんは2日に1回は平気でインスタントを晩飯として食わせるぞ jQueryがHTMLエスケープ用のメソッドを用意していない理由は何ですか? あほなのでしょうか? >>717 textってHTMLエスケープされるんですね というか当然ですね・・ 半角スペースが に置き換わらないのでしないのかと勘違いしましたが スペースはHTMLエスケープに含まれなかったです 半角スペースとnbspは別物だからな nbspは何の略かしってるか? non-breaking space、自動改行しないスペースだ 半角スペース(英単語の区切り)では一行に収まらなければ改行するが nbspだと自動改行しない。別物だ。エスケープじゃねぇ >>719 まさに望まない場所で改行されることに困って置換したのですが 「自動改行しないスペース」の意味だとは気づきませんでした ありがとうございました blurイベントはデレゲートできませんでした おそらくバブリングしないからだと思います バブリングしないイベントは全てデレゲートできないと考えていいのでしょうか? 特定のページにアクセすしたときに <div class="contents"> ... </div> の中だけ表示ってできますか? 特定の要素だけ非表示ってのはできるみたいなんですけど 質問です。 target属性が指定されていないaタグ を選択するにはどのように書けばよろしいでしょうか? a:not(:target) じゃねぇの? jQueryというよりセレクタの話 >>725 効かないようですが、記述間違ってますか? <style> a:not(:target){ border: solid 1px #000; } </style> <a href="https://www.google.co.jp/" ;>targetなし</a> <a href="https://www.google.co.jp/" ; target="_blank">targetあり</a> すいません解決しました a:not([target]) でした :targetなんていう疑似クラスあったのかと思ってしまった 一応有るけど違う意味だったな :target https://developer.mozilla.org/ja/docs/Web/CSS/:target CSS の :target 疑似クラスは、 URL のフラグメントに一致する id を持つ固有の要素(対象要素)を表します。 :target Selector https://api.jquery.com/target-selector/ 722ですけどスタイルを変更できるのはしってるんですけど visibleをnoneにするのは簡単でもきりとるのはそれ以外の全部けさないとだし ターゲットの親は残さないといけないしで簡単にやる方法ってないのかなと… すっかりアロー関数式を使うようになっていたのですが jQueryはメソッドの中でthisを使うことが多いので アロー関数式だと問題が出ます 普通の関数を書くしかないのでしょうか? コールバックにthisで渡される変数は引数でも渡されているので こっちを使うのがES6風なのでしょうか? なんでもかんでもアロー関数を使うのが間違いだと思うけどね addEventListenerでも同じ問題が有るけど そういう風にthisが変わるようなときには使わないほうが良いと思う 誰か知らないけど(w)この人も同じようなことを言ってる https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/ > 2. Callback functions with dynamic context 個人的にはアロー関数は、関数を値のように使いたいときだけにしてほしい それは大抵一行で済むものになるので () => { return n } みたいな {} とreturnを使う構文は無くしてほしいね オブジェクト指向的にthisを使うためにアロー関数を使うわけで、 イベントハンドラではtargetを使うのが普通だと思う 少なくともmdnだとメソッドでない関数に最適と書いてある。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions そうするとオブジェクト指向的にthisを使うため、って出自ではなさそうだが。 むしろ関数型的に使うためでは。 イベントハンドラではtargetを使うのが普通というのはそう思う。 >>738 その文書の"thisを束縛しない"の項目に、 >これは、オブジェクト指向プログラミングをする上で煩わしいということが分かりました。 って書いてあるよ そういや関数型に使うんならそもそもthis使わないし短く書けるくらいしか使用上の違いなかったな 別にアロー関数がオブジェクト指向に向いてるというわけでもそうでないわけでもない アロー関数はメソッド自体として使うには確かに不適切 だがメソッド中で関数を定義したりすると必要になるthat=thisなんかは不要になる 適材適所 jsbinで追加出来るjQueryのバージョンに jQuery WIP という版があるのですが、このWIPとは何の略でしょうか? >>744 作成中というような意味ですね とすると、新しいほどいいだろうと思って選んでいましたが あまり使わない方がいいのでしょうね ありがとうございました どんどん使うべきだよ 万が一問題があってもそれを報告すればいいだけだし 自分のスキル向上にもなる 良いことしか無い removeの範囲にdataを持った要素があった場合、 そのdataも解放されるのでしょうか? そこまで気になるようになったのなら自分でソース見て調べたほうが良い もし、そのdata が、削除されないオブジェクトから、参照されていれば、 必要だから、dataはガベージ(GC)されない 生きているオブジェクトからの、参照カウントが1以上あるから メモリリークするかどうか、チェックすべし 参照がなければGCされるということですか? 逆に言うとdataが含まれた要素をjQuery外から削除してしまったら メモリリークになるということでしょうか。 危険ですね? 麻薬の禁断症状は麻薬を使い続ればいいからな。理にかなっている >>752 はイかれてるんじゃないかと正直思う メモリリークなんて普段から怖がってかかるものじゃない プロジェクトを進めてきて一段落する度にちょっと確認してみるだけ それで意図しないメモリの増加があればメモリリークが起きてるのかなとなる そのときにプロファイルをとって調べればいい ただしjQueryのようなライブラリを使ってると調査の難易度が格段に増す Backbone.js は、DOM を削除した際に、そのDOMの子孫に、 イベントハンドラーがあっても削除されないから、メモリリークになるけど、 jQuery では、そういうイベントハンドラーも、自動的にすべて削除するから、 メモリリークにならないとか、何かで読んだ まあ、jQueryをデバッグ実行して、確かめて下さい >>755 イベントハンドラがメモリリークするのは何故かと言うと var element = document.getElementById('id'); element.addEventListener('click', function() { element.style.color = 'red'; },false); みたいなコードを書くと、内部のelement.styleのelementが 外側のelement.addEventListenerのelementを参照して循環参照状態になるから イベントハンドラがelementを掴んじゃってるから、elementを消すだけじゃ 循環参照になってしまうからメモリリークになる 一応今のブラウザはこの問題は解決されたことになってるが。 jQueryの場合は通常以下のような感じで書くので、循環参照することはないのでメモリリークもしない (だってそこに有るのはオブジェクトではなくただのセレクタ文字列だもの) $('#id').on('click', function() { $(this).color({color: 'red'}); // $('#id').color({color: 'red'}); }) replaceWithでも当然 dataやイベントリスナ―の処置はしてくれますよね? >>757 はい。jQueryを使っている限りメモリリークはしません >>758 jQueryは神なんですね ありがとうございました なるほど。確かにjQuery.cleanDataを呼び出しているようだな https://github.com/jquery/jquery/blob/662083ed7bfea6bad5f9cd4060dab77c1f32aacd/src/manipulation.js#L440 replaceWith: function() { var ignored = []; // Make the changes, replacing each non-ignored context element with the new content return domManip( this, arguments, function( elem ) { var parent = this.parentNode; if ( jQuery.inArray( this, ignored ) < 0 ) { jQuery.cleanData( getAll( this ) ); if ( parent ) { parent.replaceChild( elem, this ); } } // Force callback invocation }, ignored ); } jQuery.cleanData に関しては http://blog.livedoor.jp/aki_mana/archives/6919272.html > GitHub で manipulation.js のソース読めば判るとおり、結構頻繁に jQuery.cleanData() が実行されてます。 > ― jQuery.cleanData() メソッドは、data() API として独自に実装された > 「各要素と紐づけられるキー・バリューストア(メモリストア)」に対する処理なので、 > innerHTML を使う場合でも、jQuery.cleanData() を使うなら、まぁ問題無いです。 cleanDataなんていう裏メソッドがあったのですね ありがとうございます >>756 callback の中で event.currentTarget で要素を取得するように書けば 循環参照にならないのでメモリリークは防げることになるよね 連続している複数の要素をひとかたまりのjQueryオブジェクトにすることって出来ますか? それに対してreplaceWithして、その部分をごっそり入れ替えたいのです 全てがある要素の子要素なら出来ると思いますが そういうコンテナを設置せずにやりたいです >>764 複数の要素を一塊にするのが、jQueryオブジェクトの本質みたいなものだから 連続してようがしてまいが一塊にできる。 だけど連続してない場合に「どこと」入れ替えたいのかが区別つかない あなたは連続していることだけを想定しているから、どこと入れ替えても同じ結果になるので 気にしていないかもしれないけど、jQueryは連続して無くても扱えるものなので それを考慮しなければいけない で、どうするかだけど、連続する複数の要素のうち 最初の要素を入れ替え対象とし、その後の要素は消してしまえばいい (実際には処理する順番は逆にすることになるだろうけど) $('li + li').remove(); $('li').replaceWith('<li>a</li>'); これが単純でわかりやすいと思うけど、頑張れば メソッドチェーンで一行で書けるかもね >>765 なるほど〜 先頭一つを残して削除するなんて思いつきませんでした ありがとうございます あとはclass付けるとかsliceとかprevAll/nextAllとか Vanilla JSでどう実装するのか解った上で jQueryを使いたいと思うのですが そういう人のための総括的な解説をしている 書籍を探してます。 もし知ってたら教えて下さい。 >>768 そういう人のためがどういう人なのか分からんが 普通にjQueryの良書でよい コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION) https://www.amazon.co.jp/dp/4798124281 jQueryクックブック https://www.amazon.co.jp/dp/4873114683 >>769 ありがとうございます。 購読検討してみます。 jQueryを使って ある要素が何番目の要素なのかを調べるにはどうすればいいですか? あとセレクタのnth-childとかnth-of-typeが使えるかもね >>773 ありがとうございます 出来ました 要素自体が属性として持っているんじゃないかと思っていたのですが 配列の要素が配列のインデックスを持っていないように DOMの要素も自分のインデックスを持っていないのでしょうね 変数の状態をコンポーネントに反映するみたいなことを jQueryでスマートにやるにはどうするのが一番いいのでしょうか? たとえば変数の状態をドロップボックスに反映させるなど。 もちろんそういう変数を作って呼び出せば出来ますが、 なんかイケてない気がします 反映させる処理をコンポーネント自体に帰属させて呼ぶ感じにしたいです カスタムイベントでしょうか? 最近のフレームワークは 使ったことはないのでよくは知りませんが 変数とコンポーネントの紐付けもやってくれてる感じがします 似たようなことをjQueryでやるにはどうすればいいのでしょうか ×そういう変数を作って ○そういう関数を作って でした 追加で質問です。変数とコンポーネントの紐付け jQueryなどのJavaScriptライブラリやフレームワークを 使わない場合はどうやるのでしょうか? その方法があるとして、jQueryにも応用できますか? >>780 リテラルとは何のことでしょうか >>781 別人ならもっと別人らしく書いてください >>782 ありがとうございます 読んでみます >>782 の記事を読んでいますが 未知のパラダイムの洪水で混乱してきました 素直にデータバインディングライブラリの勉強した方がいいパターンですねこれは・・ だからそう言ってるだろ… でもデータバインディングライブラリはいっぱいありすぎて逆に迷うな。 ある程度高機能になったらそこまでやるならもうvuejs使えよってなっちゃうからそれよりシンプルかが判断の分かれ目か。 https://github.com/gwendall/way.js/ とかどうかね?あとrivets.jsとか… >>785 確かに単機能でシンプルな方がいいですね 見てみます ありがとうございました 以下のような、横に伸びるtableのtdで同じ文字列が連続した場合 colspanでセルを結合するロジックを組みたいのですが どのようにすれば実現できるか悩んでおります <table> <thead> <tr> <td>2018</td> <td>2018</td> <td>2019</td> </tr> </thead> </table> ↓以下のように同データをcolspanとして結合するロジックが作りたいです なおデータはソートされております。 <table> <thead> <tr> <td colspan="2">2018</td> <td>2019</td> </tr> </thead> </table> よろしくお願いします >>787 過去スレに似たような話が出たけど なに? コピペ? また同じ話したいの? $('td').each (function() { var prev = $(this).prev(); if ( prev.text() === $(this).text() ) { var num = prev.attr('colspan'); // 3連続以上にも対応 num = num ? parseInt(num) + 1 : 2; $(this).attr('colspan', String(num)); prev.remove(); } }) データがソートされてるなら、自分と直前(兄、prev)の要素が、 同じかどうか確かめればよい 兄が自分と同じなら、兄を削除して、自分にcolspanを付ける セレクターには、id を付けて、絞り込んで下さい。 <tr> が、2行以上あると、誤動作するかも >>790 > <tr> が、2行以上あると、誤動作するかも 普通複数あるだろw 表のヘッダーだけじゃないのか? 表のデータも、1つのセルにまとめるのか? ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.1 2024/04/28 Walang Kapalit ★ | Donguri System Team 5ちゃんねる