React 19完全ガイド - Server ComponentsとuseフックでWeb開発が変わる

フロントエンド
ReactReact 19Server ComponentsNext.jsフロントエンド
広告エリア

React 19がもたらす変革

2026年、React 19がエコシステムの中心として定着しました。Server Components（RSC）、useフック、React Compilerにより、フロントエンド開発の常識が大きく変わっています。

Server Components（RSC）とは

Server Componentsは、サーバー側でレンダリングされるReactコンポーネントです。従来のクライアントサイドレンダリングとは異なり、以下のメリットがあります：

主なメリット

  • バンドルサイズの削減: サーバーコンポーネントはクライアントに送信されない
  • 直接的なデータアクセス: データベースやAPIに直接アクセス可能
  • SEOの向上: 完全にレンダリングされたHTMLを返却

基本的な使い方

// Server Component（デフォルト）
async function ArticleList() {
  // サーバー側でデータを取得
  const articles = await db.articles.findMany();

  return (
    <ul>
      {articles.map(article => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  );
}

// Client Component
'use client';

import { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️' : '🤍'}
    </button>
  );
}

useフックの進化

React 19では、新しいuseフックが導入されました。Promiseやコンテキストを直接読み取ることができます。

Promiseの読み取り

import { use } from 'react';

function UserProfile({ userPromise }) {
  // Promiseを直接読み取り
  const user = use(userPromise);

  return <div>{user.name}</div>;
}

従来のuseEffectとの違い

// 従来の方法（useEffect + useState）
function OldWay() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  if (!data) return <Loading />;
  return <Display data={data} />;
}

// React 19の方法（use + Suspense）
function NewWay({ dataPromise }) {
  const data = use(dataPromise);
  return <Display data={data} />;
}

React Compilerの登場

React Compiler（旧React Forget）により、手動での最適化が不要になりつつあります。

自動メモ化

// 従来：手動でuseMemo/useCallbackが必要
function OldComponent({ items }) {
  const filtered = useMemo(
    () => items.filter(i => i.active),
    [items]
  );

  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return <List items={filtered} onClick={handleClick} />;
}

// React Compiler：自動で最適化
function NewComponent({ items }) {
  const filtered = items.filter(i => i.active);

  const handleClick = () => {
    console.log('clicked');
  };

  return <List items={filtered} onClick={handleClick} />;
}

Server Actionsでフォーム処理

Server Actionsを使うと、フォーム送信をシンプルに実装できます。

// Server Action
async function submitForm(formData: FormData) {
  'use server';

  const title = formData.get('title');
  await db.articles.create({ data: { title } });
  revalidatePath('/articles');
}

// コンポーネント
function CreateArticle() {
  return (
    <form action={submitForm}>
      <input name="title" required />
      <button type="submit">作成</button>
    </form>
  );
}

メタフレームワークの重要性

2026年、Next.jsやRemixなどのメタフレームワークが標準的な出発点として定着しています。RSCを前提としたアーキテクチャ設計が必須スキルになりました。

Next.js App Routerの基本構造

app/
├── layout.tsx      # ルートレイアウト
├── page.tsx        # トップページ
├── articles/
│   ├── page.tsx    # 記事一覧
│   └── [slug]/
│       └── page.tsx # 記事詳細

まとめ

React 19は、フロントエンド開発に大きな変革をもたらしました：

  • Server Componentsでサーバー・クライアントの境界を最適化
  • useフックでPromise処理がシンプルに
  • React Compilerで手動最適化が不要に
  • Server Actionsでフォーム処理を簡素化

これからReactを学ぶ方は、RSCを中心としたアーキテクチャを理解することが重要です。Next.jsなどのメタフレームワークと合わせて学習することをおすすめします。

広告エリア