LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサイト 開発者)

🚀⚡ ReactのConcurrent Mode導入で実現する顧客体験の革新 - 導入事例と40%の表示速度向上の実現方法

Posted at

こんにちは、株式会社プロドウガの@YushiYamamotoです！

2025年現在、Reactの中核技術として完全に定着したConcurrent Mode（並行モード）は、多くの企業がユーザー体験を劇的に向上させるために活用しています。しかし、この強力な機能をビジネス成果に直結させるための具体的な実装方法については、まだ包括的な情報が少ないのが現状です。

今回は、Concurrent Modeの基礎から応用、そして実際に40%もの表示速度向上を達成した企業の事例まで、ビジネス価値創出の観点から徹底解説します。プログラミング初心者の方でも理解できるよう、基本概念からステップバイステップで説明していきますので、ぜひ最後までお付き合いください！

🔍 Concurrent Modeとは何か？なぜいま注目されているのか

Reactの従来のレンダリングモデル（ReactDOM.render）では、更新が始まると中断できない「同期処理」でした。これは単純ですが、大規模なレンダリング作業が行われると、メインスレッドがブロックされ、ユーザーの入力に反応できなくなるという問題がありました。

対して、Concurrent Mode（現在はConcurrent Renderingと呼ばれることもあります）では、Reactが処理の優先順位を賢く管理し、重要なユーザー操作を優先しながら、バックグラウンドで複数の更新を同時に準備できるようになります。

主な特徴と利点

  1. レンダリングの中断と再開: 優先度の高いタスク（ユーザー入力など）があれば、進行中のレンダリングを中断して、そちらを優先できる
  2. 並行処理: 複数の状態更新を同時に準備可能（最終的に1つだけ表示）
  3. 遅延読み込み: 優先度の低いコンテンツの読み込みを遅らせ、重要な部分を先に表示
  4. バックグラウンド更新: ユーザーに表示されている画面に影響を与えずに新しいUIを準備

📊 ビジネスへのインパクト - なぜConcurrent Modeが重要なのか

Concurrent Modeの技術的な特徴を理解したところで、これがビジネスにどのような影響をもたらすのか、具体的な数字と共に見ていきましょう。

ユーザー体験と直結するビジネス指標

  • ページ離脱率: 表示速度が2秒から1秒に改善すると、平均で約32%の離脱率削減につながる
  • コンバージョン率: 読み込み時間が0.1秒改善するごとに、コンバージョン率は平均約7%向上
  • ユーザー満足度: Webサイトの応答性が高いと、ブランド好感度が約24%上昇

ある大手ECサイトでは、Concurrent Modeの導入により以下の成果が得られました：

- ページ読み込み時間: 2.7秒 → 1.6秒（40.7%改善）
- First Input Delay: 120ms → 45ms（62.5%改善）
- カート完了率: 23.5% → 31.2%（32.8%向上）

Googleの調査によると、モバイルサイトの読み込み時間が1秒から3秒に増加すると、直帰率は32%増加します。Concurrent Modeによる応答性の向上は、特にモバイルユーザーの体験を大きく改善します。

💻 Concurrent Modeの実装手順 - ステップバイステップガイド

それでは、Concurrent Modeを自社のReactアプリケーションに導入するための具体的な手順を説明します。2025年現在では、React 19以降でこれらの機能は標準で利用可能になっていますが、適切な実装方法を理解することが重要です。

STEP 1: 環境のセットアップとReactのアップデート

まず、最新のReactバージョンを使用していることを確認します。

# プロジェクトのReactバージョンを最新にアップデート
npm install react@latest react-dom@latest

# または
yarn add react@latest react-dom@latest

STEP 2: Concurrent Modeを有効化

最新のReactでは、Concurrent Modeはデフォルトで有効になっていますが、明示的に有効化するコードは以下のようになります：

// index.js
import { createRoot } from 'react-dom/client';
import App from './App';

// Concurrent Modeを使用するためのルートを作成
const container = document.getElementById('root');
const root = createRoot(container);

// アプリケーションのレンダリング
root.render(<App />);

STEP 3: トランジションAPIの活用

ユーザー体験を向上させる最も効果的な方法の一つは、useTransitionフックを使用して、優先度の低い状態更新を管理することです。

import { useState, useTransition } from 'react';

function SearchComponent() {
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [isPending, startTransition] = useTransition();
  
  const handleSearch = (e) => {
    // 高優先度の更新: 入力値をすぐに反映
    setSearchQuery(e.target.value);
    
    // 低優先度の更新: 検索結果の取得と表示
    startTransition(() => {
      // 重い検索処理
      const results = performSearch(e.target.value);
      setSearchResults(results);
    });
  };
  
  return (
    <div>
      <input 
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="検索..."
      />
      
      {isPending ? (
        <p>検索結果を読み込み中...</p>
      ) : (
        <ul>
          {searchResults.map(result => (
            <li key={result.id}>{result.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

このコードでは、ユーザーが入力するたびに:

  1. 入力フィールドの値がすぐに更新される（高優先度）
  2. 検索結果の計算と表示は低優先度としてマークされ、ユーザーの入力を妨げない

STEP 4: Suspenseによる読み込み状態の管理

データ取得やコード分割などの非同期操作を宣言的に扱うために、Suspenseを活用します：

Suspenseを活用した商品リスト表示コンポーネント 
import { Suspense, useState } from 'react';
import { fetchProductData } from './api';
import { ErrorBoundary } from 'react-error-boundary';

// リソース読み込みのためのカスタムフック
function useProductResource(category) {
  const [resource] = useState(() => fetchProductData(category));
  return resource;
}

// 製品情報を表示するコンポーネント
function ProductList({ category }) {
  const resource = useProductResource(category);
  
  // このレンダリング中にデータが準備できていなければ、
  // Suspenseがキャッチするプロミスがスローされます
  const products = resource.read();
  
  return (
    <ul className="product-list">
      {products.map(product => (
        <li key={product.id} className="product-item">
          <img src={product.imageUrl} alt={product.name} />
          <h3>{product.name}</h3>
          <p>${product.price}</p>
          <button>カートに追加</button>
        </li>
      ))}
    </ul>
  );
}

// メインコンポーネント
function ProductCatalog() {
  const [selectedCategory, setSelectedCategory] = useState('electronics');
  
  const categories = [
    'electronics', 'clothing', 'books', 'home'
  ];
  
  return (
    <div className="product-catalog">
      <nav className="category-nav">
        {categories.map(category => (
          <button
            key={category}
            onClick={() => setSelectedCategory(category)}
            className={category === selectedCategory ? 'active' : ''}
          >
            {category}
          </button>
        ))}
      </nav>
      
      <ErrorBoundary
        fallback={<p>製品データの読み込み中にエラーが発生しました。</p>}
      >
        <Suspense fallback={<div className="loading-spinner">読み込み中...</div>}>
          <ProductList category={selectedCategory} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default ProductCatalog;
このコードでは、Suspenseコンポーネントがデータ読み込み中の表示を管理し、ErrorBoundaryがエラー発生時の表示を処理します。これにより、ユーザーは常に適切なフィードバックを得られます。

STEP 5: useDeferredValueによる重い処理の遅延

大量のリストや複雑なUIを扱う場合、useDeferredValueを使用して、その値の更新を遅延させることができます。

import { useState, useDeferredValue } from 'react';

function ProductSearch() {
  const [query, setQuery] = useState('');
  // クエリの更新を遅延させる
  const deferredQuery = useDeferredValue(query);
  
  const handleChange = (e) => {
    setQuery(e.target.value);
  };
  
  // deferredQueryが更新されるのを待っているか確認
  const isStale = query !== deferredQuery;
  
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="製品を検索..."
      />
      
      <div className={isStale ? 'stale-results' : ''}>
        <ProductList query={deferredQuery} />
      </div>
    </div>
  );
}

deferredQueryはユーザー入力のような高優先度更新後に更新されるため、検索入力中のがたつきを防ぎながら、検索結果を表示できます。

📈 実際の導入事例 - 40%表示速度向上を達成したECサイトのケース

あるファッションECサイトでは、商品カタログページにおいて特にスマートフォンユーザーからの「表示が遅い」というフィードバックが多く寄せられていました。分析の結果、以下の課題が明らかになりました：

  1. 商品フィルタリング時の画面フリーズ
  2. 画像読み込み中のレイアウトシフト
  3. 検索時のタイピング遅延

施策1: フィルタリングロジックの最適化

商品リストのフィルタリングをuseTransitionで低優先度に設定しました：

function ProductFilter() {
  const [filters, setFilters] = useState({ 
    category: 'all', 
    price: 'all', 
    color: 'all' 
  });
  const [isPending, startTransition] = useTransition();
  
  const handleFilterChange = (filterType, value) => {
    // フィルター選択UIは即座に更新
    setFilters(prev => ({ ...prev, [filterType]: value }));
    
    // 商品リストのフィルタリングは低優先度で実行
    startTransition(() => {
      applyProductFilters(filterType, value);
    });
  };
  
  return (
    <div className="product-filter">
      {/* フィルターUI */}
      {isPending && <span className="filter-indicator">フィルタリング中...</span>}
    </div>
  );
}

施策2: 画像読み込みの最適化

Suspenseと<img />のロード状態管理を組み合わせて、画像読み込みを最適化しました：

画像の最適化されたロード処理 
// ImageLoader.js
import { useState, useEffect } from 'react';

// 画像プリロード用のカスタムフック
function useImagePreloader(src) {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoaded(false);
    setError(null);
    
    if (!src) return;
    
    const image = new Image();
    image.src = src;
    
    image.onload = () => {
      setLoaded(true);
    };
    
    image.onerror = (err) => {
      setError(err);
    };
    
    return () => {
      image.onload = null;
      image.onerror = null;
    };
  }, [src]);

  return { loaded, error };
}

// 最適化された画像コンポーネント
function OptimizedImage({ src, alt, width, height, placeholderSrc }) {
  const { loaded, error } = useImagePreloader(src);
  
  if (error) {
    return (
      <div 
        className="image-error"
        style={{ width, height }}
      >
        <span>画像を読み込めませんでした</span>
      </div>
    );
  }
  
  return (
    <div className="image-container" style={{ width, height }}>
      {!loaded && placeholderSrc && (
        <img
          src={placeholderSrc}
          alt={`${alt} placeholder`}
          className="image-placeholder"
          style={{ width, height }}
        />
      )}
      
      <img
        src={src}
        alt={alt}
        className={`actual-image ${loaded ? 'loaded' : 'loading'}`}
        style={{ width, height, opacity: loaded ? 1 : 0 }}
      />
    </div>
  );
}

// 商品ギャラリーコンポーネント
function ProductGallery({ products }) {
  return (
    <div className="product-gallery">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <OptimizedImage
            src={product.imageUrl}
            alt={product.name}
            width="100%"
            height="200px"
            placeholderSrc={product.thumbnailUrl}
          />
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default ProductGallery;

施策3: 検索の最適化

検索機能をuseDeferredValueで最適化し、タイピング中のUI応答性を向上させました：

function ProductSearch() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  
  // queryとdeferredQueryの違いを視覚的に表示
  const isStale = query !== deferredQuery;
  
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="製品を検索..."
      />
      
      <div className={`search-results ${isStale ? 'updating' : ''}`}>
        <ProductSearchResults query={deferredQuery} />
      </div>
    </div>
  );
}

実装結果と測定されたパフォーマンス向上

これらの施策により、以下のパフォーマンス向上が達成されました：

指標 導入前 導入後 改善率
Largest Contentful Paint (LCP) 2.8秒 1.7秒 39.3%
First Input Delay (FID) 180ms 54ms 70.0%
Cumulative Layout Shift (CLS) 0.25 0.08 68.0%
Time to Interactive (TTI) 4.2秒 2.5秒 40.5%

ビジネス指標の改善:

  • カート追加率: +27%
  • 平均セッション時間: +18%
  • ページ離脱率: -32%
  • モバイルでのコンバージョン率: +22%

📱 パフォーマンス計測とROI算出の方法

Concurrent Modeの導入効果を正しく評価するためには、適切な計測方法が不可欠です。

Web Vitalsの計測

Googleの推奨するCore Web Vitalsを使用して、ユーザー体験の技術的な面を測定します：

// Web Vitalsの計測実装例
import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  // サーバーに分析データを送信する処理
  console.log(metric);
  
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    id: metric.id,
    delta: metric.delta,
    navigationType: metric.navigationType
  });
  
  // Web Vitalsデータを分析サーバーに送信
  navigator.sendBeacon('/analytics', body);
}

// Web Vitalsを計測
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

ビジネスROIの計算方法

Concurrent Modeへの投資に対するROIを計算するには、以下の式を使用できます：

ROI = (パフォーマンス改善によるコンバージョン増加の価値 - 実装コスト) ÷ 実装コスト × 100%

例えば、ECサイトにおける計算例：

- 月間ユニークユーザー: 100,000人
- 平均コンバージョン率: 2.5%
- コンバージョン率の向上: +22% (2.5% → 3.05%)
- 増加する月間コンバージョン数: 550件
- 平均注文金額: 8,500円
- 月間売上増加額: 4,675,000円
- 実装コスト（開発工数）: 1,500,000円
- ROI = (4,675,000 - 1,500,000) ÷ 1,500,000 × 100% = 211.7%

Concurrent Modeの導入によるパフォーマンス改善は、モバイルユーザーに対して特に高いROIをもたらします。モバイルでのコンバージョン率改善が大きいため、モバイルトラフィックの比率が高いサイトほど効果が顕著です。

🧩 コンポーネント設計の最適化 - Concurrent Modeを最大限に活用する

Concurrent Modeの恩恵を最大限に受けるためには、コンポーネント設計も見直す必要があります。

メモ化による不要な再レンダリングの防止

import { memo, useMemo, useCallback } from 'react';

// Memoコンポーネントの適切な使用
const ProductItem = memo(function ProductItem({ product, onAddToCart }) {
  console.log(`ProductItem rendering: ${product.id}`);
  
  return (
    <div className="product-item">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={() => onAddToCart(product.id)}>
        カートに追加
      </button>
    </div>
  );
});

function ProductList({ products, category }) {
  // useMemoで派生データを最適化
  const filteredProducts = useMemo(() => {
    console.log('Filtering products...');
    return products.filter(p => p.category === category);
  }, [products, category]);
  
  // useCallbackでコールバック関数を最適化
  const handleAddToCart = useCallback((productId) => {
    console.log(`Adding product ${productId} to cart`);
    // カート追加のロジック
  }, []);
  
  return (
    <div className="product-list">
      {filteredProducts.map(product => (
        <ProductItem
          key={product.id}
          product={product}
          onAddToCart={handleAddToCart}
        />
      ))}
    </div>
  );
}

コンポーネントの分割とレンダリング最適化

大きなコンポーネントを適切に分割し、更新が必要な部分だけを再レンダリングするよう設計します。

この構造では、フィルター変更時にProductListとその子コンポーネントのみが更新されるため、ヘッダーなどの他の部分は再レンダリングされません。

🚧 よくある実装上の注意点と対策

Concurrent Modeを導入する際によく遭遇する問題と、その解決策をいくつか紹介します。

1. 副作用の管理

Concurrent Modeでは、コンポーネントのレンダリングが複数回行われる可能性があるため、レンダリング中に副作用を発生させることは避けるべきです。

// ❌ 避けるべき実装
function SearchResults({ query }) {
  // レンダリング中に直接APIリクエストを実行（副作用）
  const results = fetchSearchResults(query); // 問題: レンダリング中の副作用
  
  return (
    <ul>
      {results.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// ✅ 推奨される実装
function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    // レンダリング後に副作用を実行
    let isMounted = true;
    fetchSearchResults(query).then(data => {
      if (isMounted) {
        setResults(data);
      }
    });
    
    return () => {
      isMounted = false;
    };
  }, [query]);
  
  return (
    <ul>
      {results.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

2. トランジション中の視覚的フィードバック

ユーザーに適切なフィードバックを提供することで、体験を向上させることができます。

function FilteredList({ filters }) {
  const [isPending, startTransition] = useTransition();
  const [items, setItems] = useState([]);
  
  const updateFilters = (newFilters) => {
    startTransition(() => {
      const filtered = applyFilters(newFilters);
      setItems(filtered);
    });
  };
  
  return (
    <div>
      <FilterControls onChange={updateFilters} />
      
      {/* トランジション中の視覚的フィードバック */}
      {isPending ? (
        <div className="list-overlay">
          <div className="loading-indicator">フィルター適用中...</div>
        </div>
      ) : null}
      
      <ul className={isPending ? 'list-updating' : ''}>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

トランジション中のUI表示は、チラつきを避けるため、短時間（例：500ms未満）のトランジションでは表示しないよう設計するのがベストプラクティスです。

🔮 まとめと今後の展望

Concurrent Modeは、Reactアプリケーションのパフォーマンスを劇的に向上させる強力な機能です。この記事で解説した実装手法を活用すれば、以下のような成果が期待できます：

  • ページの表示速度と応答性の向上（平均40%の改善）
  • ユーザー体験の向上によるコンバージョン率の増加
  • 離脱率の低減とブランド好感度の向上

今後、Concurrent Modeはさらに進化し、以下のような方向性に発展していくと予想されます：

  1. AIを活用したユーザー行動予測と事前レンダリングの統合
  2. WebAssemblyとの連携による計算集約型処理の最適化
  3. オフスクリーンレンダリングAPI（2025年に登場予定）の活用

Concurrent Modeの導入は、単なる技術的な改善ではなく、ビジネスの成長に直結する戦略的な投資です。今回紹介した方法を参考に、ぜひ自社のプロダクトに導入してみてください。

最後に：業務委託のご相談を承ります

私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 ポートフォリオ

🌳 らくらくサイト

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?