ReactJS：カスタムフックでコンポーネント間の状態管理とメソッド呼び出しをシンプルにする

2024-04-09

ReactJSでコンポーネントメソッドを別のコンポーネントや外部コードから呼び出すことは、状態管理や複雑なUI操作を行う際に役立ちます。ここでは、以下の3つの主要な方法について、コード例と図を用いて分かりやすく解説します。

refによる直接アクセス

refを使用してコンポーネントインスタンスを取得し、そのインスタンスのメソッドを直接呼び出すことができます。この方法はシンプルですが、コードが冗長になりやすく、複雑なコンポーネントでは保守が難しくなる可能性があります。

コード例

const ParentComponent = () => {
  const childRef = React.createRef();

  const handleClick = () => {
    childRef.current.doSomething();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>子コンポーネントのメソッドを実行</button>
    </div>
  );
};

const ChildComponent = ({ ref }) => {
  const doSomething = () => {
    console.log("子コンポーネントのメソッドが実行されました");
  };

  return (
    <div>
      子コンポーネント
    </div>
  );
};

図

propsとコールバック関数

親コンポーネントから子コンポーネントにコールバック関数をpropsとして渡すことで、子コンポーネントのメソッドを呼び出すことができます。この方法は、親コンポーネントと子コンポーネント間のデータの流れを明確に保ち、コードをより分かりやすくすることができます。

const ParentComponent = () => {
  const handleClick = () => {
    console.log("親コンポーネントのボタンがクリックされました");
  };

  return (
    <div>
      <ChildComponent onButtonClick={handleClick} />
    </div>
  );
};

const ChildComponent = ({ onButtonClick }) => {
  const doSomething = () => {
    console.log("子コンポーネントのメソッドが実行されました");
    onButtonClick();
  };

  return (
    <div>
      <button onClick={doSomething}>子コンポーネントのメソッドを実行</button>
    </div>
  );
};

カスタムフック

状態管理や複雑なロジックをカプセル化するためにカスタムフックを作成し、複数のコンポーネント間で共有することができます。カスタムフック内でメソッドを定義し、useStateやuseEffectなどのReactフックと組み合わせて、コンポーネントの状態や副作用を管理することができます。

const useChildComponent = () => {
  const [count, setCount] = useState(0);

  const doSomething = () => {
    setCount(count + 1);
    console.log("子コンポーネントのメソッドが実行されました");
  };

  return { count, doSomething };
};

const ParentComponent = () => {
  const { count, doSomething } = useChildComponent();

  return (
    <div>
      <p>カウント: {count}</p>
      <ChildComponent doSomething={doSomething} />
    </div>
  );
};

const ChildComponent = ({ doSomething }) => {
  return (
    <div>
      <button onClick={doSomething}>子コンポーネントのメソッドを実行</button>
    </div>
  );
};

これらの方法を使い分けることで、状況に応じて柔軟にコンポーネント間の通信を実現することができます。それぞれの方法の特徴を理解し、適切な方法を選択することが重要です。

[ReactJS Tips -

const ParentComponent = () => {
  const childRef = React.createRef();

  const handleClick = () => {
    childRef.current.doSomething();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>子コンポーネントのメソッドを実行</button>
    </div>
  );
};

const ChildComponent = ({ ref }) => {
  const doSomething = () => {
    console.log("子コンポーネントのメソッドが実行されました");
  };

  return (
    <div>
      子コンポーネント
    </div>
  );
};

const ParentComponent = () => {
  const handleClick = () => {
    console.log("親コンポーネントのボタンがクリックされました");
  };

  return (
    <div>
      <ChildComponent onButtonClick={handleClick} />
    </div>
  );
};

const ChildComponent = ({ onButtonClick }) => {
  const doSomething = () => {
    console.log("子コンポーネントのメソッドが実行されました");
    onButtonClick();
  };

  return (
    <div>
      <button onClick={doSomething}>子コンポーネントのメソッドを実行</button>
    </div>
  );
};

const useChildComponent = () => {
  const [count, setCount] = useState(0);

  const doSomething = () => {
    setCount(count + 1);
    console.log("子コンポーネントのメソッドが実行されました");
  };

  return { count, doSomething };
};

const ParentComponent = () => {
  const { count, doSomething } = useChildComponent();

  return (
    <div>
      <p>カウント: {count}</p>
      <ChildComponent doSomething={doSomething} />
    </div>
  );
};

const ChildComponent = ({ doSomething }) => {
  return (
    <div>
      <button onClick={doSomething}>子コンポーネントのメソッドを実行</button>
    </div>
  );
};

Context API: 複数のコンポーネント間でデータを共有する必要がある場合
Redux: 大規模なアプリケーションで状態管理を行う必要がある場合

注意

これらの方法は、ReactJSのバージョンによって異なる場合があります。
コードを使用する前に、必ず最新のバージョンのドキュメントを確認してください。

ReactJSでコンポーネントメソッドを外部から呼び出すその他の方法

forwardRefを使用して、親コンポーネントから子コンポーネントへの参照を直接渡すことができます。refによる直接アクセスと似ていますが、より柔軟で型安全な方法です。

const ParentComponent = () => {
  const childRef = React.createRef();

  const handleClick = () => {
    childRef.current.doSomething();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>子コンポーネントのメソッドを実行</button>
    </div>
  );
};

const ChildComponent = React.forwardRef((props, ref) => {
  const doSomething = () => {
    console.log("子コンポーネントのメソッドが実行されました");
  };

  return (
    <div ref={ref}>
      子コンポーネント
    </div>
  );
});

高階コンポーネント (HOC)

高階コンポーネントを使用して、既存のコンポーネントをラップし、新しい機能を追加することができます。この方法を使用して、外部からコンポーネントメソッドを呼び出すためのラッパーコンポーネントを作成することができます。

const withDoSomething = (WrappedComponent) => {
  const doSomething = () => {
    console.log("子コンポーネントのメソッドが実行されました");
  };

  return (props) => {
    return (
      <WrappedComponent {...props} doSomething={doSomething} />
    );
  };
};

const ChildComponent = ({ doSomething }) => {
  return (
    <div>
      <button onClick={doSomething}>子コンポーネントのメソッドを実行</button>
    </div>
  );
};

const EnhancedChildComponent = withDoSomething(ChildComponent);