開発Tips（2025-11-10）

React

React Hooksを使って、コンポーネントの状態管理と副作用処理をより簡潔に、再利用可能にするテクニックです。カスタムフックを作成することで、ロジックをコンポーネントから分離し、コードの可読性と保守性を向上させます。

カスタムフックで再利用可能なロジックを実装する

Reactのカスタムフックは、ステートフルなロジックをカプセル化し、複数のコンポーネントで再利用できるようにするための強力な機能です。特定のタスク（APIからのデータフェッチ、タイマーの管理、localStorageとの連携など）を処理するロジックをフックとして抽出することで、コンポーネントの肥大化を防ぎ、テスト容易性を高めます。

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

使用例:

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

function MyComponent() {
  const [name, setName] = useLocalStorage('name', '');

  return (
    <div>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <p>Hello, {name}!</p>
    </div>
  );
}

export default MyComponent;

注意点:

• カスタムフックの名前は use で始める必要があります。
• カスタムフックは、他のHooksのルールに従う必要があります（React関数のスコープ内でのみ呼び出す）。
• 状態の更新や副作用処理は、フック内部で適切に管理してください。

おすすめポイント:

• 共通のロジックを再利用することで、コード量を削減し、保守性を向上させることができます。
• コンポーネントが複雑になるのを防ぎ、可読性を高めます。
• テスト容易性が向上し、ロジックの検証が容易になります。