技術記事

React 19完全ガイド2025 - Server Componentsとコンパイラの実践活用法

読了時間: 5分
React JavaScript フロントエンド パフォーマンス Server Components

React 19は2024年12月5日にリリースされたメジャーアップデートで、Server
Componentsの安定化、React
Compilerの導入、新しいフック類の追加など、大幅な機能拡張が行われました。本記事では、React
19の主要な新機能を実践的なコード例と共に詳しく解説し、2025年の開発におけるベストプラクティスを紹介します。

免責事項: 本記事は公式ドキュメントに基づいた事実に基づく情報と、筆者による技術的考察を含んでいます。パフォーマンスに関する言及は環境や実装によって異なる場合があります。

1. Server Componentsの安定化

基本概念と従来の違い

React 19では、React Server Components（RSC）が正式に安定版となりました（React
Team, 2024年12月5日）。Server
Componentsはサーバー上で実行され、JavaScriptをクライアントに送信せずにHTMLを生成できます。

// app/posts/page.js - Server Component（デフォルト）
async function PostsPage() {
  // サーバーでデータベースアクセス可能
  const posts = await db.posts.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  });

  return (
    <div>
      <h1>最新投稿</h1>
      <div className="posts-grid">
        {posts.map(post => (
          <article key={post.id} className="post-card">
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
            <time dateTime={post.createdAt}>
              {new Date(post.createdAt).toLocaleDateString('ja-JP')}
            </time>
          </article>
        ))}
      </div>
    </div>
  );
}

export default PostsPage;

Client Componentsとの使い分け

インタラクティブな機能が必要な場合は'use client'ディレクティブを使用します。

// components/LikeButton.js - Client Component
'use client';

import { useState, useTransition } from 'react';
import { likePost } from '@/actions/posts';

export function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [isPending, startTransition] = useTransition();

  function handleLike() {
    startTransition(async () => {
      const result = await likePost(postId);
      setLikes(result.likes);
    });
  }

  return (
    <button onClick={handleLike} disabled={isPending} className="like-button">
      ❤️ {likes} {isPending && '...'}
    </button>
  );
}

混在パターンの実装

Server ComponentとClient Componentを組み合わせた実践例：

// app/posts/[slug]/page.js - Server Component
import { LikeButton } from '@/components/LikeButton';
import { ShareButton } from '@/components/ShareButton';

async function PostPage({ params }) {
  // サーバーでデータ取得
  const post = await getPost(params.slug);
  const comments = await getComments(post.id);

  return (
    <article className="post">
      <header>
        <h1>{post.title}</h1>
        <div className="post-meta">
          <time dateTime={post.publishedAt}>
            {formatDate(post.publishedAt)}
          </time>
          <div className="post-actions">
            {/* Client Components */}
            <LikeButton postId={post.id} initialLikes={post.likesCount} />
            <ShareButton url={post.url} title={post.title} />
          </div>
        </div>
      </header>

      <div className="post-content">{post.content}</div>

      <section className="comments">
        <h3>コメント ({comments.length})</h3>
        {comments.map(comment => (
          <div key={comment.id} className="comment">
            <strong>{comment.author.name}</strong>
            <p>{comment.content}</p>
          </div>
        ))}
      </section>
    </article>
  );
}

export default PostPage;

2. React Compilerの活用

自動最適化機能

React
Compilerは従来必要だったuseMemo、useCallback、memoの多くを自動で最適化します（React
Team, 2024年12月5日）。

// 従来の書き方（React 18以前）
function ProductList({ products, category, onProductClick }) {
  const filteredProducts = useMemo(() => {
    return products.filter(
      product => !category || product.category === category
    );
  }, [products, category]);

  const handleProductClick = useCallback(
    product => {
      onProductClick(product);
    },
    [onProductClick]
  );

  return (
    <div className="product-list">
      {filteredProducts.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onClick={() => handleProductClick(product)}
        />
      ))}
    </div>
  );
}

const ProductCard = memo(({ product, onClick }) => {
  return (
    <div className="product-card" onClick={onClick}>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p className="price">¥{product.price.toLocaleString()}</p>
    </div>
  );
});
// React 19 + Compiler（自動最適化）
function ProductList({ products, category, onProductClick }) {
  // Compilerが自動でメモ化を判断
  const filteredProducts = products.filter(
    product => !category || product.category === category
  );

  function handleProductClick(product) {
    onProductClick(product);
  }

  return (
    <div className="product-list">
      {filteredProducts.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onClick={() => handleProductClick(product)}
        />
      ))}
    </div>
  );
}

// memoも不要
function ProductCard({ product, onClick }) {
  return (
    <div className="product-card" onClick={onClick}>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p className="price">¥{product.price.toLocaleString()}</p>
    </div>
  );
}

Compilerの設定例

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation', // 'all' | 'annotation'
      sources: filename => {
        return filename.includes('src/');
      },
    },
  },
};

module.exports = nextConfig;

3. useOptimisticフックの実用例

楽観的更新パターン

useOptimisticフックを使用して、サーバーレスポンスを待たずにUIを更新する実装（React
Team, 2024年12月5日）：

// components/CommentForm.js
'use client';

import { useOptimistic, useTransition } from 'react';
import { addComment } from '@/actions/comments';

export function CommentForm({ postId, comments }) {
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [
      {
        ...newComment,
        id: Date.now(),
        isPending: true,
      },
      ...state,
    ]
  );

  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    const content = formData.get('content');

    // 楽観的更新
    addOptimisticComment({
      content,
      author: { name: 'あなた' },
      createdAt: new Date().toISOString(),
    });

    startTransition(async () => {
      await addComment(postId, content);
    });
  }

  return (
    <div className="comment-section">
      <form action={handleSubmit} className="comment-form">
        <textarea
          name="content"
          placeholder="コメントを入力..."
          required
          className="comment-input"
        />
        <button type="submit" disabled={isPending} className="submit-button">
          {isPending ? '送信中...' : 'コメント'}
        </button>
      </form>

      <div className="comments-list">
        {optimisticComments.map(comment => (
          <div
            key={comment.id}
            className={`comment ${comment.isPending ? 'pending' : ''}`}
          >
            <div className="comment-header">
              <strong>{comment.author.name}</strong>
              <time>{new Date(comment.createdAt).toLocaleTimeString()}</time>
              {comment.isPending && (
                <span className="pending-badge">送信中</span>
              )}
            </div>
            <p>{comment.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

いいね機能での楽観的更新

// components/LikeButton.js
'use client';

import { useOptimistic, useTransition } from 'react';
import { toggleLike } from '@/actions/likes';

export function LikeButton({ postId, initialLiked, initialCount }) {
  const [optimisticState, updateOptimisticState] = useOptimistic(
    { liked: initialLiked, count: initialCount },
    (state, action) => ({
      liked: !state.liked,
      count: state.liked ? state.count - 1 : state.count + 1,
    })
  );

  const [isPending, startTransition] = useTransition();

  function handleToggleLike() {
    updateOptimisticState();

    startTransition(async () => {
      await toggleLike(postId);
    });
  }

  return (
    <button
      onClick={handleToggleLike}
      disabled={isPending}
      className={`like-button ${optimisticState.liked ? 'liked' : ''}`}
    >
      <span className="icon">{optimisticState.liked ? '❤️' : '🤍'}</span>
      <span className="count">{optimisticState.count}</span>
    </button>
  );
}

4. Server Actionsの実装

フォーム処理の新しいパターン

React 19で安定化されたServer Actionsを使用したフォーム処理の実装（React Team,
2024年12月5日）：

// actions/posts.js
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { z } from 'zod';

const postSchema = z.object({
  title: z.string().min(1, 'タイトルは必須です').max(100),
  content: z.string().min(1, 'コンテンツは必須です'),
  category: z.string().min(1, 'カテゴリは必須です'),
});

export async function createPost(formData) {
  const validatedFields = postSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
    category: formData.get('category'),
  });

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }

  try {
    const post = await db.post.create({
      data: {
        ...validatedFields.data,
        authorId: await getCurrentUserId(),
      },
    });

    revalidatePath('/posts');
    redirect(`/posts/${post.slug}`);
  } catch (error) {
    return {
      errors: { _form: ['投稿の作成に失敗しました'] },
    };
  }
}

export async function updatePost(postId, formData) {
  const validatedFields = postSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
    category: formData.get('category'),
  });

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }

  try {
    await db.post.update({
      where: { id: postId },
      data: validatedFields.data,
    });

    revalidatePath(`/posts/${postId}`);
    revalidatePath('/posts');

    return { success: true };
  } catch (error) {
    return {
      errors: { _form: ['投稿の更新に失敗しました'] },
    };
  }
}

フォームコンポーネント

// components/PostForm.js
'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { createPost } from '@/actions/posts';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending} className="submit-button">
      {pending ? '投稿中...' : '投稿する'}
    </button>
  );
}

export function PostForm() {
  const [state, formAction] = useFormState(createPost, null);

  return (
    <form action={formAction} className="post-form">
      <div className="form-group">
        <label htmlFor="title">タイトル</label>
        <input
          type="text"
          id="title"
          name="title"
          required
          className="form-input"
        />
        {state?.errors?.title && (
          <p className="error">{state.errors.title[0]}</p>
        )}
      </div>

      <div className="form-group">
        <label htmlFor="category">カテゴリ</label>
        <select id="category" name="category" required className="form-select">
          <option value="">選択してください</option>
          <option value="tech">技術</option>
          <option value="design">デザイン</option>
          <option value="business">ビジネス</option>
        </select>
        {state?.errors?.category && (
          <p className="error">{state.errors.category[0]}</p>
        )}
      </div>

      <div className="form-group">
        <label htmlFor="content">コンテンツ</label>
        <textarea
          id="content"
          name="content"
          rows="10"
          required
          className="form-textarea"
        />
        {state?.errors?.content && (
          <p className="error">{state.errors.content[0]}</p>
        )}
      </div>

      {state?.errors?._form && (
        <div className="form-error">
          {state.errors._form.map((error, index) => (
            <p key={index}>{error}</p>
          ))}
        </div>
      )}

      <SubmitButton />
    </form>
  );
}

5. Partial Pre-rendering

ストリーミングとサスペンス

Partial Pre-renderingを活用した段階的な画面読み込み：

// app/dashboard/page.js
import { Suspense } from 'react';
import { UserProfile } from '@/components/UserProfile';
import { RecentPosts } from '@/components/RecentPosts';
import { Analytics } from '@/components/Analytics';

function DashboardSkeleton() {
  return (
    <div className="dashboard-skeleton">
      <div className="skeleton-card">
        <div className="skeleton-line"></div>
        <div className="skeleton-line short"></div>
      </div>
      <div className="skeleton-card">
        <div className="skeleton-line"></div>
        <div className="skeleton-line"></div>
      </div>
    </div>
  );
}

function AnalyticsSkeleton() {
  return (
    <div className="analytics-skeleton">
      <div className="skeleton-chart"></div>
      <div className="skeleton-stats"></div>
    </div>
  );
}

export default function DashboardPage() {
  return (
    <div className="dashboard">
      <h1>ダッシュボード</h1>

      {/* 静的部分 - 事前レンダリング */}
      <div className="dashboard-header">
        <UserProfile />
      </div>

      {/* 動的部分 - 段階的読み込み */}
      <div className="dashboard-content">
        <Suspense fallback={<DashboardSkeleton />}>
          <RecentPosts />
        </Suspense>

        <Suspense fallback={<AnalyticsSkeleton />}>
          <Analytics />
        </Suspense>
      </div>
    </div>
  );
}

データ取得の最適化

// components/RecentPosts.js
async function RecentPosts() {
  // 遅延データ取得
  const posts = await fetch('/api/posts/recent', {
    cache: 'no-store', // 動的データ
  });

  const postsData = await posts.json();

  return (
    <section className="recent-posts">
      <h2>最近の投稿</h2>
      <div className="posts-grid">
        {postsData.map(post => (
          <article key={post.id} className="post-preview">
            <h3>{post.title}</h3>
            <p>{post.excerpt}</p>
            <time>{post.publishedAt}</time>
          </article>
        ))}
      </div>
    </section>
  );
}

// components/Analytics.js
async function Analytics() {
  // さらに重いデータ取得
  const analytics = await fetch('/api/analytics', {
    cache: 'no-store',
    next: { revalidate: 300 }, // 5分キャッシュ
  });

  const data = await analytics.json();

  return (
    <section className="analytics">
      <h2>アナリティクス</h2>
      <div className="metrics-grid">
        <div className="metric">
          <h3>ページビュー</h3>
          <p className="metric-value">{data.pageViews}</p>
        </div>
        <div className="metric">
          <h3>ユニークユーザー</h3>
          <p className="metric-value">{data.uniqueUsers}</p>
        </div>
      </div>
    </section>
  );
}

6. 新しいrefとDocument Metadataサポート

refのプロップス化

React 19ではforwardRefが不要になりました（React Team, 2024年12月5日）：

// React 18以前
import { forwardRef } from 'react';

const Input = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// React 19
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// 使用例
function LoginForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  function handleSubmit() {
    console.log(emailRef.current.value);
    console.log(passwordRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <Input ref={emailRef} type="email" placeholder="メールアドレス" />
      <Input ref={passwordRef} type="password" placeholder="パスワード" />
      <button type="submit">ログイン</button>
    </form>
  );
}

Document Metadataの直接サポート

React 19の新機能により、コンポーネント内でDocument
Metadataを直接定義できます（React Team, 2024年12月5日）：

// app/posts/[slug]/page.js
async function PostPage({ params }) {
  const post = await getPost(params.slug);

  return (
    <>
      {/* メタデータを直接定義 */}
      <title>投稿タイトル | My Blog</title>
      <meta name="description" content="投稿の説明" />
      <meta property="og:title" content="投稿タイトル" />
      <meta property="og:description" content="投稿の説明" />
      <meta property="og:image" content="画像URL" />
      <meta property="og:url" content="https://myblog.com/posts/post-slug" />
      <link rel="canonical" href="https://myblog.com/posts/post-slug" />

      <article>
        <h1>投稿タイトル</h1>
        <div>投稿コンテンツ</div>
      </article>
    </>
  );
}

7. パフォーマンス最適化とベストプラクティス

バンドルサイズの削減

React 19による実際のパフォーマンス改善例：

// before/after比較用の設定
// next.config.js
const nextConfig = {
  experimental: {
    reactCompiler: true,
    ppr: true, // Partial Pre-rendering
  },
  bundleAnalyzer: {
    enabled: process.env.ANALYZE === 'true',
  },
};

測定とモニタリング

// utils/performance.js
export function measureComponentRender(Component) {
  return function MeasuredComponent(props) {
    const renderStart = performance.now();

    useEffect(() => {
      const renderEnd = performance.now();
      console.log(`${Component.name} rendered in ${renderEnd - renderStart}ms`);
    });

    return <Component {...props} />;
  };
}

// 使用例
const MeasuredProductList = measureComponentRender(ProductList);

キャッシュ戦略

// app/api/posts/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  const posts = await getPosts();

  return NextResponse.json(posts, {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
  });
}

// Server Componentでのキャッシュ
async function PostsList() {
  const posts = await fetch('/api/posts', {
    next: {
      revalidate: 3600, // 1時間キャッシュ
      tags: ['posts'], // タグベースの無効化
    },
  });

  return (
    <div>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

8. 移行ガイドとトラブルシューティング

段階的移行戦略

React 18からReact 19への段階的移行アプローチ：

// 1. 依存関係の更新
// package.json
{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^15.0.0"
  }
}

// 2. 設定ファイルの更新
// next.config.js
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation', // 段階的導入
    },
  },
};

// 3. コンポーネントの段階的更新
// 'use client'の追加が必要な箇所を特定
function InteractiveComponent() {
  // フックを使用している場合は'use client'が必要
  const [state, setState] = useState(false);

  return (
    <button onClick={() => setState(!state)}>
      {state ? 'ON' : 'OFF'}
    </button>
  );
}

よくある問題と解決法

// 問題1: Server/Client境界の混在
// ❌ 間違った例
function ServerComponent() {
  const [state, setState] = useState(false); // エラー: Server ComponentでuseState
  return <div>{state}</div>;
}

// ✅ 正しい例
('use client');
function ClientComponent() {
  const [state, setState] = useState(false);
  return <div>{state}</div>;
}

// 問題2: 不適切なforwardRefの残存
// ❌ 古い書き方
const Input = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// ✅ React 19の書き方
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// 問題3: 不要なメモ化の残存
// ❌ 不要になったメモ化
const ExpensiveComponent = memo(({ data }) => {
  const processedData = useMemo(() => {
    return data.map(item => item.value * 2);
  }, [data]);

  return <div>{processedData}</div>;
});

// ✅ Compilerが自動最適化
function ExpensiveComponent({ data }) {
  const processedData = data.map(item => item.value * 2);
  return <div>{processedData}</div>;
}

まとめ

React 19は、Server Componentsの安定化、React
Compilerの導入、新しいフック類の追加により、開発体験とアプリケーションパフォーマンスの両面で大幅な改善をもたらします。

主要な恩恵

  • パフォーマンス向上: Server
    Componentsとコンパイラによる最適化でアプリケーション性能の改善が期待されます
  • 開発効率化: 自動最適化による手動メモ化の削減と開発体験の向上
  • バンドルサイズ削減: Server Componentsによる不要なJavaScriptの削減
  • UX改善: useOptimisticとPartial Pre-renderingによるスムーズなユーザー体験

2025年の採用戦略

  1. 段階的導入: 既存プロジェクトではアノテーションモードから開始
  2. 新規プロジェクト: Server Componentsを前提とした設計
  3. パフォーマンス重視: CompilerとuseOptimisticを積極活用
  4. モニタリング: Core Web Vitalsによる継続的な性能測定

React
19の新機能を適切に活用することで、2025年のWebアプリケーション開発はより効率的で高性能なものとなるでしょう。

参考情報:

本記事の内容は2024年12月時点の公式情報に基づいています。パフォーマンスに関する記載は理論値または期待値であり、実際の結果は実装環境によって異なります。最新の仕様については公式ドキュメントをご確認ください。