Vue vs React vs Angular

2018/12/21(金) 21:37:36.86

実際どうなん？
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/

VIPQ2_EXTDAT: default:vvvvv:1000:512:----: EXT was configured

2019/03/08(金) 19:37:01.18

見ての通りjQueryだと、HTMLがJavaScriptに全く汚染されていない。
JavaScriptの臭いがないクリーンなHTMLなんだよ。だから分業ができる。

<div class="my-component">
　<input type="checkbox" name="switch">switch1
</div>

Vue使ったら、HTMLが謎の汚染（HTML書いてる人には意味不明なもの）が発生し

1. :class="{active:isActive}"
2. v-model="isActive"

HTMLコードはJavaScriptファイルに移動してしまうし、
上のコードだけじゃ足りないから

　data:function(){
　　return{
　　　isActive:false
　　}
　},
　props:["val"]

というコードが追加で必要になるし。
もちろん .my-componentと結びつけるために
Vue.component('my-component',{
という一行が必要になるし、HTMLはmy-componentとかいうHTML書いてる人は知らないタグを使うように強制され
属性が名前になるんですよーとか、新たなルールを押し付けられることになってる。

2019/03/08(金) 19:39:05.43

>>812
> で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。

普通に再利用できてるんだが？
そもそもjQueryのコードは状態を保持していない。

わかるか？jQueryのコードには状態がない。
状態は、HTMLのタグに存在している。

だからHTMLのタグの分だけインスタンスが存在しているようなもので、
普通に再利用できる。

2019/03/08(金) 19:43:49.07

Vueの場合、コンポーネントが状態を持ってしまってる。
isActiveという変数のことな。

状態を持ったisActiveを共有することは出来ないから、
新た無いHTMLのタグを作らければいけなくなってしまっている。

そしてisActiveという事実上のローカル変数を参照するために、
JavaScript側でHTMLを書くしかなくなってしまっている

HTMLがガッツリJavaScriptと結びついてしまっているわけだ

2019/03/08(金) 20:00:52.98

>>815
どこから突っ込めばいいんだ。。

> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。

コンポーネントは状態持つものだよ。いや認識の相違とかじゃなく普通に。そして隠蔽されるべきもの。

> 状態を持ったisActiveを共有することは出来ないから、

普通に参照できる。

> そしてisActiveという事実上のローカル変数を参照するために、
> JavaScript側でHTMLを書くしかなくなってしまっている

単一ファイルコンポーネント。

> HTMLがガッツリJavaScriptと結びついてしまっているわけだ

まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。

2019/03/08(金) 20:09:37.29

いいよ、もう少し分かりやすい質問しよう。
コンポーネントの要素として、簡単にテンプレート、css、jsがあるとしよう。3つ合わせてコンポーネントね。これらは外部から容易に参照できてはいけないし、干渉されてはいけない、複製も容易でないとダメ。
君のやり方で、my-componentをどうコンポーネント化するのか例示して欲しい。

2019/03/08(金) 20:19:23.19

わかった

Delphi使え

2019/03/08(金) 20:35:47.91

>>817
何が言いたいのかわからん。

CSSで div { color: red } って書いても
影響を受けないようになんて、Vueでもできないだろ

2019/03/08(金) 20:36:44.19

>>816
> まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。

jQueryでは結びつかない。

<div class="my-component">
　<input type="checkbox" name="switch">switch1
</div>

↑どこにjQuery関連のものがあるか言ってみな

2019/03/08(金) 20:43:00.51

> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。

訂正

Vueの場合、JavaScriptのコードが状態を持ってしまってる。
isActiveという変数のことな。

だからDOMとJavaScriptのインスタンスを一対一で
紐付けなければならなくなってる。密接に結びついている。

jQueryの場合JavaScriptのコードでは状態を持たないから、
DOMが一つだろうと複数だろうが、処理を共有化できる。

2019/03/08(金) 21:16:27.20

デザインやUI・UX、インタラクションが実装できないクソエンジニアどもがギャーギャー騒いでる
お前ら自分の無能さを披露して恥ずかしくねえの？

フロントやるならデザイン込みでUIくらいやれや
クソみたいなUI作ってんじゃねえよ

2019/03/08(金) 21:19:25.25

餅は餅屋

2019/03/08(金) 21:31:02.59

ただいまー。という訳で最初の質問の答えアップだよ。
https://codepen.io/hinoragi/pen/jJmzJG
なんの質問か忘れてるだろうから、君の763の質問引用するよ。

>jQueryの方が少ないですね。
>嘘だと思うならこれ同じことを実際に動くのに必要な分、書いてみてください。
>$('.my-component [name="switch"]').change(function() {
>　$(this).closest('.my-component').toggleClass('active', this.checked);
>});
http://jsfiddle.net/tk5yvs3g/

で答えがこれね。

new Vue({
el: '#app',
data: {isActive:false},
})

どう？まあこんな短いサンプルで比較するのもどうやねんってのは分かるけど質問にはちゃんと答えたよ。
html含めても確実にvueの方が少ないよね。
あと少しはvueやreact勉強しようよ。こんな短いサンプルの初期化方法すら知らなかった訳で、知らないからって全力否定するのはどうなのって思うぞ。

2019/03/08(金) 21:36:39.46

デザインできてUIUXできるようになれば引く手数多だぞ
ほんとフルスタックはほとんどいないから
年収は最低でも1000万はいく

2019/03/08(金) 21:40:42.36

静的なWebページがあってそこにちょっと動きを付ける程度ならjQueryがお手軽。まぁそうだな。

2019/03/08(金) 22:04:03.93

>>824
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？少しは書く前に頭使ったら？

2019/03/08(金) 22:19:01.08

行数連呼しといてそりゃねえだろ

2019/03/08(金) 22:29:51.19

やっとReduxがちゃんと分かってきた

けどActionって関数にする必要ってなんのためなの？
constの定数でもいいような気もするんだけど

2019/03/08(金) 23:22:07.35

まさか知らないで叩いてたとはなぁ

2019/03/09(土) 00:19:50.47

UIUXが複雑化すればデザインと密接になり、デザインがやるべきことになる
昔ながらのショッピングカートならそうでもないかもしれんがｗ

2019/03/09(土) 00:31:16.43

>>827
> my-componentの外に、置いたinputでも動くし、
> my-componentを複数置いたら、おかしくなるし、
> お前馬鹿なの？少しは書く前に頭使ったら？

君は本当成長ないね。過ちは認めようよ。俺は君の質問に的確に答えたよ。同じ動作をするより短いサンプルだろ。その返しがこれって、そんなに負けが認められんか。だから駄目なんだよなあ。。

あと批判するなら少しはvueやreact勉強してから述べような。俺もまさかど素人が批判してるとは思わなかった。当然ある程度は知ってて、それ故に批判すると思うじゃん常識的に考えてさ。そこはすまん。思い至らなかった。次からはスルーするよ。おやすみぃ。

2019/03/09(土) 00:48:24.43

同じ動作してないよね。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？少しは書く前に頭使ったら？
そんなにjQueryよりもVueの方が長くなることが許せないの？
事実を受け入れようよｗ

2019/03/09(土) 00:53:19.31

なんでjQueryの動作を真似ることが前提なんだよ
言ってることめちゃくちゃじゃん

2019/03/09(土) 00:58:02.98

> なんでjQueryの動作を真似ることが前提なんだよ

お前言ってることがおかしい。

$('.my-component [name="switch"]').change(function() {
　$(this).closest('.my-component').toggleClass('active', this.checked);
});

これと同じことを実現するという話で、
これというのは、.my-component（クラスなのだから当然）中の [name="switch"]'からの
イベントで.my-component に active クラスをつけるというものなんだから、
最低限の条件を満たしてない

2019/03/09(土) 00:58:26.63

訂正

これというのは、.my-component（クラスなのだから当然複数ある）中の [name="switch"]'からの

2019/03/09(土) 01:00:24.50

.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'})

2019/03/09(土) 01:02:17.14

しかもこれ

　　<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>

2019/03/09(土) 01:02:49.95

こんなところにクソコードベタ貼りしてないでCodesandboxで動くソースでも書いてからリンク貼れよ

2019/03/09(土) 01:04:30.20

>>838の実際に動くコードはこちら

http://jsfiddle.net/rhp9dvya/

これと同じことをVueで実現するコードは
更に長くなる

2019/03/09(土) 01:11:28.76

はっきり言うけどさ
中のinputまで丸ごとコピペしないと動かないコンポーネントとかコンポーネントじゃねえよ
jQueryならDOM構造は気にしなくて良かったんじゃないのか

2019/03/09(土) 01:36:21.59

最後にまとめて答えとくよ。

>>819
> 何が言いたいのかわからん。
> CSSで div { color: red } って書いても
> 影響を受けないようになんて、Vueでもできないだろ

できる。scopedでググるか、詳しくはvueの公式見よう。

>>820
> jQueryでは結びつかない。
> <div class="my-component">
> 　<input type="checkbox" name="switch">switch1
> </div>
> ↑どこにjQuery関連のものがあるか言ってみな

そこは結びつかなきゃ困るんだよ。リアクティブなんだから。いちいちon changeイベントの記述なんぞしたくないもの。ねえ、このサンプルで言えばさ、nameがv-modelになるだけだよ？何がそんな嫌なのさ？

**デフォルトの名無しさん** (ｱﾒ MMdb-cVal) · 2019/03/09(土) 02:04:13.30

jQueryの人頑張ってるみたいだけど
jQ

2019/03/09(土) 02:07:07.23

>>838

> という固定のDOM構造にしか使えないので
> jQueryよりも劣っている

これが大いなる勘違いなんだがもう説明しない。いいから学べ。

> jQueryだとHTML（DOM構造）を自由に変更できる。
> 以下のどのように変更しようとも、JavaScriptのコードは変更の必要はない

これアンチパターンで混乱の元。カプセル化できないコンポーネントなんぞ不安で使えたもんじゃない。セレクタの影響範囲が広すぎて便利なつもりになってるだけ。将来的なデスマーチが約束された最も最悪な例だと気いて欲しい。

2019/03/09(土) 02:21:00.49

あとさ、いいからjQuery君はスレタイ読もうついでに空気もね。
ココはvue react angularスレだよ。公式のサンプル一つも試した事ないのバレてるのよ？？なのにどうやって比較してるの？妄想じゃんそれ。
両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。そしたら俺もキチンと答えるよ。間違ってたら謝るし。俺もjQueryは散々世話になったから嫌いじゃないのよ？

2019/03/09(土) 02:50:20.05

ただ単に覚えたくないんだよ
新しい言語を　
jQueryは

2019/03/09(土) 03:10:54.41

女子更衣室に堂々とチン入してきて延々巨根自慢をする粗チンバカ

2019/03/09(土) 07:00:21.97

>>842
> できる。scopedでググるか、詳しくはvueの公式見よう。

scopedは、コンポーネントだけで使えるCSSであって
外部からの影響を受けないようにするものじゃないよ
素人かよｗ

> そこは結びつかなきゃ困るんだよ。リアクティブなんだから。
理由は？ｗ

2019/03/09(土) 07:01:33.11

>>845
> 両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。

jQueryの動くコード
http://jsfiddle.net/rhp9dvya/

Vueの動くコードはでてない。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなる
というクソコードしか出てない

2019/03/09(土) 07:05:56.25

リアクティブなんだから！（自分で言っていて意味わかっていない）

↑ぷぎゃーｗ

2019/03/09(土) 07:06:59.38

> nameがv-modelになるだけだよ？何がそんな嫌なのさ？

デザイナーの世界にないVue（JavaScript）専用の概念を
持ち込むことだね。

2019/03/09(土) 07:17:14.04

だからおかしくて当然なんだって
勝手にコンポーネントと名乗ってるだけでそれコンポーネントじゃないから
ただのjQuery特有の動作だから

2019/03/09(土) 07:18:18.22

Vueのコンポーネントだけが
正しいコンポーネントだとか
恥ずかしいよ？

2019/03/09(土) 07:22:27.20

でもあなたはjQueryの正しいコンポーネントが再現出来ないからクソコードって言うんでしょ
恥ずかしくないの？

2019/03/09(土) 07:26:00.83

jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
単にHTML（DOM）の構造によって形作られたものに過ぎない。
専門用語ではなく、単なる英語としてのコンポーネント

この場合のmy-componentというのは、my-componentというクラス名から始まり
内部にname="switch"があるというコンポーネント
my-componentの条件はこれだけだから、DOMの構造はHTMLを修正するだけで柔軟に変更できる。

デザイナはこの条件を守っている限りHTML（CSS)を変更し自由にデザインできるし、
プログラマもデザインが変わってもJavaScriptコードを変更する必要がなくなる。
デザイナの担当とプログラマの担当、つまり修正するファイルが明確に分かれているのも良い
どちらも自分の担当するファイルを自由に変更できるから分業することも容易になっている

2019/03/09(土) 07:29:39.24

>>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側のコード。これだけって言ったんだから、これだけでやってみせろやｗ
https://codepen.io/anon/pen/BbZNVM

2019/03/09(土) 07:45:09.02

ここで（HTML側を自由変更できないとはいえ）複数置いても問題ないコードを
書いてるから常識的な仕様ぐらい理解してると思うんだよねｗ
https://codepen.io/hinoragi/pen/YgVQjK

でもそれだとVueの方がjQueryよりも大幅に長くなっちゃったから
これだけでできる！（←まともに動かない）

と騙そうとしたんだろうね。
でもバレちゃったｗ

2019/03/09(土) 08:07:35.93

>>848
アホはお前だろう。。もう少しよく読んで意図把握しよう。
あとやっぱり君はリアクティブ自体理解できてないのがよくわかる。だからもう少し公式読め。

2019/03/09(土) 08:10:00.82

>>849
ほら
自分が書けないからそうやって逃げる。全く進歩しない。分からない事は否定するだけ。いいから自分で勉強証明しなって。見ててやるからさ。

2019/03/09(土) 08:10:39.68

提示された例がコンポーネントじゃないから当然なんだって
inputが中に２つあっても動いちゃうし無かったら役立たずのmy-componentが残るだけ
綺麗にコピペしないと動かないなんて常識的なコンポーネントの仕様を守ってないよね

2019/03/09(土) 08:16:51.61

>>857
なあ自分で言ってて悲しくならない？
new Vueすら知らない事バレてるんよ君w。俺はもう説明しない。基本すら自学できない奴に教える価値無い。

2019/03/09(土) 08:24:01.30

>>855

> jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
> 単にHTML（DOM）の構造によって形作られたものに過ぎない。
> 専門用語ではなく、単なる英語としてのコンポーネント

無知極まってるぞ。勝手に定義するな。マジで少し勉強して。そんな俺様定義だからあんな再利用できない紛いモノ書くんだよ。

2019/03/09(土) 08:28:42.54

だああ、色々言いたいが出社だ。
いいかiQuery君。君はまずスレチだ。そこをまず理解しろ。
その上で書くならせめてjQueryとvue react angularのどれか、2つのコードを比較しながらjQueryの良さを語れ。
それがここに書き込む最低の礼儀じゃね？

2019/03/09(土) 08:37:47.27

最後にもう一回言うぞ。
jQueryのコード置くだけで「だからvueだめなんだよ」コレ止めろ。
基礎だけでもVueを勉強してから発言するのが筋だぜ。でないと話が通じないから困るんだよ。ほらココvueのスレでもあるし。

2019/03/09(土) 09:14:15.58

>>849
かっこいい画像.gifくらいちゃんと用意しろよ

2019/03/09(土) 09:18:13.96

>>851
デザイナーは巣のhtmlだけ書いてくれりゃいいよ
実環境にコードをマージする作業はこっちでやるし

2019/03/09(土) 09:19:00.94

これは素晴らしい煽り合いだな
お互いコードでやりあうとか
勉強になります

2019/03/09(土) 09:20:39.95

多分、「jQueryで十分」って主張してる人は、結局SPAの概念が習得出来なかった、あるいはする気のない人じゃない？

最新のフロントエンド開発について行けないから、新しい物の価値を否定して、
自分の相対価値が下がって行くのを阻止したいんじゃないかと。

今後SPAがどうなるかなんて分からないけど、少なくとも新しい事に挑戦もせず、勉強もせず、
自分が理解出来る古い技術にばかりすがるのは、正直エンジニアとしては失格だと思うよ。

そういった人が今すべき事は、不真面目な自分を戒めて勉強に励むか、
あるいはエンジニアとしての死を素直に受け入れて、別の道を模索するかのどっちかにしたらいいんじゃないかと。

2019/03/09(土) 09:22:15.82

スレチだし
ライブラリとフレームワークを比較する具合が香ばしさ

2019/03/09(土) 09:23:51.52

>>856
独立タグはちゃんと閉じろよ性格の雑さが出てるぞ
<input />

2019/03/09(土) 09:29:59.29

jQueryはデザインの物理的な構造にプログラムが強く依存してしまうから生産性が低い
プログラムがデザインの物理的な構造に依存することを知ってるからデザインも安易に作れない(プログラムから扱えるようにするために物理的な制約が生まれる)

VueはVMを使ってロジックとデザインを明確に分離してるのでそういった不都合はかなり軽減される
全くないとは言わないがね

2019/03/09(土) 10:53:00.46

>>870
それが必要なのはXHTML。HTML5では、/>は許容されるが
タグを閉じるという意味はなく単に無視されるという扱い。

2019/03/09(土) 10:53:39.13

もう一回載せようか？はやくこれだけで作って欲しいんだが

>>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側のコード。これだけって言ったんだから、これだけでやってみせろやｗ
https://codepen.io/anon/pen/BbZNVM

2019/03/09(土) 11:15:35.75

素人w

2019/03/09(土) 11:19:10.07

Vue(というかMVVM)の素晴らしいところはjavascript側はhtml/css側がどうなってるのか知らなくてもいいところ
そしてhtml/css側はjavascript側がどうなっているか最小限の知識で済むこと

jQueryではお互いがお互いに対する知識を多く必要としているため結合が非常に強くなってしまう
これでは分業は難しい

2019/03/09(土) 11:30:18.17

>>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が埋め込まれてしまってる

2019/03/09(土) 11:43:48.95

>>873
馬鹿野郎。。。それは最初のv-bindとv-modelのサンプルだろうが。
コンポーネントはこっちだ。
https://codepen.io/hinoragi/pen/YgVQjK
何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。

んでさ、修正点があるなら自分で書けばいいじゃない。別に複雑なコードじゃない。たった数行だぜ？コードに異論があるならコードで示す。当たり前だと思うがjQuery君は違うのかな？
それすら出来ず、vueが分からないからオウム返しのようにクソ呼ばわりする。それただのバカって言うんだよ。いい加減自覚しろ。

君に少しでもプライドがあるなら、君の思ったとおりに動作するvueのコード上げてみな。時間はかかってもいいからさ。

2019/03/09(土) 11:45:53.12

>>876
埋め込んだのだからそれは仕方ないでしょう

ちなみに私はVueの真の利点はMVVMによるViewとViewModelの分離であると考えています
世の人々はコンポーネント志向に興味を惹かれているようですがそれはオマケです
私はVueを使ったとしてもhtml/cssとjsを同居させることはありません

それにjQueryでもコンポーネント化しようとすればテンプレートの埋め込みになる筈です
埋め込みを拒否した場合はhtmlのコピペになるでしょう
その点についてはVueもjQueryも同じことです
なので問題はVueではなくコンポーネント志向の方にあることがわかります

2019/03/09(土) 11:47:01.74

> 何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。

だったら分離してくださいよ。
"分離できるぞ" と言ってるからには、今のコードは分離されてないってことでしょ
それをしないのは、分離すると余計に長くなるってことなんでしょ？

2019/03/09(土) 11:47:56.22

Vue, React は、コンポーネント指向。
デザイナー・プログラマーの分業体制

jQuery は、そういう観点ではない！

2019/03/09(土) 11:48:33.65

>>878
> それにjQueryでもコンポーネント化しようとすればテンプレートの埋め込みになる筈です

ならない。なんのためにHTMLにテンプレートタグ <template> が出来たと思ってるんだ？

2019/03/09(土) 11:49:39.85

>>879
重要な点はVue(MVVM)はViewとViewModelが疎結合であり
jQueryはViewとLogicが密結合している事です
それに比べればコードの行数は大した問題にはなりません

2019/03/09(土) 11:53:02.83

>>882
これがjQueryのコードなんだが
どこが結びついてるの？

$('.my-component [name="switch"]').change(function() {
　$(this).closest('.my-component').toggleClass('active', this.checked);
});

2019/03/09(土) 11:53:04.50

ツマンネーよ

2019/03/09(土) 12:00:56.94

>>881
それはテンプレートの置き場を変えただけです
テンプレートをjavascriptからhtmlへ追い出すだけならVueでも可能です

しかしコンポーネント志向場合はテンプレートをhtmlに追い出しても意味はありません
異なるページでコンポーネントを再利用する場合を考えればそれが無意味であることがわかります

2019/03/09(土) 12:03:54.96

>>885
> それはテンプレートの置き場を変えただけです

だからお前がjQueryだと埋め込むしか無いっていったから、
置き場を変えてやったんだろうが
置き場を変えることでデザイナが自由にHTMLを変更できるようになる
プログラマは、中身がどう変わろうが意識する必要がなくなる
これが分業だろうが

2019/03/09(土) 12:04:02.87

もう「jQuery vs Vue」みたいなスレでも立ててそっちでやれよ

2019/03/09(土) 12:05:41.67

>>885
> 異なるページでコンポーネントを再利用する場合を考えれば

お前まさか、デザイナがページのヘッダとかフッタを
共通化せずにページごとに全部書いてると思ってるのか？
失礼だろｗ

2019/03/09(土) 12:06:04.85

>>879
君は本当に面白いな。俺には君の不満点が全部見えない。当たり前だよな他人だし。だから修正したコードを君自身が書くことに意味がある訳さ。勉強にもなる。それに君は俺が何を書いても文句を言うだろう。後付で色々言われるのは面倒だ。
だったら、君の素晴らしいコードと、俺の糞コードを比較すればいいじゃん？君の正当性はコードでしか証明できないんだぞ。

たった数行の修正だし簡単だからトライしてみなって。それを見て意見出し合おうや。

2019/03/09(土) 12:07:36.71

>>883
そのコードと<div>の中身がべったり対応してるじゃん
my-component以外に正確にコピペしてもらわないと動かない時点でコンポーネントじゃない

2019/03/09(土) 12:07:52.12

>>889
> たった数行の修正だし簡単だからトライしてみなって。それを見て意見出し合おうや。

えとさ、なんでお前の利益になることを俺がしないといけないの？ｗ

2019/03/09(土) 12:08:40.26

>>890
> そのコードと<div>の中身がべったり対応してるじゃん

<div>の中身がべったりってどういうこと？

divの中身はいろいろ変えられるんだけど？
そもそもdivである必要すらない

2019/03/09(土) 12:12:57.48

>>883
＞>>882
＞これがjQueryのコードなんだが
＞どこが結びついてるの？
＞
＞$('.my-component [name="switch"]').change(function() {
＞　$(this).closest('.my-component').toggleClass('active', this.checked);
＞});

・適応対象のname属性がswitchでありクラス名がmy-componentの要素の子孫であること
・適応対象がchangeイベントをサポートしていること
・適応対象の直近のクラス名がmy-componentの要素がactiveクラスをサポートしていること

少なくともこの3つの物理的な条件をjsプログラマが知ってなければなりません
さらにhtml/cssデザイナはjsプログラマがこれらの条件を期待していることを知っていなければなりません

Vue(MVVM)ならばそのような仮定は全く必要ありません
Viewとは独立してただ単にViewModelの属性のブール値を切り替えるだけです

2019/03/09(土) 12:14:08.39

>>883
なんで分からんの？まさにそれも密結合と言うんだぞ。クラス名やセレクタ使ってるだろ？
スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない？

2019/03/09(土) 12:17:29.40

>>893

Vue(MVVM)ならばそのような仮定は全く必要ありません
代わりにHTMLを直接書き換えるからです。
HTMLにコードがべったり結合してしまっています

2019/03/09(土) 12:17:40.62

>>892
jQプログラマ「my-componentを置いてくだだい」
デザイナ「<div class="my-component"></div>」
これで分業なんて出来るかよ

2019/03/09(土) 12:18:35.13

>>894
> スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない？

DOMのクラスやセレクタを使わないでやるなら
HTMLに直接React用のコードを埋め込むしか無いやんｗ

2019/03/09(土) 12:18:44.76

>>886
デザイナは自由ではありません
jQueryコードを理解してプログラムを破壊しないように作業しなければなりません
プログラムを破壊しないための条件は明確にはなっていません

そもそもあなたはコンポーネントの意味を理解していないようです
template tagを使用しても別の画面では再利用できません
それはコンポーネントではありません
コンポーネントはテンプレートとロジックが1つのブロックとして再利用可能な形態になっている必要があります

2019/03/09(土) 12:21:48.66

>>888
それは補助的な方法論です
補助的な方法を使用していいならVueのコンポーネントからテンプレート分離することも容易に可能です
あなたの最初の主張は完全に理を失いました

2019/03/09(土) 12:23:08.25

>>896
jQueryプログラマ「この動きがほしい所に my-componentというクラス名をつけてください」
デザイナ「はいわかりました。昔からあるLightBoxみたいなやつですよね。
aタグに特定の属性をつけるだけで画像のポップアップができて簡単ですよね」

2019/03/09(土) 12:24:33.39

>>899
> あなたの最初の主張は完全に理を失いました

意味わからん。逆だろ

お前がjQueryでもコードの中にHTMLを埋め込むしか無い！って
jQueryを貶めようとしたから、それは間違いって言ってるんだが。

俺がいつjQueryの理だといったよｗ
マッピポンプしてるんじゃねーよ

2019/03/09(土) 12:24:59.58

>>891
うわあ。。性格ネジ曲がりすぎだろ。すっごく君のためを考えて言ったんだがなあ。
俺が書いてもvueを何も知らない君がどう評価するの？まさか文字数カウントして終わりか？

君の言ってるのはこういう事。
vueしりませーん、よめませーん。かきませーん。おぼえませーん。でもvueクソだわ！！
通用するわけねーだろ。どあほう。

2019/03/09(土) 12:26:05.91

>>902
評価してやるからグダグダ言ってないでかけや

2019/03/09(土) 12:28:51.73

>>895
完全に依存性がなくなったわけではありませんがべったり依存していません

Vue(MVVM)ではViewは明確に定義されたViewModelのインターフェースのみに依存します
ViewModelの実装からは完全に隔離されます
ViewModelのインターフェースがViewとViewModelの疎結合を保証する境界になっています

逆にjQueryではjs側がどのような実装を行っているか厳密に理解していなければViewを定義できません
そ
ViewとLogicを隔てる境界はありません

2019/03/09(土) 12:31:29.70

>>897
いいから無理にvueやreactの知識だすなってｗ。ボロでてるから。
コード埋め込みじゃなくてバインディング。
どうせ何が違うのか分からんだろ？いいから勉強してくれ。

2019/03/09(土) 12:33:31.50

>>903
書けやじゃねーよｗ
俺は答えた。それについて文句があるならまず自分でやるのが当たり前じゃん。
君は社会人じゃないのかね？俺は君のお守りしてるわけじゃないぞ？

2019/03/09(土) 12:36:22.72

>>900
それのどこがコンポーネントなんだよ
「この動き」と言った瞬間同じDOM構造が思い浮かんで初めて成立する会話
てかこの動きってなに？長々と説明する位ならコード見せた方が早いよね

2019/03/09(土) 12:38:01.89

>>901
Vueでコンポーネントを実装するとhtml/cssとjsが1箇所に記述されるため強い結合が生じるというのがあなたの最初の主張です
ここには暗黙的に1つの前提がありました
html/cssを別のファイルに定義しないという前提です

しかしあなたは続く投稿でその前提を自ら覆しました
あなたはtemplate tagを提示してhtml/cssを別のファイルに記述する手段があるならしてもよいとしてしまいました
前提が崩れたためあなたの最初の主張の理もまた失われたのです

2019/03/09(土) 12:38:30.60

>>904
お前ももうそいつを説得しようとかバカなマネするのやめろ
論破と謂われようが勝利宣言されようが我慢しろ
無駄だし邪魔

2019/03/09(土) 12:44:02.36

>>900
あーそうだ、jQuery君に肝心な事聞き忘れてた。
君がmy-componentをコンポーネントと言うなら答えられるはず。
1、そのコンポーネントのインターフェイスは？
2、再利用は？
3、内部をどう隠蔽して部品化する？
これコンポーネントの最低条件だから。本当はもっとある。
一つでも満たさない場合少なくとも仕事でコンポーネントと言ってはだめよ。
まあ保守するのが君一人ならオレオレコンポーネントでもいいんだけど。

2019/03/09(土) 13:16:35.03

>>897
>DOMのクラスやセレクタを使わないでやるなら
>HTMLに直接React用のコードを埋め込むしか無いやんｗ

やっぱりここにjQuery君の根本的な勘違いがあるな。
jQueryってのは基本密結合なんだよ。密結合ってのは、相手を明確に知ってないといけないという事。端的に言えばセレクタが元凶。密結合が好ましくないってことは知ってるよね。

んでさ、また君の不得意なvueですまんけどさ、疎結合ってのはこういう事。
<div v-show="isShow"><div>
script側は変数isShowを切り替えるのみ。
違い分かるかな？スクリプト側からはdomを知らない＆触れてない事。

メリットがとてつもなく大きな事も分かってるはず。いや分かれ。だったらデザイナに教えるなり、君が骨組み作ればいいだけ。。。いやそれができればこんな話になってないかああ。スレも残り少ないのに不毛だぜ。。

2019/03/09(土) 13:25:46.15

コンポーネントは、HTML/CSS/JS を、1つの .vue ファイルにまとめる。
そして、header 用、footer 用などとして、再利用する。
各コンポーネントには、data-v-aaaaaa などのユニークな属性が付くので、区別できる(Scoped CSS)

さらに、JSX 記法を使うと、JS 関数内に、HTML も書けるから、可読性が高い

new Vue({
el: '#app',
render: function(h) {
return <div>Foo</div>;
},
});

return <div>Foo</div>;
の部分が、以下の関数に変換される。
return h('div', null, 'Foo');

2019/03/09(土) 13:28:20.83

まだVue側のコードは出てないのか