Vue勢が初めてReactを学んだ感想

# 【ポエム記事】

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

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

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

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

https://nextjs.org/learn/react-foundations/what-is-react-and-nextjs

https://react.dev/learn





# 実際に触ってみて

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



## 良いところ

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

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



## 面白かったところ

### useEffect()

https://ja.react.dev/reference/react/useEffect

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

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


### Fragment `</>`

https://ja.react.dev/reference/react/Fragment

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

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


### className

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

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

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md


### レンダリング

毎回レンダリングするらしく、`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 エコシステムの深い理解が必要かと）

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

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