React純粋コンポーネント完全ガイド！初心者でもわかる実装方法と最適化テクニック

2025年8月26日

Reactアプリケーションの開発において、コンポーネントの純粋性は非常に重要な概念です。純粋なコンポーネントを作成することで、予測可能で保守性の高いアプリケーションを構築できます。

この記事では、React初学者の方でも理解できるよう、純粋コンポーネントの概念から実装方法、さらには実践的なテクニックまでを段階的に解説していきます。

Reactコンポーネントの純粋性とは

Reactにおけるコンポーネントの純粋性とは、数学の関数のように振る舞うことを意味します。つまり、同じ入力に対して常に同じ出力を返し、外部の状態を変更しないコンポーネントのことです。

数学の関数との類似性

まず、数学の関数を考えてみましょう：

f(x) = x * 2

この関数では、x = 3を入力すれば必ず6が出力されます。時間や外部の条件に関係なく、常に同じ結果です。

JavaScriptで表現すると以下のようになります：

function multiply(number) {
  return number * 2;
}

重要ポイント：Reactは、すべてのコンポーネントが純粋な関数として動作することを前提に設計されています。同じpropsを受け取ったら、常に同じJSXを返すべきなのです。

純粋コンポーネントの特徴

純粋なReactコンポーネントは、以下の2つの特徴を満たします：

自分の責任に集中する
- コンポーネントは、レンダリング前に存在していた変数やオブジェクトを変更してはいけません。
同じ入力には同じ出力
- 同じpropsを受け取ったときは、常に同じJSXを返します。

純粋なコンポーネントの例

function BookCard({ title, author, price }) {
  return (
    <div className="book-card">
      <h3>{title}</h3>
      <p>著者: {author}</p>
      <p>価格: ¥{price.toLocaleString()}</p>
    </div>
  );
}

function BookList() {
  return (
    <div>
      <BookCard title="React入門" author="山田太郎" price={2800} />
      <BookCard title="JavaScript実践" author="佐藤花子" price={3200} />
    </div>
  );
}

このBookCardコンポーネントは純粋です。
同じprops（title、author、price）を渡せば、必ず同じJSXが返されます。

なぜ純粋性が重要？

予測可能な動作により、バグが減る
テストが容易になる
パフォーマンス最適化が可能
サーバーサイドレンダリングが安全に行える

不純なコンポーネントの問題点

次に、純粋ではないコンポーネントの例を見て、何が問題なのかを理解しましょう。

外部変数を変更する不純なコンポーネント

// ❌ 不純なコンポーネントの例
let orderCount = 0;

function OrderItem({ productName }) {
  // 外部変数を直接変更している
  orderCount = orderCount + 1;
  
  return (
    <div>
      <p>商品: {productName}</p>
      <p>注文番号: #{orderCount}</p>
    </div>
  );
}

function OrderList() {
  return (
    <div>
      <OrderItem productName="ノートPC" />
      <OrderItem productName="マウス" />
      <OrderItem productName="キーボード" />
    </div>
  );
}

この例の問題点

同じpropsでも異なる結果が返される
コンポーネントの呼び出し順序に依存している
他のコンポーネントにも影響を与える可能性
予期しないバグの原因となる

修正された純粋なバージョン

// ✅ 純粋なコンポーネントに修正
function OrderItem({ productName, orderNumber }) {
  return (
    <div>
      <p>商品: {productName}</p>
      <p>注文番号: #{orderNumber}</p>
    </div>
  );
}

function OrderList() {
  const orders = [
    { id: 1, productName: "ノートPC" },
    { id: 2, productName: "マウス" },
    { id: 3, productName: "キーボード" }
  ];

  return (
    <div>
      {orders.map(order => (
        <OrderItem 
          key={order.id}
          productName={order.productName} 
          orderNumber={order.id} 
        />
      ))}
    </div>
  );
}

修正版では、必要な情報をpropsとして渡すことで、OrderItemコンポーネントが純粋になりました。

純粋なコンポーネントの作り方

基本原則

propsの値を直接変更しない
外部変数の値を変更しない
レンダリング中にAPIコールやDOM操作を行わない
ランダムな値や現在時刻に直接依存しない

ローカルミューテーションは問題ない

コンポーネント内で作成したオブジェクトや配列を変更することは問題ありません。

function ShoppingCart({ items }) {
  // ローカルで配列を作成し、変更する（これは問題ない）
  const cartItems = [];
  
  for (let i = 0; i < items.length; i++) {
    cartItems.push({
      ...items[i],
      totalPrice: items[i].price * items[i].quantity
    });
  }

  const totalAmount = cartItems.reduce((sum, item) => sum + item.totalPrice, 0);

  return (
    <div>
      <h2>ショッピングカート</h2>
      {cartItems.map(item => (
        <div key={item.id}>
          <span>{item.name}</span>
          <span>¥{item.totalPrice}</span>
        </div>
      ))}
      <div>合計: ¥{totalAmount}</div>
    </div>
  );
}

計算ロジックの分離

複雑な計算ロジックは別の純粋関数として分離することをおすすめします。

// 計算ロジックを純粋関数として分離
function calculateDiscount(price, discountRate) {
  return price * (1 - discountRate);
}

function formatCurrency(amount) {
  return new Intl.NumberFormat('ja-JP', {
    style: 'currency',
    currency: 'JPY'
  }).format(amount);
}

function ProductCard({ product, discountRate = 0 }) {
  const discountedPrice = calculateDiscount(product.price, discountRate);
  
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      {discountRate > 0 ? (
        <div>
          <span className="original-price">{formatCurrency(product.price)}</span>
          <span className="discounted-price">{formatCurrency(discountedPrice)}</span>
        </div>
      ) : (
        <span>{formatCurrency(product.price)}</span>
      )}
    </div>
  );
}

副作用の適切な処理

副作用とは、コンポーネントの外部に影響を与える処理のことです（API呼び出し、DOM操作、ファイル書き込みなど）。これらはレンダリング中には行わず、適切な場所で実行する必要があります。

イベントハンドラーでの副作用

最も一般的な副作用の処理場所はイベントハンドラーです。

function UserProfile({ user }) {
  // イベントハンドラー内で副作用を実行
  const handleUpdateProfile = async (newData) => {
    try {
      // API呼び出し（副作用）
      await fetch(`/api/users/${user.id}`, {
        method: 'PUT',
        body: JSON.stringify(newData),
        headers: { 'Content-Type': 'application/json' }
      });
      
      // 成功メッセージ表示（副作用）
      alert('プロフィールが更新されました');
    } catch (error) {
      // エラーメッセージ表示（副作用）
      alert('更新に失敗しました');
    }
  };

  const handleButtonClick = () => {
    handleUpdateProfile({
      name: user.name,
      email: user.email,
      lastUpdated: new Date().toISOString()
    });
  };

  return (
    <div>
      <h2>{user.name}のプロフィール</h2>
      <p>メール: {user.email}</p>
      <button onClick={handleButtonClick}>
        プロフィール更新
      </button>
    </div>
  );
}

useEffectでの副作用

コンポーネントのマウント時やpropsの変更時に副作用を実行したい場合はuseEffectを使用します。

import { useState, useEffect } from 'react';

function WeatherWidget({ city }) {
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 天気データを取得する副作用
    const fetchWeather = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/weather?city=${city}`);
        const data = await response.json();
        setWeather(data);
      } catch (error) {
        console.error('天気データの取得に失敗:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchWeather();
  }, [city]); // cityが変更されたときに実行

  if (loading) {
    return <div>天気情報を読み込み中...</div>;
  }

  if (!weather) {
    return <div>天気情報を取得できませんでした</div>;
  }

  return (
    <div>
      <h3>{city}の天気</h3>
      <p>気温: {weather.temperature}°C</p>
      <p>天候: {weather.condition}</p>
    </div>
  );
}

注意：useEffectは最後の手段として使用してください。多くの場合、イベントハンドラーで副作用を処理する方が適切です。

StrictModeの活用

React.StrictModeは、開発中にコンポーネントの不純な部分を発見するのに役立つツールです。

StrictModeの設定

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

StrictModeがチェックする内容

コンポーネントの二重実行による副作用の検出
非推奨のAPIの使用警告
予期しない副作用の発見

StrictModeでの検証例

// 不純なコンポーネントの例
let renderCount = 0;

function ProblematicComponent({ name }) {
  // StrictModeでは二重実行されるため、問題が明らかになる
  renderCount += 1;
  console.log(`レンダリング回数: ${renderCount}`);
  
  return <div>Hello, {name}!</div>;
}

// 純粋なコンポーネントの例
function PureComponent({ name, renderNumber }) {
  // StrictModeで二重実行されても問題ない
  console.log(`レンダリング番号: ${renderNumber}`);
  
  return <div>Hello, {name}!</div>;
}

重要：StrictModeは開発時のみ動作し、本番環境では影響しません。開発中は必ず有効にしておくことをお勧めします。