Vue/Nuxt vs React/Next

[masaya0521]

Vue/Nuxtのメリットって何？

• 軽い雑談のノリでもいいので、Vue/NuxtがReact/Nextと比較してメリットだと感じてる部分を聞きたいです。自分が感じるメリットはSFCだから直感的にわかりやすいくらいしかない¹と思っています（暴論）

Footnotes

1. 私はまだ半年間しか勉強していない雑魚エンジニアなので、間違っている部分があると思いますがその都度訂正頂けると助かります。 ↩

[monsat]

React 関連のドキュメントを読むの好きだし、話題の WEB+DB PRESS の React の特集も読むくらいには React の思想は好きなんですが。それでも今のところ React でアプリケーションをつくったことはないので、その限りで。

メリットというか、好きなところです。
（独断と偏見全開です笑）

SFC で html と css がそのまま書けるところ

なるべくWeb標準の技術で書きたいというのがあり、html や css を普段どおり書けることは自分に合ってる。
以前 Svelte を調べてて Vue.js 以上に .svelte ファイルがまんま html ファイルだなと思ったのだけど Anthony Fu のこの発言を目にして、あーたしかにと思った。
https://twitter.com/antfu7/status/1519374559191134208

<script setup> since Vue.js 3.2

Svelte に惹かれてた点のひとつが、とてもシンプルに記述できるところだったのだけど、ほぼほぼ Svelte ライクに書ける <script setup> は本当に書いてて心地よい
コンパイラーを使っていろんな機能を実装しているところは Svelte の影響を多分に受けていると思う

Vite

Evan が当初は Vue.js 専用で作ったけど、コミュニティに開発を引き継いだことで React を始めとして多くのライブラリ・フレームワークで利用可能になった Vite
Vite ができたことで Vue.js のエコシステムが大きく変化したし、前進したと思う
まだまだ発展途上ではあるけど IE11 なき今、Vite 中心のエコシステムができあがっていくのだろうと想像してます

Computed Property

もっとも Vue.js らしいものといえば（Svelte にもあるけど）Computed Property だと思う。
もちろん React にも useMemo() があるけど、Computed Property の使い勝手にはかなわないと思っている。
React からはいって Vue.js を使った著名なエンジニアが Computed Property を推してたのを見たときはその意味が分からなかったけど、いまはわかる。便利。

Composables

React でいう Hooks
これもそうだけど、React 発の機能をアレンジして実装するのが上手。さきの Svelte とかもそうだけど、ほかのよいものを取り入れるのがうまい
次期 Vue.js 3.3 は SolidJS をヒントに 脱 Virtul DOM の方向らしく、とてもわくわくする
Web Components になる日もあったりして？！

Composables が好きなのはオブジェクトで返すことで、Vuex(Flux) ライクに利用しやすいこと

Nuxt

「ちょうどよい」という言葉がぴったり
過不足がない
Nuxt 3 もはやくエコシステムがあつくなってほしい
nuxt/image とかはやくほしい！
それ以外は Full TypeScript だしゼロコンフィグだし開発体験が心地よい

本当のリアクティブUI

React が自分に合わない点は突き詰めるとひとつだけ
それが再レンダリング時に Component 全体を再描画しようとするところ（Vue.js も Svelte も SolidJS もコンポーネントをマウントしたらその後は、値が変化する箇所のみを更新する）
React 関連の記事が話題になるとき、その一定割合はこのことに起因している気がする（React エアプなので間違っているかもしれないけど、基本的にそういう理解）

おまけ

好きなところはこんな感じ

ちなみに React いいなあと思うのは

• 巨大なエコシステム（追いつく気がしない）
• Stripe App とか Hydrogen とか React 前提になっているくらい普及しているところ
• 案件多い

心から羨ましいと思ってる（でも Vue.js と Nuxt が好き 笑）

[masaya0521]

ご意見ありがとうございます！自分が知らなかったメリットがあり勉強になりました。以下気になる所コメントです。

React 関連のドキュメントを読むの好きだし、話題の WEB+DB PRESS の React の特集も読むくらいには React の思想は好きなんですが。それでも今のところ React でアプリケーションをつくったことはないので、その限りで。

WEB+DB PRESSの最新号ですよね！私も見ました！Reactの思想がわかり一瞬で読んじゃいました笑

Svelte に惹かれてた点のひとつが、とてもシンプルに記述できるところだったのだけど、ほぼほぼ Svelte ライクに書ける <script setup> は本当に書いてて心地よい
コンパイラーを使っていろんな機能を実装しているところは Svelte の影響を多分に受けていると思う

v3は本当書きやすいですよね！ただ、v2使ってた人からするとv2 -> v3にリプレイスがかなり工数かかってしんどいです、、
v3に移行するならReactで良くね？って言ってる方が多いような気がします。。

Svelte に惹かれてた点のひとつが、とてもシンプルに記述できるところだったのだけど、ほぼほぼ Svelte ライクに書ける <script setup> は本当に書いてて心地よい
コンパイラーを使っていろんな機能を実装しているところは Svelte の影響を多分に受けていると思う

Reactのレンダリングってコンポーネント単位でレンダリングしてるの驚きました。reactのメモ化ではコンポーネントの一部を再レンダリングっていう処理はできないんですかね。（あまり調べきれておらず。。）

巨大なエコシステム（追いつく気がしない）

これ一番大きいデメリットだと思ってます笑
Reactの流行 = フロントエンドの流行のようになっているのは巨大なエコシステムが原因だと思います。。
Vueがどうにかして追いついてほしいです笑