開発Tips（2025-11-11）

React

React Hooksを効果的に使用して、ステート管理と副作用処理を簡潔にするためのテクニックです。カスタムフックを作成することで、ロジックの再利用性を高め、コンポーネントをより読みやすく保つことができます。

カスタムフックでロジックを共有する

カスタムフックを使用すると、コンポーネント間でロジックを共有し、重複コードを削減できます。特定のタスクや状態に関連するロジックをフックに抽出し、複数のコンポーネントで再利用することで、コードの保守性と再利用性が向上します。

説明: 複数のコンポーネントで共有されるロジックをカスタムフックに抽出する例。この例では、APIからデータを取得し、ローディング状態を管理するカスタムフックを作成します。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetchData;

使用例:

import React from 'react';
import useFetchData from './useFetchData';

function MyComponent() {
  const { data, loading, error } = useFetchData('https://api.example.com/data');

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default MyComponent;

注意点:

• カスタムフックの名前はuseで始める必要があります。
• カスタムフックは、Reactコンポーネントまたは別のカスタムフック内でのみ呼び出すことができます。
• カスタムフックは、レンダーごとに同じ順序で呼び出される必要があります (フックのルール)。

おすすめポイント:

• 複雑なロジックをコンポーネントから分離することで、コンポーネントの可読性とテスト容易性を向上させます。
• 複数のコンポーネントで同じロジックを再利用できるため、コードの重複を減らし、開発効率を向上させます。
• 状態管理ライブラリ (Redux, Zustand, Jotaiなど) の複雑さを軽減できます。