# 概要

https://qiita.com/baan_nasebanaru/items/fc3cb1e23707ff89fdd9

気づいたらこの記事書いて1年経過していた & 僕自身が React から卒業したので、ここ3年ぐらいのフロントの動きを振り返ってみようというモチベーションです。

React と Vue の視点からお送りします。
それ以外は `こちら↓` をご参考までに。

https://zenn.dev/chot/articles/9444320b2f70f4

## 補足
- 事実 + imo ベースでお送りします
- １エンジニアが見ていた風景なので他の方とずれはあるかも
- 別に見ても何の足しにもならないので、見るならお酒片手に「あ〜こんなことあったな〜」と斜め読みしてください

## 2020

### React

https://legacy.reactjs.org/blog/2020/10/20/react-v17.html

特に大きい動きは無し。
hooks API リリースが2019.6だったのですが、本体のリリースはしばらくお預け状態。

### Vue

https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.0.md

version3 リリース
当時 Vue を触っていたわけではないので多くを語れませんが、composition API は耳に入ってきていました。

### imo

この当時、React はモダンでいけてるよみたいな空気だった気がする。
とともに X では `Vue VS React` みたいな投稿をよく見かけた。

この年に僕は初めて React に出会いました。当時勧められた技術が、

- Redux
- emotion
- tsx
- hooks

デファクトスタンダードとされていたのは

- prettier
- eslint
- webpack

あとは、
- styled component が当時は main だった記憶
- fetch は page で書いてそのままコンポーネントに受け流す
- コンポーネントの分け方は atomic design 以外のものは聞いたことがないものの、良いとはされていなかった
- UI FW が結構使われていた気もする。vuetify / MUI など

この時は「store を噛ませる構成」が普通だった。
しかし jsx で書かれているコードも多く残っており、Redux * jsx は中々つらみがあった。

## 2021

### React

https://github.com/facebook/react/blob/main/CHANGELOG.md#1702-march-22-2021

log から追いかけるとリリースしたのはこれだけで、この年も大きい動きは無し。
それでもずっと動いているように感じたんだから、エコシステムが活発だったんだろうなという印象。

### Vue

https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md#3226-2021-12-12

React と対照的に Vue は細かくリリースを積み重ねていますね。
2020年末に Vue3 リリースなので、この年は3.2.0までリリースしているようです。

### imo

- JAMStackに出会い、Gatsby.jsを触る → GraphQL / SSGにも触れる
- Blitz.jsにも出会う → full stack JS のようなものの機運がやや高まっていた気がする
  - BFFなり、BaaSみたいなものも full stack JS の流れでポツポツ聞くになった気もする
- jsx から tsx にリプレイスする案件が多くなる。新規で jsx はもう選択肢としてなかった気もする
- この時は Redux がまだ使われていた。新規の選択肢にもなっていた
- SWR / recoil いいよという情報に触れ始める
- このぐらいからコンポーネントの分け方にも名前や流派が付き始めた気もする
- copilot始まった
- npm が嫌われている。yarn がデファクトになりつつあったし、pnpm 初めて聞いたのもこの時
- vite に出会う
- Vue3 の話も耳に入ってきた
  - このあたりで以前は Vue を使っていた人が React に流れてきた印象がある

基本的に yarn と tsx がとても良かった。SWR / recoil の話は耳にしつつも、Redux 全然良いやんという感じだった。
あとは vite が衝撃的だった。早い。そして設定も簡単。
webpack ほど細部までのチューニングはできなかったものの、そもそもそんなもの必要な application どの程度あるんだという話もあり、出会って以降の新規開発に webpack は選ばなくなった。

## 2022

### React

https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022

version18 リリース。
log を見ていると useId がこの時。exprimental ながらも React Server Components(以下RSC) が入ったのもこの時。
あとは、createRoute が console 上で推薦されるようになった記憶。

### Vue

https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md#3245-2022-11-11

Vue はこの年も細かくリリースを重ねているようですね。

### imo

- React18 の話が耳に入り始める
- Next いいよみたいな空気を感じ始めていた
- Gatsby の話は聞かなくなってきて、Remix / Astro / Svelte など他の FW をよく聞くようになってきた
- React Hook Form / React Routerみたいなのはよく触った
- もう Redux を選ばなくていいよねみたいな空気感になっていた

SWR を実際に触ったのがこの年。正直 Redux 選ぶ必要なくなったなと思った。
Redux も webpack 同様 too match なケースが多い。
React の application なら、SWR + useContext で事足りた。

後カスタムフックの話を耳にし出したのも確かこの辺。

## 2023

### React

https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024

2023の正式リリースはなかったようですね。
ただし、この年はその他の動きが多かった。

#### Create React App の終焉

https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741

みんなのお父さん dan さんからのコメント。過去-現在-未来について細かく書かれており非常に良きと思った記憶が。
個人的にも触り始めた当初はお世話になったので、感謝の意しかありません。
(CRA から始めたpjで `yarn eject` された webpack の設定を触ってたのもいい思い出。多分)

#### Next による RSC を使った機能提供

https://nextjs.org/docs/app/building-your-application/rendering

微妙に2023ではない気もしますが、こまけぇことはいいんだよ。
最近は追えてないですが、これ以降も RSC をまともに扱えてるのは Next だけのような気もする??

#### アンチ Next の機運

- 問題提起

https://www.epicweb.dev/why-i-wont-use-nextjs

- アンサーソング

https://leerob.io/blog/using-nextjs

この時になるほどなと思った意見が、「アンチ意見が目立つほど広く使われてきた証」的な post をみて確かにと思いました。

#### recoil の開発が止まる

https://github.com/facebookexperimental/Recoil/discussions/2171

機会があれば使ってみたいと思っていただけにややショックでした。

#### React.dev のリリース

https://react.dev/blog/2023/03/16/introducing-react-dev

これは本当に嬉しかった。2022までは公式docsがクラスコンポーネントで書かれていたので、新しく教える時の教材に毎回困ってたんですよね...

### Vue

https://github.com/vuejs/core/blob/main/CHANGELOG.md#340-slam-dunk-2023-12-29

Vue は引き続きリリースを重ねています。
これは最近 Vue を触り始めたので知りましたが、2023にリリースされた3.4は minor version ながらも大きいリリースだなと思いました。

### imo

- Astro 実際に触った
- JAMStack はもういないんだ
- Next App router 開幕 → さよなら emotion
- Headless UI 系の 躍進
  - 気づいたら MUI とかはあまり見なくなっていた
  - chakraUI は良さそう感
- create react app の終焉
- studio をよく目にし出した
- アンチ Nextの 機運
- さよなら recoil

React server component の影響で大好きだった emotion(というか runtime css in js) が使えなくなった。悲しい
さらに、emotion を利用していた MUI などの一部 UI FW も巻き添えを喰らっていた。

## まとめ

俺の emotion を返せ

## 2024(余談)

- Vue に転向しました
  - React が嫌いになったとかではなく単純に転職した影響で
- React version19の話とかはチラ見してますが、それぐらいの温度感です

次は React と Vue の比較を書きます。多分
[cv:issue_marketplace_engineer]

# 概要

https://qiita.com/baan_nasebanaru/items/fc3cb1e23707ff89fdd9

気づいたらこの記事書いて1年経過していた & 僕自身が React から卒業したので、ここ3年ぐらいのフロントの動きを振り返ってみようというモチベーションです。

React と Vue の視点からお送りします。
それ以外は `こちら↓` をご参考までに。

https://zenn.dev/chot/articles/9444320b2f70f4

## 補足
- 事実 + imo ベースでお送りします
- １エンジニアが見ていた風景なので他の方とずれはあるかも
- 別に見ても何の足しにもならないので、見るならお酒片手に「あ〜こんなことあったな〜」と斜め読みしてください

## 2020

### React

https://legacy.reactjs.org/blog/2020/10/20/react-v17.html

特に大きい動きは無し。
hooks API リリースが2019.6だったのですが、本体のリリースはしばらくお預け状態。

### Vue

https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.0.md

version3 リリース
当時 Vue を触っていたわけではないので多くを語れませんが、composition API は耳に入ってきていました。

### imo

この当時、React はモダンでいけてるよみたいな空気だった気がする。
とともに X では `Vue VS React` みたいな投稿をよく見かけた。

この年に僕は初めて React に出会いました。当時勧められた技術が、

- Redux
- emotion
- tsx
- hooks

デファクトスタンダードとされていたのは

- prettier
- eslint
- webpack

あとは、
- styled component が当時は main だった記憶
- fetch は page で書いてそのままコンポーネントに受け流す
- コンポーネントの分け方は atomic design 以外のものは聞いたことがないものの、良いとはされていなかった
- UI FW が結構使われていた気もする。vuetify / MUI など

この時は「store を噛ませる構成」が普通だった。
しかし jsx で書かれているコードも多く残っており、Redux * jsx は中々つらみがあった。

## 2021

### React

https://github.com/facebook/react/blob/main/CHANGELOG.md#1702-march-22-2021

log から追いかけるとリリースしたのはこれだけで、この年も大きい動きは無し。
それでもずっと動いているように感じたんだから、エコシステムが活発だったんだろうなという印象。

### Vue

https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md#3226-2021-12-12

React と対照的に Vue は細かくリリースを積み重ねていますね。
2020年末に Vue3 リリースなので、この年は3.2.0までリリースしているようです。

### imo

- JAMStackに出会い、Gatsby.jsを触る → GraphQL / SSGにも触れる
- Blitz.jsにも出会う → full stack JS のようなものの機運がやや高まっていた気がする
  - BFFなり、BaaSみたいなものも full stack JS の流れでポツポツ聞くになった気もする
- jsx から tsx にリプレイスする案件が多くなる。新規で jsx はもう選択肢としてなかった気もする
- この時は Redux がまだ使われていた。新規の選択肢にもなっていた
- SWR / recoil いいよという情報に触れ始める
- このぐらいからコンポーネントの分け方にも名前や流派が付き始めた気もする
- copilot始まった
- npm が嫌われている。yarn がデファクトになりつつあったし、pnpm 初めて聞いたのもこの時
- vite に出会う
- Vue3 の話も耳に入ってきた
  - このあたりで以前は Vue を使っていた人が React に流れてきた印象がある

基本的に yarn と tsx がとても良かった。SWR / recoil の話は耳にしつつも、Redux 全然良いやんという感じだった。
あとは vite が衝撃的だった。早い。そして設定も簡単。
webpack ほど細部までのチューニングはできなかったものの、そもそもそんなもの必要な application どの程度あるんだという話もあり、出会って以降の新規開発に webpack は選ばなくなった。

## 2022

### React

https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022

version18 リリース。
log を見ていると useId がこの時。exprimental ながらも React Server Components(以下RSC) が入ったのもこの時。
あとは、createRoute が console 上で推薦されるようになった記憶。

### Vue

https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md#3245-2022-11-11

Vue はこの年も細かくリリースを重ねているようですね。

### imo

- React18 の話が耳に入り始める
- Next いいよみたいな空気を感じ始めていた
- Gatsby の話は聞かなくなってきて、Remix / Astro / Svelte など他の FW をよく聞くようになってきた
- React Hook Form / React Routerみたいなのはよく触った
- もう Redux を選ばなくていいよねみたいな空気感になっていた

SWR を実際に触ったのがこの年。正直 Redux 選ぶ必要なくなったなと思った。
Redux も webpack 同様 too match なケースが多い。
React の application なら、SWR + useContext で事足りた。

後カスタムフックの話を耳にし出したのも確かこの辺。

## 2023

### React

https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024

2023の正式リリースはなかったようですね。
ただし、この年はその他の動きが多かった。

#### Create React App の終焉

https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741

みんなのお父さん dan さんからのコメント。過去-現在-未来について細かく書かれており非常に良きと思った記憶が。
個人的にも触り始めた当初はお世話になったので、感謝の意しかありません。
(CRA から始めたpjで `yarn eject` された webpack の設定を触ってたのもいい思い出。多分)

#### Next による RSC を使った機能提供

https://nextjs.org/docs/app/building-your-application/rendering

微妙に2023ではない気もしますが、こまけぇことはいいんだよ。
最近は追えてないですが、これ以降も RSC をまともに扱えてるのは Next だけのような気もする??

#### アンチ Next の機運

- 問題提起

https://www.epicweb.dev/why-i-wont-use-nextjs

- アンサーソング

https://leerob.io/blog/using-nextjs

この時になるほどなと思った意見が、「アンチ意見が目立つほど広く使われてきた証」的な post をみて確かにと思いました。

#### recoil の開発が止まる

https://github.com/facebookexperimental/Recoil/discussions/2171

機会があれば使ってみたいと思っていただけにややショックでした。

#### React.dev のリリース

https://react.dev/blog/2023/03/16/introducing-react-dev

これは本当に嬉しかった。2022までは公式docsがクラスコンポーネントで書かれていたので、新しく教える時の教材に毎回困ってたんですよね...

### Vue

https://github.com/vuejs/core/blob/main/CHANGELOG.md#340-slam-dunk-2023-12-29

Vue は引き続きリリースを重ねています。
これは最近 Vue を触り始めたので知りましたが、2023にリリースされた3.4は minor version ながらも大きいリリースだなと思いました。

### imo

- Astro 実際に触った
- JAMStack はもういないんだ
- Next App router 開幕 → さよなら emotion
- Headless UI 系の 躍進
  - 気づいたら MUI とかはあまり見なくなっていた
  - chakraUI は良さそう感
- create react app の終焉
- studio をよく目にし出した
- アンチ Nextの 機運
- さよなら recoil

React server component の影響で大好きだった emotion(というか runtime css in js) が使えなくなった。悲しい
さらに、emotion を利用していた MUI などの一部 UI FW も巻き添えを喰らっていた。

## まとめ

俺の emotion を返せ

## 2024(余談)

- Vue に転向しました
  - React が嫌いになったとかではなく単純に転職した影響で
- React version19の話とかはチラ見してますが、それぐらいの温度感です

次は React と Vue の比較を書きます。多分
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

概要

続きを読むには単価診断を受けてください 30秒