X

Vue vs React vs Angular

レス数が950を超えています。1000を超えると書き込みができなくなります。
0855デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 07:26:00.83ID:RYW8IiyE0
jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
単にHTML（DOM）の構造によって形作られたものに過ぎない。
専門用語ではなく、単なる英語としてのコンポーネント

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

デザイナはこの条件を守っている限りHTML（CSS)を変更し自由にデザインできるし、
プログラマもデザインが変わってもJavaScriptコードを変更する必要がなくなる。
デザイナの担当とプログラマの担当、つまり修正するファイルが明確に分かれているのも良い
どちらも自分の担当するファイルを自由に変更できるから分業することも容易になっている
0856デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 07:29:39.24ID:RYW8IiyE0
>>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
0857デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 07:45:09.02ID:RYW8IiyE0
ここで（HTML側を自由変更できないとはいえ）複数置いても問題ないコードを
書いてるから常識的な仕様ぐらい理解してると思うんだよねｗ
https://codepen.io/hinoragi/pen/YgVQjK

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

と騙そうとしたんだろうね。
でもバレちゃったｗ
0858デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/09(土) 08:07:35.93ID:e9DsS9n/0
>>848
アホはお前だろう。。もう少しよく読んで意図把握しよう。
あとやっぱり君はリアクティブ自体理解できてないのがよくわかる。だからもう少し公式読め。
0859デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/09(土) 08:10:00.82ID:e9DsS9n/0
>>849
ほら
自分が書けないからそうやって逃げる。全く進歩しない。分からない事は否定するだけ。いいから自分で勉強証明しなって。見ててやるからさ。
0860デフォルトの名無しさん (ﾜｯﾁｮｲ 9732-4xo3)
垢版 |
2019/03/09(土) 08:10:39.68ID:zxiwPMOw0
提示された例がコンポーネントじゃないから当然なんだって
inputが中に２つあっても動いちゃうし無かったら役立たずのmy-componentが残るだけ
綺麗にコピペしないと動かないなんて常識的なコンポーネントの仕様を守ってないよね
0861デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/09(土) 08:16:51.61ID:e9DsS9n/0
>>857
なあ自分で言ってて悲しくならない？
new Vueすら知らない事バレてるんよ君w。俺はもう説明しない。基本すら自学できない奴に教える価値無い。
0862デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/09(土) 08:24:01.30ID:e9DsS9n/0
>>855

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

無知極まってるぞ。勝手に定義するな。マジで少し勉強して。そんな俺様定義だからあんな再利用できない紛いモノ書くんだよ。
0863デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/09(土) 08:28:42.54ID:e9DsS9n/0
だああ、色々言いたいが出社だ。
いいかiQuery君。君はまずスレチだ。そこをまず理解しろ。
その上で書くならせめてjQueryとvue react angularのどれか、2つのコードを比較しながらjQueryの良さを語れ。
それがここに書き込む最低の礼儀じゃね？
0864デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/09(土) 08:37:47.27ID:e9DsS9n/0
最後にもう一回言うぞ。
jQueryのコード置くだけで「だからvueだめなんだよ」コレ止めろ。
基礎だけでもVueを勉強してから発言するのが筋だぜ。でないと話が通じないから困るんだよ。ほらココvueのスレでもあるし。
0868デフォルトの名無しさん (ﾜｯﾁｮｲ ff2d-Ff7m)
垢版 |
2019/03/09(土) 09:20:39.95ID:b+N//s300
多分、「jQueryで十分」って主張してる人は、結局SPAの概念が習得出来なかった、あるいはする気のない人じゃない？

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

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

そういった人が今すべき事は、不真面目な自分を戒めて勉強に励むか、
あるいはエンジニアとしての死を素直に受け入れて、別の道を模索するかのどっちかにしたらいいんじゃないかと。
0871デフォルトの名無しさん (ｱｳｱｳｳｰ Sac3-cVal)
垢版 |
2019/03/09(土) 09:29:59.29ID:OAlfgW/Ia
jQueryはデザインの物理的な構造にプログラムが強く依存してしまうから生産性が低い
プログラムがデザインの物理的な構造に依存することを知ってるからデザインも安易に作れない(プログラムから扱えるようにするために物理的な制約が生まれる)

VueはVMを使ってロジックとデザインを明確に分離してるのでそういった不都合はかなり軽減される
全くないとは言わないがね
0873デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 10:53:39.13ID:RYW8IiyE0
もう一回載せようか？ はやくこれだけで作って欲しいんだが

>>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
0875デフォルトの名無しさん (ｱｳｱｳｳｰ Sac3-cVal)
垢版 |
2019/03/09(土) 11:19:10.07ID:OAlfgW/Ia
Vue(というかMVVM)の素晴らしいところはjavascript側はhtml/css側がどうなってるのか知らなくてもいいところ
そしてhtml/css側はjavascript側がどうなっているか最小限の知識で済むこと

jQueryではお互いがお互いに対する知識を多く必要としているため結合が非常に強くなってしまう
これでは分業は難しい
0876デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 11:30:18.17ID:RYW8IiyE0
>>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が埋め込まれてしまってる
0877デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 11:43:48.95ID:e9DsS9n/0
>>873
馬鹿野郎。。。それは最初のv-bindとv-modelのサンプルだろうが。
コンポーネントはこっちだ。
https://codepen.io/hinoragi/pen/YgVQjK
何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。

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

君に少しでもプライドがあるなら、君の思ったとおりに動作するvueのコード上げてみな。時間はかかってもいいからさ。
0878デフォルトの名無しさん (ｱｳｱｳｳｰ Sac3-cVal)
垢版 |
2019/03/09(土) 11:45:53.12ID:OAlfgW/Ia
>>876
埋め込んだのだからそれは仕方ないでしょう

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

それにjQueryでもコンポーネント化しようとすればテンプレートの埋め込みになる筈です
埋め込みを拒否した場合はhtmlのコピペになるでしょう
その点についてはVueもjQueryも同じことです
なので問題はVueではなくコンポーネント志向の方にあることがわかります
0879デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 11:47:01.74ID:RYW8IiyE0
> 何度も何度も行ったがhtmlは分離できるぞ。ちったー勉強しろよ。

だったら分離してくださいよ。
"分離できるぞ" と言ってるからには、今のコードは分離されてないってことでしょ
それをしないのは、分離すると余計に長くなるってことなんでしょ？
0885デフォルトの名無しさん (ｱｳｱｳｳｰ Sac3-cVal)
垢版 |
2019/03/09(土) 12:00:56.94ID:OAlfgW/Ia
>>881
それはテンプレートの置き場を変えただけです
テンプレートをjavascriptからhtmlへ追い出すだけならVueでも可能です

しかしコンポーネント志向場合はテンプレートをhtmlに追い出しても意味はありません
異なるページでコンポーネントを再利用する場合を考えればそれが無意味であることがわかります
0886デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 12:03:54.96ID:RYW8IiyE0
>>885
> それはテンプレートの置き場を変えただけです

だからお前がjQueryだと埋め込むしか無いっていったから、
置き場を変えてやったんだろうが
置き場を変えることでデザイナが自由にHTMLを変更できるようになる
プログラマは、中身がどう変わろうが意識する必要がなくなる
これが分業だろうが
0888デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 12:05:41.67ID:RYW8IiyE0
>>885
> 異なるページでコンポーネントを再利用する場合を考えれば

お前まさか、デザイナがページのヘッダとかフッタを
共通化せずにページごとに全部書いてると思ってるのか？
失礼だろｗ
0889デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 12:06:04.85ID:e9DsS9n/0
>>879
君は本当に面白いな。俺には君の不満点が全部見えない。当たり前だよな他人だし。だから修正したコードを君自身が書くことに意味がある訳さ。勉強にもなる。それに君は俺が何を書いても文句を言うだろう。後付で色々言われるのは面倒だ。
だったら、君の素晴らしいコードと、俺の糞コードを比較すればいいじゃん？君の正当性はコードでしか証明できないんだぞ。

たった数行の修正だし簡単だからトライしてみなって。それを見て意見出し合おうや。
0893デフォルトの名無しさん (ｱｳｱｳｳｰ Sac3-cVal)
垢版 |
2019/03/09(土) 12:12:57.48ID:OAlfgW/Ia
>>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の属性のブール値を切り替えるだけです
0894デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 12:14:08.39ID:e9DsS9n/0
>>883
なんで分からんの？まさにそれも密結合と言うんだぞ。クラス名やセレクタ使ってるだろ？
スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない？
0897デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 12:18:35.13ID:RYW8IiyE0
>>894
> スクリプトからはdomのクラスやセレクタなぞ、可能な限り知る必要はないってこと理解できない？

DOMのクラスやセレクタを使わないでやるなら
HTMLに直接React用のコードを埋め込むしか無いやんｗ
0898デフォルトの名無しさん (ｱｳｱｳｳｰ Sac3-cVal)
垢版 |
2019/03/09(土) 12:18:44.76ID:OAlfgW/Ia
>>886
デザイナは自由ではありません
jQueryコードを理解してプログラムを破壊しないように作業しなければなりません
プログラムを破壊しないための条件は明確にはなっていません

そもそもあなたはコンポーネントの意味を理解していないようです
template tagを使用しても別の画面では再利用できません
それはコンポーネントではありません
コンポーネントはテンプレートとロジックが1つのブロックとして再利用可能な形態になっている必要があります
0900デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 12:23:08.25ID:RYW8IiyE0
>>896
jQueryプログラマ「この動きがほしい所に my-componentというクラス名をつけてください」
デザイナ「はいわかりました。昔からあるLightBoxみたいなやつですよね。
aタグに特定の属性をつけるだけで画像のポップアップができて簡単ですよね」
0901デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 12:24:33.39ID:RYW8IiyE0
>>899
> あなたの最初の主張は完全に理を失いました

意味わからん。逆だろ

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

俺がいつjQueryの理だといったよｗ
マッピポンプしてるんじゃねーよ
0902デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 12:24:59.58ID:e9DsS9n/0
>>891
うわあ。。性格ネジ曲がりすぎだろ。すっごく君のためを考えて言ったんだがなあ。
俺が書いてもvueを何も知らない君がどう評価するの？まさか文字数カウントして終わりか？

君の言ってるのはこういう事。
vueしりませーん、よめませーん。かきませーん。おぼえませーん。でもvueクソだわ！！
通用するわけねーだろ。どあほう。
0904デフォルトの名無しさん (ｱｳｱｳｳｰ Sac3-cVal)
垢版 |
2019/03/09(土) 12:28:51.73ID:OAlfgW/Ia
>>895
完全に依存性がなくなったわけではありませんがべったり依存していません

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

逆にjQueryではjs側がどのような実装を行っているか厳密に理解していなければViewを定義できません
そ
ViewとLogicを隔てる境界はありません
0905デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 12:31:29.70ID:e9DsS9n/0
>>897
いいから無理にvueやreactの知識だすなってｗ。ボロでてるから。
コード埋め込みじゃなくてバインディング。
どうせ何が違うのか分からんだろ？いいから勉強してくれ。
0906デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 12:33:31.50ID:e9DsS9n/0
>>903
書けやじゃねーよｗ
俺は答えた。それについて文句があるならまず自分でやるのが当たり前じゃん。
君は社会人じゃないのかね？俺は君のお守りしてるわけじゃないぞ？
0907デフォルトの名無しさん (ﾌﾞｰｲﾓ MM32-4xo3)
垢版 |
2019/03/09(土) 12:36:22.72ID:flOfKdeWM
>>900
それのどこがコンポーネントなんだよ
「この動き」と言った瞬間同じDOM構造が思い浮かんで初めて成立する会話
てかこの動きってなに？長々と説明する位ならコード見せた方が早いよね
0908デフォルトの名無しさん (ｱｳｱｳｳｰ Sac3-cVal)
垢版 |
2019/03/09(土) 12:38:01.89ID:OAlfgW/Ia
>>901
Vueでコンポーネントを実装するとhtml/cssとjsが1箇所に記述されるため強い結合が生じるというのがあなたの最初の主張です
ここには暗黙的に1つの前提がありました
html/cssを別のファイルに定義しないという前提です

しかしあなたは続く投稿でその前提を自ら覆しました
あなたはtemplate tagを提示してhtml/cssを別のファイルに記述する手段があるならしてもよいとしてしまいました
前提が崩れたためあなたの最初の主張の理もまた失われたのです
0910デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 12:44:02.36ID:e9DsS9n/0
>>900
あーそうだ、jQuery君に肝心な事聞き忘れてた。
君がmy-componentをコンポーネントと言うなら答えられるはず。
1、そのコンポーネントのインターフェイスは？
2、再利用は？
3、内部をどう隠蔽して部品化する？
これコンポーネントの最低条件だから。本当はもっとある。
一つでも満たさない場合少なくとも仕事でコンポーネントと言ってはだめよ。
まあ保守するのが君一人ならオレオレコンポーネントでもいいんだけど。
0911デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 13:16:35.03ID:e9DsS9n/0
>>897
>DOMのクラスやセレクタを使わないでやるなら
>HTMLに直接React用のコードを埋め込むしか無いやんｗ

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

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

メリットがとてつもなく大きな事も分かってるはず。いや分かれ。だったらデザイナに教えるなり、君が骨組み作ればいいだけ。。。いやそれができればこんな話になってないかああ。スレも残り少ないのに不毛だぜ。。
0912デフォルトの名無しさん (ﾜｯﾁｮｲ 162c-1cTK)
垢版 |
2019/03/09(土) 13:25:46.15ID:GVs3bbIF0
コンポーネントは、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');
0915デフォルトの名無しさん (ｵｯﾍﾟｹ Src7-EzoF)
垢版 |
2019/03/09(土) 14:19:02.54ID:47IMMy0/r
デザイナー兼プログラマーの俺様なら全て解決する問題だな
jquery使うのはWordPressのみ
Webアプリ系はvueかReactで作る

てかデザイナーとフロント分けたほうが効率いいとかいう輩どもはこれでわかったんじゃねえの
まったく解決できてねえじゃん
むしろ悪化してる
0916デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 14:22:14.84ID:e9DsS9n/0
>>913
この機会にvue react覚えればいいのに。
5chの不毛な論争でもそういう気持ちが芽生えれてくれれば無駄じゃない。100%君のプラスになる話だよ。俺は1円も得しないマジでｗ
0919デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 14:35:46.09ID:e9DsS9n/0
>>918
ほう昨日はnew Vue()すら知らなかった君が、たった一日でマスターしたのか。しかもreactも。って冗談でも笑えねえぞこら。

あとまあ、、一応聞いとくか、、
> VueもReactも密結合になるだけでメンテナンスしづらくなり
どのへんが密結合なんでしょうvue reactマスターさん？
まだまだ私も勉強中なので参考までに教えてください。
まずは密結合の意味からお願いします。
0923デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 14:50:50.25ID:RYW8IiyE0
>>922
コンポーネントと見た目（デザイン）は別の概念です。

VueやReactを使うとコンポーネントに見た目（デザイン）が蜜に結合してしまって
再利用しづらいコンポーネントになってしまうと自白しているようなもんですね。

同じコンポーネントでも見た目（デザイン）は別のものに変更できるようになってないと
いけません。テーマとかスキンという言葉を使えば理解できますか？
0928デフォルトの名無しさん (ｵｯﾍﾟｹ Src7-EzoF)
垢版 |
2019/03/09(土) 15:22:05.65ID:47IMMy0/r
ほんとエンジニアって使えねえなあ
行数ごときで争ってるバカどもw

WebアプリなんだからUIUXもシステムで作るんだから右脳左脳両方使って効率よく作り出せよ

デザインセンスゼロだから行数で言い合うしかねえんだろ
お絵描き教室からはじめろ
0933デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 15:55:06.21ID:e9DsS9n/0
>>919
まあ予想してたと思うけど、、ちょっと長いよ。２つに分ける。

>見た目（デザイン）を変更しようと思った時にJavaScriptのコードを変更しなければいけないのが密結合です。

違います。
Javascriptのコードと言うからややこしくなるんです。データ駆動という言葉を知っていますか？
例えばform。form全体の状態を保持するjsonAがあるとしましょう。この場合、formの"見た目"はjsonAの鏡となっていなければなりません。リアクティブは鏡に例えてよく説明されますよね。
で次にjsonA.isActive=trueなら、対応するUIはそれが"どんな要素であれtrueの状態である”という事です。鏡ですからね。
逆に<input type="checkbox" v-model="isActive">をクリックすれば、jsonA.isActiveも自動的に変更され従って他の要素も自動的に反映されます。
データ駆動ではこの様に、直接触れない(疎結合な)鏡の相手に対して、無意識に、自動的に(鏡の様に)反映されます。

でもね、もしかしたら君は今でもこう思ってるでしょう。
v-model="isActive" <<< 密結合じゃねえの？
違うのですよ。domはisActiveが何者か知らないのです。isActiveという名前の何か、なんです。name="isActive"じゃないんですよ。
ただただ自分の状態を反映する鏡の相手を指定しているだけなんです。この違い、わかりますか？

逆に密結合というのは、
<input type="checkbox" name="checkbox">
これです。自分をname=checkboxだと宣言し、それに対してアクセスするよう指示しています。アクセスするのはjQueryそしてセレクタですが。

先程の例で言えば、isActiveを変更したい場合、domのnameを知らないと何もできません。
この状態というか処理系を、密に結合している、というのです。つまりjQueryを使う限り大部分は密結合なんですよ。驚きですね！！

さてこれが本当の意味の、疎結合、密結合です。少なくともWEB業界ではそうです。
それにしてもコンポーネントといい、君は本当に勝手な解釈をしますね。もっと勉強しましょう。
0934デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 15:55:34.80ID:e9DsS9n/0
>>919
> 見た目（デザイン）を変更しようと思った時に、JavaScriptを全く知らない人に担当させられないのが密結合の証拠です。

もちろん違います。
name="checkbox"がv-model="checkbox"になるだけです。スクリプトの要素はありません。
テキストのバインディグも {{name}} とするだけです。スクリプトの要素はありません。他にもありますが、デザイナが新たに覚える文法は多くないです。
デザイナの教育、指示はむしろエンジニアの腕の見せ所ですよ。負担となるかは大部分が君次第。フレームワークだけのせいにしないように。

詳しくはvue公式を読みましょう。とてもわかり易くておすすめです。


>>923
ところで、君はコンポーネントの質問に答えてないですよね？
君の示したコンポーネント、<div class="my-component">のインターフェイス、再利用、隠蔽について答えてください。
言ってる意味さえ分からないかもしれませんが。。それなら質問しましょうね。
0937デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 16:02:36.25ID:e9DsS9n/0
>>936
>HTML/CSSの世界に、Reactのものが含まれてるから、密結合だって言ってんだろ。

だからそれは密結合じゃないの。君の変な定義はどうでもよろしい。
相変わらず間違いを認めないヤツだなあ。。ググってみなよ。すぐ分かる事からさ。
0938デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 16:03:36.34ID:RYW8IiyE0
>>934
> 君の示したコンポーネント、<div class="my-component">のインターフェイス、再利用、隠蔽について答えてください。

インターフェース？ 何が聞きたいのかわからんが、
my-componentの中に特定のイベントを送る。my-componentの中ではそのイベントに反応する。
インターフェースはイベントによって疎結合な状態で作ることが可能。それだけだろ。

再利用？ >>838でも書いてるだろ。以下のどんなDOMの構造であっても、
jQueryのコードは再利用できてる

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

何から何を隠蔽するしたいのかわからん。jQueryのコードは状態を持ってないので
隠蔽するものはなにもない。無名関数使ってるので関数名すら隠蔽された状態だし
単にクラス名がかぶらないようにしたいってだけならプリフィックスでもつければおしまい
0940デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 16:05:45.02ID:e9DsS9n/0
>>936
んでさ、vue reactマスターの君はコンポーネントが全くわかってない。何も質問に何も答えられない。どうなのよマスターさん。
いろんな意味で恥ずかしいと思わんの？よくそんな妙な知識で仕事できるなあ。
同僚とか上司とかいたら注意されない？まあいれば、だけどさ。
0941デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 16:06:58.43ID:e9DsS9n/0
>>939
はい、ソースだしなさいねー。嘘ついてもすぐわかりますよー。
0943デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 16:14:51.37ID:e9DsS9n/0
>>938
やっと書いたか。本当に待ちくたびれたわい。

>インターフェース？ 何が聞きたいのかわからんが、
どあほ。。。まじで言ってる？？コンポーネントのインターフェイスが分からん？
よく堂々と白状できるな。。俺なら到底言えないわ。

あとさ、君のコードは再利用できてない。
それは単に、コ　ピ　ペ　と言うの。

>何から何を隠蔽するしたいのかわからん。jQueryのコードは状態を持ってないので隠蔽するものはなにもない
もう、、、、なにを言っていいのやら。
あのね、例えばさ、外部からさ、直接 $("div.my-component input")とか、コンポーネント内部にダイレクトにアクセスできちゃ駄目なのよ。

これってコンポーネントの最低条件なんだけど、、君はどうやって勉強したんだ。
いいからこれもググってみなよ。。。うーん、だれか突っ込んであげてください。私はもう疲れました。
0945デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 16:17:00.95ID:RYW8IiyE0
>>943
> あのね、例えばさ、外部からさ、直接 $("div.my-component input")とか、コンポーネント内部にダイレクトにアクセスできちゃ駄目なのよ。

VueやReactでもダイレクトにアクセスできますが？
0946デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/09(土) 16:19:28.37ID:e9DsS9n/0
>>945
おいおいおいおいー、どこがvueマスターなの？
直接アクセスできません。インターフェイスを介してアクセスします。
わかった？OK?
0948デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 16:24:13.68ID:RYW8IiyE0
確か上の方で、scopedを使えば、こういうCSSからコンポーネントを
守ることができる。コンポーネントは影響を受けないってのたまわっていたね？
やってみて

div { //CSS ダイレクトアクセス
background-color: red;
}
0950デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/09(土) 16:27:02.65ID:e9DsS9n/0
>>947
笑いが止まらんぞおいっっっw
今日一番だわ！！！
本当に君には驚かされるな！！！
どこまで発想がjQueryなのよ。そりゃvueと共存できるよ。注意すればね。
いやすまん、ニヤニヤが止まらんから後でちゃんと返事する。
0951デフォルトの名無しさん (ﾜｯﾁｮｲ 1f14-uGU8)
垢版 |
2019/03/09(土) 16:33:17.69ID:RYW8IiyE0
結局Vueのコンポーネントは隠蔽化されてるとか言うのは
技術的にそうなってるんじゃなくて、単にフレームワークの決まりとして
外部から触らないようにしましょうと文書で書かれているだけ

それを言ったら、jQueryでは情報のやり取りには
（カスタム）イベントを使用しましょう。コンポーネントの担当者以外が
直接内部をいじってはいけません。と文書でかけば終わるわけだよ。
レス数が950を超えています。1000を超えると書き込みができなくなります。
ニューススポーツなんでも実況