Vue vs React vs Angular vs Svelte Part.11

2022/08/20(土) 13:17:12.21

!extend:on:vvvvv:1000:512

Vue
https://jp.vuejs.org/
React
https://reactjs.org/
Angular
https://angular.io/
Svelte
https://svelte.dev/
solid.js
https://www.solidjs.com/

※前スレ
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/
Vue vs React vs Angular vs Svelte Part.10
https://mevius.5ch.net/test/read.cgi/tech/1646747836/

★ここではjQuery, Ruby, C#, Blazorの話題は禁止です
★jQuery, Ruby, C#, Blazorｷﾁｶﾞｲが書き込んでも無視してください
Next, Nuxt, Sapper, Gatsby, VuePress, RedWoodなどはおｋ。

VIPQ2_EXTDAT: default:vvvvv:1000:512:: EXT was configured

2024/09/26(木) 02:02:17.79

>>304
ばか

2024/09/26(木) 12:39:43.01

>>299
cloudflare D1とか普通にやれるしむしろ積極的に使う方向性
サーバーレスDBだ
あと普通にpostgresqlサーバーへ接続できる(!)
もう何でもあり

2024/09/28(土) 21:18:59.88

フロントエンドのPrismaに対する過剰な評価はなんなんだろう
そもそもORMなんて20年前にサーバーサイドで死ぬほど開発され全てクソという結論に至った技術なのに

2024/09/28(土) 22:18:23.73

>>307
べつにPrisma以外のORMでもいいけど
TypeScriptから型安全に使えるのがいいんだよ

2024/09/28(土) 23:08:59.38

>>308
RDBのインターフェースにおいて型安全という思想自体が間違ってる派だがそれは置いておいて
定義したスキーマに対して型安全に使いたいならそれこそJavaやC#でそれこそ海千山千レベルで作られた
しかしどれも使いやすくはなく最終的にはシンプルなクエリービルダー型のものだけが残った
必要なのはORMではなく単なるSQLクエリービルダーだったというのが結論
まあ歴史を繰り返すことが悪いとは言わないが
自分で実装したものもないのになんかレベル低いことやってるなあと
「wasmコンパイルした時のサイズが最小のクエリビルダーを作る」というのは技術的にかなり面白いと思うけどね

2024/09/29(日) 01:13:04.48

フロントやってる人って強い言葉で極論語りたがるってことが、
顕著に表れてる数レスだなあって思った

2024/09/29(日) 01:47:21.26

極論ではなく以下の構成が最適なのはいうまでもない

DBマイグレーションツール
+
データベース接続を抽象化するアダプターモジュール
+
SQLクエリービルダー

これこそがモダンなインターフェースなのである

2024/09/29(日) 02:23:06.66

昔は、ローカルの開発環境ではsqlite、実環境ではDBMSとかあったからORMにもメリットがあった。
でも今ではローカルでも実環境と同じDBシステムを使えるようになってるし、調査では結局素のSQL見る必要もあるし、リプレースする際でもフロント、バックエンド、DBシステムのなかではDBシステムの変更が一番可能性は低い。
それならORM毎の違い覚えるより素のSQLを使いこなせるようになったほうが長く使えるスキルになる。
結局ほしいのは >>311 で言ってるものだな。

2024/09/29(日) 06:12:44.91

昔、SQL使えないアホの選択肢がORMだったのよ

2024/09/29(日) 08:21:21.24

PrimaはTypedSQLみたいなものも出してきてるし
結構面白いよ

2024/09/29(日) 08:29:21.92

20年ぐらいこの業界やってるけど最適化を進めて複雑なサブクエリやらWITHやらを使い始めると、
大抵ORMじゃ対応しきれなくなって結局生のクエリを実行させるようになるケースが多すぎたな

2024/09/29(日) 08:41:41.79

ぶっちゃけJSONにaxiosあたり出てきてLaravelがガワ連携実装してから、他言語フレームワークもガワ連携前提がデフォ化して自己完結主義のAngular以外ガワツールと化してる感あるな。あとは複雑だが階層は浅いフォーム制御が得意（Vue）か、単純だが階層が深いステート管理が得意（React）かで選択肢が変わる

ヨーロッパだとSvelte（イギリス生）が人気になってきてるみたいだけど、日本というかアジアはVue強いし、まだまだ普及に時間かかりそう

2024/09/29(日) 09:28:52.49

svelteを採用してる企業を見たことがない

2024/09/29(日) 13:04:00.66

>>313
SQL理解できないのにORM使おうというのがそもそも間違いだからな
チューニングとか別の人がやるのか？って話
ふざけんなと
あと生成したSQLが本当に求めているものなのかのチェックも必要
SQL生成ごっこがしたいなら好きにしたらいいが

>>315
それと最近はデータ分析用にかなり複雑なSQLを投げることが増えた
別途バッチにすることも多いがどうしてもリアルタイムで実行しなきゃならんこともあったりして
これが厄介なんよね
彼らの実行するクエリはもう型とかぐちゃぐちゃ

2024/09/29(日) 13:08:53.67

ORMしか使えない奴ら多いよな
バックエンドエンジニアでSQL書けず最適化もできない連中ばっか

2024/09/29(日) 13:16:26.30

>>314
サーバーサイドが型合わせ不毛だよねと実質捨てた部分を今どのように再開発するのか楽しみではある
「先」に進めてくれるのだろうか
ちなみに改めてORMを調べてみたがやはり状況は大して変わっていない模様
SQLクエリービルダーは大抵の言語でかなり進化しているが型のマッピングは程々にするという妥協案
Haskellが1番面白かった
以下のようにモナディックで型安全なSQLが書ける
ここまでやれるやらありか？とは思ったが

select $ from $ \person -> do
where_ (person ^. PersonAge >. val 30)
return person

2024/09/29(日) 16:05:49.23

SQL書けないからORMのtable単位で更新するレベルの機能で良しとするんですよ

2024/09/29(日) 16:25:50.06

ちなみにJavaやC#のORMで出た型付けの結論は
「オブジェクトのプロパティと実行するSQLの型を手動でマッピングする」です
マッピングは動的に変えられるので汎用性がある
テーブルの型とプログラミング言語の型を直接マッピングしないというのがミソ

2024/09/29(日) 16:38:12.07

簡単に言うと実行するSQLごとに型付けをする感じ
これだと同じテーブルで型が変わる場合などでも対応できる
PrismaのTypedSQLもこれに近いものなのではないの？
Java界の奴らが10年以上かけてたどり着いた結論だから多分こうなると思うよ

2024/09/29(日) 17:18:57.60

>>311
>>SQLクエリービルダー

ってGUIでクエリーを書く機能のこと？

2024/09/29(日) 17:35:45.85

SQL書けなくてどうやってデータ保存してるだ？
本当にSQL書けないならSQLite辺りで覚えていったほうが良いかもね

2024/09/29(日) 17:47:58.09

>>324
違う
単にSQL生成を目的とするだけのモジュール
railsにおけるArelとか
以下のように複雑なSQLも構築可能

Task.where(
Arel::Nodes::NamedFunction.new(
'TO_CHAR',
[
Task.arel_table[:created_at],
Arel::Nodes.build_quoted('YYYY')
]
).eq('2023')
)
# => SELECT "tasks".* FROM "tasks" WHERE TO_CHAR("tasks"."created_at", 'YYYY') = '2023'

大抵の言語やフレームワークに似たようなモジュールが存在してそれを使ってSQLを作るというのがここ数年の流れ
もちろんN+1問題を容易に作ってしまうので結局実行時にどのようなSQLが生成されるか？は見なくてはならない

2024/09/29(日) 17:54:18.58

>>317
いちばん有名な企業が楽天グループ、そこは公認パートナー企業にもなってる
>>325
ORMは便利だけどそっちしか知らない人が多いというか、各種フレームワークからデバッグ用にSQL吐き出せること知らない人も多い。だから結合とか副問い合わせで躓いてるのをよく質問サイトで見かけたな

2024/09/29(日) 18:05:01.99

おぞましいことに、SELECT * FROM xxx WHERE yyy = zzzみたいな糞クエリのゴリ押しだけで全部解決しようとする新人がたまにいるのよ
明らかにJOINやサブクエリやウィンドウを使えば効率的に一度のクエリで解決する要件も、何回も何十回もクエリ発行して取りに行く
負荷試験が壊滅的だったプロジェクトに火消しを頼まれて助っ人で行ってみたらそんなザマで頭抱えたことがある
結局ほとんど俺が全部書き直した

2024/09/29(日) 18:20:31.60

あんなDBの使い方しかしない（できない）からORMの弊害に気付かないんだと思うわ
型安全と言っても、それテーブルの全カラムを無加工で取得したい場合ぐらいしか有効に働かないだろうに

2024/09/29(日) 18:29:40.63

>>326
ストレートーにSQL書けよと言いたくなるな
障害時に綺麗なSQLはけてないと復旧とか損害保証とかできるの？

2024/09/29(日) 18:36:09.04

>>328
昔DBAという役職があって
その人に使用するSQL全部チェック対象にされ...

2024/09/29(日) 18:38:11.33

ストレートにSQL書くと、パラメーターとの文字列連結がカオスになるよ

2024/09/29(日) 18:41:51.91

サブクエリに、with、一時table使ってSQL書いてるけどそんな事一度もなかったな

2024/09/29(日) 18:43:50.27

今回の調査で色々と調べたけど
javaのJOOQってORMやべーな
とんでないぞこのライブラリ

以下のように型がコロコロ変わる場合でもちゃんと書ける
Fieldクラスを抽象化することで静的な型チェックが可能になっている
この発想はなかった

DSLContext create = DSL.using(configuration);

Field<String> caseField = DSL.case_()
.when(field("age", Integer.class).gt(18), "adult")
.when(field("age", Integer.class).lt(18), "minor")
.otherwise("unknown");

create.select(caseField).from("users").fetch();

2024/09/29(日) 18:45:39.57

caseってデータ分析ではめちゃくちゃ使うのだけど
これがこんな感じで書ける
素晴らしい

2024/09/29(日) 18:47:22.71

>>331
昔は社内にオラクルデータベースの番人みたいなおじさんがいたなあ

2024/09/29(日) 19:00:17.50

>>328
select * from tableA join tableBとして、吐き出した全データを配列に格納、展開してたトンデモプログラムをデバッグしたことあるよ…。アスタリスクは百歩譲ってもせめて部分結合してくれ

データ数千件しかないのにフォーム処理クッソ重いと思ったらこれだよ

2024/09/29(日) 19:25:17.35

>>332
一回のトランザクション処理につき一回だけSQL実行可とルールすればよい
おのづとサブクエリ、with、一時tableを使う事になって、SQL投げて結果でSQL投げみたいな処理を繰り返すヘボ実装が一掃される

2024/09/29(日) 19:26:59.25

>>331
たいがいそこが開発進行のボトルネックになってたけど当時は必要悪だったと思うよ
あの頃のオンプレの商用環境（しかも大抵カツカツの構成）で、クソゴミクエリぶん回そうものなら即死してサービスダウンに陥ってたもんよ
今のクラウドのマネージドDBだったらただ遅いor費用が嵩むだけで落ちるとこまで行くことはそうそうないけど、昔は死活問題だった

2024/09/30(月) 14:16:26.25

一つの処理を一つのSQLクエリならアトミックになって問題無いけど
一つの処理を複数のSQLクエリで時間差が出来るから他所からデータ割り込まれたら困るケースがあるだろ
そこまで考慮してないアホばっか

2024/09/30(月) 16:35:49.13

一番早いのは個々のSQL連結したをストアドなんだよなー
JOINもINNNERとRIGHTは遅いからLEFTのみ

2024/09/30(月) 16:59:05.93

>>341
inner使ってたけどleftのが速いんだ？

2024/09/30(月) 22:19:31.77

そもそも得られる結合結果が違うし、INNERのほうが効率的なケースもLEFTのほうが効率的なケースも存在するから思考停止せずにしっかり実行計画確認しろ
「何にでも～～を使う！」ってのはバカの一つ覚えってんだ

2024/09/30(月) 22:31:07.26

left と right で速度が違うとか言ってる奴の話を真に受けんな

2024/09/30(月) 23:41:53.43

>>344
結構あるで

2024/10/01(火) 10:17:07.05

リスト構造なら違いは無いよな？

2024/10/01(火) 16:04:12.61

本読んでたらNextすげーいいじゃんと思ってきた、なんか学習コストは高そうな気がするけど
remixは調べてない

2024/10/01(火) 16:46:36.79

最近はremixの方が優勢になってきてる
ChatGPTもnext.jsだったのにremixに移行した

2024/10/01(火) 16:47:26.48

ただしremixはフルスクラッチで作り直すから
大幅に変わりそう
だから今手を出すべきかは微妙

2024/10/01(火) 16:48:32.91

どっちにしろ新規プロジェクトだからNextかなあ

2024/10/01(火) 16:49:20.05

じゃないRemix

2024/10/01(火) 18:54:14.07

まあフロントエンドなんて作り直すのは基本だし
まともなCTOがいたら予算も出るからその時の流行でよろしい
画面の動きを全部サーバーサイドの結果で判断できるように作っておけば問題なし

2024/10/01(火) 22:29:45.75

プロダクトの性質次第だろう
SaaSだとページ数多いしビジネス要件実装のウェイトが大きいから作り直しは難しい

2024/10/01(火) 22:30:17.57

>>345
ねーわ。どっちも outer join で駆動表が右か左か違うだけ。
クエリを書き換えて実行計画が変わったのを勘違いしただけだろ。

2024/10/01(火) 22:41:15.98

>>354
あるで調べてみ

2024/10/01(火) 22:45:51.49

leftと等価なrightへの書き換え、あるいはその逆の書き方を知らないだけでは？🤔

2024/10/01(火) 23:53:40.67

right joinを使う必要があるとは思えんな

**デフォルトの名無しさん** (JP 0Hdf-GCHr) · 2024/10/02(水) 07:12:03.51

345は20年前のOracle8iみたいなルールベースの知識からアップデートできていないだけな気がする

2024/10/02(水) 08:15:16.76

>>355
あるっつうならその実例出して

2024/10/02(水) 12:21:12.06

>>358
そーーかも

2024/10/02(水) 12:40:19.74

なんとなくいつもleftだわ

2024/10/02(水) 15:21:28.65

Nextはビルドツールが自前なのがな
RemixもsveltekitもNuxtもVite使ってるからそこでエコシステムの差が出てきそう
それが進んだらNextも厳しくなってくる

2024/10/02(水) 16:20:33.61

JSはいつまでエコシステムとかやるんすかね
いい加減デファクトをみんなで作ろうよってならないのかね
主に政治的思惑で一つにしたくないのだろうけど

2024/10/02(水) 17:16:13.23

right joinを使うと右から左へ、下から上へ読むようなクエリになるからな
読みづらいからrightは基本使わない
「遅いからrightは使わない」とか言ってる人は意味不明だけど

2024/10/02(水) 17:22:06.79

昔のDBでそういうのがあったんじゃないの？
知らんけど

2024/10/03(木) 00:02:27.79

まあ特に理由がなければleftだよなあ

2024/10/05(土) 12:16:43.81

HR系のシステムにおける従業員(主)と部署(従)のように、あるビジネスドメインにおいて着目する主体ってのはだいたい決まっているものだ
なので、SQLを書くときもそのメンタルモデルに倣って主側に置くものをある程度固定したほうが読みやすいという考え方もある
ある条件を満たす従業員と所属部署の一覧を表示する際に、従業員不在の部署も表示したいという要件があったとして、
そのようなちょっとしたビュー要件によって主従関係が逆転してしまうのは好ましくない、ということだ
俺はそれでもLEFT統一の方が読みやすいと思う派だが、考え方としては理解できるものだろう

2024/10/19(土) 07:55:36.48

svelte5のmilestoneが98%まで回復

2024/10/20(日) 20:29:57.78

release svelte@5.0.0

2024/10/28(月) 10:56:23.79

svelteで作っていたサイトはもうastroにしたんだよなあ
svelteの強味がよくわからなかった

**デフォルトの名無しさん** (JP 0H63-gQDg) · 2024/10/29(火) 22:21:02.13

EchoAPIは、テストが私のReactアプリに動力を提供するAPIを容易にし、開発を強化するための迅速な応答を提供。試してみてね

**デフォルトの名無しさん** (JP 0H63-gQDg) · 2024/10/29(火) 22:22:48.45

EchoAPIの直感的なインタフェースは、ReactアプリケーションでAPI応答を迅速に検証し、デバッグを容易にするのに役立つ。おすすめ！

2024/12/27(金) 03:32:05.43

Angularが久しぶりに盛り返してる
今年のアプデでかなり改善されたからだろうか
あと特筆すべきことはAstroの伸びかな
https://2024.stateofjs.com/

2024/12/27(金) 20:34:35.48

本当だVue抜いてるじゃん
Astroは絵に描いた餅感のイメージ強いんだけど、
この間bolt適当に弄ってたら何故かASTROでコード吐いてきたので
AIの力も借りて遊びでなんか作ってみようかなぁ

2024/12/28(土) 02:05:29.96

いやもうReactでいいよ…

2024/12/28(土) 06:54:44.06

jsx使ったことある人ならAstroは簡単に習得できると思う

2025/02/08(土) 10:31:21.71

>>373
Angular17以降爆速になったからな、Vite＋esbuildというチートで19は起動が6秒ぐらい
それでいてフルスタックのまま。スタンドアロン標準実装、Signal、ビルトインコントロールフロー
ようやく他と戦える体勢整ってきた

>>370
SvelteはAppleが協賛に入って脱TS目指して、アプリ特化になりつつある
Runeもまだ、既存技術をわかりやすくマーキングしただけだし

2025/02/08(土) 11:14:27.65

>>373
Viteの伸びもえぐいな、とうとうWebpack超えてしまったか

Reactも19になってようやく不満要素だった、テンプレート周りの改善とフォームのリアクティブ制御を実現してきた
ただReact普及に貢献してきたNextだけが、案の定Viteから爪弾き状態になってるのが気がかり
Remix、Astroはしっかり公式連携になってるのに

2025/02/09(日) 16:00:36.64

あとAngularはCSR、SSG、SSRをミックスした使い方ができる。これはフルスタックならではの強みであり芸当でもある

2025/02/09(日) 18:38:29.52

Angularってどう学べばいいの？
書籍は古いバージョンしか出てないし
公式サイト（日本）のはじめてのAngularだかも
今のバージョンでは動かなかったりして当てにならなかったわ

2025/02/09(日) 23:00:29.93

>>380
やっぱり本家のチュートリアルかねえ英語だけど
日本語の書籍は古すぎてオススメできない

2025/02/11(火) 10:22:24.86

>>380
ZennかQiitaあたりの使える記事を探すのが手っ取り早いかな
英語読めたらdev communityにも役立つ記事がいっぱいあるけど

Angularも14以降とそれ以前でReactの16.8以降と以前ぐらい別物の記述になってるから注意
あとAngular19からはstandalone標準だから、過去の動かしたい場合はstandalone: falseにしないと動かない

2025/02/11(火) 17:22:38.85

AngularはFCP遅いのがな
一度読み込んだら速いけど

2025/02/15(土) 10:10:33.69

最近の業務待機時間多いから、その合間にここ数年の流行りに取り組んでいるんだけど
solidJSがかなり書きやすくていい。Vueのようなライフサイクルフックもあるし、JSXのループ周りに対しても面倒なmap地獄に遭わなくて済む。Reactかじってたら多分すぐ覚える
システム複雑じゃなくていいけど、JSXでさっと書きたいって人にはおすすめ

RemixとAstroもいい感じだ
RemixはNextほど複雑さがないし
AstroはJSX、Vue、Svelte、Solidどの書き方も通るのが便利そう

2025/02/15(土) 14:53:40.95

でも案件ないからね

2025/02/16(日) 01:34:44.13

ネットうろうろしてるとNextどころか
まだまだVue、Nuxt多いなぁ
Astroとか日本の商用サイトで採用してるとこあるの？

**sage** (ﾜｯﾁｮｲ 6d44-ot0k) · 2025/02/16(日) 08:57:51.89

どこで何が役立つかわからん業界だし（今年はまさかのPerl大活躍）

>>386
Astro採用企業の有名どころはAmazon、ネトフリ、クックパッド（ここはかなり日和るが）とか
Microsoftもスポンサーになってるのが大きいかな、あとVite公認

2025/02/16(日) 09:40:54.74

GoogleとかトリバゴもAstro使ってるはず
国内企業は知らんけど

2025/02/19(水) 06:48:32.03

Remix良いとは思うんだけど
こういうフレームワークを更にラップしたようなのって流行過ぎた頃に困る予感しかしないんだよな
バックエンド含んでるから古くてもまぁ動けばええじゃろでサボることもできんし

2025/02/19(水) 07:02:57.77

>>389
どのフレームワーク使ってもその問題は付きまとうから気にしても意味ないような

2025/02/19(水) 07:36:49.70

create-react-appが非推奨になったとかなんとか

2025/02/19(水) 13:07:51.68

フルスタックものはだいたいそのリスクあるでしょ
堅牢なシステムを長期的に運用したいとかなんとかなら
結局愚直にバックエンドapi実装

2025/02/19(水) 14:31:22.96

大規模ならCOBOLかJAVAだろうね

2025/02/19(水) 14:34:20.07

フルスタックのリスク回避でapiは別に設けるのもアリだよねって思ってもいる
Remixイジり始めたばかりだけど

2025/02/20(木) 20:55:31.83

海外ではQwikも人気出てきてるみたいだし本当に群雄割拠だ

自分は今、Svelteのrune触りまくってるけど、一層proxy制御ガチガチになってて
堅牢性と拡張性は大幅に改善されてたけど、あれじゃもう、Vueと並び初級者向けとは言えんぞ

2025/02/21(金) 02:50:21.40

Reactみたいに汎用的なフレームワークは消えると思ってる
やっぱり個別にコンポーネントをコンパイルした方が効率いいのは間違いないのだし
サーバーサイドありきにするならこの考えが自然なのよね

2025/02/21(金) 05:02:26.87

>>396
litのこと言ってるのか？

2025/02/21(金) 18:42:50.18

>>397
いや基本的にはサーバー側でオンザフライにコンパイルされることが基本となると思う
svelteやqwik、solidを融合したような形になると思う

2025/02/21(金) 20:23:41.29

>>396
ReactとVueはあくまでライブラリだからな。だからガワ（フロントエンドツール）として売り出す手段にも出てるわけで。それだけにReactもそろそろ使いやすさ重視しないと離れていくだろうな
特に、今後のエコシステム次第ではSolidに乗り換えられる可能性は大いにある

VueはdefineModelがチート性能すぎてある意味今後が怖い

2025/02/22(土) 13:52:23.08

spaとか糞なUIはそろそろ消えると予想。
画面リロードに対応できない仕組みでUI構築すべきではないと気付き始めるだろ。

2025/02/23(日) 10:18:53.60

SSGもCORS問題が鬱陶しすぎる（ローカルで環境開発しにくいから開発コスト大）
のと、あとデータ量に比例して重くなっていく問題をなんとかせんと

2025/02/23(日) 11:27:58.14

>>400
むしろView Transitions APIとか出てきてSPAは手軽に作れるようになってきてるから消えないよ

>>401
ReactだともうSSGは縮小方向だな
今はReactでマトモにSSGやろうとしたらAstroが一番の選択肢になりそう

2025/02/23(日) 16:53:00.51

react難し過ぎるだろ。
フックの伝播複雑過ぎて、メンテナンスできない説。

2025/02/23(日) 20:10:37.18

まったく問題ないが