React 入門：コンポーネント作成の考え方
React を学び始めると最初に直面するのが「どこまでをコンポーネントに分けるべきか？」という悩みです。コンポーネントはアプリを構成する部品ですが、適切に分けることでコードが整理され、再利用性や保守性も向上します。この記事では、初心者が押さえておきたい「コンポーネント作成の考え方」を解説します。
1. コンポーネントは「部品」として考える
React のコンポーネントは、画面を構成する小さな部品です。例えば以下のように分けられます。
- ボタン
- 入力フォーム
- ヘッダーやフッター
- カード（タイトル、画像、説明文をまとめたもの）
ポイントは「再利用できる単位」で切り出すこと」 です。
例：カード UI を 1 つのコンポーネントにする
function Card({ title, description }) {
return (
<div className="card">
<h3>{title}</h3>
<p>{description}</p>
</div>
);
}
これを複数回使えば、同じデザインのカードを簡単に表示できます。
2. 単一責任の原則（Single Responsibility Principle）
コンポーネントは 「ひとつの役割に集中する」 のが理想です。
例えば「ユーザーリストを表示する」コンポーネントが「ユーザーを API から取得する処理」まで持ってしまうと責務が増えすぎます。
👉 良い分割の例
UserList：ユーザー一覧を表示するUserItem：ユーザー 1 人分の表示を担当useUsers：ユーザー取得のロジック（カスタムフック）
こうすることで、見た目とロジックを分離でき、保守性が上がります。
3. 再利用性を意識する
「この UI は他の場所でも使えるか？」と考えるのも重要です。
例えば「青いボタン」と「赤いボタン」をそれぞれコンポーネントにするよりも、「色を props で指定できるボタン」を作った方が再利用しやすいです。
function Button({ label, color }) {
return <button style={{ backgroundColor: color }}>{label}</button>;
}
使い方：
<Button label="保存" color="blue" />
<Button label="削除" color="red" />
4. コンテナとプレゼンテーションの分離
よくある考え方として「コンテナコンポーネント」と「プレゼンテーションコンポーネント」に分ける手法があります。
- プレゼンテーションコンポーネント：見た目に専念（例：Button, Card）
- コンテナコンポーネント：データ取得や状態管理を担当
例：
// プレゼンテーション（見た目だけ）
function UserList({ users }) {
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
// コンテナ（データ取得 + 表示）
function UserListContainer() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("/api/users")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);
return <UserList users={users} />;
}
こうすると見た目の部分だけを簡単にテストしたり、別のデータソースに差し替えたりできます。
5. 小さく始めて必要に応じて分割
最初から「完璧な分割」を目指す必要はありません。
実際にアプリを作りながら「この部分が重複してきたな」「役割が混ざっているな」と感じたタイミングでコンポーネントを切り出すのが現実的です。
6. コンポーネント分割の目安チェックリスト
- UI の一部を何度も使う → 切り出す
- 1 つのコンポーネントが長すぎる（100 行以上など） → 分割する
- 見た目とロジックが混ざっている → プレゼンテーションとコンテナを分ける
- 変更の影響範囲を小さくしたい → 独立したコンポーネントにする
まとめ
React のコンポーネント作成で大切なのは次のポイントです。
- 再利用できる部品として考える
- 単一責任の原則を守る
- 見た目とロジックを分ける
- 小さく始めて後から分割する