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/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でいいじゃん
カスタマイズもできるしダメな理由ないよな
2022/04/14(木) 08:39:19.84ID:u/xS1gCc0
ダサい！

終わり
2022/04/14(木) 08:41:36.03ID:3HmhMLNrr
ダサいのはカスタマイズできない無能の言い訳
そういう奴はどのcssフレームワーク使ったとしてもダサくしかならない
2022/04/14(木) 17:46:23.71ID:mUuUh3T2a
>>251
ギョームで使うなら無難だけど
面白味が皆無だから使いたがらない
2022/04/14(木) 20:47:07.88ID:e+FW9n+1r
>>254
tailwindだとどう面白いんの？
2022/04/15(金) 21:10:48.34ID:jnxEt0/r0
デザインが関わる部分はデザイナーが作るからどんなの使ってても良いけどね
管理画面とかそういうのはbootstrapで簡単にそれらしい見栄えにしている
管理画面すらデザイナーがモック作ってくれる場合もあるけどね
2022/04/16(土) 14:20:03.20ID:poR/4Bbzd
何せ面倒くさいのは最初にhtml考えた奴のせい(´；ω；｀)
2022/04/16(土) 14:34:02.97ID:ttYT/Wy3a
動的に効率よく文書を処理しようとしたらどうしても複雑になるよ
その上スタイルも入ってくるししょうがないかと
2022/04/16(土) 14:37:32.91ID:uBjo0mN70
>>257
これ
2022/04/16(土) 14:43:04.99ID:2nUkUh0L0
最初はcssなんて無かったが
2022/04/16(土) 15:04:28.43ID:DltdDZSn0
最初はSGMLだろ。
2022/04/16(土) 16:01:11.87ID:/VK1zumir
>>257
>>259
お前らが無能だからhtmlのせいにしてるだけだろ
自覚しろよ
2022/04/16(土) 18:20:20.48ID:EbmfD14Y0
UIって何をどうしてもツリー構造じゃね？
どうしてもHTMLみたいなインターフェースには成らざるを得ないと思うけど
2022/04/16(土) 18:31:27.51ID:MoK8GTpb0
xhtmlは論理的にツリー構造を表現しているけどhtml5はそうじゃないんだよな。
W3Cへの反発があったからといってもちょっとどうにかしてほしかった。
2022/04/16(土) 18:41:45.66ID:ttYT/Wy3a
>>264
行き過ぎたセマンティックって印象よね
むしろ要素を減らすべきだった
2022/04/17(日) 00:36:36.10ID:qB86vRxO0
HTMLはそこまでクソじゃない気がするけど
XMLはクソｗ
2022/04/17(日) 09:29:28.50ID:NcklcR1ha
xmlはもう役目を終えた感がある
2022/04/17(日) 13:04:44.65ID:k8OFv/xgr
フロントエンジニアを名乗ってるくせにまともにhtmlとcssを扱えない
その上それはデザイナーの仕事だとバカにする

ゴミクソフロントエンジニア
2022/04/17(日) 13:10:47.02ID:aLAyt8HE0
仕事っていうのは役割分担をきっちりした方が効率よくなるんやで
2022/04/17(日) 13:49:31.60ID:k8OFv/xgr
ゴミフロントエンジニアの言い訳

つまりjsxとstyleComponentをデザイナーがやるってことだろ
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況