はじめに

コンポーネント構造のレビューで「見た目は動いているけど、どこが何を担当してるのかよく分からない」という場面に出くわすことがあります。
それは多くの場合、階層構造があいまいで、責務や粒度が揃っていないからです。

この記事では、構造のレイヤーが揃っていない／混在しているコンポーネントに対して、
レビューアーがどうやって構造を読み解き、どの粒度で指摘を入れるべきかを整理していきます。

「階層が曖昧」ってどういう状態？

「階層が曖昧」とは

Reactのコンポーネント設計において、役割の異なるコンポーネントが同一階層で並んでいたり、抽象度の揃わない構造が混在している状態を指します。
例：Containerと純UIコンポーネントが隣り合う、Layout直下にドメイン部品がある、など。

見た目は正常に表示されていても、構造的に認知しにくい・拡張しにくい・再利用しにくいという問題があります。

よくある構造パターン

階層構造の問題 症状 代表例
責務が交差している 同じ階層にUIと状態管理が混ざる UserCardがuseFetchUser()を内部に持つ
粒度が揃っていない 階層に大きさのムラがある Page内にButtonとChartContainerが並列
レイヤーが省略されている 中間抽象がない Layout内にuseRouter, fetch, dispatchなど

ケース1：見た目はシンプル、でも責務が不均衡

App.tsx 
export function App() {
  return (
    <Layout>
      <Header />
      <UserPanel />
      <Footer />
    </Layout>
  );
}

一見シンプルな構造ですが、UserPanelの中が以下のようになっていた場合は要注意です。

UserPanel.tsx 
export function UserPanel() {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(setUser);
  }, []);

  return <UserCard user={user} />;

@Reviewer
UI部品のはずの`UserPanel`がAPI通信と状態保持を兼ねています。
Container化し、責務を分離することで階層構造が明確になります。
}

ここでは、見た目の階層は揃っていても、内部構造が設計層を越えているという点がレビューのポイントです。

ケース2：責務分離が中途半端な構造

Dashboard.tsx 
return (
  <Main>
    <Title />
    <ChartContainer />
    <ExportButton />
  </Main>
);

@Reviewer
ExportButtonはUI部品ですが、ChartContainerは状態を抱えたContainerです。同一階層で抽象度が揃っていないため、構造が読み取りづらくなっています。

理想的には、ChartContainerを中間層にラップさせてContainer層を揃える構造にした方が、読み手の認知負荷が下がります。

構造の見直しパターン

パターン1：Container / Component のレイヤーを明示する

構成イメージ 
src/
 ├ components/
 │   └ ExportButton.tsx
 ├ containers/
 │   └ ChartPanelContainer.tsx
 └ pages/
     └ DashboardPage.tsx
  • ページ層 → Container層 → Component層、の三段構造を明確化
  • これにより「データを取得するのはどこか」「UIだけの部品はどこか」が一目瞭然に

パターン2：Layout直下にロジックを置かない

Layoutはあくまで「UIの骨格」の役割に徹し、ロジック（fetch, useSelector, etc.）はその下層へ。

正しい責務の切り方 
return (
  <Layout>
    <UserDashboardContainer />
  </Layout>
);

構造の混在を図示

UML Diagram

この構造だと、UI層の中にロジック層（API）が直接入ってしまっています。
改善案としては以下のような分離構成が望ましいです。

UML Diagram

レビュー観点のチェックリスト

まとめ

階層構造が曖昧なコンポーネントは、後から読む人にとって構造を理解しづらくし、再利用や修正も難しくしてしまいます。

レビューアーの役割は、「表示上の見た目」ではなく「構造としての責務の分離」が行われているかを見抜き、
レイヤーを明確に揃えることで構造を改善する提案を行うことです。

最小のステップではありますが、Container導入・UI専用部品の明確化といった分離を意識するだけで、構造の可読性と保守性は大きく改善されます。