日本語

ReactJS チュートリアル

Hooks

ReactJSの高度な機能

追加の概念

ReactJS - useEffectの使用：初心者向けの包括ガイド

こんにちは、未来のReact魔法使いさんたち！今日は、ReactのuseEffectの世界に楽しい旅をすることになります。プログラミングが新しいことでも心配しないでください - 私があなたの親切なガイドになり、ステップバイステップで進めます。このチュートリアルの終わりには、useEffectをプロのように操ることができるようになるでしょう！

ReactJS - Using useEffect

useEffectとは？

まず、useEffectとは何かを理解しましょう。령 imagine you're baking a cake. You mix the ingredients, put it in the oven, and then... what? You might want to set a timer, right? That's kind of what useEffect does in React. It lets you perform "side effects" in your components.

Side effects are actions that happen alongside your component's main job of rendering UI. These could be things like:

  • Fetching data from an API
  • Manually changing the DOM
  • Setting up subscriptions

Now, let's get into the nitty-gritty!

useEffectのシグネチャ

useEffectフックには特定の書き方があります。それを分解してみましょう：

useEffect(() => {
// Your effect code here
}, [dependencies]);

それぞれの部分が何を意味するか説明します：

  1. useEffect: 使用するフックの名前です。
  2. () => { ... }: エフェクトコードを入れるアロー関数です。
  3. [dependencies]: エフェクトが依存する値をリストアップするオプションの配列です。

簡単な例を見てみましょう：

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

function Timer() {
const [seconds, setSeconds] = useState(0);

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

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

return <div>Seconds: {seconds}</div>;
}

この例では、シンプルなタイマーを作成しています。useEffectフックはインターバルを設定し、1秒ごとにsecondsステートをインクリメントします。空の依存配列[]は、このエフェクトはコンポーネントがマウントされたときに一度だけ実行されることを意味します。

エフェクトフックの機能

基本的な例を見たので、エフェクトフックの主要な機能を探ってみましょう：

  1. タイミング: デフォルトでは、エフェクトはすべてのレンダリング後に実行されます。
  2. 条件実行: 依存配列を使用してエフェクトの実行を制御できます。
  3. クリーンアップ: エフェクトはクリーンアップ関数を返すことでメモリリークを防ぐことができます。

それぞれ詳しく見ていきましょう。

タイミング

デフォルトでは、useEffectはすべてのレンダリング後に実行されます。ステートを更新したエフェクトは無限ループを引き起こす可能性があるため、注意が必要です。以下は避けるべき例です：

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

useEffect(() => {
setCount(count + 1); // これは無限ループを引き起こします！
});

return <div>{count}</div>;
}

条件実行

エフェクトが不要に実行されないようにするために、依存配列を提供できます：

function ConditionalEffect({ userId }) {
const [user, setUser] = useState(null);

useEffect(() => {
fetchUser(userId).then(data => setUser(data));
}, [userId]);

return <div>{user ? user.name : 'Loading...'}</div>;
}

この例では、エフェクトはuserIdが変更されたときにのみ実行されます。

クリーンアップ

いくつかのエフェクトはメモリリークを防ぐためにクリーンアップが必要です。以下はその方法です：

function CleanupExample() {
useEffect(() => {
const subscription = subscribeToSomething();

return () => {
subscription.unsubscribe();
};
}, []);

return <div>I'm subscribed!</div>;
}

エフェクトから返された関数は、コンポーネントがアンマウントされたときに呼び出されます。

データの取得

useEffectの一般的な用途之一はAPIからのデータ取得です。例を見てみましょう：

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>Data: {JSON.stringify(data)}</div>;
}

このコンポーネントはマウントされたときにデータを取得し、ロード中とエラーステートを処理し、データが準備されたら表示します。

DOM操作

useEffectはDOMを直接操作することもできます。以下はその例です：

function DOMManipulator() {
useEffect(() => {
const element = document.getElementById('my-element');
element.style.color = 'red';

return () => {
element.style.color = '';
};
}, []);

return <div id="my-element">I'm red!</div>;
}

このエフェクトはコンポーネントがマウントされたときに要素の色を赤に変更し、コンポーネントがアンマウントされたときにリセットします。

クリーンアップ関数

クリーンアップ関数について少し詳しく説明しましょう。クリーンアップ関数はメモリリークを防ぐために非常に重要です。以下はより複雑な例です：

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

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

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return <div>Window width: {windowWidth}px</div>;
}

この例では、コンポーネントがマウントされたときにイベントリスナーを追加し、コンポーネントがアンマウントされたときに削除します。これにより、不要なリスナーが残るのを防ぎます。

概要

useEffectについて学んだことをまとめましょう：

機能 説明
シグネチャ useEffect(() => { ... }, [dependencies])
タイミング デフォルトではすべてのレンダリング後に実行
条件実行 依存配列を使用してエフェクトの実行を制御
クリーンアップ クリーンアップ関数を返すことでメモリリークを防ぐ
データ取得 APIからのデータ取得に使用
DOM操作 直接DOMを操作
クリーンアップ関数 メモリリーク防止に非常に重要

そして、ここまででuseEffectの初歩を踏み出しました！強力なツールですが、熟練するには練習が必要です。ですから、実験を恐れず、間違ったことをしてみましょう - それが私たちの学びです。幸せなコーディングを、そしてあなたのエフェクトが常にクリーンで、コンポーネントが常に反応的であることを祈っています！

Credits: Image by storyset

前のチュートリアル:
ReactJS - useStateの使用
次のチュートリアル:
ReactJS - useContextの使用