[過去ﾛｸﾞ] Vue vs React vs Angular (1002ﾚｽ)
上下前次1-新
抽出解除 必死ﾁｪｯｶｰ(本家) (べ) 自ID ﾚｽ栞 あぼーん
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
833: (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)00:48 ID:RYW8IiyE0(1/61) AAS
同じ動作してないよね。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？ 少しは書く前に頭使ったら？
そんなにjQueryよりもVueの方が長くなることが許せないの？
事実を受け入れようよｗ
835: (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)00:58 ID:RYW8IiyE0(2/61) AAS
> なんでjQueryの動作を真似ることが前提なんだよ
お前言ってることがおかしい。
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
これと同じことを実現するという話で、
これというのは、.my-component（クラスなのだから当然）中の [name="switch"]'からの
イベントで.my-component に active クラスをつけるというものなんだから、
最低限の条件を満たしてない
836: (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)00:58 ID:RYW8IiyE0(3/61) AAS
訂正
これというのは、.my-component（クラスなのだから当然複数ある）中の [name="switch"]'からの
837: (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)01:00 ID:RYW8IiyE0(4/61) AAS
.my-component（クラスなのだから当然）中の [name="switch"]'からの
イベントで.my-component に active クラスをつける
というお題で、複数対応していなければ突っ込まれるのは当たり前だし
お題を満たせばVueのコードはこんなに長くなる。
Vue.component('my-component',{
template:`
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">{{val}}
</div>
`,
data:function(){
return{
isActive:false
}
},
props:["val"]
})
new Vue({el: '#app'})
838(3): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)01:02 ID:RYW8IiyE0(5/61) AAS
しかもこれ
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">{{val}}
</div>
という固定のDOM構造にしか使えないので
jQueryよりも劣っている
jQueryだとHTML（DOM構造）を自由に変更できる。
以下のどのように変更しようとも、JavaScriptのコードは変更の必要はない
<div class="my-component">
<input type="checkbox" name="switch">switch1
<p>ここはswitch1です</p>
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch2
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch3
<img src="かっこいい画像.gif">
</div>
840: (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)01:04 ID:RYW8IiyE0(6/61) AAS
>>838の実際に動くコードはこちら
外部ﾘﾝｸ:jsfiddle.net
これと同じことをVueで実現するコードは
更に長くなる
848(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)07:00 ID:RYW8IiyE0(7/61) AAS
>>842
> できる。scopedでググるか、詳しくはvueの公式見よう。
scopedは、コンポーネントだけで使えるCSSであって
外部からの影響を受けないようにするものじゃないよ
素人かよｗ
> そこは結びつかなきゃ困るんだよ。リアクティブなんだから。
理由は？ｗ
849(2): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)07:01 ID:RYW8IiyE0(8/61) AAS
>>845
> 両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。
jQueryの動くコード
外部ﾘﾝｸ:jsfiddle.net
Vueの動くコードはでてない。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなる
というクソコードしか出てない
850: (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)07:05 ID:RYW8IiyE0(9/61) AAS
リアクティブなんだから！（自分で言っていて意味わかっていない）
↑ぷぎゃーｗ
851(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)07:06 ID:RYW8IiyE0(10/61) AAS
> nameがv-modelになるだけだよ？何がそんな嫌なのさ？
デザイナーの世界にないVue（JavaScript）専用の概念を
持ち込むことだね。
853: (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)07:18 ID:RYW8IiyE0(11/61) AAS
Vueのコンポーネントだけが
正しいコンポーネントだとか
恥ずかしいよ？
855(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)07:26 ID:RYW8IiyE0(12/61) AAS
jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
単にHTML（DOM）の構造によって形作られたものに過ぎない。
専門用語ではなく、単なる英語としてのコンポーネント
この場合のmy-componentというのは、my-componentというクラス名から始まり
内部にname="switch"があるというコンポーネント
my-componentの条件はこれだけだから、DOMの構造はHTMLを修正するだけで柔軟に変更できる。
デザイナはこの条件を守っている限りHTML（CSS)を変更し自由にデザインできるし、
プログラマもデザインが変わってもJavaScriptコードを変更する必要がなくなる。
デザイナの担当とプログラマの担当、つまり修正するファイルが明確に分かれているのも良い
どちらも自分の担当するファイルを自由に変更できるから分業することも容易になっている
856(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)07:29 ID:RYW8IiyE0(13/61) AAS
>>854
いや、常識的な仕様を守ってないからクソコードって言ってるんだよｗ
new Vue({
el: '#app',
data: {isActive:false},
})
これだけでできると言ったくせに
<div id="app">
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">abc
</div>
<input type="checkbox" v-model="isActive">abc ←ここを押しても反応する
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">abc ←ここを押したら全部反応する
</div>
</div>
はい、Vue側のコード。これだけって言ったんだから、これだけでやってみせろやｗ
外部ﾘﾝｸ:codepen.io
857(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)07:45 ID:RYW8IiyE0(14/61) AAS
ここで（HTML側を自由変更できないとはいえ）複数置いても問題ないコードを
書いてるから常識的な仕様ぐらい理解してると思うんだよねｗ
外部ﾘﾝｸ:codepen.io
でもそれだとVueの方がjQueryよりも大幅に長くなっちゃったから
これだけでできる！（←まともに動かない）
と騙そうとしたんだろうね。
でもバレちゃったｗ
872: (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)10:53 ID:RYW8IiyE0(15/61) AAS
>>870
それが必要なのはXHTML。HTML5では、/>は許容されるが
タグを閉じるという意味はなく単に無視されるという扱い。
873(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)10:53 ID:RYW8IiyE0(16/61) AAS
もう一回載せようか？ はやくこれだけで作って欲しいんだが
>>854
いや、常識的な仕様を守ってないからクソコードって言ってるんだよｗ
new Vue({
el: '#app',
data: {isActive:false},
})
これだけでできると言ったくせに
<div id="app">
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">abc
</div>
<input type="checkbox" v-model="isActive">abc ←ここを押しても反応する
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">abc ←ここを押したら全部反応する
</div>
</div>
はい、Vue側のコード。これだけって言ったんだから、これだけでやってみせろやｗ
外部ﾘﾝｸ:codepen.io
876(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)11:30 ID:RYW8IiyE0(17/61) AAS
>>875
嘘はいかんよ
Vue.component('my-component',{
template:`
<div class="my-component" :class="{active:isActive}">
<input type="checkbox" v-model="isActive">{{val}}
</div>
`,
data:function(){
return{
isActive:false
}
},
props:["val"]
})
new Vue({el: '#app'})
VueのJavaScriptの中にHTMLが埋め込まれてしまってる
879(2): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)11:47 ID:RYW8IiyE0(18/61) AAS
> 何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。
だったら分離してくださいよ。
"分離できるぞ" と言ってるからには、今のコードは分離されてないってことでしょ
それをしないのは、分離すると余計に長くなるってことなんでしょ？
881(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)11:48 ID:RYW8IiyE0(19/61) AAS
>>878
> それにjQueryでもコンポーネント化しようとすればテンプレートの埋め込みになる筈です
ならない。なんのためにHTMLにテンプレートタグ <template> が出来たと思ってるんだ？
883(3): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)11:53 ID:RYW8IiyE0(20/61) AAS
>>882
これがjQueryのコードなんだが
どこが結びついてるの？
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
886(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:03 ID:RYW8IiyE0(21/61) AAS
>>885
> それはテンプレートの置き場を変えただけです
だからお前がjQueryだと埋め込むしか無いっていったから、
置き場を変えてやったんだろうが
置き場を変えることでデザイナが自由にHTMLを変更できるようになる
プログラマは、中身がどう変わろうが意識する必要がなくなる
これが分業だろうが
888(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:05 ID:RYW8IiyE0(22/61) AAS
>>885
> 異なるページでコンポーネントを再利用する場合を考えれば
お前まさか、デザイナがページのヘッダとかフッタを
共通化せずにページごとに全部書いてると思ってるのか？
失礼だろｗ
891(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:07 ID:RYW8IiyE0(23/61) AAS
>>889
> たった数行の修正だし簡単だからトライしてみなって。それを見て意見出し合おうや。
えとさ、なんでお前の利益になることを俺がしないといけないの？ｗ
892(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:08 ID:RYW8IiyE0(24/61) AAS
>>890
> そのコードと<div>の中身がべったり対応してるじゃん
<div>の中身がべったりってどういうこと？
divの中身はいろいろ変えられるんだけど？
そもそもdivである必要すらない
895(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:17 ID:RYW8IiyE0(25/61) AAS
>>893
Vue(MVVM)ならばそのような仮定は全く必要ありません
代わりにHTMLを直接書き換えるからです。
HTMLにコードがべったり結合してしまっています
897(2): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:18 ID:RYW8IiyE0(26/61) AAS
>>894
> スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない？
DOMのクラスやセレクタを使わないでやるなら
HTMLに直接React用のコードを埋め込むしか無いやんｗ
900(3): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:23 ID:RYW8IiyE0(27/61) AAS
>>896
jQueryプログラマ「この動きがほしい所に my-componentというクラス名をつけてください」
デザイナ「はいわかりました。昔からあるLightBoxみたいなやつですよね。
aタグに特定の属性をつけるだけで画像のポップアップができて簡単ですよね」
901(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:24 ID:RYW8IiyE0(28/61) AAS
>>899
> あなたの最初の主張は完全に理を失いました
意味わからん。逆だろ
お前がjQueryでもコードの中にHTMLを埋め込むしか無い！って
jQueryを貶めようとしたから、それは間違いって言ってるんだが。
俺がいつjQueryの理だといったよｗ
マッピポンプしてるんじゃねーよ
903(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)12:26 ID:RYW8IiyE0(29/61) AAS
>>902
評価してやるからグダグダ言ってないでかけや
913(1): (ﾜｯﾁｮｲ 1f14-uGU8) 2019/03/09(土)13:28 ID:RYW8IiyE0(30/61) AAS
まだVue側のコードは出てないのか
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.231s*