はじめに

責務分離、関心の分離、再利用性──。
Reactコンポーネントの設計でこれらを意識するのは良いことですが、分ければ分けるほどよくなるというわけではありません。

むしろ実務では「細かく分けすぎて、逆に読めなくなってる」構造が多く見受けられます。
この記事では、分離しすぎた構造が可読性やチーム理解を下げていないかをレビューアーの視点で判断し、再統合や整理を提案するための観点を解説します。

「分けすぎて読みにくい」構造の兆候

過剰分離とは

本来1つのまとまりで理解できるロジックや構造を、機械的に関数・Hook・ファイルへ分けすぎることで、かえって構造の把握が難しくなる状態を指します。

よくある兆候としては次のようなものがあります：

  • Custom Hookが1行だけの処理をラップして複数存在
  • Containerが極端に薄く、Viewと役割が曖昧
  • Layout、Section、Contentなどの抽象名が多層に重なっている
  • 構造を追うために5ファイル以上を開く必要がある

実例：分けすぎて構造が逆に不明瞭

DashboardContainer.tsx 
const { user } = useUser();
const { chartData } = useChart();
return <DashboardView user={user} chartData={chartData} />;
DashboardView.tsx 
return (
  <Layout>
    <UserSummary user={user} />
    <ChartSection data={chartData} />
  </Layout>
);
ChartSection.tsx 
return (
  <ChartWrapper>
    <ChartBody data={data} />
  </ChartWrapper>
);

一見整理されているように見えますが、中身を把握するためにはHook・View・Sectionと3階層以上を同時に読む必要があり、実装の意図がつかみにくくなっています。

レビューでチェックすべき観点

観点 チェック内容 対応方針
HookやComponentの数が多すぎないか？ 機械的にuseXが量産されていないか 同一責務なら統合を検討
各層に明確な責務があるか？ Container/View/Sectionなどの役割が重複していないか 責務整理 or 命名再考
抽象化がUI構造に合っているか？ 見た目と構造の粒度が一致しているか Layoutを減らし役割を再考
コードリーディングに冗長なファイル横断が必要か？ 主要ロジックが分断されていないか 重要な処理は1ファイルに集約可

改善例：再統合による構造の整理

統合後のDashboard.tsx 
export function Dashboard() {
  const [user, setUser] = useState(null);
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    fetchUser().then(setUser);
    fetchChart().then(setChartData);
  }, []);

  return (
    <div className="dashboard">
      <UserSummary user={user} />
      <Chart data={chartData} />
    </div>
  );
}

すべてを1ファイルに書く必要はありませんが、「分離する理由が説明できない構造なら、統合を検討すべき」です。

UMLで比較（分離しすぎ構造 vs 統合構造）

UML Diagram
UML Diagram

構造が深くなりすぎると、見通しが悪くなるだけでなく、レビュー観点も散漫になります。

コメントテンプレート（レビュー用）

分離過剰の指摘 
@Reviewer: 各Hookやコンポーネントが薄く分離されすぎており、構造の意図が逆に読みにくくなっています。機能ごとの統合や責務単位での再構成を検討すると、可読性が高まります。
改善提案 
- const { user } = useUser();
- const { chartData } = useChart();
- return <DashboardView ... />
+ useEffect(() => {
+   fetchUser().then(setUser);
+   fetchChart().then(setChartData);
+ }, []);
+ return (
+   <div>
+     <UserSummary user={user} />
+     <Chart data={chartData} />
+   </div>
+ );

まとめ

Reactにおける責務分離は設計の基本ですが、「分けた理由が薄いまま」分離だけが進んでしまうと、
構造の本質が見えなくなり、逆に読み手やチームの認知コストを上げてしまいます。

レビューアーとしては「この分離、本当に読みやすさにつながっているか？」を常に問い、
分離と統合のバランスを取りながら、構造を支える判断をしていくことが求められます。