ep167 Yearly Ecosystem 2024

published_at
2024-12-10
guest
@sakito
guest
@hiroppy
guest
@yoshiko
toc
headings

Theme

第 167 回のテーマは 2024 年の Yearly Ecosystem です。

Show Note

2024 年のチェックポイント

  • Vite の覇権を Turbopack, RSPack が奪えるか?
  • Storybook は覇権をとって、Chromatic もすごくなりそう
  • Next App Router が本当に広がるか
  • RSC 対応の Bundler が増えて Next 以外の解が見れそう
  • アプリケーションの Rust 化くるか?
  • React Forget
  • Figma Config 2024 の Adobe の影響
  • State Management どうなってく? (Context, Jotai, SWR, Signal)
  • ESLint to flat config or Biome
  • AI driven FE Development
  • CSS の新しい方法論

今年のキーワード

  • Jxck
    • App Router 移行問題
    • void0
    • rs family vs turbo family
    • eslint flatconfig
    • OSS のマネタイズ
    • Figma の躍進
    • ESM と CJS の互換性
    • Bun やりたい放題
    • Tanstack family どうなるか
    • 価格改定
    • CSS modules へ移行
  • Sakito
    • 1 つのツールで複数のことができるのが求められてる?
      • rolldown(oxc),biome,deno,...
        • lint,format,bundle,parser
      • Storybook
        • test,ui 表示,ツール連携
    • Web Components 元年 N 年目
      • UI ライブラリの対応
      • Open UI の Design System
      • React の互換性の改善...
    • デザイントークン
      • Design Token を扱いやすい CSS ライブラリ
      • Style Dictionary,Token Studio,Figma Variables
    • Design&AI
      • Figma AI,v0,DesignSystem がある価値
  • Hiroppy
    • cache
      • next.js
    • registory
      • jsr
      • vlt
    • bundler
      • rspack の v1 リリース
      • rolldown
      • turbopack の dev 安定化
    • nodejs
      • typescript
      • require(esm)
      • corepack
  • Yoshiko
    • 3rd party cookie
    • microfrontend
  • Other
    • mozaic.fm renewal

2025 年のチェックポイント

  • React の WC 対応と Open UI により WC 元年がまたくるかも
  • SC で zero runtime じゃない CSS も動くようになりそうなので、より戻すか?
    • CSS ライブラリのこの先はどこに落ち着くのか、css modules,tailwind,zero-runtime & AI & React の対応
  • next.js の cache が安定するか?
  • figma->実装のワークフローの進化(devmode, codeconnect)、AI 活用
  • next.js app router 移行先に post remix としての tanstack family
    • remix 自体どうなる?
  • react compiler どうなるか
  • JS0 / JSSugar によるツールとエンジンの分離
  • OSS のマネタイズどうなる?
  • Bun の独走に対するエコシステムへの還元
  • jsr/vlt/npm の覇権争いと ESM 移行
  • tooling 系百花繚乱どうなるか

1 月

2 月

3 月

4 月

5 月

  • React 19 Beta - React
    • https://react.dev/blog/2024/04/25/react-19
    • useActionSate の追加
      • useFormState には isPending がなく、その場合は useFormStatus を利用する必要があるがあったがそれらを統合した汎用的 hook として用意された
    • useFormStatus
      • 親の form のステータスを読む hook
    • useOptimistic
      • 楽観的更新を行う hook
      • 先にユーザーに結果を返してしまい裏で実際の実行が終わると実際の結果を反映させることができる
    • use
      • Promise や Context を実行する関数
      • コンポーネントの top level 以外でも利用できる
    • RSC
      • バンドルする前に、クライアント アプリケーションまたは SSR サーバーとは別の環境でコンポーネントを事前にレンダリングできる新しいオプション
      • ビルド時に作成したり、リクエスト事に実行もできる
    • Server Actions
      • 注意: server component 用の directive はなく、use server は server actions のもの
      • フレームワークはサーバー関数への参照を自動的に作成し、その参照をクライアント コンポーネントに渡す。その関数がクライアントで呼び出されると、React はサーバーにリクエストを送信して関数を実行し、結果を返す
    • forwardRef が不要に
      • 今までは子供が fowardRef でラップされてないときには、ref は props として渡せなかったが、今後は渡せるようになった
    • createContext で作られる Context が Provider として直接利用可能になり、Context.Provider が不要になった
    • ref に useEffect と同じシンタックスのクリーンアップ関数が追加
      • return () => {}
    • useDeferredValue へ初期値を追加できるようなった
    • metadata のサポート
      • コンポーネントのどこにでも metadata を定義でき、react-helmet などを使わなくても title などの上書きが用意になった
    • スタイルシートのサポート
      • スタイルの優先度を考えて配置する必要があったが、コンポーネント内で定義できるようになり、挿入順序を明確にできるようになった
    • 非同期スクリプトのサポート
      • script async
    • リソースのプリロードサポート
      • native にある prefetchDNS, preconnect, preload, preinit を react 側でもサポート
      • e.g. フォントなどの追加リソースの検出をスタイルシートの読み込みから移動することで、最初のページ読み込みを最適化
    • Custom Elements のサポート
  • React 19 Beta Upgrade Guide - React
    • https://react.dev/blog/2024/04/25/react-19-upgrade-guide
    • Note
      • React 18.3 has also been published
    • Installing
      • Note
        • New JSX Transform is now required
    • Breaking changes
      • Errors in render are not re-thrown
      • Removed deprecated React APIs
        • Removed: propTypes and defaultProps for functions
        • Removed: Legacy Context using contextTypes and getChildContext
        • Removed: string refs
      • Note
        • Removed: Module pattern factories
        • Removed: React.createFactory
        • Removed: react-test-renderer/shallow
      • Note
        • Please reconsider shallow rendering
      • Removed deprecated React DOM APIs
        • Removed: react-dom/test-utils
        • Removed: ReactDOM.render
        • Removed: ReactDOM.hydrate
        • Removed: unmountComponentAtNode
        • Removed: ReactDOM.findDOMNode
    • New deprecations
      • Deprecated: element.ref
      • Deprecated: react-test-renderer
    • Notable changes
      • StrictMode changes
      • UMD builds removed
      • Libraries depending on React internals may block upgrades
    • TypeScript changes
      • Removed deprecated TypeScript types
      • Note
      • ref cleanups required
      • useRef requires an argument
      • Changes to the ReactElement TypeScript type
      • The JSX namespace in TypeScript
      • Better useReducer typings
    • Changelog
      • Other breaking changes
      • Other notable changes
  • React DevTools のアップデートが入る
  • Remove automatic fetch cache instrumentation
  • React で Date をパッチするかも
  • Figma からデザインとコードを結びつける Code Connect 機能が出た
  • JSR Is Not Another Package Manager
    • https://deno.com/blog/jsr-is-not-another-package-manager
    • npm はほぼ進歩してない
    • かつて node で requre を採用し、のちに import ができたが、結局配布は複雑なまま
    • JSR は ESM/TS ファーストで、設定要らずなシンプルなもの
    • JSR は npm を補完する。JSR パッケージは npm に依存できる
    • JSR 自体も npm としてアクセスできる(npm.jsr.io)
    • private registries も使える
    • OIDC token を GH Action と連携し、SALSA に準拠した署名を Sigsotre に保存する
  • Node.js - Node.js 22 is now available!
    • https://nodejs.org/en/blog/announcements/v22-release-announce
    • v8 が 12.4 で Array.fromAsync や Set Methods、Iterator Helpers が入った
    • Maglev Compiler が入り短命な CLI 実行がはやくなった
    • --experimental-require-module で reqire(esm)
    • node --run task のサポート
    • watch mode stable
    • websocket client default
    • glob/globSync default
    • 2025/4 に Node 18 が EOL なので 20 (LTS) か 22 (もうすぐ TLS) に移行しよう
  • Bun v1.1.5 | Bun Blog
    • https://bun.sh/blog/bun-v1.1.5
    • --compile で実行ファイルをクロスコンパイル
    • package.json で末尾カンマとコメントサポート
    • 任意ファイルをテキストとしてインポート
      • import html from "./index.html" with type { type: "text" };
    • json, toml, file も type にサポート
    • Bun,.serve が SNI に対応
  • Bun - proxy -
  • biome 1.7
    • https://biomejs.dev/blog/biome-v1-7/
    • migrate eslint が追加され、eslint config から biome config へ移植可能になった
    • migrate prettier で overrides を利用した glob パターンの prettier の設定が、biome config へ移植可能になった
    • check --staged が追加され、pre-commit としての実行が可能になった
  • Remix SaaS
  • Tini
    • https://tinijs.dev/
    • SPA や PWA などの構築をサポートするフレームワークでルーティング、バックエンド、UI も提供している
    • 標準を拡張するフレームワークでドキュメントだと lit と一緒に使われている
  • Figma's journey to TypeScript | Figma Blog
  • Announcing TypeScript 5.5 Beta
    • https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/
    • Array.prototype.filterで絞り込みに型がつくようになった
    • typeof obj[key] === "string" みたいな固定できるパターンの条件が落ちなくなった
    • 正規表現の構文チェックが行えるようになった
    • isolatedDeclarations オプションの追加で、並列ビルドの高速化を行う
  • vercel がエッジレンダリングを Node.js へ戻した
    • https://twitter.com/leeerob/status/1780705942734331983
    • エッジからデータまでの距離が遠い
    • Node.js で SSR + ストリーミングを実行した方が、エッジ レンダリングよりも高速だった
      • Vercel Serverless Functions (aws lambda)へ戻す
  • Eslint compat
  • Astro 4.8
    • https://astro.build/blog/astro-480/
    • 4.7 https://astro.build/blog/astro-470/
    • Astro Actions の追加 (experimental.actions)
      • server actions と同様の機能
    • リクエストの切り替え (experimental.rewriting)
      • ページ内リダイレクト等を行うため
    • typescript の preset で allowJs を true へ
      • 厳密すぎるらしく、緩めることができるように
  • Astro 初のオフラインイベント
  • Playwright v1.44
  • Style-Dictionary V4 release plans
    • https://tokens.studio/blog/style-dictionary-v4-plan
    • デザイントークンの json を変換する OSS ツールの Style-Dictionary v4 に関するリリース計画
    • v3 が 2021 年に出てから長い間メジャーバージョンのリリースがなかった
    • W3C Design Token Community Group の仕様に沿ったアップデート等を含む予定
  • React Aria の 5 月更新
  • Express 5.0 - last push!
  • HashiCorp joins IBM. (web???
  • The Intl.Segmenter object is now part of Baseline
  • Electron 30.0.0
    • https://www.electronjs.org/blog/electron-30-0
    • File API のサポート
    • windows に ASAR 整合性のサポート
      • Windows プラットフォーム上の整合性チェック機能がなかったが、それができるようになった。これによりアプリケーションのファイルとリソースの整合性を検証することで、意図しない変更や改ざんを防ぐことができるようになった
    • BrowserView が非推奨になって、WebContentsView と BaseWindow が main プロセスに追加
  • rollup optimizes tree-shaking
  • Headless UI v2.0 for React
  • pnpm 9.0
  • Introducing Mdxts - MDXTS
  • Percel のフル Rust 書き換え構想
  • Gulp Survey
  • svelte5
  • Introducing TypeSpec: A New Language for API-Centric Development | TypeSpec

6 月

7 月

8 月

9 月

10 月

11 月

12 月