- 1 名前：デフォルトの名無しさん mailto:sage [2018/12/21(金) 21:37:36.86 ID:NZqrEm960.net]
-
実際どうなん？
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
VIPQ2_EXTDAT: default:vvvvv:1000:512:----: EXT was configured
- 792 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:36:15.92 ID:kMybevyH0.net]
- >>766
プログラマーはcssに書かれたclassの名前まで知らなくていい
その方がデザイナーが変更してもプログラマーが対応しなくて済むだろ？
- 793 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 14:54:21.66 ID:B/j0V0h2a.net]
- デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
- 794 名前：デフォルトの名無しさん [2019/03/08(金) 14:58:33.92 ID:kvsQt7Fnr.net]
- UI・UXやインタラクションはエンジニアがやる分野
世界的にもその方向性になってきている
しかし世界中のエンジニアは無能だからまともにデザインできない
ごく簡単なUIすら理解できない
終わってんだろ
- 795 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:02:21.59 ID:B/j0V0h2a.net]
- 最低限のモダンっぽい見た目でいいならもうcssフレームワークのどれかでもいいだろ
- 796 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:07:22.44 ID:jbQifWXg0.net]
- >>769
> いや、お前がデザイン覚えろよwwww
分業するんだよ
- 797 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:08:44.58 ID:jbQifWXg0.net]
- >>770
分業っていうのは、完全に相手のことを知らないで
できるわけじゃないんだよ。
必要最小限、クラス名だけ。
jQuery使って、HTMLとCSSを正しく使うだけで
最小限の連絡で、それぞれが開発できるんだよ。
- 798 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:11:41.12 ID:jbQifWXg0.net]
- >>771
> デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
コンポーネントには状態があるんだから、
少なくともその状態ごとのデザインは作ってもらわないと困る。
で、どうやるかというと、お互いで決めたルール
コンポーネントのここに、こういうクラスがつきますよー
というルールに基づいて
デザイナーは、HTMLのコンポーネントのタグに
classを変更するだけなんだよ。
最終的にはJavaScriptでクラスを変更することになるが
開発中は、手書きでクラスを変更するだけ
超簡単
- 799 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:13:04.69 ID:kMybevyH0.net]
- >>772
いやUI・UXはデザイナーがやるべきだろ
そこで分離するからおかしなことになってる
- 800 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 15:15:10.57 ID:B/j0V0h2a.net]
- デザイナーに求めるものなんて最低限なら画像データだっていい
html形式でブラウザで表示できるなら大助かり
期日が守れないヤツ多いから最低限期日までにどっちか出してくれればそれ以上に求める事なんてねぇんだが
- 801 名前：デフォルトの名無しさん [2019/03/08(金) 16:28:21.11 ID:/TYC9ex30.net]
- >>763
くわー面倒だなあ。でもコード見ないと分からんか。
[JavaScript]
isActive=false
[HTML]
<div class="my-component" class=“{active:isActive}”>
<input type="checkbox” v-model=“isActive”>switch
</div>
[css]
変更なし
どう？君のコードより随分少ないだろ。特にscriptなんて変数一個で終わり。まだ分からない事あるなら聞いてみなよ。でもスマホ手打ちなんで面倒なのはやめてw
- 802 名前：デフォルトの名無しさん [2019/03/08(金) 16:38:37.56 ID:/TYC9ex30.net]
- おっとミスった。スマホ手打ちなんですまんね。
[HTML]
<div class="my-component" class=“{active:isActive}”>
正しくは
<div class="my-component" :class=“{active:isActive}”>
:が抜けてたよ。
- 803 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:49:32.55 ID:oNzvowiX0.net]
- >>779
あのさぁ、動かないコード書かないでくれないか？
scriptタグまでは書かなくていいよ。jQueryでも書いてないからさ、
でも動くコード書いてっていったよね？
せめてjsfiddleで動かしてから来てよ
- 804 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:54:12.44 ID:oNzvowiX0.net]
- なんか動くって嘘つきそうだから
>>779では動かないという証拠として
>>779の内容を https://jsfiddle.net/b5xusp1d/ に書いておいたから
ほら動かないでしょ？
これを動くように修正してね。
jQuery版の実際に動くコードですよ。
https://jsfiddle.net/eu2wm3tk/
- 805 名前：デフォルトの名無しさん [2019/03/08(金) 16:55:22.77 ID:/TYC9ex30.net]
- >>781
それは贅沢だなw。こっちはスマホだと言うのに。あ、そうか君はvue知らないから動作チェックできないのか。どうせなら入れてみたら？簡単だよ。
あとコードは短くなった訳だが感想はどうかね？
- 806 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:55:35.67 ID:oNzvowiX0.net]
- ほんとなんですぐばれる嘘を作るんだろう？
理解できないな
- 807 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:56:30.27 ID:oNzvowiX0.net]
- >>783
だから動かないって
証拠>>782にかいたからさ。
お前がスマホとか知らんわ
スマホだから動かなくてもいいでしょ？
嘘だけど、いいでしょとか。恥ずかしくないの？
- 808 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 16:58:49.01 ID:oNzvowiX0.net]
- あ、ReactじゃなくてVueか。
はい、こっちにVue読み込んだの置いたからさ、
こっちも動かない。はぁ。動かない（笑）
https://jsfiddle.net/zvft0qo8/
- 809 名前：デフォルトの名無しさん [2019/03/08(金) 17:01:09.95 ID:/TYC9ex30.net]
- >>786
書き方間違えてるぞ。vue初期からしなきゃ動かんよw
- 810 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:01:40.94 ID:oNzvowiX0.net]
- あともう一つ教えといてあげるよ。
作ったのは.my-componentなんだ。コンポーネント。再利用可能。
つまりな、HTMLをこう書くだけで
同じ動きがするコンポーネント増やせるのよ。jQuery版は。
ここまでやってくれよ
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch2
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch3
</div>
https://jsfiddle.net/zygq0r56/
- 811 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:02:12.51 ID:oNzvowiX0.net]
- >>787
書き方間違えてるって。
動くコード書いてないお前の落ち度じゃん
- 812 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:07:56.77 ID:oNzvowiX0.net]
- vueは面倒だなーって思いながら、
vue初期からしなきゃ動かんよw
と指摘された点を
今書いてるのかな？ｗ
- 813 名前：デフォルトの名無しさん [2019/03/08(金) 17:08:24.75 ID:/TYC9ex30.net]
- >>789
おいおい、vue知らないのに勝手にアップして動かないと言うのは無しだろ。知らないなら知らないと言えば教えてあげるのに。初期化方法までは面倒みれんぞ。jQueryだってそうだろ？
まあいいよ、後で動作する奴を上げてあげるよ。
- 814 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:12:52.61 ID:oNzvowiX0.net]
- > jQueryだってそうだろ
何言ってるんだ？
jsfiddleにはまさにこれだけのコードしか書いてないんだが？
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
いやまさかそんなこと、ありえるなんて思いもしなかった！
レベルなのか？ｗ
- 815 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:15:48.86 ID:oNzvowiX0.net]
- ついでだからちょっと改造
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
は .my-component が 2回でてきてDRYじゃないんで
1回で書く方法
$('.my-component').on('change', '[name="switch"]', function(event) {
$(event.delegateTarget).toggleClass('active', this.checked);
});
https://jsfiddle.net/tk5yvs3g/
- 816 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 17:19:36.99 ID:oNzvowiX0.net]
- >>791
> まあいいよ、後で動作する奴を上げてあげるよ。
じゃあHTML側はこれ相当でお願いね。
コンポーネントは３つ。
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch2
</div>
<div class="my-component">
<input type="checkbox" name="switch">switch3
</div>
- 817 名前：デフォルトの名無しさん [2019/03/08(金) 17:59:49.58 ID:/TYC9ex30.net]
- >>794
ふう、やっとPCの前に戻ってきた。というわけでちょっと上げてみた。ブラウザから5ch書き込むの久しぶりだわｗ。
https://codepen.io/hinoragi/pen/YgVQjK
簡単にテンプレート化してコンポーネント化もしといた。何か分からないことあるなら遠慮なく質問してよ。ちょっと用事あるから次は10時ぐらいにスレみる予定。
- 818 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:05:40.88 ID:oNzvowiX0.net]
- [jQuery]
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
[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'})
あ、デザイナーさん。HTMLはVueのコードに移動したんで
デザイン変えた�
- 819 名前：ｫゃVueの方いじってくださいねｗｗｗ
やっぱりこうなるｗ [] - [ここ壊れてます]
- 820 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:07:11.66 ID:oNzvowiX0.net]
- [jQuery] 3行
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
[Vue] 12行
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'})
あ、デザイナーさん。HTMLはVueのコードに移動したんで
デザイン変えたきゃVueの方いじってくださいねｗｗｗ
やっぱりこうなるｗ
行数は増え、分業ができなくなる
- 821 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:11:58.57 ID:oNzvowiX0.net]
- VueはコンポーネントとDOM構造が密接に結びついているから、
以下みたいに、デザイン上の都合などで変えた時の柔軟性がなくなってしまうんだよな。
jQueryならあくまで、my-componentは、中のname=switchがONになったらクラスを変えるってだけで
中身は自由にいろんなものに変更できるというコンポーネントなのに
<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>
- 822 名前：デフォルトの名無しさん [2019/03/08(金) 18:44:14.67 ID:/TYC9ex30.net]
- >>797
気になって覗きに来たら案の定。。うーん、そこから先は話長くなるぞ。一番簡単なサンプルだし、5chでやる規模じゃない。
それより最初の話はどうした？vueの方が随分コード短いぞ。その質問に答える為にサンプル上げたんだが、答えるのが礼儀ってもんだぜ。
- 823 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:49:38.83 ID:oNzvowiX0.net]
- >>799
> 気になって覗きに来たら案の定。。うーん、そこから先は話長くなるぞ
jQueryと同じことをするのに、話が長くなるんだへーｗ
ま結論な。jQueryが3行の所、Vueだと12行になが～くなりました。
テンプレートのところを除いたとしても7行。jQueryの倍
[jQuery] 3行
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
[Vue] 12行
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'})
- 824 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:52:05.37 ID:oNzvowiX0.net]
- それに一番ひどいのは、やっぱりmy-componentのdivの中身を
デザイナがいじろうとしたら、JavaScriptファイルを修正しなければ
ならなくなるってところなんだよね。
DOMとコードが密接に結びついちゃってる。
- 825 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 18:56:00.97 ID:oNzvowiX0.net]
- jQueryの場合、JavaScriptのコードとDOMの構造は結ぶていてなくて
結びついているのは、.my-componentというクラス名と
input name=switchだけ。だからDOMの構造をどんなに変えても
クラス名とそういう名前のinputがあればいい
コードとDOMの構造が分離されている
- 826 名前：デフォルトの名無しさん [2019/03/08(金) 19:11:44.53 ID:/TYC9ex30.net]
- >>801
やっぱり全く理解できてないじゃん。最初の話に戻すぞ。
最初の例ならスクリプトは、
new vue({data:{isActive:false}})
これだけ。君が分からなくて動かん！！とか騒いでた奴。君のその3行のスクリプトと比べてみなよ。
次に、まあ君はvue知らんからしょうがないがテンプレートは実務では当然外部に持つ。単一ファイルコンポーネントでググれ。
これで聞かれた事は答えたって事で俺からも質問していいか？
さっきからコンポーネントと言ってるが、君のはコンポーネントじゃないだろ。単なるコピペでカプセル化も局所化も無い。サンプルである事を割り引いてもコンポーネントと呼べる内容じゃない、と思うんだが、マジでどう思ってるの？
- 827 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:14:42.43 ID:oNzvowiX0.net]
- >>803
> new vue({data:{isActive:false}})
それだけだと、どれと結びついてるのか（＝セレクタ）その情報がないだろ。
セレクタを省略して良いんだったら、jQueryだってこの一行だよ。
toggleClass('active', this.checked);
- 828 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:16:38.22 ID:oNzvowiX0.net]
- いや、値を変えるコードすら無いかｗ
jQueryだとこれだなｗ Vueより断然短い
'active'
- 829 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:23:09.87 ID:oNzvowiX0.net]
- > 最初の例ならスクリプトは、
> new vue({data:{isActive:false}})
> これだけ。
これだけで動く！（=動かない）
これなんて詐欺？ｗ
- 830 名前：デフォルトの名無しさん [2019/03/08(金) 19:25:20.00 ID:/TYC9ex30.net]
- >>804
がーん、ここまで書いても分からんか。それ動作せんだろ。。自分で言った様に動作するコードで比較しようぜ！！
それと、俺は君を責めてる訳じゃなんだぜ。長年jQueryには世話になったから、優秀なライブラリだとよく知ってる。でもここはvue react angularスレだろ。jQueryはややすれ違いなんだよ。でもまあお互いの長所短所を比較しつつ、まったり雑談しようや。
- 831 名前：デフォルトの名無しさん [2019/03/08(金) 19:26:43.19 ID:/TYC9ex30.net]
- >>806
wwワザとか？vue本体ロードしなはれよ。
- 832 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:29:20.37 ID:oNzvowiX0.net]
- >>808
はい。動かない証拠。vue本体は前の人がロードしてますよーｗ
https://codepen.io/anon/pen/MxmrjP
- 833 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:30:11.51 ID:oNzvowiX0.net]
- >>807
だから動作しないコードを出して
これだけって嘘を付くのをやめろって言ってるんだが、
これだけって、どこまでごこれだけなんｄ？
動作しないコードまでがこれだけか。
- 834 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:30:33.50 ID:oNzvowiX0.net]
- これだけって、どこまでがこれだけなんだ？
動作しないコードまでがこれだけか。
- 835 名前：デフォルトの名無しさん [2019/03/08(金) 19:35:01.38 ID:YjtKBzOFM.net]
- はあ、、分かった分かった。最初の例で動く奴上げてやるよ。出先でだから1時間後な。
で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。
- 836 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:37:01.18 ID:oNzvowiX0.net]
- 見ての通り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書いてる人は知らないタグを使うように強制され
属性が名前になるんですよーとか、新たなルールを押し付けられることになってる。
- 837 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:39:05.43 ID:oNzvowiX0.net]
- >>812
> で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。
普通に再利用できてるんだが？
そもそもjQueryのコードは状態を保持していない。
わかるか？jQueryのコードには状態がない。
状態は、HTMLのタグに存在している。
だからHTMLのタグの分だけインスタンスが存在しているようなもので、
普通に再利用できる。
- 838 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 19:43:49.07 ID:oNzvowiX0.net]
- Vueの場合、コンポーネントが状態を持ってしまってる。
isActiveという変数のことな。
状態を持ったisActiveを共有することは出来ないから、
新た無いHTMLのタグを作らければいけなくなってしまっている。
そしてisActiveという事実上のローカル変数を参照するために、
JavaScript側でHTMLを書くしかなくなってしまっている
HTMLがガッツリJavaScriptと結びついてしまっているわけだ
- 839 名前：デフォルトの名無しさん [2019/03/08(金) 20:00:52.98 ID:YjtKBzOFM.net]
- >>815
どこから突っ込めばいいんだ。。
> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。
コンポーネントは状態持つものだよ。いや認識の相違とかじゃなく普通に。そして隠蔽されるべきもの。
> 状態を持ったisActiveを共有することは出来ないから、
普通に参照できる。
> そしてisActiveという事実上のローカル変数を参照するために、
> JavaScript側でHTMLを書くしかなくなってしまっている
単一ファイルコンポーネント。
> HTMLがガッツリJavaScriptと結びついてしまっているわけだ
まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。
- 840 名前：デフォルトの名無しさん [2019/03/08(金) 20:09:37.29 ID:YjtKBzOFM.net]
- いいよ、もう少し分かりやすい質問しよう。
コンポーネントの要素として、簡単に テンプレート、css、jsがあるとしよう。3つ合わせてコンポーネントね。これらは外部から容易に参照できてはいけないし、干渉されてはいけない、複製も容易でないとダメ。
君のやり方で、my-componentをどうコンポーネント化するのか例示して欲しい。
- 841 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 20:19:23.19 ID:QXTI5KI7a.net]
- わかった
Delphi使え
- 842 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 20:35:47.91 ID:oNzvowiX0.net]
- >>817
何が言いたいのかわからん。
CSSで div { color: red } って書いても
影響を受けないようになんて、Vueでもできないだろ
- 843 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 20:36:44.19 ID:oNzvowiX0.net]
- >>816
> まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。
jQueryでは結びつかない。
<div class="my-component">
<input type="checkbox" name="switch">switch1
</div>
↑どこにjQuery関連のものがあるか言ってみな
- 844 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 20:43:00.51 ID:oNzvowiX0.net]
-
- 845 名前：> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。
訂正
Vueの場合、JavaScriptのコードが状態を持ってしまってる。
isActiveという変数のことな。
だからDOMとJavaScriptのインスタンスを一対一で
紐付けなければならなくなってる。密接に結びついている。
jQueryの場合JavaScriptのコードでは状態を持たないから、
DOMが一つだろうと複数だろうが、処理を共有化できる。 [] - [ここ壊れてます]
- 846 名前：デフォルトの名無しさん [2019/03/08(金) 21:16:27.20 ID:kvsQt7Fnr.net]
- デザインやUI・UX、インタラクションが実装できないクソエンジニアどもがギャーギャー騒いでる
お前ら自分の無能さを披露して恥ずかしくねえの？
フロントやるならデザイン込みでUIくらいやれや
クソみたいなUI作ってんじゃねえよ
- 847 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 21:19:25.25 ID:oNzvowiX0.net]
- 餅は餅屋
- 848 名前：デフォルトの名無しさん [2019/03/08(金) 21:31:02.59 ID:/TYC9ex30.net]
- ただいまー。という訳で最初の質問の答えアップだよ。
https://codepen.io/hinoragi/pen/jJmzJG
なんの質問か忘れてるだろうから、君の763の質問引用するよ。
>jQueryの方が少ないですね。
>嘘だと思うならこれ同じことを実際に動くのに必要な分、書いてみてください。
>$('.my-component [name="switch"]').change(function() {
> $(this).closest('.my-component').toggleClass('active', this.checked);
>});
jsfiddle.net/tk5yvs3g/
で答えがこれね。
new Vue({
el: '#app',
data: {isActive:false},
})
どう？まあこんな短いサンプルで比較するのもどうやねんってのは分かるけど質問にはちゃんと答えたよ。
html含めても確実にvueの方が少ないよね。
あと少しはvueやreact勉強しようよ。こんな短いサンプルの初期化方法すら知らなかった訳で、知らないからって全力否定するのはどうなのって思うぞ。
- 849 名前：デフォルトの名無しさん [2019/03/08(金) 21:36:39.46 ID:kvsQt7Fnr.net]
- デザインできてUIUXできるようになれば引く手数多だぞ
ほんとフルスタックはほとんどいないから
年収は最低でも1000万はいく
- 850 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 21:40:42.36 ID:NeLzfZqe0.net]
- 静的なWebページがあってそこにちょっと動きを付ける程度ならjQueryがお手軽。まぁそうだな。
- 851 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 22:04:03.93 ID:oNzvowiX0.net]
- >>824
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？ 少しは書く前に頭使ったら？
- 852 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 22:19:01.08 ID:JZ/onRPtM.net]
- 行数連呼しといてそりゃねえだろ
- 853 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 22:29:51.19 ID:i92SBzwIa.net]
- やっとReduxがちゃんと分かってきた
けどActionって関数にする必要ってなんのためなの？
constの定数でもいいような気もするんだけど
- 854 名前：デフォルトの名無しさん mailto:sage [2019/03/08(金) 23:22:07.35 ID:8MLFoUZt0.net]
- まさか知らないで叩いてたとはなぁ
- 855 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:19:50.47 ID:/m10ZyJL0.net]
- UIUXが複雑化すればデザインと密接になり、デザインがやるべきことになる
昔ながらのショッピングカートならそうでもないかもしれんがｗ
- 856 名前：デフォルトの名無しさん [2019/03/09(土) 00:31:16.43 ID:e9DsS9n/0.net]
- >>827
> my-componentの外に、置いたinputでも動くし、
> my-componentを複数置いたら、おかしくなるし、
> お前馬鹿なの？ 少しは書く前に頭使ったら？
君は本当成長ないね。過ちは認めようよ。俺は君の質問に的確に答えたよ。同じ動作をするより短いサンプルだろ。その返しがこれって、そんなに負けが認められんか。だから駄目なんだよなあ。。
あと批判するなら少しはvueやreact勉強してから述べような。俺もまさかど素人が批判してるとは思わなかった。当然ある程度は知ってて、それ故に批判すると思うじゃん常識的に考えてさ。そこはすまん。思い至らなかった。次からはスルーするよ。おやすみぃ。
- 857 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:48:24.43 ID:RYW8IiyE0.net]
- 同じ動作してないよね。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？ 少しは書く前に頭使ったら？
そんなにjQueryよりもVueの方が長くなることが許せないの？
事実を受け入れようよｗ
- 858 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:53:19.31 ID:zxiwPMOw0.net]
- なんでjQueryの動作を真似ることが前提なんだよ
言ってることめちゃくちゃじゃん
- 859 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:58:02.98 ID:RYW8IiyE0.net]
- > なんでjQueryの動作を真似ることが前提なんだよ
お前言ってることがおかしい。
$('.my-component [name="switch"]').change(function() {
$(this).closest('.my-component').toggleClass('active', this.checked);
});
これと同じことを実現するという話で、
これというのは、.my-component（クラスなのだから当然）中の [name="switch"]'からの
イベントで.my-component に active クラスを
- 860 名前：つけるというものなんだから、
最低限の条件を満たしてない [] - [ここ壊れてます]
- 861 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 00:58:26.63 ID:RYW8IiyE0.net]
- 訂正
これというのは、.my-component（クラスなのだから当然複数ある）中の [name="switch"]'からの
- 862 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:00:24.50 ID:RYW8IiyE0.net]
- .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'})
- 863 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:02:17.14 ID:RYW8IiyE0.net]
- しかもこれ
<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>
- 864 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:02:49.95 ID:N2GlqC3/0.net]
- こんなところにクソコードベタ貼りしてないでCodesandboxで動くソースでも書いてからリンク貼れよ
- 865 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:04:30.20 ID:RYW8IiyE0.net]
- >>838の実際に動くコードはこちら
jsfiddle.net/rhp9dvya/
これと同じことをVueで実現するコードは
更に長くなる
- 866 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 01:11:28.76 ID:zxiwPMOw0.net]
- はっきり言うけどさ
中のinputまで丸ごとコピペしないと動かないコンポーネントとかコンポーネントじゃねえよ
jQueryならDOM構造は気にしなくて良かったんじゃないのか
- 867 名前：デフォルトの名無しさん [2019/03/09(土) 01:36:21.59 ID:ovl4dn3WM.net]
- 最後にまとめて答えとくよ。
>>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になるだけだよ？何がそんな嫌なのさ？
- 868 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 02:04:13.30 ID:MQBXPAS0M.net]
- jQueryの人頑張ってるみたいだけど
jQ
- 869 名前：デフォルトの名無しさん [2019/03/09(土) 02:07:07.23 ID:ovl4dn3WM.net]
- >>838
> という固定のDOM構造にしか使えないので
> jQueryよりも劣っている
これが大いなる勘違いなんだがもう説明しない。いいから学べ。
> jQueryだとHTML（DOM構造）を自由に変更できる。
> 以下のどのように変更しようとも、JavaScriptのコードは変更の必要はない
これアンチパターンで混乱の元。カプセル化できないコンポーネントなんぞ不安で使えたもんじゃない。セレクタの影響範囲が広すぎて便利なつもりになってるだけ。将来的なデスマーチが約束された最も最悪な例だと気いて欲しい。
- 870 名前：デフォルトの名無しさん [2019/03/09(土) 02:21:00.49 ID:ovl4dn3WM.net]
- あとさ、いいからjQuery君はスレタイ読もうついでに空気もね。
ココはvue react angularスレだよ。公式のサンプル一つも試した事ないのバレてるのよ？？なのにどうやって比較してるの？妄想じゃんそれ。
両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。そしたら俺もキチンと答えるよ。間違ってたら謝るし。俺もjQueryは散々世話になったから嫌いじゃないのよ？
- 871 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 02:50:20.05 ID:Tm/Y9JxW0.net]
- ただ単に覚えたくないんだよ
新しい言語を
jQueryは
- 872 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 03:10:54.41 ID:n56g/PGg0.net]
- 女子更衣室に堂々とチン入してきて延々巨根自慢をする粗チンバカ
- 873 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:00:21.97 ID:RYW8IiyE0.net]
- >>842
> できる。scopedでググるか、詳しくはvueの公式見よう。
scopedは、コンポーネントだけで使えるCSSであって
外部からの影響を受けないようにするものじゃないよ
素人かよｗ
> そこは結びつかなきゃ困るんだよ。リアクティブなんだから。
理由は？ｗ
- 874 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:01:33.11 ID:RYW8IiyE0.net]
- >>845
> 両方のコード見せて具体的に証明してよ。君の言うjQueryの優位性をさ。
jQueryの動くコード
jsfiddle.net/rhp9dvya/
Vueの動くコードはでてない。
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなる
というクソコードしか出てない
- 875 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:05:56.25 ID:RYW8IiyE0.net]
- リアクティブなんだから！（自分で言っていて意味わかっていない）
↑ぷぎゃーｗ
- 876 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:06:59.38 ID:RYW8IiyE0.net]
- > nameがv-modelになるだけだよ？何がそんな嫌なのさ？
デザイナーの世界にないVue（JavaScript）専用の概念を
持ち込むことだね。
- 877 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:17:14
]
- [ここ壊れてます]
- 878 名前：.04 ID:zxiwPMOw0.net mailto: だからおかしくて当然なんだって
勝手にコンポーネントと名乗ってるだけでそれコンポーネントじゃないから
ただのjQuery特有の動作だから [] - [ここ壊れてます]
- 879 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:18:18.22 ID:RYW8IiyE0.net]
- Vueのコンポーネントだけが
正しいコンポーネントだとか
恥ずかしいよ？
- 880 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:22:27.20 ID:zxiwPMOw0.net]
- でもあなたはjQueryの正しいコンポーネントが再現出来ないからクソコードって言うんでしょ
恥ずかしくないの？
- 881 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:26:00.83 ID:RYW8IiyE0.net]
- jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
単にHTML（DOM）の構造によって形作られたものに過ぎない。
専門用語ではなく、単なる英語としてのコンポーネント
この場合のmy-componentというのは、my-componentというクラス名から始まり
内部にname="switch"があるというコンポーネント
my-componentの条件はこれだけだから、DOMの構造はHTMLを修正するだけで柔軟に変更できる。
デザイナはこの条件を守っている限りHTML（CSS)を変更し自由にデザインできるし、
プログラマもデザインが変わってもJavaScriptコードを変更する必要がなくなる。
デザイナの担当とプログラマの担当、つまり修正するファイルが明確に分かれているのも良い
どちらも自分の担当するファイルを自由に変更できるから分業することも容易になっている
- 882 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:29:39.24 ID:RYW8IiyE0.net]
- >>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
- 883 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 07:45:09.02 ID:RYW8IiyE0.net]
- ここで（HTML側を自由変更できないとはいえ）複数置いても問題ないコードを
書いてるから常識的な仕様ぐらい理解してると思うんだよねｗ
https://codepen.io/hinoragi/pen/YgVQjK
でもそれだとVueの方がjQueryよりも大幅に長くなっちゃったから
これだけでできる！（←まともに動かない）
と騙そうとしたんだろうね。
でもバレちゃったｗ
- 884 名前：デフォルトの名無しさん [2019/03/09(土) 08:07:35.93 ID:e9DsS9n/0.net]
- >>848
アホはお前だろう。。もう少しよく読んで意図把握しよう。
あとやっぱり君はリアクティブ自体理解できてないのがよくわかる。だからもう少し公式読め。
- 885 名前：デフォルトの名無しさん [2019/03/09(土) 08:10:00.82 ID:e9DsS9n/0.net]
- >>849
ほら
自分が書けないからそうやって逃げる。全く進歩しない。分からない事は否定するだけ。いいから自分で勉強証明しなって。見ててやるからさ。
- 886 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 08:10:39.68 ID:zxiwPMOw0.net]
- 提示された例がコンポーネントじゃないから当然なんだって
inputが中に２つあっても動いちゃうし無かったら役立たずのmy-componentが残るだけ
綺麗にコピペしないと動かないなんて常識的なコンポーネントの仕様を守ってないよね
- 887 名前：デフォルトの名無しさん [2019/03/09(土) 08:16:51.61 ID:e9DsS9n/0.net]
- >>857
なあ自分で言ってて悲しくならない？
new Vueすら知らない事バレてるんよ君w。俺はもう説明しない。基本すら自学できない奴に教える価値無い。
- 888 名前：デフォルトの名無しさん [2019/03/09(土) 08:24:01.30 ID:e9DsS9n/0.net]
- >>855
> jQueryの場合というか、コンポーネントというのは別にjQueryの用語ではなく
> 単にHTML（DOM）の構造によって形作られたものに過ぎない。
> 専門用語ではなく、単なる英語としてのコンポーネント
無知極まってるぞ。勝手に定義するな。マジで少し勉強して。そんな俺様定義だからあんな再利用できない紛いモノ書くんだよ。
- 889 名前：デフォルトの名無しさん [2019/03/09(土) 08:28:42.54 ID:e9DsS9n/0.net]
- だああ、色々言いたいが出社だ。
いいかiQuery君。君はまずスレチだ。そこをまず理解しろ。
その上で書くならせめてjQueryとvue react angularのどれか、2つのコードを比較しながらjQueryの良さを語れ。
それがここに書き込む最低の礼儀じゃね？
- 890 名前：デフォルトの名無しさん [2019/03/09(土) 08:37:47.27 ID:e9DsS9n/0.net]
- 最後にもう一回言うぞ。
jQueryのコード置くだけで「だからvueだめなんだよ」コレ止めろ。
基礎だけでもVueを勉強してから発言するのが筋だぜ。でないと話が通じないから困るんだよ。ほらココvueのスレでもあるし。
- 891 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:14:15.58 ID:N2GlqC3/0.net]
- >>849
かっこいい画像.gifくらいちゃんと用意しろよ
- 892 名前：デフォルトの名無しさん mailto:sage [2019/03/09(土) 09:18:13.96 ID:izNw5U5za.net]
- >>851
デザイナーは巣のhtmlだけ書いてくれりゃいいよ
実環境にコードをマージする作業はこっちでやるし
|
 |
