Vue vs React vs Angular

■ このスレッドは過去ログ倉庫に格納されています
2018/12/21(金) 21:37:36.86ID:NZqrEm960

実際どうなん？
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
VIPQ2_EXTDAT: default:vvvvv:1000:512:----: EXT was configured
2019/03/07(木) 18:14:20.13ID:mVKClUMzd
簡単にいい感じのページが作れるのはメリットの一つだと思うけどな。
例えばpythonは成果物に関してはCに対するメリットはないけど簡単に作れるから人気なわけで。
2019/03/07(木) 21:20:18.65ID:bV0vVOYFM
>>728
いやだからさ
「要件次第」で済む話を何度掘り返すのよ
スレタイ見てスレチだと思わないの？
2019/03/07(木) 22:37:46.71ID:cPei42ec0
>人はある処理の中でDOMのどの部分を書き換えたいかを
>知っているので、必要最小限のDOM操作しか変更しない
>（クソプログラマなら全部消して作り直すとかいう無駄してるかもしれんが）

クソプログラマは全部消して作り直す
賢いプログラマはどうDOM操作すれば最適かなどという生産性のない仕事をフレームワークに任せる
2019/03/07(木) 22:42:13.25ID:N/E4f3Caa
>>725
管理対象の状態数が増えるのがやだ
状態はできるだけ純粋で論理的な形式で管理したい
という要求がスッポリ抜けてるね
2019/03/07(木) 22:55:10.59ID:Tta1cO7U0
GoogleもこれからPWAで攻めてきそうだけどね
2019/03/07(木) 22:59:25.97ID:Y4GuSkwR0
>>732
CSSは宣言型なので、
管理対象の状態数が減るんですよ
2019/03/07(木) 23:00:35.30ID:Y4GuSkwR0
>>731
> 賢いプログラマはどうDOM操作すれば最適かなどという生産性のない仕事をフレームワークに任せる

もっと賢いプログラマは、必要なことしかしないんだよ。
Aを変えたいなら、Aだけを変えましょう。ってね
2019/03/07(木) 23:01:50.74ID:N/E4f3Caa
>>734
domの状態数は多すぎるよ
2019/03/07(木) 23:04:15.56ID:N/E4f3Caa
>>735
見えるか見えないかみたいな、ただの論理値を管理したいだけなのに
それをわざわざdom/cssの物理構造に縛られた迂遠な方法で管理するのは確かに賢くないな
2019/03/07(木) 23:09:46.27ID:oTfLqBj1a
まあ本当に賢いプログラマ達はフロントエンドなんてやらないんですけどね
2019/03/07(木) 23:11:14.61ID:N/E4f3Caa
>>738
それは同意
2019/03/07(木) 23:12:46.45ID:Y4GuSkwR0
AしたらBを変えたいんですが？

Reactを使うと・・・・



ではBを変数に結びつけましょう。
そういうコードを書き換えます。
そうすれば変数を変えればBも変わります。
おっと待ってください。
そのために変数をSTOREに入れなければいけません。
STOREからとってきて、STOREを更新・・・いえいえいけません
新しくオブジェクトを作るのです。
そのオブジェクトを作るために〜
オブジェクトを変更する関数を用意するのです！
その関数を作るための、はい、メッセージが必要ですね。

えぇ、ですからね、AしたらAction Creatorを使ってactionを生成して
Storeに対してactinonをDispatchして、ReducerがDispatchに反応して
actionタイプから今の状態から新しい状態を変更すれば、
ほら簡単にBが変わるんです！

え？普通にAイベントのハンドラでBを変えればいいじゃないかって？

ムキー！
2019/03/07(木) 23:14:47.91ID:Y4GuSkwR0
>>737
> それをわざわざdom/cssの物理構造に縛られた迂遠な方法で管理するのは確かに賢くないな

だから、CSSを使うといいですね。
JavaScirptからは親となる要素にクラスを設定するだけなんですよ。
簡単。DOMがどういう構造になっているかなんて関係ない。

あとはデザインを作る人が、その状態でどう表示したいかを作るだけなんです。
742デフォルトの名無しさん (ｵｯﾍﾟｹ Src7-EzoF)
垢版 |
2019/03/07(木) 23:23:16.99ID:jEbiMY7gr
fluxの概念を取り入れたらものすごく簡単に状態管理ができる！
って本にもキータにもみんな書いてるんだけど？
2019/03/07(木) 23:23:24.15ID:N/E4f3Caa
>>741
私が管理したいのは見えるか見えないかという2つの純粋な状態なんです
ブーリアンで済むものをわざわざスタイルシートやらクラスなどといった迂遠な方法で管理したくないんです
それはまるで物体から投影された影に干渉して、もとの物体を操ろうとするような愚かなことです
744デフォルトの名無しさん (ﾜｯﾁｮｲ ff3d-g2Ga)
垢版 |
2019/03/07(木) 23:58:03.68ID:tvHZX0HA0
どっちも極端じゃないか？
バインディングならjQueryよりはVueやReact使った方がいいと思うけど、
表示非表示やアニメーションならcss側でやった方がいいと思う。
2019/03/08(金) 00:38:11.11ID:kMybevyH0
仮想ＤＯＭとJQueryの世代の重要な違いとして
セレクタやDOM操作を一切したくないという発想があるのではないだろうか
JSXでHTMLをそのまま書くのもセレクタを使いたくないからだろうし
2019/03/08(金) 00:47:24.38ID:N66/0TP00
実DOM では、IO 操作が遅い

仮想DOMでは、JavaScript内の操作だけだから、速い
2019/03/08(金) 01:03:32.93ID:kMybevyH0
それはHTMLFragmentがあれば事足りる話っしょ
2019/03/08(金) 10:15:11.65ID:jbQifWXg0
>>743
> ブーリアンで済むものをわざわざスタイルシートやらクラスなどといった迂遠な方法で管理したくないんです

だからセレクタのクラスはブーリアンなんだよ

ある要素に、flagクラスというブーリアン値が
立っているか、立っていないか
2019/03/08(金) 10:16:08.10ID:jbQifWXg0
>>746
仮想DOMを実DOMに反映させる所で
大幅に遅くなるんだよ
750デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 11:13:41.54ID:/TYC9ex30
>>725
リアクティブだと一行で終わるよね。単に変数をfalseにするだけ。ミスしようがない。うーん、なんでjQueryやcssにそこまでこだわるかね。みんな散々苦労してきた末のスマートな解決方法が仮想domでありリアクティブなんだけどな。一度試してみたら？食わず嫌いしないでさ。
2019/03/08(金) 11:17:51.39ID:jbQifWXg0
> リアクティブだと一行で終わるよね。単に変数をfalseにするだけ。

終わらねーよｗ 変数みてデザインを変えるコードを書かないとだめだろ
752デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 11:28:53.74ID:/TYC9ex30
>>751
そう、まさにそこがキモ。ロジックとuiが綺麗に分離されてる。
Falseになった結果どうなるかはuiの管轄でcssやdomとは本来無関係なんだよ。jQueryはそこが分離できない。
2019/03/08(金) 11:35:19.90ID:jbQifWXg0
> そう、まさにそこがキモ。ロジックとuiが綺麗に分離されてる。

別れてないよ。JavaScriptファイルを編集してもらわないといけない

CSSだと「プログラマの俺は、この要素のクラスを設定するだけです。
デザイナーさん、あとはかっこいいデザインを作ってください！」といえる

デザイナーはJavaScriptファイルを一切触らずに
デザインを作り込むことができる。
2019/03/08(金) 11:40:36.85ID:jbQifWXg0
jQueryで書く場合はこんな感じだね。

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

コンポーネントの中にある名前がswitchのチェックボックスがONになれば
そのコンポーネントがactiveになって、
そのコンポーネント以下のデザインがactive用に変わる

DOMの構成がどうなっているか一切気にする必要がないんだよ。
755デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 13:46:44.51ID:/TYC9ex30
>>753
デザイナはスクリプトをいじる必要全くない。例えば
<div v-if=“isShow”></div>
というテンプレに対してスクリプトでは、
isShow=false
とするだけ。これだけでリアクティブになる。どっちがミスが少ないか分かるだろう？
756デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 13:50:05.53ID:/TYC9ex30
すまん途切れた。どっちがミスが少ないか、分業しやすいか分かると思うんだが、どうかね？
2019/03/08(金) 13:55:12.54ID:jbQifWXg0
> <div v-if=“isShow”></div>

すいませーん、デザイナーさーん。
今度から、v-ifってのを覚えてくださいー。

いままでCSSで表示切り替えしてたでしょー？
それ、今度からやめてくださいねー。

リ・ア・ク・ト。やり方覚えてくださいね。
やり方変えたんですよ。こっちのやり方にね。
え？他にも色々ありますよ。勉強してくださいー。
2019/03/08(金) 13:57:57.43ID:kMybevyH0
Javascript(Data/Model) - Javascript(UI/DOM) - HTML/CSS
デザイナーが真ん中の層を如何にやるのかという話だろう
HTML内にv-bindとか属性で埋め込むのもJQueryを書かせるのも同じこと
仮想DOMのフレームワークによって真ん中が無くなったとは言えないだろうし
2019/03/08(金) 14:02:22.95ID:jbQifWXg0
jQueryはプログラマが使って、
イベントに反応してクラスを変更するだけなんだよ。

あとはDOMの構造とかCSSとか完全にデザイナーに
任せることができる。

デザイナーはデザイナーの流儀でやれるし、
JavaScriptフレームワークの流儀を押し付けることもない
2019/03/08(金) 14:05:09.01ID:jbQifWXg0
>>758
HTMLのタグはDOMですか？
CSSで指定する色や配置はUIですか？
761デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 14:11:29.15ID:/TYC9ex30
>>758
いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
>>757
うむ、リアクティブの方が良い事は理解できたようだね。あとは君がデザイナや上司を説得するんだよ。そこは別問題。
2019/03/08(金) 14:12:44.22ID:kMybevyH0
jQueryはすべてデザイナーがやるべき
ボタンをクリックしたらどのタグの色が変わるのか、それを知っているのはデザイナーだけで良い
2019/03/08(金) 14:20:09.62ID:jbQifWXg0
>>761
> いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。

jQueryの方が少ないですね。

嘘だと思うならこれ同じことを実際に動くのに必要な分、書いてみてください。

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

[HTML]
<div class="my-component">
　<input type="checkbox" name="switch">switch
</div>

[CSS]
.my-component.active {
color: red;
}

jQuery版の実際に動くコードですよ。
https://jsfiddle.net/eu2wm3tk/
764デフォルトの名無しさん (ｵｯﾍﾟｹ Src7-EzoF)
垢版 |
2019/03/08(金) 14:20:12.96ID:mjBCJk3zr
ほらほらだからこうなるって何度も言っただろ
フロントはフルスタックじゃないとこの程度ですら揉めるんだよ
もう一度言うぞ

デザインできないフロントエンジニアはクソ
エンジニアリングできないフロントデザイナーはクソ

お前ら言い争ってる時点で無能だと自覚しろ
2019/03/08(金) 14:20:13.82ID:kMybevyH0
>>761
＞いや随分コード減るぞ。当然ミスも減る。デザイナも楽になる。
そう、デザイン側のJSコードは減る。それはたしかだし、データ側JSとの繋ぎかたもはっきりとするね
欠点はHTML内に変なのをたくさん突っ込むのはいかがなものかってことかな
2019/03/08(金) 14:20:59.66ID:jbQifWXg0
>>762
> jQueryはすべてデザイナーがやるべき
JavaScriptのライブラリなのにデザイナーって意味不明ｗ

ボタンを押したら、ここのタグにこういうクラスがつきます。
って伝えるだけで、あとはそれぞれ作業ができる。

これが分業っていうんだよ。
2019/03/08(金) 14:28:57.63ID:B/j0V0h2a
>>757
どっちかというとその場合デザイナーに必要なのはv-showじゃなくてisShowだから
どういうモードの時変数の設定値を何にすべきかという一覧表があればいいだけじゃね？
てかその辺のコード化はデザイナーじゃなくてフロントエンジニアの仕事だろ
2019/03/08(金) 14:31:25.36ID:jbQifWXg0
> てかその辺のコード化はデザイナーじゃなくてフロントエンジニアの仕事だろ
フロントエンジニアがHTMLを書くから
分業できないってことなんですよ
769デフォルトの名無しさん (ｵｯﾍﾟｹ Src7-EzoF)
垢版 |
2019/03/08(金) 14:33:21.35ID:mjBCJk3zr
>>757
いや、お前がデザイン覚えろよwwww
2019/03/08(金) 14:36:15.92ID:kMybevyH0
>>766
プログラマーはcssに書かれたclassの名前まで知らなくていい
その方がデザイナーが変更してもプログラマーが対応しなくて済むだろ？
2019/03/08(金) 14:54:21.66ID:B/j0V0h2a
デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん
772デフォルトの名無しさん (ｵｯﾍﾟｹ Src7-EzoF)
垢版 |
2019/03/08(金) 14:58:33.92ID:kvsQt7Fnr
UI・UXやインタラクションはエンジニアがやる分野
世界的にもその方向性になってきている
しかし世界中のエンジニアは無能だからまともにデザインできない
ごく簡単なUIすら理解できない

終わってんだろ
2019/03/08(金) 15:02:21.59ID:B/j0V0h2a
最低限のモダンっぽい見た目でいいならもうcssフレームワークのどれかでもいいだろ
2019/03/08(金) 15:07:22.44ID:jbQifWXg0
>>769
> いや、お前がデザイン覚えろよwwww

分業するんだよ
2019/03/08(金) 15:08:44.58ID:jbQifWXg0
>>770
分業っていうのは、完全に相手のことを知らないで
できるわけじゃないんだよ。

必要最小限、クラス名だけ。

jQuery使って、HTMLとCSSを正しく使うだけで
最小限の連絡で、それぞれが開発できるんだよ。
2019/03/08(金) 15:11:41.12ID:jbQifWXg0
>>771
> デザイナーはロジックレスな一枚ずつのhtmlと画像素材のcss作ってりゃそれでいいじゃん

コンポーネントには状態があるんだから、
少なくともその状態ごとのデザインは作ってもらわないと困る。

で、どうやるかというと、お互いで決めたルール
コンポーネントのここに、こういうクラスがつきますよー
というルールに基づいて

デザイナーは、HTMLのコンポーネントのタグに
classを変更するだけなんだよ。
最終的にはJavaScriptでクラスを変更することになるが
開発中は、手書きでクラスを変更するだけ

超簡単
2019/03/08(金) 15:13:04.69ID:kMybevyH0
>>772
いやUI・UXはデザイナーがやるべきだろ
そこで分離するからおかしなことになってる
2019/03/08(金) 15:15:10.57ID:B/j0V0h2a
デザイナーに求めるものなんて最低限なら画像データだっていい
html形式でブラウザで表示できるなら大助かり
期日が守れないヤツ多いから最低限期日までにどっちか出してくれればそれ以上に求める事なんてねぇんだが
779デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 16:28:21.11ID:/TYC9ex30
>>763
くわー面倒だなあ。でもコード見ないと分からんか。

[JavaScript]
isActive=false

[HTML]
<div class="my-component" class=“{active:isActive}”>
<input type="checkbox” v-model=“isActive”>switch
</div>

[css]
変更なし

どう？君のコードより随分少ないだろ。特にscriptなんて変数一個で終わり。まだ分からない事あるなら聞いてみなよ。でもスマホ手打ちなんで面倒なのはやめてw
780デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 16:38:37.56ID:/TYC9ex30
おっとミスった。スマホ手打ちなんですまんね。

[HTML]
<div class="my-component" class=“{active:isActive}”>
正しくは
<div class="my-component" :class=“{active:isActive}”>
:が抜けてたよ。
2019/03/08(金) 16:49:32.55ID:oNzvowiX0
>>779
あのさぁ、動かないコード書かないでくれないか？
scriptタグまでは書かなくていいよ。jQueryでも書いてないからさ、
でも動くコード書いてっていったよね？
せめてjsfiddleで動かしてから来てよ
2019/03/08(金) 16:54:12.44ID:oNzvowiX0
なんか動くって嘘つきそうだから
>>779では動かないという証拠として
>>779の内容を https://jsfiddle.net/b5xusp1d/ に書いておいたから

ほら動かないでしょ？
これを動くように修正してね。

jQuery版の実際に動くコードですよ。
https://jsfiddle.net/eu2wm3tk/
783デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 16:55:22.77ID:/TYC9ex30
>>781
それは贅沢だなw。こっちはスマホだと言うのに。あ、そうか君はvue知らないから動作チェックできないのか。どうせなら入れてみたら？簡単だよ。
あとコードは短くなった訳だが感想はどうかね？
2019/03/08(金) 16:55:35.67ID:oNzvowiX0
ほんとなんですぐばれる嘘を作るんだろう？
理解できないな
2019/03/08(金) 16:56:30.27ID:oNzvowiX0
>>783
だから動かないって
証拠>>782にかいたからさ。
お前がスマホとか知らんわ

スマホだから動かなくてもいいでしょ？
嘘だけど、いいでしょとか。恥ずかしくないの？
2019/03/08(金) 16:58:49.01ID:oNzvowiX0
あ、ReactじゃなくてVueか。

はい、こっちにVue読み込んだの置いたからさ、
こっちも動かない。はぁ。動かない（笑）

https://jsfiddle.net/zvft0qo8/
787デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 17:01:09.95ID:/TYC9ex30
>>786
書き方間違えてるぞ。vue初期からしなきゃ動かんよw
2019/03/08(金) 17:01:40.94ID:oNzvowiX0
あともう一つ教えといてあげるよ。

作ったのは.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/
2019/03/08(金) 17:02:12.51ID:oNzvowiX0
>>787
書き方間違えてるって。
動くコード書いてないお前の落ち度じゃん
2019/03/08(金) 17:07:56.77ID:oNzvowiX0
vueは面倒だなーって思いながら、

vue初期からしなきゃ動かんよw

と指摘された点を
今書いてるのかな？ｗ
791デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 17:08:24.75ID:/TYC9ex30
>>789
おいおい、vue知らないのに勝手にアップして動かないと言うのは無しだろ。知らないなら知らないと言えば教えてあげるのに。初期化方法までは面倒みれんぞ。jQueryだってそうだろ？
まあいいよ、後で動作する奴を上げてあげるよ。
2019/03/08(金) 17:12:52.61ID:oNzvowiX0
> jQueryだってそうだろ

何言ってるんだ？
jsfiddleにはまさにこれだけのコードしか書いてないんだが？

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

いやまさかそんなこと、ありえるなんて思いもしなかった！
レベルなのか？ｗ
2019/03/08(金) 17:15:48.86ID:oNzvowiX0
ついでだからちょっと改造

$('.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/
2019/03/08(金) 17:19:36.99ID:oNzvowiX0
>>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>
795デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/08(金) 17:59:49.58ID:/TYC9ex30
>>794
ふう、やっとPCの前に戻ってきた。というわけでちょっと上げてみた。ブラウザから5ch書き込むの久しぶりだわｗ。
https://codepen.io/hinoragi/pen/YgVQjK

簡単にテンプレート化してコンポーネント化もしといた。何か分からないことあるなら遠慮なく質問してよ。ちょっと用事あるから次は10時ぐらいにスレみる予定。
2019/03/08(金) 18:05:40.88ID:oNzvowiX0
[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のコードに移動したんで
デザイン変えたきゃVueの方いじってくださいねｗｗｗ

やっぱりこうなるｗ
2019/03/08(金) 18:07:11.66ID:oNzvowiX0
[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の方いじってくださいねｗｗｗ

やっぱりこうなるｗ


行数は増え、分業ができなくなる
2019/03/08(金) 18:11:58.57ID:oNzvowiX0
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>
799デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 18:44:14.67ID:/TYC9ex30
>>797
気になって覗きに来たら案の定。。うーん、そこから先は話長くなるぞ。一番簡単なサンプルだし、5chでやる規模じゃない。
それより最初の話はどうした？vueの方が随分コード短いぞ。その質問に答える為にサンプル上げたんだが、答えるのが礼儀ってもんだぜ。
2019/03/08(金) 18:49:38.83ID:oNzvowiX0
>>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'})
2019/03/08(金) 18:52:05.37ID:oNzvowiX0
それに一番ひどいのは、やっぱりmy-componentのdivの中身を
デザイナがいじろうとしたら、JavaScriptファイルを修正しなければ
ならなくなるってところなんだよね。
DOMとコードが密接に結びついちゃってる。
2019/03/08(金) 18:56:00.97ID:oNzvowiX0
jQueryの場合、JavaScriptのコードとDOMの構造は結ぶていてなくて
結びついているのは、.my-componentというクラス名と
input name=switchだけ。だからDOMの構造をどんなに変えても
クラス名とそういう名前のinputがあればいい
コードとDOMの構造が分離されている
803デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 19:11:44.53ID:/TYC9ex30
>>801
やっぱり全く理解できてないじゃん。最初の話に戻すぞ。
最初の例ならスクリプトは、
new vue({data:{isActive:false}})
これだけ。君が分からなくて動かん！！とか騒いでた奴。君のその3行のスクリプトと比べてみなよ。

次に、まあ君はvue知らんからしょうがないがテンプレートは実務では当然外部に持つ。単一ファイルコンポーネントでググれ。

これで聞かれた事は答えたって事で俺からも質問していいか？

さっきからコンポーネントと言ってるが、君のはコンポーネントじゃないだろ。単なるコピペでカプセル化も局所化も無い。サンプルである事を割り引いてもコンポーネントと呼べる内容じゃない、と思うんだが、マジでどう思ってるの？
2019/03/08(金) 19:14:42.43ID:oNzvowiX0
>>803
> new vue({data:{isActive:false}})

それだけだと、どれと結びついてるのか（＝セレクタ）その情報がないだろ。
セレクタを省略して良いんだったら、jQueryだってこの一行だよ。
toggleClass('active', this.checked);
2019/03/08(金) 19:16:38.22ID:oNzvowiX0
いや、値を変えるコードすら無いかｗ
jQueryだとこれだなｗ Vueより断然短い
'active'
2019/03/08(金) 19:23:09.87ID:oNzvowiX0
> 最初の例ならスクリプトは、
> new vue({data:{isActive:false}})
> これだけ。

これだけで動く！（=動かない）

これなんて詐欺？ｗ
807デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 19:25:20.00ID:/TYC9ex30
>>804
がーん、ここまで書いても分からんか。それ動作せんだろ。。自分で言った様に動作するコードで比較しようぜ！！
それと、俺は君を責めてる訳じゃなんだぜ。長年jQueryには世話になったから、優秀なライブラリだとよく知ってる。でもここはvue react angularスレだろ。jQueryはややすれ違いなんだよ。でもまあお互いの長所短所を比較しつつ、まったり雑談しようや。
808デフォルトの名無しさん (ﾜｯﾁｮｲ a701-w6xA)
垢版 |
2019/03/08(金) 19:26:43.19ID:/TYC9ex30
>>806
wwワザとか？vue本体ロードしなはれよ。
2019/03/08(金) 19:29:20.37ID:oNzvowiX0
>>808
はい。動かない証拠。vue本体は前の人がロードしてますよーｗ
https://codepen.io/anon/pen/MxmrjP
2019/03/08(金) 19:30:11.51ID:oNzvowiX0
>>807
だから動作しないコードを出して
これだけって嘘を付くのをやめろって言ってるんだが、

これだけって、どこまでごこれだけなんｄ？
動作しないコードまでがこれだけか。
2019/03/08(金) 19:30:33.50ID:oNzvowiX0
これだけって、どこまでがこれだけなんだ？
動作しないコードまでがこれだけか。
812デフォルトの名無しさん (ﾄﾞｺｸﾞﾛ MM97-w6xA)
垢版 |
2019/03/08(金) 19:35:01.38ID:YjtKBzOFM
はあ、、分かった分かった。最初の例で動く奴上げてやるよ。出先でだから1時間後な。

で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。
2019/03/08(金) 19:37:01.18ID:oNzvowiX0
見ての通り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.43ID:oNzvowiX0
>>812
> で、その間に俺の質問にも答えてくれ。君のコードは再利用できないし、コンポーネントではない。どう再利用するつもりなの？そのむき出しのmy-conponentで。

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

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

だからHTMLのタグの分だけインスタンスが存在しているようなもので、
普通に再利用できる。
2019/03/08(金) 19:43:49.07ID:oNzvowiX0
Vueの場合、コンポーネントが状態を持ってしまってる。
isActiveという変数のことな。

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

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

HTMLがガッツリJavaScriptと結びついてしまっているわけだ
816デフォルトの名無しさん (ﾄﾞｺｸﾞﾛ MM97-w6xA)
垢版 |
2019/03/08(金) 20:00:52.98ID:YjtKBzOFM
>>815
どこから突っ込めばいいんだ。。

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

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

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

普通に参照できる。

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

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

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

まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。
817デフォルトの名無しさん (ﾄﾞｺｸﾞﾛ MM97-w6xA)
垢版 |
2019/03/08(金) 20:09:37.29ID:YjtKBzOFM
いいよ、もう少し分かりやすい質問しよう。
コンポーネントの要素として、簡単に テンプレート、css、jsがあるとしよう。3つ合わせてコンポーネントね。これらは外部から容易に参照できてはいけないし、干渉されてはいけない、複製も容易でないとダメ。
君のやり方で、my-componentをどうコンポーネント化するのか例示して欲しい。
2019/03/08(金) 20:19:23.19ID:QXTI5KI7a
わかった

Delphi使え
2019/03/08(金) 20:35:47.91ID:oNzvowiX0
>>817
何が言いたいのかわからん。

CSSで div { color: red } って書いても
影響を受けないようになんて、Vueでもできないだろ
2019/03/08(金) 20:36:44.19ID:oNzvowiX0
>>816
> まさかと思うがサンプルのtemplate見て言ってる？結びつくの真意が分からんがjQueryも結びついてるだろ。

jQueryでは結びつかない。

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

↑どこにjQuery関連のものがあるか言ってみな
2019/03/08(金) 20:43:00.51ID:oNzvowiX0
> Vueの場合、コンポーネントが状態を持ってしまってる。
> isActiveという変数のことな。

訂正

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

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

jQueryの場合JavaScriptのコードでは状態を持たないから、
DOMが一つだろうと複数だろうが、処理を共有化できる。
822デフォルトの名無しさん (ｵｯﾍﾟｹ Src7-EzoF)
垢版 |
2019/03/08(金) 21:16:27.20ID:kvsQt7Fnr
デザインやUI・UX、インタラクションが実装できないクソエンジニアどもがギャーギャー騒いでる
お前ら自分の無能さを披露して恥ずかしくねえの？

フロントやるならデザイン込みでUIくらいやれや
クソみたいなUI作ってんじゃねえよ
2019/03/08(金) 21:19:25.25ID:oNzvowiX0
餅は餅屋
824デフォルトの名無しさん (ﾜｯﾁｮｲ a701-chNm)
垢版 |
2019/03/08(金) 21:31:02.59ID:/TYC9ex30
ただいまー。という訳で最初の質問の答えアップだよ。
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勉強しようよ。こんな短いサンプルの初期化方法すら知らなかった訳で、知らないからって全力否定するのはどうなのって思うぞ。
825デフォルトの名無しさん (ｵｯﾍﾟｹ Src7-EzoF)
垢版 |
2019/03/08(金) 21:36:39.46ID:kvsQt7Fnr
デザインできてUIUXできるようになれば引く手数多だぞ
ほんとフルスタックはほとんどいないから
年収は最低でも1000万はいく
2019/03/08(金) 21:40:42.36ID:NeLzfZqe0
静的なWebページがあってそこにちょっと動きを付ける程度ならjQueryがお手軽。まぁそうだな。
2019/03/08(金) 22:04:03.93ID:oNzvowiX0
>>824
my-componentの外に、置いたinputでも動くし、
my-componentを複数置いたら、おかしくなるし、
お前馬鹿なの？ 少しは書く前に頭使ったら？
2019/03/08(金) 22:19:01.08ID:JZ/onRPtM
行数連呼しといてそりゃねえだろ
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況