jQuery 質問スレッド vol.8

1Name_Not_Found2017/10/23(月) 06:31:18.14ID:???
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/

574Name_Not_Found2018/02/22(木) 19:59:44.10ID:???
>>570
まだ続けたいのか

>>573
kwsk

575Name_Not_Found2018/02/22(木) 20:31:42.67ID:???
弱くて迷いそう。ストロングナビ使いたい。

576Name_Not_Found2018/02/22(木) 20:58:23.32ID:???
>>574
詳しく言うとJS内で完結するというのは主にCSSと連携しないってことだよ
CSSからJS内の変数は読み書きできないから変数の値が○○の時に色を変えるとかはできない
data-ならCSSと連携できるがそれが必要ないなら場合はJSでいい

もともとは全部classに入れていたわけだけど、classをCSSと連携しない使い方をしてるなら
data-ではなくJS側に全部持ってこれるということ
今回がどっちに当てはまるのかはしらないけどね

577Name_Not_Found2018/02/22(木) 21:07:38.86ID:???
ん?元はclass使っていたってことは、CSSと連携したいってことでは?
しきりにWeakMapを連呼してるのは、オブジェクトが消えてもメモリリークが
起きないってことを言いたいのかもしれないけど、それはjQueryのdata()メソッドでもできること
(質問者がdata()メソッドの存在を知らなかった可能性はあるけど)


http://api.jquery.com/jQuery.data/
> The jQuery.data() method allows us to attach data of any type to DOM elements in a
> way that is safe from circular references and therefore from memory leaks.
> We can retrieve several distinct values for a single element one at a time, or as a set:

もともとclassを使っていた以上CSSと連携させたいと思うのが普通で
それをJS側に持ってこれるとは思わないな。

578Name_Not_Found2018/02/22(木) 21:29:38.74ID:???
> ん?元はclass使っていたってことは、CSSと連携したいってことでは?
ただの思い込み

579Name_Not_Found2018/02/22(木) 21:51:07.16ID:???
その理屈で言えば、WeakMapでできるというのも思い込みなわけで

580Name_Not_Found2018/02/22(木) 21:51:08.74ID:???
$(V.aaaV).attr(VclassV, VaaaV);

581Name_Not_Found2018/02/22(木) 21:52:25.33ID:???
>>579
最初はそれに気づかずに、CSSと連携できないって
指摘されて意見を変えたみたいねw

5825732018/02/22(木) 22:48:31.78ID:???
言っとくけど俺は573以降ここまでレスしてないから
それに意見を変えたって、一体どういうこと?
意見は全部573に含まれてて完結している

書いたとおり、要素とデータを結びつけるときには必ずしも要素の属性を利用しなくとも
WeakMapの方が勧められる『場合もある』と言っただけ
そしてその理由は主にセマンティクス上のもので機能の優劣を述べたつもりもない

間隔としてはグローバル変数をむやみに使うなと同じような小言
それ以上でもそれ以下でもない
大人ならすぐ他人を煽ったり話を茶化して非建設的な流れに持っていくのは辞めろ

583Name_Not_Found2018/02/22(木) 23:18:37.32ID:???
>>576
文は長いが書いてあること全然詳しくないのだが
具体的にお願いできないかな

584Name_Not_Found2018/02/22(木) 23:26:29.20ID:???
>>583
最初から意見かえたのか?

>> 438
> まだやっていたのか
> 静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる
> WeakMapを使えば良いだけ

585Name_Not_Found2018/02/22(木) 23:27:30.13ID:???
>>582
タグのclassを使う代わりに、JavaScriptの変数にしろっていう意見でOK?

586Name_Not_Found2018/02/22(木) 23:31:15.95ID:???
要するにそれを使ってスタイルを当てる、とか
カスタム要素で利用する属性である、とか
他のライブラリやモジュールから利用される、とか
第三者と共有する必要があるために、データをおおやけにする意味があるならいいが

そうでなくJSで自分自身の閉じた空間内でメモ書きがしたいだけなら
要素の属性を使うのは下品じゃないかということだろう

587Name_Not_Found2018/02/22(木) 23:37:31.10ID:???
>>585
一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには
普通要素の属性を使うもんだと考え方が狭くなってないか?ということ

それと一般的抽象的に考えて、オブジェクトとデータを結びつける効果的方法である
WeakMapをもっとどんどん使っていこうよという意見

588Name_Not_Found2018/02/22(木) 23:48:20.73ID:???
いや、class属性でやっていたものをWeakMap使えばいいっていうのが
必ずしも正しくないって話だろ。cssで使えないんだから
なんでもかんでもWeakMapで解決するような言い方をするからいかんのだ

589Name_Not_Found2018/02/22(木) 23:52:33.97ID:???
>>587
> 一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには
話がずれてるよ

要素とデータを結びつけたいなんて誰も言ってない
class属性のメンテナンスが面倒くさいって話をしてる

590Name_Not_Found2018/02/23(金) 09:21:20.79ID:???
>>588
自分はWMを使う方が良いケースもあると言っただけであって
なんでもかんでもWMでなんて一言も言っていない

>>589
それを言っちゃあそもそも論が出てきた最初の質問から5スレ後には既にずれてて
今や一般的な話になっている
そのクラスだって単にjQから利用するためのラベル付なのかもしれないしね

591Name_Not_Found2018/02/23(金) 10:09:01.97ID:???
>>589
要はsourceの意図
classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ
data-*="hoge" にしても結局は製作者の意図によるもの
ま、個々の勝手だが

592Name_Not_Found2018/02/23(金) 21:49:01.55ID:???
>>584
> 最初から意見かえたのか?

何言ってるかわからん
誰か別人と勘違いしてないか?

593Name_Not_Found2018/02/23(金) 22:05:16.07ID:???
>>587
それは一理ある

>>589
>class属性のメンテナンスが面倒くさい
それってdata君の言い分だよな

少なくとも質問者はそう思ってない
もっといい方法もあるよももっともだが質問者は断ってるしな

594Name_Not_Found2018/02/24(土) 00:51:29.52ID:???
>>590
> 自分はWMを使う方が良いケースもあると言っただけであって

それをいうなら、俺だって今回のケースでは
data-*属性をつかうと良いというだけで、
すべての場合でdata-*属性を使えなんて言っていない

つまり、俺が今回の問題に対してレスしている所に横から割り込んできて、
今回の問題とは無関係な話を始めたお前がおかしい

595Name_Not_Found2018/02/24(土) 00:52:35.74ID:???
>>593
> それってdata君の言い分だよな
質問者が言ってるよ

↓ほらね

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
> >>142
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと

596Name_Not_Found2018/02/24(土) 00:54:02.66ID:???
>>591
> classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ


その話は>>210で俺がすでにしてる

> ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
> そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねw
> whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなw

597Name_Not_Found2018/02/24(土) 05:43:09.54ID:???
>>594
自分が言いたいのはその2つのどっちが優れているかではなく、
他の有効なやり方だってあるんだし、細かな意味的なことだって重要
だからそれぞれ適材適所バランス良く使おうねということ

今回のケースにしたって情報が不足してるんだからこれが最適だとかいう回答はできないから揉めている
結果一般論的にこれまでの全ての流れを踏まえて勝手なまとめ的にそういった感想を述べたまでで
君に当て付ける気なんて微塵もないし、完全に被害妄想

598Name_Not_Found2018/02/24(土) 08:37:35.14ID:???
>>596
無理やりとかw
どちらにしてもhtmlとしては個人の単なる部類に過ぎないし、文書構造からして無意味なこと
あくまで主観に過ぎない

599Name_Not_Found2018/02/24(土) 13:22:35.91ID:???
>>595
横から失礼
data-*にしてremoveClass()の部分はどうすんの?
得体のしれないclass(相当)がある場合とない場合で

600Name_Not_Found2018/02/24(土) 13:57:38.27ID:???
>>599
話を再確認しようか?

今回の話はdata-*属性を使ったら楽に実装できるという話であって
今回の話にremoveClass()が必要か?という話を先に決めないといけない

答えを言うと今回の話にremoveClass()は必要ない

601Name_Not_Found2018/02/24(土) 13:59:08.58ID:???
今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。

今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから

602Name_Not_Found2018/02/24(土) 14:36:07.77ID:???
まあ別にremoveClassなんて簡単な処理なんだけどねw

var data = "foo foobar foo bar";
console.log(data.replace(/(^|\s)foo(\s|$)/g, ' '));

603Name_Not_Found2018/02/24(土) 14:46:41.79ID:???
こんな感じかな

$(・・・).attr('data-class', function(attr) {
 return attr.replace(/(^|\s)foo(\s|$)/g, ' ');
});

アロー関数を使えば一行

$(・・・).attr('data-class', attr =>attr.replace(/(^|\s)foo(\s|$)/g, ' '));

これ以上減らしたければjQueryプラグインを作れば良いんじゃないかな?
一応CSSには[attr~=value]というclassっぽく解釈する属性セレクタが有るから
属性を空白区切りの語のリストとして操作するプラグインは
準標準といってもいいぐらいの価値はあると思う。

604Name_Not_Found2018/02/24(土) 15:05:12.45ID:???
折角DOMTokenListが使えるclassListを使わずに
dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか
正気の沙汰とは思えんな
そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね

605Name_Not_Found2018/02/24(土) 15:16:14.32ID:???
全くシンプルじゃない
スマートフォンがスマートじゃないのと同じこと

606Name_Not_Found2018/02/24(土) 15:17:20.45ID:???
>>604
おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。
それまでjQueryを使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねw

607Name_Not_Found2018/02/24(土) 15:18:32.27ID:???
ほらねw

だから最初に今回はremoveClass()は不要っていう話をしようって
言ったんだが。

608Name_Not_Found2018/02/24(土) 15:19:18.02ID:???
今回の話はdata-*属性をつかうといシンプルにできるって話をしてるのに
話が通じないのは馬鹿だからか卑怯だからか

609Name_Not_Found2018/02/24(土) 15:22:20.69ID:???
わかった。今回の話はdata-*属性を使ったほうが
シンプルにできる。

で?

610Name_Not_Found2018/02/24(土) 15:24:55.49ID:???
で?と言われてもな

今回はdata-*属性を使ったほうがシンプルにできるから
data-*属性を使いましょう。とかしか
何が聞きたいの?

611Name_Not_Found2018/02/24(土) 15:42:42.97ID:???
599です

>>600
>今回の話にremoveClass()が必要か?という話を先に決めないといけない
ごもっとも

>>602,603
removeClass()でいいかな、わかりやすいし

612Name_Not_Found2018/02/24(土) 16:16:39.83ID:???
data-*属性を使おうっていう話は
一つのdata-*属性に複数の値を空白区切りで
入れたりはしないのでremoveClass()は単に
attr('data-name', '') でいいんだよ

いっぺんに複数の値を初期化したければ
attr({data-name1: '', data-name2: '', data-name3: ''})
という書き方もできる

613Name_Not_Found2018/02/24(土) 16:19:53.90ID:???
そういやremoveAttr()ってのもあったな
スペース区切りで同時に複数の属性を消せるようだ

614Name_Not_Found2018/02/24(土) 16:23:35.66ID:???
そうか一個しか存在しないclass属性は一つの属性に複数入れるために
スペース区切りで入れるしかないけどdata-属性は複数作れるから
そんなことしなくていいいだな

615Name_Not_Found2018/02/24(土) 19:05:36.43ID:???
>>612
それだと
> 変更の度にそこも付け加えなくてはならなくて
と変わらないぞ

616Name_Not_Found2018/02/24(土) 19:24:05.19ID:???
>>615
え?ぜんぜん違う。

classはいろんな目的で使われるから、想定外のものだって入る可能性がある
特にデザインでclassを使うのはごく普通に行われる
だから消す時に想定外のものが入っている場合どうするかという話が出てくる
data-*属性だと想定外のものは入らないのでそういった問題がない


具体的にいうと

<span class="target ?? aaa bbb ccc ・・・">というものから、
.targetのクラスという条件に当てはまるものから、aaa, bbb, cccのように
アルファベット3文字のものだけを消そうとすると面倒
removeClass()を使って全部消すと、消してはいけないtargetや??まで消える。

だけど消したいものをdata-*属性に入れていれば

<span class="target ??" data-name="aaa bbb ccc ・・・">
.targetクラスという条件に当てはまるものから、data-name属性を消すだけで
targetと??に影響をあたえること無く消したいものだけを消せる

617Name_Not_Found2018/02/24(土) 19:30:56.75ID:???
もうキチガイdata君の相手するなよ

618Name_Not_Found2018/02/24(土) 19:32:27.47ID:???
そうそう勝ち目ないんだからw

619Name_Not_Found2018/02/24(土) 20:18:35.43ID:???
>>613
引数なしはないので代わりにはならない

620Name_Not_Found2018/02/24(土) 20:19:36.85ID:???
>>616
逆に言うとライブラリの想定外のものが消せない

621Name_Not_Found2018/02/24(土) 21:04:34.07ID:???
>>461
> 次のスレタイ=マウント取りたくてウズウズしているスレ

data君がマウント取りたくてウズウズしているスレ

622Name_Not_Found2018/02/24(土) 21:24:59.31ID:???
お世話になります。
【使用しているJquery:ScrollMagic】
質問内容:setpinで要素固定、reverse:falseで固定を1度のみで指示
     最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか

よろしくお願いします。

623Name_Not_Found2018/02/24(土) 22:01:05.12ID:???
>>619
今回の話に関係ない

>>620
今回の話に関係ない

>>621
それ言ってるのお前だけだぞw

>>622
ここはjQueryのスレなのでjQueryに関係ないものは対象外

624Name_Not_Found2018/02/24(土) 22:47:46.35ID:???
いや613>619は関係あるだろw

新着レスの表示
レスを投稿する