【React入門】useEffectの使い方5ステップ！10分で理解する副作用管理

こんにちは！
今日は、Reactの重要な機能の1つ、useEffectについて詳しく解説していきます。

useEffectって何？どうして必要なの？

そんな疑問を持っている方も多いのではないでしょうか。

useEffectとは、Reactコンポーネントで副作用を扱うためのフックです。
副作用とは、データの取得やイベントリスナーの設定、手動でのDOM操作など、Reactの純粋なレンダリング以外の処理のことを指します。
useEffectを使うことで、これらの副作用をコンポーネントのライフサイクルに合わせて適切に管理できるのです。

この記事を読めば、useEffectの基本から実践的な使い方まで、しっかり理解できるようになりますよ。

この記事でわかること

useEffectとは何か、なぜ必要なのか
useEffectの基本的な使い方
実際のプロジェクトでのuseEffectの活用方法
useEffect使用時の注意点とコツ

React環境がない方はこちらも参考にしてください。

【たった1分】React×Vite×TypeScriptで高速ビルド環境を構築する方法こんにちは！今日は、React、Vite（ヴィート）、TypeScriptを使用して、たった1分で高速にビルド環境を構築する方法につ...

Contents

useEffectの基本概念
useEffectの使い方5ステップ
useEffectの実践的な使用例
useEffectの注意点とベストプラクティス
- 無限ループを避ける方法
- useEffectの依存配列の扱い方
まとめ

useEffectの基本概念

useEffectは、Reactの「フック」の1つ。
フックとは、関数コンポーネントでReactの機能を使えるようにする特別な関数のことです。

useEffectの主な役割は、コンポーネントの「副作用」を扱うことです。
副作用とは、データの取得やイベントの登録、手動でのDOM操作など、Reactの純粋なレンダリング以外の処理のことを指します。

では、なぜuseEffectが必要なのでしょうか？
それは、Reactのコンポーネントが「レンダリング」と呼ばれる描画処理を行う際に、副作用を適切なタイミングで実行するためです。

例えば、APIからデータを取得する場合を考えてみましょう。
データ取得にはある程度の時間がかかります。
もしレンダリング中にデータ取得を行うと、ページの表示が遅くなってしまいます。
useEffectを使えば、レンダリング後にデータ取得を行うことができるのです。

useEffectの基本的な構文は次のようになります。


useEffect(() => {
  // 副作用を記述
}, [依存配列]);

ここで、最初の引数は副作用を記述する関数、2つ目の引数は「依存配列」と呼ばれるものです。
依存配列には、副作用が依存している値を指定します。
この配列の値が変更されたときに、副作用が再実行されます。

useEffectは、コンポーネントのライフサイクル（作成、更新、削除）と密接に関連しています。
コンポーネントがマウント（作成）されたとき、更新されたとき、アンマウント（削除）されたときに、それぞれ異なる処理を行うことができるのです。

このように、useEffectを使うことで、コンポーネントの副作用を適切に管理し、効率的なアプリケーションを作ることができます。
次の章では、具体的なuseEffectの使い方を見ていきましょう。

useEffectの使い方5ステップ

それでは、useEffectの使い方を5つのステップに分けて詳しく見ていきましょう。
各ステップを理解することで、useEffectを効果的に活用できるようになります。

step 1: インポートと基本的な構文

まず、useEffectを使うためには、Reactからインポートする必要があります。
以下のようにファイルの先頭でインポートしましょう。


import React, { useEffect } from 'react';

次に、基本的な構文を見てみましょう。
useEffectは、コンポーネント内で次のように使います。


useEffect(() => {
  // ここに副作用の処理を書きます
});

この形がuseEffectの最もシンプルな使い方です。
この場合、コンポーネントが描画されるたびに副作用が実行されます。

step 2: 依存配列の理解と使用

2つ目のステップは、依存配列の理解と使用です。
依存配列は、useEffectの第2引数として渡す配列のことです。


useEffect(() => {
  // 副作用の処理
}, [依存する値]);

依存配列を使うと、特定の値が変更されたときだけ副作用を実行することができます。
例えば、countという状態が変更されたときだけ副作用を実行したい場合は、次のように書きます。


useEffect(() => {
  console.log('countが変更されました');
}, [count]);

依存配列を空の配列（[]）にすると、コンポーネントがマウントされたときだけ副作用が実行されます。
これは、例えばAPIからデータを1回だけ取得したい場合などに便利です。

step 3: クリーンアップ関数の実装

3つ目のステップは、クリーンアップ関数の実装です。
クリーンアップ関数は、コンポーネントがアンマウントされるときや、次の副作用が実行される前に呼び出される関数です。

クリーンアップ関数は、副作用の関数から関数を返すことで定義します。


useEffect(() => {
  // 副作用の処理

  return () => {
    // クリーンアップの処理
  };
});

クリーンアップ関数は、例えばイベントリスナーの削除やタイマーのクリアなど、副作用の後始末をするのに使います。

step 4: 条件付きの副作用

4つ目のステップは、条件付きの副作用の実装です。
時には、特定の条件が満たされたときだけ副作用を実行したいことがあります。

これは、useEffectの中で条件分岐を使うことで実現できます。


useEffect(() => {
  if (条件) {
    // 条件が真のときだけ実行される処理
  }
}, [条件に関連する値]);

ただし、useEffect自体を条件付きで呼び出すことはできません。
これはReactのフックのルールの1つです。

step 5: 複数のuseEffectの使用

最後のステップは、複数のuseEffectを使うことです。
1つのコンポーネントで複数のuseEffectを使うことで、異なる副作用を分離して管理できます。


useEffect(() => {
  // 1つ目の副作用
}, [依存値1]);

useEffect(() => {
  // 2つ目の副作用
}, [依存値2]);

この方法を使うと、それぞれの副作用が独立して動作するので、コードの見通しが良くなります。

以上がuseEffectの使い方5ステップです。
これらのステップを理解し、実践することで、useEffectを効果的に活用できるようになりますよ。

useEffectの実践的な使用例

ここまででuseEffectの基本的な使い方を学びました。
では次に、実際のプロジェクトでどのようにuseEffectを使うのか、具体的な例を見ていきましょう。

APIからデータを取得する

APIからデータを取得することは、useEffectの代表的な使用例の1つです。
ここでは、Random User Generator APIを使って、ランダムなユーザー情報を取得する例を見てみましょう。


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

function RandomUser() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(response => {
        if (!response.ok) {
          throw new Error('ネットワークエラーが発生しました');
        }
        return response.json();
      })
      .then(data => {
        setUser(data.results[0]);
        setIsLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <p>読み込み中...</p>;
  if (error) return <p>エラー: {error}</p>;

  return (
    <div>
      <h2>ランダムユーザー</h2>
      {user && (
        <>
          <p>名前: {user.name.first} {user.name.last}</p>
          <p>メール: {user.email}</p>
          <img src={user.picture.medium} alt="ユーザー画像" />
        </>
      )}
    </div>
  );
}

この例では、コンポーネントが描画されたときに1回だけRandom User Generator APIからデータを取得します。
取得したデータはuserという状態に保存され、その後表示されます。

ここでのポイントは以下の通りです。

空の依存配列[]を使うことで、コンポーネントのマウント時に1回だけ副作用が実行されます。
データの読み込み中は「読み込み中…」と表示し、エラーが発生した場合はエラーメッセージを表示します。
ユーザーデータが取得できたら、名前、メールアドレス、画像を表示します。

このように、useEffectを使うことで、コンポーネントの描画とデータ取得のタイミングを適切に管理できます。
APIからのデータ取得は非同期処理なので、useEffectを使うことで、コンポーネントの描画を妨げることなくデータを取得できるのです。

また、このサンプルでは、データ取得の状態（読み込み中、エラー、成功）を管理していますね。
これは実際のアプリケーション開発では非常に重要で、ユーザーに現在の状態を適切に伝えることができます。

イベントリスナーの追加と削除

次に、ウィンドウのリサイズイベントを監視する例を見てみましょう。
この例では、イベントリスナーの追加と削除を行います。


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

function WindowSize() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    // クリーンアップ関数
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <p>現在のウィンドウの幅: {windowWidth}px</p>;
}

この例では、useEffect内でイベントリスナーを追加し、クリーンアップ関数でそれを削除しています。
これにより、コンポーネントがアンマウントされたときにメモリリークを防ぐことができます。

タイマーの設定と解除

最後に、タイマーを使用する例を見てみましょう。
この例では、1秒ごとにカウントアップするタイマーを実装します。


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

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

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

    // クリーンアップ関数
    return () => {
      clearInterval(timer);
    };
  }, []);

  return <p>カウント: {count}</p>;
}

この例では、useEffect内でsetIntervalを使ってタイマーを設定し、クリーンアップ関数でclearIntervalを使ってタイマーを解除しています。

これらの実践的な例を通じて、useEffectがいかに多様な場面で活用できるかがわかりますね。
APIからのデータ取得、イベントリスナーの管理、タイマーの制御など、さまざまな副作用をuseEffectで適切に扱うことができます。

実際のプロジェクトでは、これらの例を参考にしながら、自分のニーズに合わせてuseEffectを活用していくことができます。
次の章では、useEffect使用時の注意点とベストプラクティスについて見ていきましょう。

useEffectの注意点とベストプラクティス

useEffectは強力な機能ですが、使い方を間違えると思わぬバグを引き起こすこともあります。
ここでは、useEffectを使う際の注意点とベストプラクティスについて説明します。

無限ループを避ける方法

useEffectを使う際、最も注意すべき点の1つが無限ループです。
無限ループは、副作用が状態を更新し、その更新が再び副作用を引き起こすという循環が発生したときに起こります。

例えば、以下のコードは無限ループを引き起こします。


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

  useEffect(() => {
    setCount(count + 1);
  });

  return <p>カウント: {count}</p>;
}

この例では、useEffectがcountを更新し、その更新が再びuseEffectを呼び出すため、無限ループが発生します。

無限ループを避けるには、依存配列を適切に使用することが重要です。
上記の例を修正すると、以下のようになります。


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

  useEffect(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 空の依存配列を使用

  return <p>カウント: {count}</p>;
}

この修正版では、空の依存配列を使用しているため、副作用はコンポーネントのマウント時に1回だけ実行されます。