2025年のReactトレンド

 (robinwieruch.de)
16 ポイント 投稿者 xguru 2025-03-24 | 1件のコメント | WhatsAppで共有
  • Reactはクライアントとサーバーの境界を取り払うフルスタックフレームワークへと進化中
  • Next.jsの独占的な地位が弱まり、TanStack StartとReact Routerが競合として台頭
  • Reactのフォーム、状態管理、サーバーコンポーネント、AI導入などの機能が強化されている
  • React開発者は今後、フルスタック環境に慣れていく必要がある

React Server Components (RSC)

  • React Server Components (RSC) は、クライアント側JavaScriptバンドルのサイズを減らし、パフォーマンスを最適化する機能
    • 初公開: 2020年12月21日
    • 最初の実装: Next.js 13（2022年）でApp Routerを導入
    • Next.js 15（2024年）でより安定した状態に到達
    • React Router と TanStack Start でもまもなくRSCが導入されると予想される
  • RSCの動作方式
    • サーバーで一度実行され、レンダリング結果だけがクライアントに送信される
    • クライアント側JavaScriptの量を削減
    • サーバーでデータベースやAPIにアクセス可能（セキュリティ強化）

React Server Functions (RSF)

  • React Server Actions (RSA) → RSCから発展した形で、サーバー上でデータの修正や更新が可能
    • APIルートを定義せず、リモートプロシージャコール（RPC）方式でサーバー関数を実行
    • use server ディレクティブを使用
  • React Server Functions (RSF)
    • 2024年9月、ReactチームがRSAを含む包括的な概念としてRSFを発表
    • RSCとクライアントコンポーネントの両方で動作可能
    • データの読み取りと更新の両方を含む
  • Next.js、TanStack Start、React Routerで実装予定

React Formsの改善点

  • React 19でフォーム関連機能が大幅に改善
    • <form> の action 属性を通じてサーバーアクションを直接呼び出し可能
    • 新しいフックを追加
      • useFormStatus, useOptimistic, useActionState
    • 複雑なフォーム状態管理を改善
  • 既存ライブラリとの互換性あり
    • React Hook Formのような既存ライブラリも引き続き使用可能
    • React自体のフォーム処理機能がより強力かつ柔軟になった

Library vs Framework（ライブラリ vs フレームワーク）

  • Reactは今や単純なライブラリを超え、フレームワーク的な性格を持つ
    • クライアントレンダリング（CSR）、サーバーサイドレンダリング（SSR）、静的生成（SSG）、インクリメンタル静的再生成（ISR）をサポート
    • 特定のフレームワーク（例: Next.js）を使わなければRSCおよびRSF機能は利用できない
  • プロジェクト要件に応じた選択が必要
    • 単純なクライアントアプリ → React単体でも利用可能
    • サーバー側機能が必要 → Next.js、TanStack Start、React Routerのようなフレームワークが必要

Reactフレームワーク競争の激化

  • Next.js は依然として最も人気のあるフレームワーク
  • TanStack Start と React Router は2025年に競合として台頭する可能性が高い
    • TanStack Start → TanStack Routerベースの新しいフレームワーク
    • React Router → Remixから発展した形で、フレームワークとしての性格を強めている
  • 両フレームワークともRSCおよびRSFをサポート予定

Full-Stack React

  • Reactのサーバー中心機能の導入により、フルスタックアプリケーションへと進化中
    • RSCおよびRSFを通じてデータベースにアクセス可能
    • 認証、認可、キャッシュなどのバックエンドインフラが必要
    • クライアントとサーバー間の通信も簡素化される
  • ReactベースのAIアプリケーションを構築できる可能性が高まっている

Reactの「Shadcnification」

  • Shadcn UI → Tailwind CSSのように、Reactの標準的なUIライブラリとして定着
    • 事前にスタイリングされたコンポーネントを提供
    • カスタマイズ可能
  • 新しいUIアプローチが登場する可能性
    • 現在はプロジェクト同士が似て見える現象が起きている

ReactとAI

  • AIベースのReactコード生成が増加
    • AIツール（v0など）でReactコードを自動生成
  • AI対応アプリケーションの構築が増加
    • VercelのAI SDK、LangChainなどが支援

Biome（旧Rome）

  • ESLintとPrettierの統合における問題を解決
  • Rustベースの高速で一貫したツール
    • Prettierの20,000ドル賞金を獲得（2023年）
  • Biome → 次世代のReactツールチェーンとして定着する可能性が高い

React Compiler

  • React Compiler → パフォーマンス最適化を自動化するツール
    • useCallback, useMemo, memo を自動的に処理
    • 手動でのメモ化は不要
    • React 19でベータ版を提供中

関連記事