VueエンジニアがReactを触ってみた感想

Yutori Otsu

個人の感想でありrantなのであまり真に受けないでほしいです。ちなみに私はフロントエンド専門ではないです。Vue.jsは仕事で5年ほど使っています。Reactは趣味でいじる程度。

Reactはお作法を学び続けないといけないフレームワーク

Reactを触れば触るほど、学ぶべき「お作法」が多いフレームワークだなと思う。例えば

  • hooksの種類が多くて覚えきれない。それぞれの役割を理解するために、Reactの内部機構を多少理解している必要がある。例えば  useReducer とか、useTransitionを名前から使い所を予想することは多分不可能だと思う。

  • hooksはコンポーネントの関数の中に書かないといけないので関心ごとにhookを書く場所を分けることができない。

  • ステートを変化させるたびにそのステートが描画に関係ない場所も再レンダリングされる。例えば<input> タグにステートをバインドした場合、1ストロークごとに再レンダリングされる。（そのため、メモ化する必要がある）

  • グローバルなステートを扱いたい場合、Contextを使えばいいんだけど使いすぎるとProvider地獄になる。そのため、一定以上の規模のプロジェクトは状態管理ライブラリを使うことが必須になるが、その状態管理ライブラリの種類が多すぎる（後述）

状態管理ライブラリの種類多すぎる問題

ざっと数えただけで5種類くらいある(Redux,Recoil,Jotai,Zustand,Valtio)
あとTanstack Queryとかも入れるともう訳がわからないことになる。

状態管理ライブラリの数が多いのはそれだけReactを使ったプロジェクトの状態管理に開発上のペインが集中していることの表れで、あまり褒められたことではないと思う。
ライブラリの作者様の努力には敬意を表しつつも、新規プロジェクトでどのライブラリを選ぶか悩む作業は、かなり認知リソースを使う一方で正直作っているソフトウェアの出来に寄与しない、はっきり言って無駄な作業だと思っている。そういう意味でまともに使えるものが一つあればいいのではないだろうか？

Vue..お前だったのか。いつもいろいろよしなにしてくれていたのは。

以下は最初に挙げた問題点がなぜVue(Vue3)だと気にする必要がないのか書いてみた。

  • hooksの種類が多くて覚えきれない…(略)
    → ref/computed/watch/defineModel/defineProps/nextTick くらいを覚えておけば大体OKだと思う。名前を見ればエンジニアならばどこで何を使えばいいか大体わかると思う。つまりこれらを使うのにVue内部の実装を理解する必要はない。

  • hooksはコンポーネントの関数の中に書かないといけない…(略)
    →そういうのはない、全部<script setup>タグの中に書けばいい。当然関心ごとに分離して書くことができる。

  • ステートを変化させるたびにそのステートが描画に関係ない場所も…(略)
    →VueはステートがどのDomの描画に関係しているのかトラッキングしているから関係ある場所だけ再描画される。

  • グローバルな状態管理…(略)
    →Vue3.5からdefineModelがGA化されてシームレスに双方向バインディングができるようになったので、そもそもグローバルな状態を持つ必要性が減っている
    →Context的なことがやりたければ inject/provide を使用するという選択肢がある。これはProvider地獄的なことになる懸念はない。
    →状態管理ライブラリを使う場合はVue2なら vuex, Vue3ならpinia に選択肢がほぼ絞られる。

Reactは書いてて楽しくない

自分が言いたかったのはとにかくこれで、Reactは書いてて楽しくない。学ぶべきお作法が多く、やりたいと思うことが直感的に実現できない。「お作法」と皮肉っぽく書いたが要はReact側の都合に開発エンジニアが無理やり付き合わされてるだけなのであって、そもそもフレームワークを導入する意味としてある「エンジニアがアプリケーションレイヤーに集中する」ことができない時点でフレームワークとしてどうなのかと思う。Reactに触れれば触れるほどVueは開発者のことを思いやったフレームワークだったんだなということが実感できる。
自分の経歴としては10年以上前の子供の頃にweb開発をCGIとかFTPで齧っていて、大人になってから戻ってきたのだが、初めてVue.js(Vue2)を触ってみた時。
「こんなダイナミックなページをこんな簡単に作れるのか！すげえ！」
と思ったのを覚えている。

それに比べてReactは何ていうかとてもドグマチックで、フレームワーク側の都合を開発者に押し付けがちな印象がある。

よくVue3のComposition APIになってVueもReactも大差なくなった（だからVue2を使ってたプロダクトはReactに移行してしまってVue3は下火だ）という説明がされることがあるが、今までのことを踏まえると表面的に似てるだけで別に大差なくなっていないと思う。
DOMをどうリアクティブに更新するのかについての思想がそもそも違うし、ReactのjsxとVueのvueテンプレートファイルの文法からして、JavaScriptの中にHTMLを書くのか、HTMLの中にJavaScriptを書くのかというアプローチからして真逆になっている。
このアプローチの違いがフロントエンドエンジニアとデザイナー・マークアップエンジニアとの協働のしやすさにも響いてきたりするのは周知の通りだと思う（断然Vueの方が協働しやすい）。
あとは大規模なプロジェクトはReactで中小規模なプロジェクトはVueの方が向いているという言い方もされることがあるが私にはこれはよくわからない。Vueにも状態管理ライブラリはあるし、何かそういうデータがあるのだろうか？むしろCRUD的なソフトウェアであればdefineModelがGA化した今ではVueの方が状態管理はやりやすいと思うのだが。

いいなと思ったら応援しよう！