React Academy · レッスン

兄弟コンポーネント間の通信パターン

Q: 「兄弟コンポーネント間の通信パターン」で何を学びますか？

共有する親のstateとコールバックPropsを通じて、2つの兄弟コンポーネントを連携させます ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

共有する親のstateとコールバックPropsを通じて、2つの兄弟コンポーネントを連携させます

「兄弟コンポーネント間の通信パターン」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、共通の親の状態とコールバックpropsを使って2つのコンポーネントを連携させ、Reactで兄弟コンポーネント間の通信を実装します。

兄弟コンポーネントは直接通信できない

Reactでは、データはpropsを通じて下方向に流れます。2つの兄弟コンポーネントの間に直接のつながりはありません。兄弟コンポーネント間の通信はすべて、共通の親を経由します。

パターン：親で共有状態を管理する

親コンポーネントが共有する値をstateで保持し、両方の兄弟コンポーネントに渡します。一方にはデータ（読み取り側）として、もう一方には値を変更するコールバック（書き込み側）として渡します。

function Parent() {
  const [selected, setSelected] = useState(null);
  return (
    <>
      <Picker onSelect={setSelected} />
      <Detail item={selected} />
    </>
  );
}

読み取り側と書き込み側の兄弟コンポーネント

書き込み側の兄弟コンポーネント（Picker）は、ユーザーが選択すると親のコールバックを呼び出します。読み取り側の兄弟コンポーネント（Detail）は、結果の値をpropsとして受け取ります。どちらの兄弟コンポーネントも、もう一方について知る必要はありません。

function Picker({ onSelect }) {
  return <button onClick={() => onSelect('item-1')}>Pick item 1</button>;
}

function Detail({ item }) {
  return <p>Selected: {item}</p>;
}

双方向の通信

両方の兄弟コンポーネントが、同時に読み取り側と書き込み側になることもあります。それぞれが現在の値とonChangeコールバックを受け取ります。どちらかの兄弟コンポーネントからの変更でも、親の共有stateが更新され、その値が両方に再び流れます。

同期するフォームフィールドの例

スライダーと数値入力が、同じ値を操作します。両方が親から値とonChangeを受け取ります。どちらかのコンポーネントを変更すると、もう一方も自動的に更新されます。

function VolumeControl() {
  const [vol, setVol] = useState(50);
  return (
    <>
      <input type="range" value={vol} onChange={e => setVol(+e.target.value)} />
      <input type="number" value={vol} onChange={e => setVol(+e.target.value)} />
    </>
  );
}

イベントバスのアンチパターンを避ける

Reactで兄弟コンポーネント間の通信に、グローバルイベントエミッター（EventEmitter/PubSub）を使うことは避けてください。これはReactのデータフローを迂回するため、状態が見えにくくなり、デバッグも難しくなります。

兄弟コンポーネントが遠く離れている場合

兄弟コンポーネントがツリー内の異なる分岐の深い階層にある場合、共通の祖先までstateを持ち上げると、過剰なバケツリレーが発生します。このような場合はContextまたは状態管理ライブラリが適しています。

兄弟コンポーネントを疎結合に保つ

どちらの兄弟コンポーネントも、もう一方をimportしたり参照したりしないようにします。親コンポーネントが調整役になります。この分離により、一方の兄弟コンポーネントをもう一方に影響を与えずに簡単に置き換えられます。

兄弟コンポーネント間の通信をテストする

親コンポーネントをテストします。書き込み側の兄弟コンポーネントでアクションをシミュレートし（親のインターフェースを通じて）、読み取り側の兄弟コンポーネントが正しい値を表示することを検証します。親コンポーネントが、連携をテストする単位になります。

確認問題

2つのReactの兄弟コンポーネントは、どのように互いに通信しますか？

まとめ

兄弟コンポーネントは共通の親を通じて連携させます。親が共有stateを保持し、読み取り側にはデータを、書き込み側にはコールバックを渡します。どちらの兄弟コンポーネントも、もう一方について知る必要はありません。

次のレッスン：**適切なstateの配置場所を選ぶ** — ローカルstate、持ち上げたstate、グローバルstateのどれを選ぶか、判断の枠組みを使って決定します。

よくある質問