フロントエンド浦島太郎2024

tosuke.icon が最後にフロントエンドを書いたのは2022年くらい

自分のプロジェクトで書いたのは2021年くらいだが，React Server Components の実験とかなのでスタイリングは全然やってない

真面目にやってたのは2020-21年あたりなのか

ランタイム

Deno が独立系の顔してたのが Node.js に寄せてきた

Node.js と互換を持ってもっと便利みたいなのを標榜するものが出てきた(bun，Deno)

Node.js も影響を受けてこれらの後発ランタイムの機能を取り込みつつあるように見える

パッケージマネージャ

yarn の話を聞かなくなった

yarn berry あたりから急速に言及がなくなったが，v1 の deprecation によってシェアを失ったという印象

lerna の話を聞かなくなった

パッケージマネージャによる最低限のモノレポのサポートは一般的になった

ビルド

Vite がかなり一般的になった

webpack が持っていた高度なチャンク戦略(分割されたチャンクの2つ以上で共有されているライブラリを vendor に入れるとか)を今の Rollup が持っているのかは知らない，別にどうでもよかったんだろうか

レンダリング

React も Vue.js も普通に使われている

Vue.js は全く追わなくなったので以下では言及しない

ゼロランタイム系としては Svelte が唯一みたいな顔してたのが Astro とか出てきた

データ取得

Suspense for Data Fetching は Next.js App Router によって(半ば強制的に)普及しつつある

が，Next.js の外側では全く使われていないように思える

SWR や react-query 改め TanStack Query がメジャーになった

状態管理

Redux の話を聞かなくなった

jotai や zustand がよく使われている

Recoil は Facebook だから大丈夫です！(ry

データ取得やフォーム管理のライブラリが高機能になったことで状態管理をゴリゴリにやる必要なくない?みたいな感じになってそうではある

CSS

styled-components や emotion のような従来からの CSS in JS も使われてはいそう

Zero-runtime CSS in JS は群雄割拠の末 PandaCSS あたりになった?

linaria とかは気合で dynamic にしてたけどそういった方向性はどうなったんだ

tailwindcss は JIT-mode やそれによる Arbitrary values を使うのも一般的になった

Headless UI や React Aria はコンポーネントの状態を Render children やフックを使って通知していたが，data-属性でも教えてくれるようになった

data-[open]:...みたいに書けるように