Vue vs React vs Angular Part.2

**デフォルトの名無しさん** · 2019/03/09(土) 22:02:33.71

実際どうなん？
Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
-
VIPQ2_EXTDAT: default:vvvvv:1000:512:----: EXT was configured
※前スレ
Vue vs React vs Angular
http://mevius.5ch.net/test/read.cgi/tech/1545395856/

★ここではjQueryの話題は禁止です
★jQuery房が書き込んでも無視してください

**デフォルトの名無しさん** · 2019/04/20(土) 02:57:45.91

この業界の闇が見れたよ
vue js 大規模

https://mobile.twitter.com/rei_ktrg/status/1119150597599404032/photo/2

https://mobile.twitter.com/andoshin11/status/1118694687794053120

https://mobile.twitter.com/ku_suke/status/1119053092069097472
https://twitter.com/5chan_nel (5ch newer account)

**デフォルトの名無しさん** · 2019/04/20(土) 04:51:28.50

vue,reactならreactのが好きだけどreduxがデファクト取ったのほんとつらい

**デフォルトの名無しさん** · 2019/04/20(土) 06:58:25.30

>>472
react,vueくらいならちょこっと作るのもそこまで苦じゃないけど
angularはなんか闇を感じるぞ。。

**デフォルトの名無しさん** · 2019/04/20(土) 07:42:58.61

>>441
HTMLエンコードも、しないといけない。
「& < > "」などを、「&」「<」「>」「"」に置換

Ruby のERB では、
結果を出力するなら、<% = 式 >
しないなら、<% 式 >

<% # コメント >

地の文(Rubyの式以外)で、<% を使う、
または、ERBタグ内で、%> を使う場合は、% を2重にする(エスケープ)

**476** · 2019/04/20(土) 07:51:06.41

自己レス
>「& < > "」などを、「&」「<」「>」「"」に置換

あれ？どうして「&」と表示されたのか？

「&」(全角なら「&ａｍｐ;」)と書いたのに。
5ch のバグ？

**476** · 2019/04/20(土) 07:58:58.23

自己レス
>「&」(全角なら「&ａｍｐ;」)と書いたのに。

「&」
ここには半角で「& a m p ;」(ただし、空白を除く)、
全角で書くと「&ａｍｐ;」と書いているけど、「ａｍｐ;」が表示されない！

なぜ？

**デフォルトの名無しさん** · 2019/04/20(土) 08:22:32.49

vueできますの人ってJQueryの延長で使えてるだけの人多いから危険だわ
Reactできますの人雇った方が安全
アプリとしての設計できるか否かと文法覚えたからコード書けますは違うから
Reactできるなら設計できると考えていい

**デフォルトの名無しさん** · 2019/04/20(土) 08:31:55.09

>>478
2chの頃からUnicodeの表示には10進文字参照使ってるから
&のエスケープだけ効くようになってる
&amp;と書けばいい

**デフォルトの名無しさん** · 2019/04/20(土) 09:34:01.59

>>479
Reactはそんなに難しいってこと？

**デフォルトの名無しさん** · 2019/04/20(土) 09:44:58.55

ちゃんとしっかり向き合えば難しいって事はないよ
Reduxだって書いてれば慣れるし慣れればそれほど難解じゃない

一回ベタでJSX書いてそこから部品になりそうなものを切り出したら
次に似たような画面作る時劇的に手間が減ったりする

**デフォルトの名無しさん** · 2019/04/20(土) 09:50:31.75

Aureria使ってるけど全然難しくないぞ
Reactも難しくはないんだろう
むしろVueってそんなに簡単なの？

**デフォルトの名無しさん** · 2019/04/20(土) 10:18:20.36

どのフレームワークも書き方が違うだけで構成する要素（状態、ルーティング、コンポーネント）は似たり寄ったりだと思うよ
ただVueの場合
<div id="app">
…
</div>
をルートコンポーネントとしてVueに関連付けるのにdiv涛烽ﾌDOMをそのまま使えるっていうのが新規にはとっつきやすい一因だと思う
もちろん別ファイルに書いたルートコンポーネントをマウントすることもできるけど

DOMがそのまま→既存のサイトに追加できるって事で入りやすいんだろうけど
できたものはカオスなんだろうなって思う

**デフォルトの名無しさん** · 2019/04/20(土) 10:49:02.44

問題は非同期通信をどこに置くか、どう実行するかってとこでしょ。

**デフォルトの名無しさん** · 2019/04/20(土) 12:02:30.90

そもそもそれSPAにする意味あるの？というところからだな

**デフォルトの名無しさん** · 2019/04/20(土) 13:17:37.40

そもそもただの静的なhtmlで十分てのはあるがそれはまた別の話だな。

**デフォルトの名無しさん** · 2019/04/20(土) 13:50:29.73

>>487
静的なHTMLは、サーバーに置いたHTMLを表示するだけ
動的なHTMLは、データベースなどにアクセスしてHTMLを動的に生成するもの

どちらもJavaScript使用の有無は関係ないのですよ

**デフォルトの名無しさん** · 2019/04/20(土) 14:06:39.55

Reduxって他のフレームワークでも
汎用的に使えるの？

vueにはVuex があるし

**デフォルトの名無しさん** · 2019/04/20(土) 14:20:12.59

>>481
Reactは設計や構造を考えられる人じゃないと
まともに動くモノは組めないからね
学習コストはAngularより低いけども設計力が必要

Reactに関しては得手不得手が分かれると思う
合ってる人なら即日使えるようになる
苦手な人は勉強しても駄目かもしれない

**デフォルトの名無しさん** · 2019/04/20(土) 14:23:17.25

負の遺産が量産され続けてそう
数年後が怖いね

**デフォルトの名無しさん** · 2019/04/20(土) 14:28:03.53

設計や構造を考えないで動的に動くview作ろうってのがそもそも間違いじゃね？
と思うんだが。

**デフォルトの名無しさん** · 2019/04/20(土) 14:34:34.23

（汎用の）コンポーネントを作るという考え方で作れば良いんですよ。
そうすれば、全体を考えなくていい。

**デフォルトの名無しさん** · 2019/04/20(土) 14:43:31.02

んなこたない。
部品で分けても結局どう繋ぐかって問題は出てくる。
だからコールバックを引き回すのかreduxみたいな一周するパターンを使うのか考えるわけだ。

**デフォルトの名無しさん** · 2019/04/20(土) 14:52:25.93

まだプログラミング自体初心者だった頃に、個人で何か作ろうとしてみたりしてたときは、確かに設計なんかせずに順番に動くように動くようにプログラミングしてたわ。

**デフォルトの名無しさん** · 2019/04/20(土) 15:52:34.64

reactもvueも適材適所でいいんじゃない？設計は別のレベルの話だろう。所詮道具なんだしさ。いやそれを議論するスレだったなw

**デフォルトの名無しさん** · 2019/04/20(土) 16:20:16.32

大抵の人はjqueryを使う規模で十分であるが
jqueryで何か新しく書こうとなると辛い
そこで規模にマッチするのがVueになるからVueが人気

**デフォルトの名無しさん** · 2019/04/21(日) 15:58:14.04

Angular覚えれば最強なんじゃね?

**デフォルトの名無しさん** · 2019/04/21(日) 16:13:30.43

周りvue使う奴ばかりで俺だけReactだから取り残された感がある

**デフォルトの名無しさん** · 2019/04/21(日) 16:20:10.40

>>499
react出来るならvueもすぐ覚えられるやろ

**デフォルトの名無しさん** · 2019/04/21(日) 16:30:06.97

vueはreactの下位互換

**デフォルトの名無しさん** · 2019/04/21(日) 16:32:17.78

>>501
どういう所に互換性があるの？

**デフォルトの名無しさん** · 2019/04/21(日) 17:59:50.12

create-react-app がデフォルトなだけって気はする。

**デフォルトの名無しさん** · 2019/04/21(日) 18:59:32.38

互換性はないけど枠組みとしては確かに似たり寄ったり

**デフォルトの名無しさん** · 2019/04/21(日) 22:33:06.57

Jqueryで足りないとは例えばどんな動作？

**デフォルトの名無しさん** · 2019/04/21(日) 23:16:22.08

>>1

**デフォルトの名無しさん** · 2019/04/22(月) 00:44:30.62

Reduxって親コンポーネントに偽装してReduxのステートをPropsとして受け取る感じなんだね
慣れてくればそれほどstateと変わらない感じ

**デフォルトの名無しさん** · 2019/04/22(月) 10:42:02.31

VueでTypeScriptってどうなの?
オーバースペック???

**デフォルトの名無しさん** · 2019/04/22(月) 10:51:29.31

>>505
vdomとbindingはロジック部分を根本から変えた。後戻りできない部分だな。他はjQueryでも無理すれば代替できん事はないが。

**デフォルトの名無しさん** · 2019/04/22(月) 10:54:01.25

ロジック部分ってなに？

普通ロジック部分っていうと、UIは除いた部分のことだから
jQuery使っても同じはずだが？

**デフォルトの名無しさん** · 2019/04/22(月) 10:57:48.25

>>508
ページ単位で小規模に適用する分にはvueにTSは必要ない。コスト上がるだけでvueのフットワークを殺す。
新規なら先日nuxtがv2.5で完全にTS対応したから最初からそっち使った方が良いよ。にしてもnuxt-tsはキモかった。

**デフォルトの名無しさん** · 2019/04/22(月) 11:21:42.95

>>510
JQueryはdomが主役だがbindingはデータが主。だからデータ構造とそれを処理するロジックが根本から違う。これ以上はスレチになるから深くは説明しないが。

**デフォルトの名無しさん** · 2019/04/22(月) 11:37:26.45

>>512
つまり、jQueryに足りない部分 = DOM以外ってことですよね？
それは同じでしょ？

**デフォルトの名無しさん** · 2019/04/22(月) 11:38:12.52

もしかしてVueとかって、UI部分とロジックが分離できない？
密結合しちゃってるの？

**デフォルトの名無しさん** · 2019/04/22(月) 12:21:44.78

>>511
reactでts使ってもキモいぞ！ｗ

**デフォルトの名無しさん** · 2019/04/22(月) 12:41:52.02

基本的なMVCアーキテクチャだけで良いのにね
意識高い馬鹿コーダーが変な技術を持ってくる

極論言ったらJavaScriptだけでも作れるのに

**デフォルトの名無しさん** · 2019/04/22(月) 12:42:29.17

>>513
何の話なんだそれ。
>>514
逆だよって今更すぎる。

テーブルがあって1行追加したいとしよう。jQueryだと
$().append(..render(..).html())
に似た処理をどこかで入れるだろ？元のデータは何なら”破棄しても良い”。domが主だから。ココが違う部分だからよく考えて。
bindingだとlistに1行追加するだけ。
list.push({})
あとは自分で調べて。スレチで長々とすまん皆の衆。

**デフォルトの名無しさん** · 2019/04/22(月) 14:05:19.86

最初からSPA作る目的ならならわかるけど
そうでなければReactもVueもう導入した先は絶対カオスになるだろ

**デフォルトの名無しさん** · 2019/04/22(月) 15:07:19.65

>>517
> bindingだとlistに1行追加するだけ。
嘘ついたらいかんよ。
HTMLにごちゃごちゃ書かないとダメだろ。ループ処理とか
JSXかもしれんが

**デフォルトの名無しさん** · 2019/04/22(月) 15:10:48.91

jQueryでもvueでもデータそのものは、listに1行追加するだけなんだよ。

そとは、そのlistのデータを見て、JavaScript（jQuery）でHTMLを生成するか、
vueを使って、HTMLのテンプレートでlistみてループ処理やって、場合によってはif文相当のことをかいて
どの変数がどの部分に埋め込まれるか書いて、どのイベントがどのハンドラに対応するかをかいて
ようやく連携が取れるんだよ

**デフォルトの名無しさん** · 2019/04/22(月) 15:31:55.89

vueの大規模案件ってどんなレベルなんですかね？

**デフォルトの名無しさん** · 2019/04/22(月) 15:32:17.76

最初からSPA作るのと、>>518はやってることが違うから、別にカオスにはならないだろ

**デフォルトの名無しさん** · 2019/04/22(月) 15:32:34.69

>>521
人が居なくなるレベル

**デフォルトの名無しさん** · 2019/04/22(月) 17:07:41.50

それより大規模ってどのくらいの規模なんだ？

**デフォルトの名無しさん** · 2019/04/22(月) 17:24:46.81

react宗の人間だがvueは大規模で逃亡するほどきついのかね？

**デフォルトの名無しさん** · 2019/04/22(月) 17:34:40.14

例の件でVueがネタ言語扱いされるとか…
ひどい風評被害だな

**デフォルトの名無しさん** · 2019/04/22(月) 17:47:05.54

不毛だよなぁ
react、vue、angular使えますとか
rails、laravel、spring boot使えますとか

どっちもどっちか一つでいいのに…
複数学ぶのは時間の無駄で、技術選択する時間も馬鹿にできんし

**デフォルトの名無しさん** · 2019/04/22(月) 18:14:48.09

例の件って何？

**デフォルトの名無しさん** · 2019/04/22(月) 20:32:17.15

金だけもらって逃亡したんだっけ？

**デフォルトの名無しさん** · 2019/04/22(月) 21:13:08.59

>>528
>>473

**デフォルトの名無しさん** · 2019/04/22(月) 21:52:24.13

>>530
みっつ目のリンク開けない

**デフォルトの名無しさん** · 2019/04/22(月) 22:20:51.00

Model(Data/Logoc) <==> View Model(jQuery/DOM) <==> UI(HTML)

Model(Data/Logoc) <====> UI(HTML+Vue Markup)

三段構成の中間層がフレームワークによって消滅するんじゃよ

**デフォルトの名無しさん** · 2019/04/22(月) 22:38:45.61

>>532
https://012-jp.vuejs.org/guide/

> Model と View を同期するオブジェクトです。 Vue.js において,
> 全ての Vue インスタンスは ViewModel です。
> それらは Vue コンストラクタかそのサブクラスでインスタンス化されます:

消滅してないけど？

**デフォルトの名無しさん** · 2019/04/22(月) 22:46:16.58

ふと思ったのはexcelみたいなUI考えた場合、modelとviewを無理やり引き剥がしても
ほとんど意味ないんじゃないかということ。

**デフォルトの名無しさん** · 2019/04/23(火) 01:14:58.17

firebaseが台頭してきてるから
Web屋はフロントエンドで生きていくしかねーな

**デフォルトの名無しさん** · 2019/04/23(火) 01:23:54.94

>>535
ソース

**デフォルトの名無しさん** · 2019/04/23(火) 01:40:26.06

firebaseなんてGCPの一プロダクトにすぎない

**デフォルトの名無しさん** · 2019/04/23(火) 01:48:54.37

そんな象は動物の一種に過ぎないみたいな当たり前のことドヤ顔で言われましても…

**デフォルトの名無しさん** · 2019/04/23(火) 07:43:59.67

言いたいことは分かるよ
アスペには分からないだろうけど

**デフォルトの名無しさん** · 2019/04/23(火) 08:16:32.64

はいはい口先番長やりたいなら文系で生きていけよｗ

**デフォルトの名無しさん** · 2019/04/23(火) 09:32:49.84

アスペに素人教えさせると
知ってて当たり前だと怒り出す

**デフォルトの名無しさん** · 2019/04/23(火) 12:24:38.08

>>519
元の話がロジックとUIの分離からそれでいいんだよ。dom appendなんぞロジック上は不要。単なる事実だが。

**デフォルトの名無しさん** · 2019/04/23(火) 13:35:13.96

勘違い素人「こうですね！（どやぁ）」
上級者「こうしたほうが無駄がなくていいよ」
勘違い素人「ムキー、これでもいいだろ！」

**デフォルトの名無しさん** · 2019/04/23(火) 13:36:22.70

>>542
うん。だからHTML（JSX）にループや条件分岐の
ロジックが移動してますよねって事実

**デフォルトの名無しさん** · 2019/04/23(火) 16:09:42.79

>>544
論点ずらしは二重に恥だからやめとけ。あとスレチだからこの話はもうやめろ。

**デフォルトの名無しさん** · 2019/04/23(火) 17:48:04.05

最近Angular触ってみてるんだけど
Reactって結構Atomic Design指向だから細かい部品に分けた方が効率よくなるけどAngularは小分けにすると逆にカオスになりそうだね

**デフォルトの名無しさん** · 2019/04/23(火) 17:54:14.07

出たよバズワードに踊らされる奴
Atomic designが流行ったのはReactが普及したあと。
Atomic designをReactで実践したいならできるがReactがAtomic design指向なんてことはない。
コンポーネント指向とごっちゃになってるんじゃないか。

**デフォルトの名無しさん** · 2019/04/23(火) 19:31:52.60

いや、実際にある程度使ってみて部品化した方が効率が上がるのにAtomic Designって言葉使うのが適切かなって思ったから言っただけで別に言葉が先にあるわけじゃないよ

**デフォルトの名無しさん** · 2019/04/23(火) 20:16:21.51

reactで開発されたアプリの解読でコンポーネントやらReducerやら100ファイル以上あって熱が出そう
細かい部品に分けるのもいい加減にしろや

**デフォルトの名無しさん** · 2019/04/23(火) 20:34:14.70

部品に分けるからって別にファイル数無駄に増やすってよりも
最小の部品こそ属性の付け方で色々な使い方できるようにしたり
でもデフォルト値はあって最小の指定でもちゃんと動作するようにしたり
以前はC#でdll部品とか作ってたから使い勝手のいい部品作るのは楽しい

**デフォルトの名無しさん** · 2019/04/23(火) 21:17:36.16

100ファイルくらいなら別に多いってほどではない。

**デフォルトの名無しさん** · 2019/04/23(火) 21:25:39.08

それはディレクトリでカテゴリー分けしてるかどうかでも随分違うと思う

**デフォルトの名無しさん** · 2019/04/23(火) 23:47:16.01

分ける単位ってどれくらいがいいんだろうな。
自分は
・メインコンテンツ
・ヘッダー
・フッター
・サイバー
・繰り返しだすコンポーネント(例：カレンダーの１日単位)
くらいにしか分けてないな

**デフォルトの名無しさん** · 2019/04/23(火) 23:49:15.78

あとは
・フローティングで出す入力フォーム
とかも分けてるか

**デフォルトの名無しさん** · 2019/04/24(水) 01:09:09.86

やたらローディングでブラウザ固まるようなサイトがあるけどどうにかならんのかね
スリープ挟みながら画像/広告をロードするとかさ

**デフォルトの名無しさん** · 2019/04/24(水) 04:00:40.49

いずれangularが再評価され
angularに行きつくことになる

**デフォルトの名無しさん** · 2019/04/24(水) 04:32:57.32

>>555
Reactとか使ってるんだろ。
JavaScriptファイルを読み込まないと表示されない上に
JavaScriptファイルがでかいからな

**デフォルトの名無しさん** · 2019/04/24(水) 08:23:52.42

大体の場合は画像の方が大きいを思うけどね

**デフォルトの名無しさん** · 2019/04/24(水) 08:26:20.44

阿部寛のHPは何を使ってるの？

**デフォルトの名無しさん** · 2019/04/24(水) 09:01:17.83

爆速で有名な阿部寛さんのサイトを真面目に分析してみた。
https://qiita.com/Leapin_JP/items/22fb33fe7bdb6ad252fb

阿部寛のサイトを高速化する
https://qiita.com/Morix1500/items/0eac072a027d478a6b83

**デフォルトの名無しさん** · 2019/04/24(水) 09:25:06.69

5Gの時代になればファイルの大きさ関係ない
SSRすら必要なくなる

**デフォルトの名無しさん** · 2019/04/24(水) 09:45:06.49

クライアント側の回線が速くなってもバックボーンやサーバー側の回線と処理能力は変わらないので
4Gがボトルネックだった場合しか変わらんよ

**デフォルトの名無しさん** · 2019/04/24(水) 10:00:20.58

規模感あるところはそのままVue使わずにNuxtだね
VueだととっちらかるからNuxtに辿り着くな
保守性ないと破綻する

**デフォルトの名無しさん** · 2019/04/24(水) 12:14:38.40

広告ベタベタのまとめサイトとかフリーズするけど
アクセス解析なのか画像なのかネットワークIOなのか原因が良く分からない

**デフォルトの名無しさん** · 2019/04/24(水) 12:29:52.49

SPAサイトはSEOに弱いからSEO用にSSRとjsレンダリングの2つに別けましょうとかGoogleかどこかがアピールしてた

**デフォルトの名無しさん** · 2019/04/24(水) 12:48:40.26

>>561
ギガを使いきって速度規制されたら同じだろ？
阿部寛のサイトはギガ死した人々のためのサイトだからな。

**デフォルトの名無しさん** · 2019/04/24(水) 13:32:01.02

>>560
js使ってないのか

**デフォルトの名無しさん** · 2019/04/24(水) 14:09:34.24

>>553
サイバーってサイドバー？

**デフォルトの名無しさん** · 2019/04/24(水) 14:32:08.54

サイババ記念日らしい

**デフォルトの名無しさん** · 2019/04/24(水) 15:42:24.09

>>558
> 大体の場合は画像の方が大きいを思うけどね

そうじゃねーよ。画像はあとから非同期でダウンロードされるだろ。
まず最初はHTMLとCSS。これで最低限の画面は表示される。

JavaScriptは後から。JavaScriptがダウンロードされないと
動きはできないが、初期画面は見える（その間にダウンロードされる）

っていうのがjQuery時代のベストだったんだが、
今はそんなベストを目指さずJavaScriptがダウンロードされるまで
画面見なくていいじゃんに悪化してしまった。

**デフォルトの名無しさん** · 2019/04/24(水) 20:39:13.63

>>570
クソエロサイトくらいにしか役たたなそうな技術だな。

**デフォルトの名無しさん** · 2019/04/24(水) 20:49:42.32

クソエロサイトくらい？

アクセスが多いサイトってことですか？

**デフォルトの名無しさん** · 2019/04/24(水) 21:35:26.29

ただまあ高速化の技法がサーバからフロントに比重が移ったのは分かる。フロントの高速化は面倒だよな。