Vue vs React vs Angular vs Svelte Part.10

■ このスレッドは過去ログ倉庫に格納されています
2022/03/08(火) 22:57:16.85ID:D77bZcWT0
!extend:on:vvvvv:1000:512

Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
Svelte
https://svelte.dev/

※前スレ
Vue vs React vs Svelte Part.7
https://mevius.5ch.net/test/read.cgi/tech/1610901677/
Vue vs React vs Angular vs Svelte Part.8
https://mevius.5ch.net/test/read.cgi/tech/1621744952/
Vue vs React vs Angular vs Svelte Part.9
https://mevius.5ch.net/test/read.cgi/tech/1642316774/

★ここではjQuery, Ruby, C#, Blazorの話題は禁止です
★jQuery, Ruby, C#, Blazorｷﾁｶﾞｲが書き込んでも無視してください
Next, Nuxt, Sapper, Gatsby, VuePress, RedWoodなどはおｋ。
VIPQ2_EXTDAT: default:vvvvv:1000:512:: EXT was configured
2022/04/06(水) 14:09:22.87ID:CIB91XNYM
>>150
そのメリットは仮想DOMを使わずとも可能なので仮想DOMのメリットではなく差分書き換えのメリットですね
そして差分書き換えのみと比較すると仮想DOMを用いる分だけデメリットですね
2022/04/06(水) 14:14:46.50ID:6A9Aeuema
>>151
1番大きいのはユーザー体験だよ
該当箇所のDOMを丸ごと毎回生成する処理を書くだけでいいのだから
以前はDOMの状態をみて書き換える箇所を自分で判断してた
それこそがjQueryなコードをスパゲッティにした原因なのよ
2022/04/06(水) 14:18:36.04ID:6A9Aeuema
パフォーマンス速くしたいからDOMの差分を自分で見る→コードがスパゲッティ


差分見るとスパゲッティになるからDOMを毎回丸ごと生成したい→innerHTMLに突っ込むしかなくてパフォーマンス劣化

この悪循環の無限ループ

これを両方同時に解決したのが仮想DOMでありReact
俺が信者になったのはこれを意識した時だな
マジで神だと思ったね
2022/04/06(水) 14:19:52.73ID:6A9Aeuema
ここにいるのに仮想DOMメリットを言語化できるやついなかったのな
上のような事実というか歴史的経緯があるんだよ
しっかりと理解してくれ
2022/04/06(水) 14:22:06.41ID:so8tWsAwa
別に仮想dom使わなくても良いんだよ
あくまでレンダリング高速化の手段の一つ
reactが差分管理として仮想domを採用しただけの話であって他に良いのが出て来ればそれに変わられていくだけ
ただdomと密接に結合するようなレンダラーと差分管理を分離しないアプローチは流行らない
webにしか使えなくなる
2022/04/06(水) 14:40:06.43ID:DIJBOrU7r
>>150
Solid.jsとsvelt.jsはDOM全体を書き換えてるの？
2022/04/06(水) 14:46:33.31ID:6A9Aeuema
>>156
流石にそれはない
ソース読まないとわからんが別な方法で管理してるのだと思う
2022/04/06(水) 15:13:32.10ID:6A9Aeuema
>>155
まあ仮想DOMはメモリをバカ食いするデメリットはありからね
他の方法で差分管理できなら問題ない
Reactの次が見えてきた
2022/04/06(水) 15:28:45.86ID:34Ai9MwnM
>>156
コンポーネント(DOM)を生成するのは最初の1回だけで
生成した後はObserverパターンで必要なところだけ更新するようだよ
ソースまだ読んでないからハッキリしたことは言えんが多分そんな感じ
2022/04/06(水) 15:38:00.45ID:0AiZA7OjM
仮想DOMツリーを使わずに差分管理する場合、変化する部分に状態管理機構（solid.jsで言えばsignal、webcomponentsで言えばslot）を打ち込む形になる。
差分管理する要素が少なく、DOMツリーをダイナミックに動かさないのであればsolid.jsのようなやり方に速度的なメリットがあり、そうでなければReactに速度や構造的なシンプルさのメリットがある。そんな感じじゃないかな。
よく知らんけど
2022/04/06(水) 16:59:40.38ID:DIJBOrU7r
>>157
いやおまえが仮想DOM使わないと全書き換えって言ったから聞いたんじゃん
2022/04/06(水) 18:06:05.81ID:6A9Aeuema
>>161
それはミスだ
そこまで深く調べてなかった
多少コード読んだら状態管理とか変更履歴で管理してるっぽくて想像以上にガチな作りだった
2022/04/06(水) 23:43:10.09ID:ZzbxJvPPr
>>162
お詫びに全部調べて報告して
2022/04/07(木) 00:07:39.33ID:isNt/bVX0
ちゃんとミスを認めてる奴に何言ってんだ、あんた
2022/04/07(木) 08:50:29.10ID:48p+VEp60
こうやって素直にミスを認めて謝れる人めっちゃ好感持てる
2022/04/07(木) 09:08:43.91ID:XKd8bK6Ir
でも俺の疑問はまったく解決してない

・なぜReactは仮想DOMを使っているのか？
・仮想DOMを使わなくても一部のレンダリング更新だけで済むってのか？
・そうであればブラウザのエンジン自体が部分レンダリングに対応しているのか？
・じゃあReactの仮想DOMのメリットってなんなの
2022/04/07(木) 09:20:11.52ID:hrFCTtmgM
>>166
仮想DOM自体にはメリットは全く無くむしろオーバヘッドというデメリットがある
DOMの差分更新は非常に重要で全体更新よりも圧倒的にパフォーマンスが高い
DOMの差分更新はSvelteでもSolidでも各種Vanillaでも当然行われているが仮想DOMは用いられていない
それらと比較してベンチマークなどでReactが遅い原因の一つとして仮想DOM使用によるオーバヘッドが考えられうる
2022/04/07(木) 09:24:25.64ID:Fux/mDxCM
う〜ん、粛々とNG
2022/04/07(木) 09:35:03.84ID:NNETluvMd
Reactでいう仮想DOMというのは本来は単なるフレームワークの実装の都合ってわけじゃなく、
テンプレートがレンダリング結果としてDOMオブジェクトを返しているように見えるけど実際にはそうじゃないから仮想DOMなんだよ。
Vueみたいに単なる実装の都合で内部的に仮想DOM使ってるのと比較されるからそのへん混同されがち。
その意味だとSolid.jsはどうなんだろうね。まだ触ったことないからわからないけど、テンプレートは直接DOMオブジェクトを生成するの？
2022/04/07(木) 09:41:42.27ID:XKd8bK6Ir
仮想DOMってただのjavascriptオブジェクトの階層構造だよね
部分レンダリング更新ってのは、この全体の階層構造のうちの一部の階層のオブジェクトが更新されて、その階層に該当するDOMだけが再レンダリングされるってことかね

その階層ってのはShadowRoot単位なのかな？

想像だけど
2022/04/07(木) 10:05:30.92ID:NMZY0DQdM
>>170
まず仮想DOMは全く関係ないので忘れて横に置いとくといいよ
実DOMを生成する時に全体を生成するのではなく現状の一部を利用して最小限のパーシャルツリーを作って入れ替えるのが部分レンダリング更新
ブラウザによる画面レンダリングも最小限となりメリットがある
今どきのフレームワークならたいてい採用されている
この実現のために仮想DOMは必要としない

一方で仮想DOMは一部のフレームワークが採用している単なる内部のデータ管理方式の一つ
仮想DOMが他の方式と比べて何か有利な点は特にない
実行時に差分検出となるなど不利な点はある
2022/04/07(木) 10:12:41.10ID:kSgW/1GfM
「高速」の比較対象はpostして全部更新だったりする？
2022/04/07(木) 11:08:03.68ID:XKd8bK6Ir
>>171
なるほど

つまり
ReactやVueはデータ管理を仮想DOMで管理してる
Solid.jsやSvelt.jsはデータ管理を実DOMで管理してる

この認識であってる？

なぜデータ管理を実DOMで管理してるんだ？って思うけど、仮想DOM使ってないなら実DOMしかないよねってこと
2022/04/07(木) 12:29:30.17ID:n/T89jyuM
>>173
それは正しくない
どのフレームワークもデータ変更に対応して最終的に実DOM操作をして反映させる点では全て同じ
データ変更がどういう時にどこで起きるかはプログラム作成時にわかっているので
SvelteやSolidはそれらの情報を利用してある種のコンパイラとなり実DOM操作のJavaScriptコードを事前に生成してしまう
つまりSvelteやSolidは実行時にはその生成されたJavaScriptコードが動くだけ
一方でVueやReactはデータ変更に対して仮想DOMに反映させて前後の差分検出をしてその差分を反映させるために実DOM操作をする
2022/04/07(木) 12:31:19.31ID:cPE2iAv8M
>>173
たぶん誤解してる。仮想DOMの使用有無にかかわらず、実際のビューの状態を持っているのは常に実DOMだ。
仮想DOMが登場するのはビューの状態を更新するときで、仮想DOMの場合は論理的には(実際には更新不要な部分は使い回すような最適化はある)モデルの状態に基づいて毎回新しい仮想DOMツリー全体を作り直し、
その仮想DOMツリーをあるべき姿として実DOMを更新する。
一方で仮想DOMを使わない場合は、仮想DOMツリーの作り直しを省いて直接実DOMを更新する。
2022/04/07(木) 14:42:30.41ID:XKd8bK6Ir
>>174
SolidやSveltのその操作用のjavascriptのコード生成ってどんな感じ？

いまいち想像が足りないからわからん

コードってなに？
具体例がほしいかな

>>175
React ： データ更新 → 仮想DOM更新 → 実DOM更新
Solid ：データ更新 → 実DOM更新

こういうこと？
このSolidの直にDOM更新ってどうやってツリー全体のうちの差分を算出してるんだろ？
差分とか関係なくjqueryみたいに要素を特定して更新してるのかな？
2022/04/07(木) 16:11:00.06ID:LqaqpZCDM
SolidはデータバインディングしてるだけだからDOM上のどこを更新すればいいか最初からわかってる
となると負荷がかかるだけの大げさなツリー差分計算は不要かと
reactがツリー差分を計算するのは何処が変わるのかreactが把握してないから
Solidはreactに似てるけど根本的なアーキテクチャは違う
2022/04/07(木) 16:30:15.09ID:zMYtvFpYM
>>176
普通にフレームワークを使わずに書けばわかるけど
差分算出なんて全く必要のない行為
必要となるのは変更されたデータを反映するDOM操作のJavaScriptコードのみ
2022/04/07(木) 16:57:53.58ID:bdIQHoGja
おじさんじゃねーのこれ
2022/04/07(木) 17:26:41.04ID:OoJ9MQRv0
メモ化しなかったら子コンポーネントの要素を再度全てレンダリングしちゃうのでは？
2022/04/07(木) 19:00:26.65ID:I9ZZKEcZM
それぞれそのへんはムダを省くよう仕掛け対応があるね
フレームワークとして最低限それはやらないと
2022/04/07(木) 19:32:20.92ID:XKd8bK6Ir
結局みんなはっきりは理解していない感じらしいね
まあ自分もなんだけど
2022/04/07(木) 19:52:15.69ID:W1OrHRUza
>>182
で？
2022/04/07(木) 20:04:09.90ID:XKd8bK6Ir
>>183
へ？
2022/04/07(木) 22:07:48.47ID:rftQE35ra
solid.js作者による解説記事見つけたよ
正直震えてる
アーキテクチャがやば過ぎ
オワコンと言われた
Reactive Programmingが復活した

https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering
2022/04/07(木) 22:17:52.74ID:rftQE35ra
この記事でDOMの更新原理が全部解説されてる
ただ理解が追いついてない
2022/04/07(木) 22:44:32.35ID:isNt/bVX0
何処でReactiveプログラミングが終わって、何処で復活したんだよ。
パラダイムの話と実装の話をごっちゃにしとらんかね。
2022/04/07(木) 22:49:48.63ID:LqaqpZCDM
>>185
いいね
2022/04/07(木) 23:03:21.84ID:w+H2FlaC0
createElememtしたオブジェクトをクロージャで保持してるのか
確かに生DOMだ
2022/04/07(木) 23:06:10.92ID:cxGwbYOU0
記事はいいけど

>正直震えてる
>アーキテクチャがやば過ぎ

こういうの傍から見て寒すぎ
2022/04/07(木) 23:35:57.90ID:LqaqpZCDM
DOMそのまま掴んでるってことはReact Nativeは絶望的か…ちと残念だ
2022/04/07(木) 23:57:10.55ID:Y0BVj7bxa
ペインの中のボタンを40近くまで連打すると詰まりだすけどreactならどうなんだろうか
https://www.solidjs.com/tutorial/introduction_memos?solved
2022/04/08(金) 00:02:15.46ID:FwPcQFITM
>>192
フィボナッチ数の計算がべらぼうに重いだけだよ
2022/04/08(金) 00:06:04.66ID:pHvgxp+Ea
>>193
探したらあったのでやってみたらその通りでしゅた。
https://codesandbox.io/embed/yh4nf?codemirror=1
2022/04/08(金) 11:42:33.12ID:SI2R8TLia
>>191
RN的な使い方は無理だろね
メモリとんでも無い事になりそう
シンプルなWEBページ特化
2022/04/08(金) 14:27:38.41ID:FwPcQFITM
メモリは心配してないというか仮想DOMが無いから確実に減る
でも仮想DOMが無いせいでDOMと結合度が高くなってるからマルチプラットフォームは難しいだろう
2022/04/08(金) 14:33:08.91ID:bdNfvPhdr
React.jsやVueってマルチプラットフォームだっけ？
2022/04/08(金) 14:41:04.41ID:4G5CVrxlM
>>196
それは違うんじゃないか
こういうフレームワークを作る時に内部はもう一段抽象的なデータを持つ
その抽象データからDOMが対象ならばDOM操作コードとそのオブジェクトを生成といった具合
だから生成されたものだけを見てDOMと結合しすぎていると判断するのはおかしい
例えばReactの仮想DOMもその内部の抽象データなのだから同じ土俵で比べて判断したはうがいい
2022/04/08(金) 15:16:48.60ID:zD+iWd3QM
仮想DOMがメモリ食いまくってるかというと別にそうでもない
2022/04/08(金) 15:48:10.19ID:4taeFJ35a
>>196
なんで仮想domが無いからメモリ減ることになるんだよ
仮想domの代わりにコード生成するっていうのに
2022/04/08(金) 17:29:16.27ID:bdNfvPhdr
>>185
これ要約してくれ
お前らの好きなキータやゼンに上げてもいいから
2022/04/08(金) 17:29:34.20ID:FwPcQFITM
>>200
仮想DOMは変化のない部分もツリーの生成が必要
リアクティブプログラミングなら変化が無いとわかってる部分は省略できるはず
2022/04/08(金) 17:37:20.73ID:I/uOEy9hM
>>200
SvelteやSolidがコード生成するのは実行時ではなくコンパイル時点
そして生成されるコードはVanillaで書いたときと同様な感じでわずかなDOM操作コード
仮想DOMのように余分なメモリを使用したりその管理のためのコードが必要になったりはしていない
2022/04/08(金) 17:45:07.62ID:xuzqGDQqa
>>203
実行時に読み込んでメモリ消費するじゃん
アホかよ
2022/04/08(金) 17:54:48.38ID:FwPcQFITM
まさかとは思うけど何もしないのと比較して増えてるからメモリが減ってないじゃないかって意味で噛み付いてきてるのかな？
仮想DOMと比較してメモリが減るって文脈が読めないのかしら
2022/04/08(金) 17:59:43.25ID:/H+nHCQIa
>>205
いやケースバイケースでしょ
素人かよ
2022/04/08(金) 18:03:26.77ID:FwPcQFITM
極僅かな例外も存在するかもしれんがそれをケースバイケースというのは言葉遊びにしか感じないな
2022/04/08(金) 18:04:37.85ID:oVWM7CkTM
>>204
Reactにも仮想DOMを操作するコードがあるし
さらに仮想DOMで差分算出するコードもあるし
さらにその差分に対して実DOMを操作するコードがあるんだよ
SolidやSvelteはそのうち最後の実DOMを操作するコードだけになるよね
さらに仮想DOMを保持するメモリも必要ないよね
2022/04/08(金) 18:19:37.36ID:u9ryeQf60
何を根拠に仮想DOMがメモリ食うと言ってるのかは気になるところ。仮想DOMツリーなんてブラウザのタブを担当するプロセスの消費してるメモリの一部でしか無いのに
2022/04/08(金) 18:23:30.45ID:4I0Aw2zD0
Excelみたいな巨大アプリでどのくらい消費しているのか知りたいね
知らないか？
2022/04/08(金) 18:39:17.75ID:x9wQZSCop
計測せずに性能を語っても妄想お披露目会にしかならんだろ
2022/04/08(金) 18:44:32.33ID:el4YGwkaM
比較対象はゼロだからな
2022/04/08(金) 19:38:01.87ID:4taeFJ35a
>>207
言葉遊びはお前だよ
仮想domだからメモリ使う前提で話してるけど根拠は？
ほぼあんたの思い込みでしかない
2022/04/08(金) 19:48:25.06ID:FwPcQFITM
>>213
仮想DOMの生成にメモリを使うのは当たり前では？
2022/04/08(金) 19:57:47.51ID:9UQ9wQkhr
誰も計測してないのである！
2022/04/08(金) 20:11:01.88ID:u9ryeQf60
なぜ誰も計測してないかを紐解くと、Reactで（他のライブラリやバニラより）メモリ食いすぎて困った、という事例が無いからでは？
2022/04/08(金) 20:53:59.17ID:g5acz2390
>>202
>リアクティブプログラミングなら変化が無いとわかってる部分は省略できるはず

そんな単純な話かなぁ。差分を求めずに「変化が無い」ことを判断する方法は自明じゃないように思うが。
218デフォルトの名無しさん (ﾜｯﾁｮｲ 65c9-G86n)
垢版 |
2022/04/08(金) 20:54:12.79ID:z7daun3M0
Reactでも速度面で困ってるわけじゃないからな
Solid.jsが小さいのは魅力
2022/04/08(金) 22:59:55.40ID:KeW2chSD0
Solid.jsのdoc見てみたけど、まず多言語対応されててすごい
精力的なのはいいね
2022/04/09(土) 06:27:23.97ID:hnk6n6Rh0
Vue2で作ったアプリが10個以上ある
それらのアプリはVue2で使い続けたい
新しいアプリはVue3で作りたい
こういう場合どうするのがいいと思う？
Webpack使ってます
2022/04/09(土) 06:51:02.01ID:hnk6n6Rh0
npmの環境もう1つ作っちゃうのが楽な気がするんだけど
2022/04/09(土) 08:07:49.92ID:bqRMq7lA0
Vueの事はよく知らんけどディレクトリ分けてnpx使えばよくない？
2022/04/09(土) 08:14:00.27ID:hnk6n6Rh0
>>222
それが一番楽だよね
2022/04/09(土) 15:51:26.75ID:0hB2G1vSM
React18にverupして、パフォーマンスが体感できるぐらい上がって満足
でもtypesも18に上げた途端3rd partyからエラーでtsignoreに逃げた…
2022/04/09(土) 18:22:45.23ID:jgmuUCzN0
>>220
なんでグローバルにインストールしてるの？
2022/04/09(土) 18:51:44.46ID:hnk6n6Rh0
>>225
ローカルにインストールしてるよ
227デフォルトの名無しさん (ﾜｯﾁｮｲ 3602-pnsV)
垢版 |
2022/04/09(土) 22:59:04.33ID:hgG5Hkw80
>>224
わかる
recoilのtypesがアップデートされるまで様子見してる
2022/04/10(日) 01:35:53.09ID:HXJW3I9N0
>>226
よく見たら自演だったらおじさんかよ
2022/04/10(日) 06:01:45.32ID:7PU75A+00
>>228
だれだよそれ
違うよ
230デフォルトの名無しさん (ﾜｯﾁｮｲ 6f63-KQlO)
垢版 |
2022/04/10(日) 16:24:52.57ID:ITJl40Ck0
react学習中は「jsのFWやろ」って思ってると痛い目見るな。
全くではないがreact言語と言っても良いぐらい独特やね
2022/04/10(日) 17:47:42.20ID:eCRNh29mr
>>230
不同意
2022/04/10(日) 17:58:04.68ID:42W6QpWxM
>>230
自分もJSライブラリというよりはJSによく似たDSLという認識で勉強したらうまくいった
2022/04/10(日) 18:32:09.94ID:zRVAqF+L0
>>230
Reactiveにするための面白い仕組みが色々ある。という点以外は素直なJSだし、わりと素直なDOM発展形だと感じたなぁ個人的には
2022/04/12(火) 01:30:58.06ID:kIyr6erA0
reactは見た目が気持ち悪すぎる
Vueは違和感ないのだが
2022/04/12(火) 01:37:50.96ID:9Wz6jxp60
でもvueは覚えることが多すぎる上
過去のバージョン含めてプロジェクトごとにスタイルが違いすぎて無理ゲー
2022/04/12(火) 08:35:28.85ID:8aqOwqE3r
vueもreactも覚える量は大差なくね
バージョンやプロジェクトごとに違いが多すぎるは非常に同意
2022/04/12(火) 09:11:27.09ID:+SrHGzSxM
プロジェクト毎に…はreact.jsも大差ない
フロントエンドは変化早いから諦めろん
2022/04/12(火) 16:40:07.56ID:lzQIw2wja
おじさんは何使ってんの？
2022/04/12(火) 20:25:39.24ID:vS+B3//00
VueとReactの両刀使いだったけどReactに集約しまーす
フロントエンドでいちいちあれこれ考えたくないし楽だよなあ
2022/04/12(火) 22:28:27.03ID:Db8/nH/Z0
React使ってる方はスタイルどうしてますか？
僕はあれこれコンポーネントライブラリ試してみて、最終的にTailwind CSSに落ち着きました
2022/04/13(水) 00:54:09.91ID:P5y02Tze0
Tailwindなんか良く使ってるな・・・
冗長過ぎだろｗ
2022/04/13(水) 05:55:12.89ID:By3mBvbx0
気持ち悪いとか冗長だとか、感覚的な事ばかり言われてもですね
2022/04/13(水) 07:05:27.28ID:57dconDAd
ハゲたおっさんをみたjkにもいってあげて
2022/04/13(水) 07:30:29.33ID:xZef9YSSr
フロントエンドエンジニアなのにまともにcssを使えないゴミが99％だからな
cssはデザイナーの仕事と勘違いしてるアホしかいない
2022/04/13(水) 07:42:33.90ID:QRWgdMoUM
そんなんおめー、会社の規模と分業スタイルに依るでしょ。ってか大抵はCSSもそれなりに書ける。
フロントエンドエンジニアの99%とか主語デカすぎ
2022/04/13(水) 07:53:46.03ID:Hql1DFVV0
tailwind-cssは最近擬似要素もサポートしたから表現の幅が広がって使いやすくなったけどね
ぶっちゃけ何でcssを書こうがあんまり変わらないから好きなのを使えばいいと思う
2022/04/13(水) 12:51:45.62ID:9uPeD86L0
css使えないからTailwind使うだと馬鹿一直線
2022/04/13(水) 13:10:46.32ID:CP/2H06D0
modules、emotion、chakraと使ってきたけど今はtailwind一択やわ
2022/04/13(水) 18:35:39.41ID:xqcMgFa8M
TailwindCSSはクラスがほぼCSSのパラメータと一対一だからCSSわからんとむしろ使えなくない？ エアプかな？
2022/04/13(水) 20:44:25.37ID:Hql1DFVV0
tailwindcssはvscodeの拡張機能を使うとtailwind.config.jsで設定した自分のカスタムスタイルまでコード補完で表示してくれるのが好き
2022/04/14(木) 06:54:23.13ID:3HmhMLNrr
bootstrapでいいじゃん
カスタマイズもできるしダメな理由ないよな
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況