MENU
  1. ホーム
  2. React
  3. ReactのuseEffectで条件付きサイドエフェクトを実装する方法を徹底解説

ReactのuseEffectで条件付きサイドエフェクトを実装する方法を徹底解説

React

Reactは、その柔軟性と高いパフォーマンスで多くのフロントエンド開発者に支持されています。その中でも、useEffectフックは、Reactコンポーネント内でサイドエフェクト（副作用）を処理するための重要なツールです。サイドエフェクトとは、データの取得、タイマーの設定、DOMの操作など、コンポーネントのレンダリングに直接関係しない処理を指します。本記事では、useEffectを活用し、特定の条件に基づいてサイドエフェクトを実行する方法について解説します。適切な条件設定と依存配列の使い方を学ぶことで、効率的でエラーの少ないコードを実現しましょう。

目次
  1. useEffectの基本構文と仕組み
    1. useEffectの3つの主要要素
    2. useEffectの挙動
    3. 依存配列の例
  2. 条件付きレンダリングとuseEffectの組み合わせ
    1. 条件付きレンダリングの概要
    2. 条件付きでuseEffectを実行する方法
    3. 条件付きuseEffectのベストプラクティス
  3. useEffectの依存配列と最適な設定方法
    1. 依存配列とは何か
    2. 依存配列の基本的な使い方
    3. 依存配列設定の注意点
    4. 依存配列のベストプラクティス
    5. 依存配列の例: APIリクエスト
  4. サイドエフェクトの例: データ取得
    1. 基本的なデータ取得の流れ
    2. コード解説
    3. 依存配列の設定
    4. エラーハンドリング
    5. データ取得における注意点
    6. カスタムフックの利用
    7. まとめ
  5. サイドエフェクトの例: タイマーの管理
    1. タイマーの基本的な実装
    2. 条件付きでタイマーを動作させる方法
    3. コード解説
    4. 応用例: 倒数タイマー
    5. 実装時の注意点
    6. まとめ
  6. 実装時のよくある落とし穴と回避方法
    1. 落とし穴1: 無限ループの発生
    2. 落とし穴2: 依存配列の不備
    3. 落とし穴3: クリーンアップ関数の未実装
    4. 落とし穴4: パフォーマンスの低下
    5. 落とし穴5: コンポーネントのアンマウント時の不具合
    6. まとめ
  7. useEffectを使った応用例: モーダルウィンドウ制御
    1. モーダルウィンドウの基本構造
    2. コード解説
    3. 応用例: モーダルの外側クリックで閉じる
    4. モーダル制御における注意点
    5. 応用: モーダルの状態をグローバルに管理
    6. まとめ
  8. コード演習: 実際に試す条件付きuseEffect
    1. 課題: 条件付きデータ取得とローディング表示
    2. コードのポイント
    3. 演習の拡張
    4. まとめ
  9. まとめ

useEffectの基本構文と仕組み

useEffectは、Reactの関数コンポーネントでサイドエフェクトを扱うためのフックです。レンダリングサイクルの中で特定のタイミングでコードを実行できます。その基本構文は以下の通りです。

useEffect(() => {
  // サイドエフェクトの処理
  return () => {
    // クリーンアップ処理（必要な場合）
  };
}, [依存配列]);

useEffectの3つの主要要素

1. コールバック関数

第一引数として渡される関数には、実行したいサイドエフェクトのコードを記述します。例えば、データの取得やタイマーの設定などをここに書きます。

2. クリーンアップ関数

コールバック関数内で返す関数はクリーンアップ処理を担当します。タイマーやイベントリスナーを解除したり、メモリリークを防ぐために使用されます。

3. 依存配列

第二引数の配列には、サイドエフェクトを再実行する条件となる変数を指定します。この配列の値が変化したときにコールバック関数が実行されます。

useEffectの挙動

  1. 初回レンダリング時に実行されます。
  2. 依存配列に含まれる値が変化するたびに再実行されます。
  3. コンポーネントがアンマウントされるときにクリーンアップ処理が実行されます。

依存配列の例

以下は、依存配列にcountを指定した例です。この場合、countが変化するたびにuseEffectが再実行されます。

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`現在のカウント: ${count}`);
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

これらの基本構文と仕組みを理解することで、useEffectを柔軟に活用できるようになります。

条件付きレンダリングとuseEffectの組み合わせ

条件付きレンダリングは、Reactコンポーネントの中で特定の条件に基づいてUIを動的に変更するための基本的な方法です。一方、useEffectはサイドエフェクトの処理に利用されます。この2つを組み合わせることで、特定の条件が満たされたときにのみサイドエフェクトを実行する設計が可能です。

条件付きレンダリングの概要

条件付きレンダリングでは、if文や三項演算子、論理AND演算子を使用してコンポーネントの出力を制御します。以下は基本的な例です。

function Example({ show }) {
  return (
    <div>
      {show ? <p>表示中のテキスト</p> : <p>非表示中のテキスト</p>}
    </div>
  );
}

条件付きでuseEffectを実行する方法

useEffectの実行タイミングを特定の条件に基づいて制御するためには、依存配列や条件式を組み合わせます。

1. 条件に基づく依存配列の設定

依存配列に条件を含めることで、特定の値が変化したときのみuseEffectを実行できます。以下はisVisibleの状態がtrueになったときにサイドエフェクトを実行する例です。

import React, { useState, useEffect } from 'react';

function ConditionalEffect() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (isVisible) {
      console.log("サイドエフェクト実行中...");
    }
  }, [isVisible]);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? "非表示にする" : "表示する"}
      </button>
    </div>
  );
}

2. 条件式を使用した実行制御

場合によっては、useEffect内で条件式を利用して実行制御を細かく設定することもあります。この方法では、依存配列は指定せず、条件を直接記述します。

useEffect(() => {
  if (someCondition) {
    // 条件が真のときにのみサイドエフェクトを実行
    console.log("条件付きサイドエフェクト実行");
  }
}, [someCondition]);

条件付きuseEffectのベストプラクティス

  1. 明確な条件設定：条件式は分かりやすく記述し、意図を明確にします。
  2. クリーンアップ関数の活用：条件に基づく処理が長期間維持される場合、適切にクリーンアップ処理を実装します。
  3. 依存配列を適切に設定：無限ループを避けるため、依存配列に必要な変数だけを含めます。

条件付きレンダリングとuseEffectを組み合わせることで、Reactコンポーネントの動作をより柔軟に制御できるようになります。これにより、パフォーマンスやコードの可読性を向上させることが可能です。

useEffectの依存配列と最適な設定方法

useEffectの依存配列は、サイドエフェクトの実行タイミングを制御するための重要な要素です。このセクションでは、依存配列の役割と最適な設定方法について詳しく解説します。

依存配列とは何か

依存配列は、useEffectの第二引数に指定する配列で、Reactがサイドエフェクトを再実行する条件を定義します。依存配列に含まれる値が変化するたびに、useEffectのコールバック関数が再実行されます。

useEffect(() => {
  // サイドエフェクトの処理
}, [依存値]);

依存配列の基本的な使い方

1. 空の依存配列

空の依存配列（[]）を指定すると、useEffectは初回レンダリング時にのみ実行されます。

useEffect(() => {
  console.log("コンポーネントがマウントされました");
}, []);

2. 特定の変数を含む依存配列

依存配列に変数を含めることで、その変数が変更されたときにのみuseEffectが再実行されます。

useEffect(() => {
  console.log(`カウントが変化しました: ${count}`);
}, [count]);

3. 依存配列を省略した場合

依存配列を省略すると、レンダリングごとにuseEffectが再実行されます。この挙動は、パフォーマンス上の問題を引き起こす可能性があるため、推奨されません。

useEffect(() => {
  console.log("毎回実行されます");
});

依存配列設定の注意点

1. 必要な依存値をすべて含める

依存配列には、useEffect内で使用されるすべての状態や変数を含める必要があります。これを怠ると、期待通りの動作をしない場合があります。

useEffect(() => {
  console.log(message); // messageが依存配列に含まれていないと、正しく動作しない
}, [message]);

2. 関数やオブジェクトの依存に注意

関数やオブジェクトは、再生成されるたびに異なる参照を持つため、useEffectが不要に再実行される可能性があります。useCallbackやuseMemoを活用して依存関係を最適化します。

const memoizedCallback = useCallback(() => {
  console.log("依存最適化");
}, [dependency]);
useEffect(() => {
  memoizedCallback();
}, [memoizedCallback]);

依存配列のベストプラクティス

  1. ESLintのルールを活用
    Reactのeslint-plugin-react-hooksを使用して、依存配列の正確な設定を自動チェックします。
  2. 依存の最小化
    依存配列には、最小限必要な変数だけを含め、無駄な再実行を防ぎます。
  3. 明示的な依存管理
    状況に応じてuseCallbackやuseMemoを使用し、依存オブジェクトや関数の再生成を制御します。

依存配列の例: APIリクエスト

以下は、ユーザーIDが変更されたときにAPIリクエストを実行する例です。

useEffect(() => {
  async function fetchData() {
    const response = await fetch(`https://api.example.com/user/${userId}`);
    const data = await response.json();
    console.log(data);
  }
  fetchData();
}, [userId]);

依存配列を適切に設定することで、不要な再実行を防ぎ、パフォーマンスを最適化した効率的なReactコンポーネントを作成できます。

サイドエフェクトの例: データ取得

useEffectは、コンポーネントが特定の条件でレンダリングされる際にAPIリクエストを実行するのに非常に便利です。このセクションでは、useEffectを活用したデータ取得の具体的な例を解説します。

基本的なデータ取得の流れ

fetchやaxiosを使用してAPIからデータを取得し、その結果を状態に保存してUIに反映するのが一般的なパターンです。

例: ユーザー情報の取得

以下は、userIdが変更されるたびにそのユーザーの情報を取得して表示する例です。

import React, { useState, useEffect } from 'react';

function UserData({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchUserData() {
      try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
          throw new Error('データ取得に失敗しました');
        }
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        console.error(error);
      }
    }

    if (userId) {
      fetchUserData();
    }
  }, [userId]); // userIdが変わるたびにデータ取得を実行

  if (!userId) {
    return <p>ユーザーIDを指定してください。</p>;
  }

  return (
    <div>
      {userData ? (
        <div>
          <h3>ユーザー情報</h3>
          <p>名前: {userData.name}</p>
          <p>メール: {userData.email}</p>
        </div>
      ) : (
        <p>データを取得中...</p>
      )}
    </div>
  );
}

export default UserData;

コード解説

1. 状態管理

useStateを使用して、取得したデータを状態に保存します。この状態は、APIリクエストが成功すると更新されます。

2. 非同期関数

データ取得の処理はasync関数で行います。APIからのレスポンスを待つためにawaitを使用します。

3. 条件付き実行

if (userId)を使用して、userIdが存在する場合のみデータ取得を実行します。これにより、不必要なリクエストを防ぎます。

依存配列の設定

依存配列にuserIdを設定することで、userIdが変更された場合のみuseEffectが再実行されます。これにより、効率的にデータ取得が行われます。

エラーハンドリング

APIリクエスト中にエラーが発生した場合、エラー内容をconsole.errorで出力しています。エラーをUIに反映させるには、エラーメッセージを状態として管理することもできます。

データ取得における注意点

  1. クリーンアップの実装
    非同期処理の結果が不要になるケースを考慮し、クリーンアップ処理を実装します。例えば、コンポーネントがアンマウントされた際に未完了のリクエストをキャンセルする方法があります。
  2. キャッシュの活用
    頻繁にデータを再取得する場合、キャッシュ機構を利用することでパフォーマンスを向上できます。
  3. ロード中の状態表示
    userDataが取得できるまで「データを取得中…」と表示することで、UXを向上させます。

カスタムフックの利用

データ取得のロジックを他のコンポーネントでも再利用したい場合、カスタムフックを作成すると便利です。

function useUserData(userId) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    if (!userId) return;

    async function fetchData() {
      try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        console.error(error);
      }
    }

    fetchData();
  }, [userId]);

  return userData;
}

カスタムフックを利用すると、コードの再利用性が向上します。

まとめ

useEffectを利用した条件付きデータ取得は、Reactアプリケーションでの基本的なサイドエフェクト処理の一つです。依存配列やエラーハンドリングに注意しながら実装することで、効率的かつ信頼性の高いコードを作成できます。

サイドエフェクトの例: タイマーの管理

ReactのuseEffectを利用して、タイマーを設定および制御する方法を学びます。特定の条件下でのみタイマーを動作させることで、効率的かつ柔軟な動作を実現できます。

タイマーの基本的な実装

タイマーを使用するには、setIntervalやsetTimeoutといったブラウザのタイミング関数を利用します。useEffectを組み合わせることで、タイマーの開始と停止を制御できます。

例: シンプルなタイマー

以下は、一定時間ごとにカウントを増加させるタイマーの例です。

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(interval); // クリーンアップ処理
    };
  }, []); // 空の依存配列で初回マウント時のみ実行

  return (
    <div>
      <h3>タイマー: {count}秒</h3>
    </div>
  );
}

export default Timer;

条件付きでタイマーを動作させる方法

タイマーを特定の条件下でのみ動作させたい場合は、依存配列や状態を活用します。

例: スタート/ストップ機能付きタイマー

以下の例では、タイマーの開始と停止をボタンで制御します。

import React, { useState, useEffect } from 'react';

function ConditionalTimer() {
  const [count, setCount] = useState(0);
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    if (!isActive) return;

    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(interval); // クリーンアップ処理
    };
  }, [isActive]); // isActiveが変更されるたびに再評価

  return (
    <div>
      <h3>タイマー: {count}秒</h3>
      <button onClick={() => setIsActive(!isActive)}>
        {isActive ? "停止" : "開始"}
      </button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}

export default ConditionalTimer;

コード解説

1. 条件付き依存配列

useEffectの依存配列にisActiveを指定することで、タイマーの動作を開始または停止できます。

2. クリーンアップ処理

clearIntervalを使用して、タイマーを適切に停止します。これにより、メモリリークや不要な処理を防げます。

3. 状態管理

isActive状態を用いて、タイマーが動作中かどうかを制御します。また、count状態で経過時間を記録します。

応用例: 倒数タイマー

以下は、指定時間からカウントダウンするタイマーの例です。

function CountdownTimer({ initialSeconds }) {
  const [seconds, setSeconds] = useState(initialSeconds);

  useEffect(() => {
    if (seconds <= 0) return;

    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds - 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [seconds]);

  return (
    <div>
      <h3>残り時間: {seconds}秒</h3>
    </div>
  );
}

実装時の注意点

  1. クリーンアップを徹底: タイマーを使用する際は、必ずclearIntervalまたはclearTimeoutを実行し、リソースリークを防ぎます。
  2. 依存配列を適切に設定: 依存配列が不適切な場合、タイマーが正しく動作しないことがあります。
  3. 過剰な再実行を防ぐ: 不必要な再レンダリングを防ぐため、useCallbackやuseMemoを利用すると良いでしょう。

まとめ

タイマーは多くのUIで必要とされる基本機能ですが、適切な管理が重要です。useEffectとクリーンアップ処理を活用することで、効率的かつバグの少ないタイマーを実装できます。条件付きタイマーや応用例を試しながら、実装力を磨きましょう。

実装時のよくある落とし穴と回避方法

useEffectは強力なツールですが、正しく使用しないと、意図しない動作やパフォーマンスの低下につながることがあります。このセクションでは、useEffectを使用する際によくある落とし穴とその回避方法について解説します。

落とし穴1: 無限ループの発生

問題

依存配列に適切な値を指定しないと、useEffectが何度も再実行される無限ループが発生することがあります。例えば、useEffect内で状態を更新すると、その状態が変化するたびにuseEffectが再実行されます。

useEffect(() => {
  setCount(count + 1); // 状態を更新するたびに再実行される
}, [count]);

回避方法

  • 状態更新が必要な場合は、useEffect内でなく、イベントハンドラーや外部ロジックに移動します。
  • 必要に応じてuseRefを活用して値を保持し、useEffectの依存関係から除外します。
useEffect(() => {
  if (someCondition) {
    setCount(prevCount => prevCount + 1); // 必要に応じた条件付き更新
  }
}, [someCondition]);

落とし穴2: 依存配列の不備

問題

useEffect内で使用している変数や関数を依存配列に含めないと、最新の値を参照できず、古いデータに基づいた処理が実行されることがあります。

useEffect(() => {
  console.log(someValue); // someValueが依存配列に含まれていない
}, []);

回避方法

  • 必ず依存配列にuseEffect内で使用するすべての変数や関数を含めます。
  • ESLintのreact-hooks/exhaustive-depsルールを活用して、依存配列の不足を検出します。
useEffect(() => {
  console.log(someValue);
}, [someValue]);

落とし穴3: クリーンアップ関数の未実装

問題

タイマーやイベントリスナーをuseEffect内で設定した後に、クリーンアップ関数を実装しないと、メモリリークや意図しない動作が発生する可能性があります。

useEffect(() => {
  window.addEventListener('resize', handleResize);
}, []);

回避方法

  • 必ずuseEffect内でクリーンアップ関数を返し、リソースを解放します。
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

落とし穴4: パフォーマンスの低下

問題

依存配列に過剰な変数を指定すると、頻繁にuseEffectが実行され、パフォーマンスが低下する場合があります。

回避方法

  • 依存配列には、useEffect内で使用される必要最小限の変数のみを含めます。
  • 関数やオブジェクトはuseCallbackやuseMemoでメモ化し、不要な再生成を防ぎます。
const memoizedFunction = useCallback(() => {
  performAction();
}, [dependency]);
useEffect(() => {
  memoizedFunction();
}, [memoizedFunction]);

落とし穴5: コンポーネントのアンマウント時の不具合

問題

コンポーネントのアンマウント後に非同期処理が完了すると、不要な状態更新が発生しエラーになることがあります。

useEffect(() => {
  let isMounted = true;
  async function fetchData() {
    const data = await getData();
    if (isMounted) {
      setState(data);
    }
  }
  fetchData();
  return () => {
    isMounted = false; // アンマウント時にフラグを更新
  };
}, []);

まとめ

useEffectを正しく使用するには、依存配列の適切な設定、クリーンアップ処理、パフォーマンスへの配慮が必要です。これらの落とし穴を回避することで、安全かつ効率的なReactコンポーネントを作成できます。

useEffectを使った応用例: モーダルウィンドウ制御

モーダルウィンドウは、UIの中で重要な情報や操作をユーザーに提示する際に利用される一般的なコンポーネントです。このセクションでは、useEffectを活用して、モーダルウィンドウの状態やイベントを効率的に制御する方法を解説します。

モーダルウィンドウの基本構造

モーダルウィンドウの実装には、状態管理とイベントリスナーの設定が重要です。以下の例では、モーダルの開閉を状態で制御し、useEffectを利用してESCキーでモーダルを閉じる機能を実装します。

例: ESCキーで閉じるモーダル

import React, { useState, useEffect } from 'react';

function Modal({ isOpen, onClose }) {
  useEffect(() => {
    if (!isOpen) return;

    function handleKeyDown(event) {
      if (event.key === 'Escape') {
        onClose();
      }
    }

    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown); // クリーンアップ
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <p>モーダルの中身です。</p>
        <button onClick={onClose}>閉じる</button>
      </div>
    </div>
  );
}

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>モーダルを開く</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
    </div>
  );
}

export default App;

コード解説

1. 状態管理

isModalOpenは、モーダルが開いているかどうかを制御するための状態です。ボタンのクリックで状態を更新します。

2. キーボードイベントのリスナー設定

useEffect内でwindow.addEventListenerを使い、ESCキーが押された際にonClose関数を実行するリスナーを追加しています。

3. クリーンアップ処理

useEffect内でイベントリスナーを設定した場合、クリーンアップ処理でリスナーを必ず解除します。これにより、コンポーネントのアンマウント後に不要なイベント処理が発生するのを防ぎます。

応用例: モーダルの外側クリックで閉じる

モーダルの外側をクリックした際に閉じる機能を追加する場合、クリックイベントを利用します。

function Modal({ isOpen, onClose }) {
  useEffect(() => {
    function handleOutsideClick(event) {
      if (event.target.className === 'modal-overlay') {
        onClose();
      }
    }

    if (isOpen) {
      window.addEventListener('click', handleOutsideClick);
    }

    return () => {
      window.removeEventListener('click', handleOutsideClick);
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <p>モーダルの中身です。</p>
        <button onClick={onClose}>閉じる</button>
      </div>
    </div>
  );
}

モーダル制御における注意点

  1. 依存配列の正確な設定
    isOpenやonCloseなど、useEffect内で利用するすべての変数を依存配列に含めることで正確な動作を保証します。
  2. UI要素の適切なスタイリング
    モーダルの背景やコンテンツがクリック可能領域として正しく機能するようにCSSを設計します。
  3. パフォーマンスへの配慮
    モーダルの開閉状態に応じてイベントリスナーを動的に設定することで、不要な処理を防ぎます。

応用: モーダルの状態をグローバルに管理

複数のモーダルを管理する場合、React Contextや状態管理ライブラリ（ReduxやZustandなど）を活用することで、アプリケーション全体の状態を一元管理できます。

まとめ

useEffectを利用することで、モーダルウィンドウの開閉や動作を簡単かつ効率的に制御できます。状態管理やイベントリスナーの設定を適切に行い、柔軟なモーダル制御を実現しましょう。モーダルはUIの重要な要素であり、適切な設計がユーザー体験の向上に寄与します。

コード演習: 実際に試す条件付きuseEffect

これまで学んだuseEffectの基本構文や条件付き実行の知識を活用し、簡単な実践演習を行います。以下の課題を基に、useEffectを使ったReactコンポーネントを実装してみましょう。

課題: 条件付きデータ取得とローディング表示

ユーザーIDを入力すると、そのユーザーの情報をAPIから取得し、画面に表示するReactコンポーネントを作成します。APIリクエストの間は「データを取得中…」というローディングメッセージを表示し、データが取得できたらユーザー情報を表示します。

完成コード例

import React, { useState, useEffect } from 'react';

function UserInfo() {
  const [userId, setUserId] = useState('');
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!userId) {
      setUserData(null);
      return;
    }

    setLoading(true);

    async function fetchData() {
      try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
          throw new Error('ユーザー情報の取得に失敗しました');
        }
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        console.error(error);
        setUserData(null);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [userId]); // userIdが変更されたときにデータ取得

  return (
    <div>
      <h3>ユーザー情報取得</h3>
      <input
        type="text"
        placeholder="ユーザーIDを入力"
        value={userId}
        onChange={(e) => setUserId(e.target.value)}
      />
      {loading ? (
        <p>データを取得中...</p>
      ) : userData ? (
        <div>
          <p>名前: {userData.name}</p>
          <p>メール: {userData.email}</p>
          <p>住所: {userData.address.city}, {userData.address.street}</p>
        </div>
      ) : (
        userId && <p>ユーザーが見つかりません</p>
      )}
    </div>
  );
}

export default UserInfo;

コードのポイント

1. 状態管理

  • userId：入力されたユーザーIDを保持します。
  • userData：取得したユーザー情報を保持します。
  • loading：データ取得中かどうかを管理します。

2. 条件付きデータ取得

userIdが空の場合はデータ取得処理をスキップします。useEffectを条件付きで実行することで、無駄なAPIリクエストを防ぎます。

3. ローディング表示

データ取得中にはloadingをtrueに設定し、ユーザーに視覚的なフィードバックを提供します。これにより、ユーザーはシステムが処理中であることを認識できます。

演習の拡張

以下の追加課題に挑戦することで、さらに理解を深められます。

  1. エラー表示の実装：データ取得に失敗した場合に、エラーメッセージを画面に表示します。
  2. ボタンによる取得制御：userIdを入力後、ボタンをクリックしたときにのみデータを取得するように変更します。
  3. 複数ユーザー情報の表示：リスト形式で複数のユーザー情報を取得し、画面に表示します。

まとめ

この演習を通じて、条件付きuseEffectの活用方法や、APIリクエストの基本的な構造を学べます。これらのスキルは、リアルなReactアプリケーションで頻繁に活用されるため、ぜひ試してみてください。エラー処理やUIの改善にも挑戦してみることで、さらに実践的なスキルを身につけることができます。

まとめ

本記事では、useEffectを利用した特定条件下でのサイドエフェクトの実装方法について解説しました。基本的な構文から、依存配列の使い方、条件付き実行の設計、具体例としてのデータ取得やタイマー管理、モーダルウィンドウ制御、そしてコード演習までを網羅しました。

useEffectを適切に活用することで、Reactコンポーネントの機能性や効率性を大幅に向上させることが可能です。依存配列の設定やクリーンアップ処理に注意を払いながら、落とし穴を回避することで、より安定したアプリケーションを構築できます。

これらの知識を実際のプロジェクトで試し、柔軟で保守性の高いコードを実現していきましょう。

React
React 条件付きレンダリング useEffect サイドエフェクト

コメント

コメントする

目次
  1. useEffectの基本構文と仕組み
    1. useEffectの3つの主要要素
    2. useEffectの挙動
    3. 依存配列の例
  2. 条件付きレンダリングとuseEffectの組み合わせ
    1. 条件付きレンダリングの概要
    2. 条件付きでuseEffectを実行する方法
    3. 条件付きuseEffectのベストプラクティス
  3. useEffectの依存配列と最適な設定方法
    1. 依存配列とは何か
    2. 依存配列の基本的な使い方
    3. 依存配列設定の注意点
    4. 依存配列のベストプラクティス
    5. 依存配列の例: APIリクエスト
  4. サイドエフェクトの例: データ取得
    1. 基本的なデータ取得の流れ
    2. コード解説
    3. 依存配列の設定
    4. エラーハンドリング
    5. データ取得における注意点
    6. カスタムフックの利用
    7. まとめ
  5. サイドエフェクトの例: タイマーの管理
    1. タイマーの基本的な実装
    2. 条件付きでタイマーを動作させる方法
    3. コード解説
    4. 応用例: 倒数タイマー
    5. 実装時の注意点
    6. まとめ
  6. 実装時のよくある落とし穴と回避方法
    1. 落とし穴1: 無限ループの発生
    2. 落とし穴2: 依存配列の不備
    3. 落とし穴3: クリーンアップ関数の未実装
    4. 落とし穴4: パフォーマンスの低下
    5. 落とし穴5: コンポーネントのアンマウント時の不具合
    6. まとめ
  7. useEffectを使った応用例: モーダルウィンドウ制御
    1. モーダルウィンドウの基本構造
    2. コード解説
    3. 応用例: モーダルの外側クリックで閉じる
    4. モーダル制御における注意点
    5. 応用: モーダルの状態をグローバルに管理
    6. まとめ
  8. コード演習: 実際に試す条件付きuseEffect
    1. 課題: 条件付きデータ取得とローディング表示
    2. コードのポイント
    3. 演習の拡張
    4. まとめ
  9. まとめ