1. コンポーネントの責務とは何か

Reactにおける責務とは、そのコンポーネントが担当する仕事の範囲を指します。例えるなら、家事の分担のようなもので、一人が掃除も料理も洗濯も全部担当すると大変になります。コンポーネントも同じで、表示、処理、データ管理をすべて一つにまとめると複雑になります。

責務を意識することで、「このコンポーネントは何をするためのものか」がはっきりし、読みやすく、修正しやすいコードになります。

2. 関心分離という考え方

関心分離とは、見た目、動き、データの扱いといった関心ごとを分けて考える設計の考え方です。 Reactでは特に「見た目を表示する役割」と「状態を管理する役割」を分けると理解しやすくなります。

初心者のうちは難しく感じますが、「表示だけする部品」と「考える部品」を分けるイメージを持つと整理しやすくなります。

3. 責務を分けていない例

まずは、すべてを一つのコンポーネントに書いてしまった例を見てみましょう。この形は最初は楽ですが、機能が増えると急に読みにくくなります。


import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default App;

（数字が表示され、ボタンを押すと数が増えていきます）

4. 表示と処理を分けた設計

次に、表示だけを担当するコンポーネントと、状態を管理するコンポーネントに分けてみます。これが責務分離の基本形です。


import React from "react";

function CounterView({ count, onIncrement }) {
  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={onIncrement}>増やす</button>
    </div>
  );
}

export default CounterView;

5. 状態を管理する親コンポーネント

状態管理は親コンポーネントに任せます。表示側は「受け取ったものを表示するだけ」にするのがポイントです。


import React, { useState } from "react";
import CounterView from "./CounterView";

function App() {
  const [count, setCount] = useState(0);

  return (
    <CounterView
      count={count}
      onIncrement={() => setCount(count + 1)}
    />
  );
}

export default App;

（表示は同じですが、役割が明確に分かれています）