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/03/20(日) 09:17:56.80ID:vu2v5ItY0
>>57
<func foo=hoge bar=fuga>←これじゃビルド通らないぞ
そんなガバガバなヤツにはjsx書けんよ
2022/03/20(日) 10:02:09.94ID:XX1387g+0
>>68
俺も10年以上前はこんな感じだったな
2022/03/20(日) 11:44:35.78ID:QcEs3y9kM
>>57
JSXはオプションなので別に使わなくてもおk
気に入らないなら(気持ちはわかる)普通の関数のように呼び出せばよろしい
2022/03/20(日) 16:44:59.21ID:BhZRhMiwa
>>69
htmlテンプレートでの開発から移行するには楽なんだろうね
vue独自の構文とか覚えたくもないけど
2022/03/20(日) 16:58:31.54ID:LOxzvK7ha
>>73
ReactはHooks覚えるだけだからな
多少癖はあるが拡張性はあるし
副作用隠蔽できるし良いこと尽くめ
2022/03/20(日) 21:49:17.16ID:wHRqoPQS0
ASP classicがそんな感じだったような。。うろ覚え
76デフォルトの名無しさん (ﾜｯﾁｮｲ d3b7-Jl5v)
垢版 |
2022/03/22(火) 15:46:55.29ID:0HtR5asm0
lazyload実装したら、viewContainerRefがundefinedになるんだけど、なんで？
教えてエロい人
77デフォルトの名無しさん (ｵｲｺﾗﾐﾈｵ MM55-8zn+)
垢版 |
2022/03/23(水) 01:03:37.06ID:+J7AiUpwM
ひぇぇw怖い怖い
> オープンソースのnpmパッケージ「node-ipc」にロシア在住の開発者を標的にした悪意のあるコードがメンテナーによって追加される
https://gigazine.net/news/20220322-sabotage-code-to-node-ipc/
2022/03/23(水) 23:16:55.87ID:RHxHRDhw0
React Hook Form便利だなと思って使ってたんだけど、実は全然要らんかったことに気づいてしまった……
2022/03/23(水) 23:51:56.01ID:B6q3LoX80
>>78
そんなのあったんだ
知らなかった……ｗ
2022/03/25(金) 16:18:04.47ID:EGWR390ra
>>78
あれ検証ライブラリのラッパーだもんね
ささっと作るには良いけど仕組み理解してれば無い方が楽よね
2022/03/25(金) 17:04:40.58ID:tahcFheS0
>>78
覚えることが多いライブラリはReact向きじゃないね
2022/03/25(金) 18:39:56.16ID:TcNKzx810
>>80
そう、仕組み理解してれば（複雑になるにつれ）使わないほうがシンプルに書けると感じた。今はブラウザの機能も充実してるし。

>>81
watch周りとかバリデーション周りとか変に複雑だった。ドシンプルなフォーム作るなら（覚えること少なくて）悪くないと思うけどね……
83デフォルトの名無しさん (ﾜｯﾁｮｲ 8101-b1PW)
垢版 |
2022/03/28(月) 15:42:08.99ID:MoEAjuwS0
Jest + React testing libraryやってる人いる？

React testing libraryつかってるとテスト環境だけ動かないことがしょっちゅうですぐ壊れるし、辛すぎる
現状フロントのコンポーネントのユニットテストは費用対効果が悪すぎると思う

もしテスト作るなら必要なテストを見極めるスキル必須だわ
2022/03/28(月) 21:49:46.44ID:3CyqBULz0
わからんでもない。Puppeteerでテストしてる
2022/03/29(火) 13:05:58.71ID:O92eZWgo0
https://github.com/redwoodjs/redwood/releases/tag/v1.0.0-rc.final.1
React、GraphQL、Prismaのフルスタックフレームワークとして作られているRedwoodJSがリリース間際らしいけど
わざわざ事前に組み合わせる必要あるのかな？
2022/03/29(火) 13:15:39.47ID:2VxyfU6Gr
そういうのもういらん
どうせすぐに廃れてメンテすらされなくなる
2022/03/29(火) 15:16:45.92ID:fQzr6FSKr
SvelteKitは本気で期待してる
2022/03/29(火) 15:30:10.76ID:SAtTzz3E0
そうか？
むしろJSでフルスタックみたいなやつは廃れるどころかこれから伸びると思うけどな
2022/03/29(火) 17:43:29.35ID:tW3X9ADQa
そこまで求めるなら他の言語選ぶかな
jsで完結したい人には良いんだろうけど
2022/03/29(火) 17:51:35.82ID:TwhF50F/M
>>86
同意
2022/03/29(火) 18:50:23.14ID:RfHYlyc80
フロントでjs以外の選択肢あったのか
2022/03/29(火) 18:58:12.56ID:SAtTzz3E0
あるけど無い（成熟してない）
2022/03/29(火) 18:59:07.11ID:xd8Xrmeo0
>>86
これ
作りっぱなしのプロダクトが多すぎる
2022/03/29(火) 19:43:57.17ID:0zgLg8Xwa
もうAngularに帰ればいんじゃね
学習コスト高いって言うけどどうせ他のも必要な機能揃えたら同じくらいの勉強量になるんだし
2022/03/29(火) 20:35:56.30ID:xd8Xrmeo0
ならんよ
React一択
とにかく学習コストが低い
Vue3の本が最近出たから立ち読みしたけど
なんじゃこれって感じ
相変わらずthis使いまくりでバグりそうだし
2022/03/29(火) 20:48:51.88ID:tW3X9ADQa
>>91
いや、これはフロントとバックエンドの統合ライブラリだからバックエンドは別の言語でやりたいなって意味
2022/03/29(火) 22:38:01.87ID:a2KK+TKpM
>>95
this 使うのvue3ちがうよ。
2022/03/29(火) 23:48:30.54ID:xxVtcj7qa
blazor
2022/03/30(水) 07:39:00.66ID:ojoAdHT2M
BlazorはC♯で全部やりたいって人以外にはメリット無くね……
2022/03/30(水) 09:43:48.12ID:zC4eLKs90
×ゲームでしかない
2022/03/30(水) 10:47:39.46ID:iu76Nwkv0
Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった
https://zenn.dev/marokanatani/articles/compare_vue_and_react

> VueはEasy、ReactはSimple
わかる
2022/03/30(水) 12:16:39.31ID:OOkK5m9Na
まぁvueは個人開発の延長よね
2022/03/30(水) 23:06:07.37ID:ZV6rQOSL0
vueはフレームワーク独自のルールが多かったり業務でちゃんと使うにはVSCode等のエディタの拡張機能が無かったら辛かったりで、慣れすぎてしまうと悪い意味でvue以外が使えなくなってしまう感じがする
2022/03/31(木) 01:46:33.94ID:86aTlM7E0
たしかにいまvue(nuxt)で開発してるけど
わりとめんどくさいとこあるね

typescriptを使わなければそうでもないのかもだけど
2022/03/31(木) 10:50:34.39ID:oSy/YhOk0
vueは確かに使ってると楽なんだよね
ただ、何でもフレームワークがやってくれるから根本のプログラミングに対する考え方が深まらずにvueをどんだけ長く使っても「ただvueに慣れた」で終わってしまうことになると思う

reactはちゃんと使おうと思ったら
・javascriptの文法
・関数型プログラミングとは何か
・副作用とは何か
みたいに、深いとこまで突き詰める必要があるからreactを使いたくない人はこういうのを嫌がる
その代わりreactに習熟すると他のjavascriptフレームワークや他の言語にも活かせるような考え方が身につくと個人的には思ってる
2022/03/31(木) 11:20:24.39ID:aHZxCmZf0
よくReactは関数型プログラミングって言われてるけどあんまり分かってないわ
そもそも関数型言語に対する理解が足りないんだろうけど今まで書いてた手続き型言語(C++/Python)とそこまで書き方に違いがあるかって言われると謎だし

移行して違和感あったのは
if (is_hoge === true && do_hoge()){}
みたいなのだけどこれは関数型関係ないだろうしなぁ
2022/03/31(木) 15:19:18.41ID:F2XPsESOa
>>106
ぶっちゃけ関数型言語的なのはクロージャくらいだよ
型があると話が変わってくるけど素のJSならそれくらい
2022/03/31(木) 15:58:23.58ID:iKma4XC/r
useEffect地獄
2022/03/31(木) 18:21:07.43ID:k0INsa2ta
useEffectめっちゃシンプルだと思うけど
2022/04/02(土) 21:07:33.40ID:NF+PiVrF0
hooksで良いなと思った部分は副作用とマークアップ部分が綺麗に分離できるようになったことだな
それによってコンポーネント内の副作用の影響等が把握しやすくなったり、カスタムフックで自分好みに複数のフックをまとめて抽象化出来たりするからコードの可読性も上がったように思う
111デフォルトの名無しさん (ﾜｯﾁｮｲ 5563-VAYQ)
垢版 |
2022/04/02(土) 22:03:18.78ID:phShoyKu0
createRootとrender分けろって警告で出したね。
シンプルじゃないなぁ
2022/04/02(土) 22:39:16.37ID:WPblCx5D0
その警告をしてシンプルでないとする理由がわからん
2022/04/02(土) 22:48:49.10ID:B/N6Fa/fa
ごちゃごちゃに書きたがる人っているよね
2022/04/02(土) 23:53:46.13ID:GrEAMzhIa
>>97
いや、抜本的に変わったのは3.2とかだったろ
2022/04/04(月) 18:57:54.46ID:TKeyZlO5M
スマホアプリのデータをWebでも編集できるようにしたくて
色々調べてく中でここにたどり着いたんだけど
なんかWebフレームワークは乱立した感じになってるのね…
調べてもどれを使うべきなのかよく分からない
githubの星くらいしか参考データもなく

でも>>101さんのリンク先記事が参考になった
別にそんなにライブラリは使わないし、規模の小さい個人開発はVue.jsで良さげなのかなと
2022/04/04(月) 23:40:42.03ID:EAh2hm0B0
webアプリ初心者が両方ちょこちょこ触ってみてvue使ってるよ
なんかpinia好きだわ
コード打ち込みはreactが楽しいね
正直たいしたものつくらないから優位性はよくわからん
117デフォルトの名無しさん (ﾜｯﾁｮｲ 85a7-B0Ip)
垢版 |
2022/04/05(火) 00:02:53.38ID:4sgd/Hm90
reactはカスタムレンダラーがすごいらしい
2022/04/05(火) 02:34:36.17ID:NrUXKx3F0
> 次世代のReact？ Solid.jsについて
https://zenn.dev/nicky/articles/754f0ca74c887a
もうReactの天下も終わりかぁ早かったなぁ
2022/04/05(火) 06:54:29.03ID:bH2gxj8m0
100歩譲ってReactの終わりの始まりだとして、それ、React系の流れを汲んだ技術じゃん。今はとりあえずReact使っといて（本当に流行ってから移行しても）問題ないように見える
2022/04/05(火) 07:17:54.78ID:HsXfDOwGM
Solidは仮想DOMを使わないため高速
さらにReactでの無駄なレンダリングも抑えている
Reactを採用するモチベーションがない
2022/04/05(火) 07:54:01.75ID:bH2gxj8m0
仮想DOM使ってないから速いってのは木を見て森を見ずでは？
2022/04/05(火) 08:10:00.23ID:VqqpMSri0
reactやvuejsでアプリケーションを構築しててパフォーマンスが問題だと感じる場面に遭遇したことはあるが、大量のデータをフェッチしていたり自分のコードの書き方が悪かったりで、reactやvuejs自体が問題に感じるようなことは無かったなあ
2022/04/05(火) 09:09:02.03ID:+EK3ySaMM
比較した？
2022/04/05(火) 10:11:51.52ID:ZReMvbtfM
>>118
これいいね
週末に試してみる
2022/04/05(火) 13:26:52.69ID:ETld5ZoPr
なんでReactは仮想DOMつかってるの？
メリットはなんですかい？
2022/04/05(火) 14:59:22.43ID:6a13xz8Z0
jQuery みたいに実DOM を扱わない。
仮想DOM変更時には、自動的にDOM木の差分を計算し、差分部分だけを実DOMに反映させる

ただし、メモリは実DOM・仮想DOMの2つを持つので、2倍使う
2022/04/05(火) 15:19:17.06ID:0YlujQsY0
実際普及して移行ツールが出たら起こして
2022/04/05(火) 15:48:51.29ID:raev6Saea
>>125
それ言われてハッとしたわ
今や差分検出と書き換えをやるメリットってほぼない気がする
本当に必要なのはJSXとHooksであって仮想DOM入らんかも
2022/04/05(火) 15:54:41.73ID:raev6Saea
Reactの"次"が見えてきたな
2022/04/05(火) 16:30:16.36ID:aekYSBQXM
Webフロント門外漢は知らないかもしれないけど実DOMの変更はレンダリング処理とか入ってそこそこコスト重いんだよ。
最近はtemplateのslotとかあって必要なとこだけ更新しやすくなったけど、それでも。
2022/04/05(火) 16:48:05.27ID:SCn4t5fAM
仕事中なのでこっそりドキュメント読んだだけだけどかなりよくできてそう
Solid.js普及するといいね👍
個人的にRNよく使うからそっち方面もサポートしてくれれば最高です(仮想DOMないと流石に厳しいか？)
2022/04/05(火) 17:20:25.99ID:u+FS9OX10
その重いっていうのを数字で見せてくれる人がいないのよね
正直10年前の比べてマシンスペックも上がったし
大した差はないんじゃないの？
むしろ差分検出なんてことをやることのほうが重い可能性
2022/04/05(火) 17:54:05.17ID:ETld5ZoPr
Solid.jsって名前がダサい
2022/04/05(火) 17:56:06.60ID:u+FS9OX10
>>133
確かに
今の時代これはないわ
2022/04/05(火) 18:15:07.55ID:3u8+O//Xa
これreactじゃなくてsvelteが死ぬんだろな
2022/04/05(火) 18:39:10.39ID:zCnZtIiB0
新しいのでてくるの
2022/04/05(火) 18:41:37.46ID:6a13xz8Z0
差分検出は軽いでしょ？

各ノードに、変更の有無のフラグを持つだけじゃないの？
138デフォルトの名無しさん (ﾜｯﾁｮｲ 1d46-2tQQ)
垢版 |
2022/04/05(火) 19:45:00.74ID:wCKcIEh+0
もう速度くらいでシェアは変わらんよ
重要なのは開発体験の方だ
139デフォルトの名無しさん (ｱｳｱｳｴｰ Sa13-yV2e)
垢版 |
2022/04/05(火) 20:26:33.63ID:G2ThUmqoa
パフォーマンスばっかり言及されてるけどこれのスゴイ所はhooksのトップレベル制約、明示的なキャッシュ処理、依存関係の記述から開放されることだろう
reactを踏襲しつつ弱点を見事に解消してる完全な進化系だからもうreactを選ぶ理由がない(レガシーのメンテ以外では)
2022/04/05(火) 20:35:42.86ID:ETld5ZoPr
Solid.jsは誰がつくったの？
2022/04/05(火) 20:38:38.09ID:3tK/podq0
これが流行るかは別だけどreactが文句のつけようのないものってわけではないよね
競合相手のvueがそれ以上に迷走してるだけで
2022/04/05(火) 20:41:35.88ID:bH2gxj8m0
>>139
そこから開放されても、（広い意味での）状態の取り扱いは残るし、あんまり魅力的とは思わないな。
どうしてもReactを過去のものにしたいようだけど。どっちも使えば良いだけなわけで。
2022/04/05(火) 23:59:41.42ID:Pmd2Ul1s0
reactとnextjsってどっちがいいの？
2022/04/06(水) 01:39:52.94ID:xqee3k0P0
たまには Angular のことも思い出してあげてください
2022/04/06(水) 12:57:39.21ID:DIJBOrU7r
誰も答えられないの？
なんでReactは仮想DOMつかってるんすか
146デフォルトの名無しさん (ﾜｯﾁｮｲ 55a7-dEyT)
垢版 |
2022/04/06(水) 13:07:19.26ID:K22cA7Fi0
仮想DOMを使うのは現状一番速度とコードの少なさでバランスが取れてるから

あとReactは自由にレンダラーをすげ替えられるから、もっといい方法があるなら
仮想DOMを使わないReactレンダラーを作って実装してそれを使えばいい
だからReactを離れる必要はない
2022/04/06(水) 13:14:26.43ID:S/lTt5hhM
マルチプラットフォーム対応とかかな？
Solid.jsは仮想DOMを捨てたからモバイル移植が難しいと予想
2022/04/06(水) 14:00:54.13ID:7agkb2pSM
>>146
仮想DOMは使えば有利というものではないからそれは難しいところですね

>>147
仮想DOMとマルチプラットフォーム対応は無関係ですね
2022/04/06(水) 14:02:45.11ID:S/lTt5hhM
仮想DOMという抽象化レイヤでプラットフォーム間の差分を大部分吸収できるのでマルチプラットフォーム対応しやすくなるのでは？
2022/04/06(水) 14:03:19.50ID:6A9Aeuema
>>145
上で書いてるだろw
DOM全体を書き換えるとブラウザの描画パフォーマンスが落ちるのよ
jQueryおじさんがinnerHTMLに丸ごとぶち込むようなコードだよ

一方JSXはユーザーからはinnerHTMLに全部突っ込むコードを毎回生成しているように書いてるけど
中では差分だけ見てるというトリック

これこそが仮想DOMのメリット
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オブジェクトを生成するの？
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況