【ポエム記事】

まだ React のことあんまり知らない TypeScript 好きエンジニアがいるらしいですよ？？？

Vue で凝ったシステムを組もうと思ったんだが、やっぱり取り回しが苦しい...
React ならどうだろう？がきっかけ。

ちな Vue はもう7-8年くらい触ってるかもしれない。

そんな私が、とりあえずこれらのドキュメントを全部読んだ段階の感想をまとめる。

実際に触ってみて

元々 TS が好きなせいかあっという間に開発に着手できた。
というか Vue3 とSPAの基本概念は同じだから、まったく困らないね。
確か途中から React に寄せたんだよね。（そのせいで Vue3 リリースが遅延して阿鼻叫喚...）

良いところ

JSX を用いて記載するので、TSの能力をゴリゴリに利用できる。
TSの型の良いところは、型パズルができるおかげで、柔軟性が高すぎるところ。
型、偉大、GOD。

Vue はこの辺りが若干弱く、複雑な動的画面を組もうとするとこんがらがってしまう...。
Generics に多少対応して良くなったけど、暗黙の双方向ロジックは認知負荷が高めだね。
Composable に押し込んだとしても、いつ .value が必要になるか未だによーわからんし。
あの辺はまだ何とかできると思う。
Vue Macros をもっと取り入れていいのでは？

面白かったところ

useEffect()

Vue でいう watch 相当のフック。
こいつに onMounted beforeUnmount の機能も乗っちゃってるの。
始めはびっくりしたんだけど、賢い。

return で、デストラクタを記載するから消し忘れもなく、
あるアクションに対して、対象と処理、終わった時を明記するこの考え方は優秀だと思った。

Fragment `</>`

Vue でいう <template> 相当の要素。
なんといっても空タグの違和感。

key とか付けたかったら、 Fragment を使うみたいよ。

className

なにこれ、なんでこれだけ class じゃないの？って思ったら、JSX は TS界隈のため class が予約語らしい。
理由を知ってはえ～となった。

絶対書き間違えるので、私は eslint に fix ルールを仕込んで対応。

レンダリング

毎回レンダリングするらしく、Computed の概念が無いらしい。
レンダリングのタイミングで、ついでに関数実行する形。

シンプルだぁ...。

ただ、 Vue のように描画用にデータを加工して <template> に渡すノリで React を書くと平気で無限ループする。これは慣れが必要。

return 文の中が <template> タグだと思えばOK。

気になったところ

JSX

JSX の自由度が非常に高いので、コードからどんな画面が出てくるか読み取りにくい。
その点、Vue はベースが HTML なので、その点は欠点かもしれない。

style

スタイルの管理手法がお任せになってる点が一番引っかかった。
Vue は <style> タグで1コンポーネント内に閉じ込められる。

Tailwind も clsx が無いとやってらんないって...。
レイアウトとデザインのクラスは分けたい流儀なもので...。
といった形で、いかにライブラリを知っていて、組み合わせるかで、完成品の質が大きく変動しそうだと感じた。
リードエンジニアが肝だね。

愚痴

これは愚痴なんだけど、どうやら AppRoute や ReactServerConponent で、
書き方がごっそり変わってるみたいなんだよね。
そのせいか、現行にそぐわない嘘記事が大量にあるのよ…。

（なーにが Vue3 が破壊的変更やねん！ポジショントークやないか！）

まぁ PageRouter のままなら私は遊んでなかったかもしれない。
RSC が描く未来が楽しみすぎる。

まだ分かんないところ

RSC

ReactServerConponent ！
フロントとバックエンドの境界判断がとても難しい...。
API 作らなくてよい利点が大きすぎるが、ある意味ロックインする形になるため、ハイリスクハイリターンな機能だなぁと。

マクロの有無

Vue はこれでもか、ってマクロを仕込んで、 HTML の書き味を担保しているのよね。
だから、変数一つにこんなに記述せんといかんのか...の気持ちになる。

暗黙の了解のようなライブラリも多いね。
小さいものを組み合わせる Shell の考え方に近いのかな、って思った。
でもパーツが多いと、メンテ放棄が起きると辛くない？という。

感想

よく言われる、Vueはイージーで、Reactはシンプル、は間違ってなかった。

Vue はデザイナ視点で使いやすい。
HTML という従来の枠組みをそのまま拡張しているようなイメージ。
JQuery に近いのかな。

いわゆるフロントエンドに該当するため、様々なバックエンドと組み合わせてシステムを実現することが可能。
Vue = ライブラリ

一方 React は、プログラマ目線で使いやすい。
ストリーム関数（でいいのかな...mapとかfilterとか...初めてがJavaなもので...）
もいい加減市民権を得てきたし、TSの型システムと合わせてとても組みやすい。

その代わり制約が少ないので、混沌なコードになったら手がつけられなさそうな印象。
ただこれは Vue も同じか…。

昨今サーバーとクライアントの垣根を取っ払ったり、Vercel のエコシステムとべったりだったり、このあたりと共存するのであれば、とても良いものだと感じた。
React = 新しい言語 が表現として適切だと思う。

（ほんとに React エンジニアって集めやすいのか？？）
（ライブラリを組み合わせる方針だから、React と TS エコシステムの深い理解が必要かと）

まとめとしては、どちらが優れているというよりは、使う用途から異なるもの。
そんなことより、ビジネスロジックを理解して分解し、将来性を考慮したコードに落とし込むのが大事なんじゃないでしょうか。（元も子もない）

要するに、できることはそんなに変わらんね、という感想でした！
私はもうしばらく使ってみて、振り返りたいと思います！！！