モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 15：コンポーネント分割

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 15：コンポーネント分割 前半 ― 「親と子で画面を組み立てる」考え方を身につける
  2. 親コンポーネントと子コンポーネントのイメージをつかむ
    1. まずは「全体」と「部分」を意識する
    2. 親コンポーネントの役割
    3. 子コンポーネントの役割
  3. 親子コンポーネントの基本構成をコードで見てみる
    1. 子コンポーネントを先に定義する
    2. 親コンポーネントで「全体」を組み立てる
  4. 再利用の視点から親子コンポーネントを見る
    1. 子コンポーネントは「どこでも使える部品」
  5. 責務（責任）を意識したコンポーネント分割
    1. 「このコンポーネントは何を担当するのか」を言語化する
  6. 分割の基準を「具体的なチェックポイント」として持つ
    1. 分割の基準 1：意味のあるまとまりかどうか
    2. 分割の基準 2：1コンポーネントの長さ
    3. 分割の基準 3：責務が増えすぎていないか
  7. ミニテンプレート：DAY 15 前半の「親子コンポーネント構成」例
  8. DAY 15：コンポーネント分割 前半のまとめ
  9. DAY 15：コンポーネント分割 中盤 ― 「どこまで分けるか」を具体的なコードで体感する
  10. 親コンポーネントを「画面の司令塔」として設計する
    1. まずは「画面の全体像」を言葉で描く
    2. 親コンポーネントは「構成だけ」に集中させる
  11. 子コンポーネントを「責務ごとの担当者」として設計する
    1. 子コンポーネントは「1つの役割」に集中させる
  12. 再利用の視点で「分割してよかったか」を確認する
    1. 同じ子コンポーネントを別の親でも使ってみる
  13. 責務の分け方を「悪い例」と「良い例」で比較する
    1. 悪い例：責務を詰め込みすぎた親コンポーネント
    2. 良い例：責務を分けた親子構成
  14. 分割の基準を「実際の判断フロー」として持つ
    1. 分割するかどうか迷ったときのチェックリスト
  15. ミニテンプレート：DAY 15 中盤の「親子＋再利用」構成例
  16. DAY 15：コンポーネント分割 中盤のまとめ
  17. DAY 15：コンポーネント分割 後半 ― 「迷わず分割できる自分」をつくる
  18. 親コンポーネントを「ページの入口」として設計する
    1. ページ全体を親コンポーネントとして捉える
  19. 子コンポーネントを「役割ごとの専門家」として設計する
    1. 子コンポーネントを役割ごとに分ける
  20. 再利用を前提にした分割を意識する
    1. 同じ子コンポーネントを別ページでも使う
  21. 責務の分け方を「実務に近い形」でイメージする
    1. 責務が混ざっている状態を意識的に避ける
    2. 責務ごとにコンポーネントを分けた状態
  22. 分割の基準を「自分の中のルール」として持つ
    1. 分割の基準を言語化しておく
  23. DAY 15 後半の「コンポーネント分割まとめテンプレート」
  24. DAY 15：コンポーネント分割 後半のまとめ

DAY 15：コンポーネント分割 前半 ― 「親と子で画面を組み立てる」考え方を身につける

DAY 15では、これまで学んできたコンポーネントを どう分割し、どう組み合わせるか に焦点を当てていきます。 この前半のゴールは、次のキーワードを「感覚として理解する」ことです。

  • 親コンポーネント
  • 子コンポーネント
  • 再利用
  • 責務
  • 分割の基準

Reactで挫折しないためには、「コンポーネントをどう分けるか」がとても重要になります。 ここでは、シンプルな画面を題材にしながら、親子関係と分割の考え方をステップバイステップで整理していきます。

親コンポーネントと子コンポーネントのイメージをつかむ

まずは「全体」と「部分」を意識する

コンポーネント分割を考えるときは、 画面を「全体」と「部分」に分けて考えると分かりやすいです。

例：学習ダッシュボード画面

  • 全体：ダッシュボードページ → Dashboard（親コンポーネント）
  • 部分：
    • ヘッダー → Header（子コンポーネント）
    • 進捗表示 → Progress（子コンポーネント）
    • レッスン一覧 → LessonList（子コンポーネント）
    • フッター → Footer（子コンポーネント）

このように、「全体をまとめるコンポーネント」と「その中に含まれる部品のコンポーネント」がある状態を、 親コンポーネントと子コンポーネント と呼びます。

親コンポーネントの役割

親コンポーネントは、主に次のような役割を持ちます。

  • 画面全体の構成を決める
  • 子コンポーネントを並べて「レイアウト」を作る
  • 将来的には「データや状態」を管理し、子に渡す（DAY 16以降で扱います）

子コンポーネントの役割

子コンポーネントは、主に次のような役割を持ちます。

  • 特定の部分のUIを担当する（ヘッダー、カード、リストなど）
  • 自分の担当範囲だけに集中して実装する
  • 親から呼び出されて、画面の一部として使われる

親子コンポーネントの基本構成をコードで見てみる

子コンポーネントを先に定義する

まずは、子コンポーネントから定義してみます。

function Header() {
  return (
    <header>
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Progress() {
  return (
    <section>
      <h2>学習進捗</h2>
      <p>完了レッスン：5 / 60</p>
    </section>
  );
}

function LessonList() {
  return (
    <section>
      <h2>レッスン一覧</h2>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
        <li>DAY 13：JSX</li>
        <li>DAY 14：コンポーネント</li>
      </ul>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}
JSX

ここでは、

  • Header
  • Progress
  • LessonList
  • Footer

が、それぞれ「画面の一部分」を担当する子コンポーネントになっています。

親コンポーネントで「全体」を組み立てる

次に、これらをまとめる親コンポーネント Dashboard を作ります。

function Dashboard() {
  return (
    <div>
      <Header />
      <main>
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </div>
  );
}

export default Dashboard;
JSX

ここで起きていることをステップで整理すると、

  1. Dashboard は「ダッシュボード画面全体」を表す親コンポーネントです。
  2. Dashboardの中で、子コンポーネントである Header・Progress・LessonList・Footer を呼び出しています。
  3. Reactは、Dashboardを実行し、その中で呼び出された子コンポーネントを組み合わせて1つの画面を描画します。

重要ポイント：

  • 親コンポーネントは「全体の構成」を担当します。
  • 子コンポーネントは「それぞれの部分のUI」を担当します。
  • 親が子を呼び出すことで、画面が組み上がっていきます。

再利用の視点から親子コンポーネントを見る

子コンポーネントは「どこでも使える部品」

子コンポーネントの大きなメリットは、別の親コンポーネントでも使い回せることです。

たとえば、次のような Header と Footer を定義しておけば、

function Header() {
  return (
    <header>
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Footer() {
  return (
    <footer>
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}
JSX

Dashboard だけでなく、別のページでも使えます。

function LessonPage() {
  return (
    <div>
      <Header />
      <main>
        <h2>DAY 15：コンポーネント分割</h2>
        <p>親コンポーネントと子コンポーネントの関係を学びます。</p>
      </main>
      <Footer />
    </div>
  );
}
JSX

重要ポイント：

  • 子コンポーネントは「再利用可能なUIの部品」です。
  • 親コンポーネントが変わっても、同じ子コンポーネントを使い回せます。

責務（責任）を意識したコンポーネント分割

「このコンポーネントは何を担当するのか」を言語化する

コンポーネント分割で最も重要なのは、 「責務（責任）」を意識することです。

先ほどの例を、責務の観点から整理してみます。

  • Header → サイトタイトルとユーザーへの挨拶を表示する責務を持つ。
  • Progress → 学習進捗（完了レッスン数など）を表示する責務を持つ。
  • LessonList → レッスン一覧を表示する責務を持つ。
  • Footer → コピーライトなど、ページの締めくくりを表示する責務を持つ。
  • Dashboard → これらの部品を組み合わせて「ダッシュボード画面全体」を構成する責務を持つ。

このように「責務」を言語化しておくと、

  • どこに何を書けばいいか迷いにくくなる
  • コンポーネントが肥大化しにくくなる
  • 修正するときに「どのコンポーネントを触ればいいか」が分かりやすくなる

というメリットがあります。

重要ポイント：

  • コンポーネント分割は「責務を分ける」作業です。
  • 1つのコンポーネントに責務を詰め込みすぎないことが、挫折しないためのコツです。

分割の基準を「具体的なチェックポイント」として持つ

分割の基準 1：意味のあるまとまりかどうか

次のような問いを、自分に投げかけてみると分割の基準が見えてきます。

  • この部分は、名前を付けられるくらい意味のあるまとまりか？ → 「ヘッダー」「プロフィールカード」「レッスン一覧」など
  • もし別の画面でも使いたくなりそうか？ → 再利用の可能性があるなら、コンポーネントに切り出す価値が高いです。

分割の基準 2：1コンポーネントの長さ

1つのコンポーネントが、あまりにも長くなってきたら分割を検討します。

目安としては、

  • 画面スクロールしないと全体が見えない
  • 「ここからここまでが別の意味のまとまりだな」と感じる部分がある

といったときに、「この部分を別コンポーネントにしよう」と考えるとよいです。

分割の基準 3：責務が増えすぎていないか

1つのコンポーネントが、

  • ヘッダーも
  • メインコンテンツも
  • フッターも

すべて担当しているような状態は、責務が増えすぎています。

その場合は、

  • ヘッダー用コンポーネント
  • メイン用コンポーネント
  • フッター用コンポーネント

に分割して、責務を整理します。

重要ポイント：

  • 分割の基準は「意味のあるまとまり」「長さ」「責務の数」の3つを意識すると分かりやすいです。
  • 完璧を目指す必要はなく、「少し長いな」「少し詰め込みすぎだな」と感じたら分割を検討するくらいで十分です。

ミニテンプレート：DAY 15 前半の「親子コンポーネント構成」例

最後に、DAY 15 前半の内容をまとめたテンプレートを示します。

function Header() {
  return (
    <header>
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Progress() {
  return (
    <section>
      <h2>学習進捗</h2>
      <p>完了レッスン：5 / 60</p>
    </section>
  );
}

function LessonList() {
  return (
    <section>
      <h2>レッスン一覧</h2>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
        <li>DAY 13：JSX</li>
        <li>DAY 14：コンポーネント</li>
        <li>DAY 15：コンポーネント分割</li>
      </ul>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}

function Dashboard() {
  return (
    <div>
      <Header />
      <main>
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </div>
  );
}

export default Dashboard;
JSX

この構成には、

  • 親コンポーネント（Dashboard）
  • 子コンポーネント（Header, Progress, LessonList, Footer）
  • 再利用（HeaderとFooterは別ページでも使える）
  • 責務（それぞれが役割を持っている）
  • 分割の基準（意味のあるまとまりごとに分割されている）

がすべて含まれています。

DAY 15：コンポーネント分割 前半のまとめ

この前半では、

  • 親コンポーネントと子コンポーネントの関係を、「全体」と「部分」の視点から整理したこと
  • 親コンポーネントが「画面全体の構成」を担当し、子コンポーネントが「それぞれの部分のUI」を担当すること
  • 子コンポーネントが「再利用可能な部品」として、別の親コンポーネントでも使い回せること
  • 責務（責任）を意識してコンポーネントを分割することで、読みやすく修正しやすいコードになること
  • 分割の基準として「意味のあるまとまり」「長さ」「責務の数」をチェックポイントとして持つこと

をステップバイステップで確認しました。

中盤・後半では、 ここで学んだ親子関係に「データ（props）」を流し込んでいきながら、 より実践的なコンポーネント分割と再利用のパターンへと進んでいきます。

DAY 15：コンポーネント分割 中盤 ― 「どこまで分けるか」を具体的なコードで体感する

DAY 15の中盤では、前半で学んだ

  • 親コンポーネント
  • 子コンポーネント
  • 再利用
  • 責務
  • 分割の基準

を、もう一歩踏み込んで「実際のコード設計」に落とし込んでいきます。 ここでは、少しだけ複雑な画面を題材にして、 どこまで分割するか・どこを親にするか・どこを子にするか をステップバイステップで考えていきます。

親コンポーネントを「画面の司令塔」として設計する

まずは「画面の全体像」を言葉で描く

例として、次のような「学習ダッシュボード」を考えます。

  • 上部：ヘッダー（コース名＋ユーザー名）
  • 中央左：進捗カード（完了レッスン数・パーセンテージ）
  • 中央右：レッスン一覧（DAY 10〜DAY 15）
  • 下部：フッター（コピーライト）

この全体をまとめるコンポーネントを 親コンポーネント として Dashboard と名付けます。

親コンポーネントは「構成だけ」に集中させる

親コンポーネント Dashboard は、 できるだけ「構成（レイアウト）」に集中させるのがポイントです。

function Dashboard() {
  return (
    <div className="dashboard">
      <Header />
      <main className="dashboard-main">
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </div>
  );
}

export default Dashboard;
JSX

ここで起きていることを整理すると、

  1. Dashboard は「ダッシュボード画面全体」を表す親コンポーネントです。
  2. Header・Progress・LessonList・Footer を並べて、画面の構成を決めています。
  3. Dashboard自身は、細かいUIの中身には踏み込まず、「どの部品をどこに置くか」だけを担当しています。

重要ポイント：

  • 親コンポーネントは「画面の司令塔」として、構成・レイアウトに集中させると読みやすくなります。
  • 細かいUIの中身は、子コンポーネントに任せるのが基本方針です。

子コンポーネントを「責務ごとの担当者」として設計する

子コンポーネントは「1つの役割」に集中させる

先ほどの Dashboard に登場した子コンポーネントを、責務の観点から定義していきます。

function Header() {
  return (
    <header className="header">
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Progress() {
  return (
    <section className="progress">
      <h2>学習進捗</h2>
      <p>完了レッスン：5 / 60（8%）</p>
    </section>
  );
}

function LessonList() {
  return (
    <section className="lesson-list">
      <h2>レッスン一覧</h2>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
        <li>DAY 13：JSX</li>
        <li>DAY 14：コンポーネント</li>
        <li>DAY 15：コンポーネント分割</li>
      </ul>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}
JSX

それぞれの責務を言語化すると、

  • Header → タイトルと挨拶を表示する
  • Progress → 学習進捗を表示する
  • LessonList → レッスン一覧を表示する
  • Footer → コピーライトを表示する

となります。

重要ポイント：

  • 子コンポーネントは「1つの役割」に集中させることで、責務が明確になります。
  • 責務が明確だと、「このコンポーネントは何をするものか」がすぐに分かり、保守性が高まります。

再利用の視点で「分割してよかったか」を確認する

同じ子コンポーネントを別の親でも使ってみる

Header と Footer は、ダッシュボード以外のページでも使えそうです。 そこで、別の親コンポーネント LessonPage を作ってみます。

function LessonPage() {
  return (
    <div className="lesson-page">
      <Header />
      <main className="lesson-main">
        <h2>DAY 15：コンポーネント分割</h2>
        <p>親コンポーネントと子コンポーネントの関係を学びます。</p>
      </main>
      <Footer />
    </div>
  );
}
JSX

ここで起きていることを整理すると、

  1. LessonPage は「特定のレッスン詳細ページ」を表す親コンポーネントです。
  2. Header と Footer は、Dashboard と同じものを再利用しています。
  3. 中央部分だけが LessonPage 独自の内容になっています。

重要ポイント：

  • 再利用できる子コンポーネントは、分割の成功例です。
  • 「別の画面でも使えるか？」という視点は、分割の基準として非常に有効です。

責務の分け方を「悪い例」と「良い例」で比較する

悪い例：責務を詰め込みすぎた親コンポーネント

次のようなコードは、責務が詰め込みすぎている例です。

function BadDashboard() {
  return (
    <div>
      <header>
        <h1>React入門 60日コース</h1>
        <p>こんにちは、受講者さん</p>
      </header>

      <main>
        <section>
          <h2>学習進捗</h2>
          <p>完了レッスン：5 / 60（8%）</p>
        </section>

        <section>
          <h2>レッスン一覧</h2>
          <ul>
            <li>DAY 10：JavaScript総合演習</li>
            <li>DAY 11：React開発環境</li>
            <li>DAY 12：Reactとは</li>
            <li>DAY 13：JSX</li>
            <li>DAY 14：コンポーネント</li>
            <li>DAY 15：コンポーネント分割</li>
          </ul>
        </section>
      </main>

      <footer>
        <p>© 2026 React入門 60日コース</p>
      </footer>
    </div>
  );
}
JSX

問題点は、

  • BadDashboard が、ヘッダー・進捗・レッスン一覧・フッターのすべてを担当している
  • 責務が多すぎて、「どこを直せば何が変わるか」が分かりにくい
  • 別ページでヘッダーだけ使いたくなっても、切り出しにくい

というところです。

良い例：責務を分けた親子構成

これを、先ほどのように分割すると次のようになります。

function Header() {
  return (
    <header>
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Progress() {
  return (
    <section>
      <h2>学習進捗</h2>
      <p>完了レッスン：5 / 60（8%）</p>
    </section>
  );
}

function LessonList() {
  return (
    <section>
      <h2>レッスン一覧</h2>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
        <li>DAY 13：JSX</li>
        <li>DAY 14：コンポーネント</li>
        <li>DAY 15：コンポーネント分割</li>
      </ul>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}

function GoodDashboard() {
  return (
    <div>
      <Header />
      <main>
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </div>
  );
}
JSX

この構成では、

  • GoodDashboard は「構成」だけを担当
  • 各子コンポーネントは「自分のUIだけ」を担当
  • 責務が分かれているため、修正・再利用がしやすい

という状態になっています。

重要ポイント：

  • 悪い例を意識的に見ることで、「どこが詰め込みすぎなのか」が分かりやすくなります。
  • 良い例では、責務が分かれていることがコードから自然に伝わるのが理想です。

分割の基準を「実際の判断フロー」として持つ

分割するかどうか迷ったときのチェックリスト

コンポーネントを分割するか迷ったときは、次のような問いを自分に投げかけてみると判断しやすくなります。

  1. この部分に名前を付けられるか？
    • 例：「ヘッダー」「進捗カード」「レッスン一覧」
    • 名前が付けられるなら、コンポーネントにする候補です。
  2. 別の画面でも使いそうか？
    • 例：ヘッダーやフッターは、ほぼ確実に再利用されます。
    • 再利用の可能性があるなら、分割する価値が高いです。
  3. 1コンポーネントが長くなりすぎていないか？
    • スクロールしないと全体が見えない
    • 「ここからここまで別の意味のまとまりだな」と感じる部分がある → 分割を検討するサインです。
  4. 責務が増えすぎていないか？
    • 1つのコンポーネントが、ヘッダーもメインもフッターも担当している → 責務過多なので、分割したほうがよいです。

重要ポイント：

  • 分割の基準は「名前」「再利用」「長さ」「責務」の4つを意識すると判断しやすくなります。
  • 完璧を目指す必要はなく、「少し重いな」と感じたら分割を検討するくらいで十分です。

ミニテンプレート：DAY 15 中盤の「親子＋再利用」構成例

最後に、DAY 15 中盤の内容をまとめたテンプレートを示します。

function Header() {
  return (
    <header className="header">
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Progress() {
  return (
    <section className="progress">
      <h2>学習進捗</h2>
      <p>完了レッスン：5 / 60（8%）</p>
    </section>
  );
}

function LessonList() {
  return (
    <section className="lesson-list">
      <h2>レッスン一覧</h2>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
        <li>DAY 13：JSX</li>
        <li>DAY 14：コンポーネント</li>
        <li>DAY 15：コンポーネント分割</li>
      </ul>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}

function Dashboard() {
  return (
    <div className="dashboard">
      <Header />
      <main className="dashboard-main">
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </div>
  );
}

function LessonPage() {
  return (
    <div className="lesson-page">
      <Header />
      <main className="lesson-main">
        <h2>DAY 15：コンポーネント分割</h2>
        <p>親コンポーネントと子コンポーネントの関係を学びます。</p>
      </main>
      <Footer />
    </div>
  );
}

export default Dashboard;
JSX

この構成には、

  • 親コンポーネント（Dashboard, LessonPage）
  • 子コンポーネント（Header, Progress, LessonList, Footer）
  • 再利用（Header と Footer を複数の親で使い回し）
  • 責務（それぞれが役割を持っている）
  • 分割の基準（意味のあるまとまりごとに分割されている）

がすべて含まれています。

DAY 15：コンポーネント分割 中盤のまとめ

この中盤では、

  • 親コンポーネントを「画面の司令塔」として、構成・レイアウトに集中させる考え方を確認したこと
  • 子コンポーネントを「責務ごとの担当者」として、1つの役割に集中させる設計を体感したこと
  • 再利用の視点から、同じ子コンポーネントを別の親でも使い回せることを具体的なコードで確認したこと
  • 悪い例と良い例を比較しながら、「責務の詰め込みすぎ」がどこで起きるかを理解したこと
  • 分割の基準を「名前」「再利用」「長さ」「責務」の4つのチェックポイントとして持てるようになったこと

が大きなポイントになります。

後半では、 ここで学んだ親子構成に「データ（props）」を流し込みながら、 より柔軟で再利用性の高いコンポーネント分割へと進んでいきます。

DAY 15：コンポーネント分割 後半 ― 「迷わず分割できる自分」をつくる

DAY 15の後半では、これまでに扱ってきた

  • 親コンポーネント
  • 子コンポーネント
  • 再利用
  • 責務
  • 分割の基準

を、「頭で分かった」から「手が自然に動く」レベルに近づけることを目標にします。 ここでは、少しだけ現実的な画面構成を題材にして、 どこを親にして、どこを子にして、どう分割するか をステップバイステップで整理していきます。

親コンポーネントを「ページの入口」として設計する

ページ全体を親コンポーネントとして捉える

まず、「学習コースのトップページ」をイメージしてみます。

  • 上部：ヘッダー（コース名＋ユーザー名）
  • 中央：
    • 左側：進捗カード
    • 右側：レッスン一覧
  • 下部：フッター

このページ全体を表すコンポーネントを、親コンポーネントとして CoursePage と名付けます。

function CoursePage() {
  return (
    <div className="course-page">
      <Header />
      <main className="course-main">
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </div>
  );
}

export default CoursePage;
JSX

ここでのポイントは、

  • CoursePage は「ページ全体」を表す親コンポーネントであること
  • Header・Progress・LessonList・Footer を並べることで、ページの構成を宣言していること
  • 親コンポーネントは「どの部品をどこに置くか」に集中していること

です。

重要ポイント：

  • 親コンポーネントは「ページの入口」として、構成・レイアウトを担当します。
  • 細かいUIの中身は、子コンポーネントに任せることで、親の責務を軽くできます。

子コンポーネントを「役割ごとの専門家」として設計する

子コンポーネントを役割ごとに分ける

次に、CoursePage に登場した子コンポーネントを定義していきます。

function Header() {
  return (
    <header className="header">
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Progress() {
  return (
    <section className="progress">
      <h2>学習進捗</h2>
      <p>完了レッスン：5 / 60（8%）</p>
    </section>
  );
}

function LessonList() {
  return (
    <section className="lesson-list">
      <h2>レッスン一覧</h2>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
        <li>DAY 13：JSX</li>
        <li>DAY 14：コンポーネント</li>
        <li>DAY 15：コンポーネント分割</li>
      </ul>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}
JSX

それぞれの責務を言葉にすると、

  • Header → コースタイトルと挨拶を表示する
  • Progress → 学習進捗を表示する
  • LessonList → レッスン一覧を表示する
  • Footer → コピーライトを表示する

となります。

重要ポイント：

  • 子コンポーネントは「1つの役割」に集中させることで、責務が明確になります。
  • 責務が明確だと、「このコンポーネントは何をするものか」がすぐに分かり、保守性が高まります。

再利用を前提にした分割を意識する

同じ子コンポーネントを別ページでも使う

Header と Footer は、コーストップページ以外でも使えそうです。 そこで、別の親コンポーネント LessonDetailPage を作ってみます。

function LessonDetailPage() {
  return (
    <div className="lesson-detail-page">
      <Header />
      <main className="lesson-detail-main">
        <h2>DAY 15：コンポーネント分割</h2>
        <p>親コンポーネントと子コンポーネントの関係を学びます。</p>
      </main>
      <Footer />
    </div>
  );
}
JSX

ここで起きていることを整理すると、

  1. LessonDetailPage は「特定のレッスン詳細ページ」を表す親コンポーネントです。
  2. Header と Footer は、CoursePage と同じものを再利用しています。
  3. 中央部分だけが LessonDetailPage 独自の内容になっています。

重要ポイント：

  • 再利用できる子コンポーネントは、分割の成功例です。
  • 「別の画面でも使えるか？」という視点は、分割の基準として非常に有効です。

責務の分け方を「実務に近い形」でイメージする

責務が混ざっている状態を意識的に避ける

次のようなコードは、責務が混ざっている例です。

function MixedComponent() {
  return (
    <div>
      <header>
        <h1>React入門 60日コース</h1>
        <p>こんにちは、受講者さん</p>
      </header>

      <section>
        <h2>学習進捗</h2>
        <p>完了レッスン：5 / 60（8%）</p>
      </section>

      <section>
        <h2>レッスン一覧</h2>
        <ul>
          <li>DAY 10：JavaScript総合演習</li>
          <li>DAY 11：React開発環境</li>
          <li>DAY 12：Reactとは</li>
          <li>DAY 13：JSX</li>
          <li>DAY 14：コンポーネント</li>
          <li>DAY 15：コンポーネント分割</li>
        </ul>
      </section>

      <footer>
        <p>© 2026 React入門 60日コース</p>
      </footer>
    </div>
  );
}
JSX

問題点は、

  • ヘッダー・進捗・レッスン一覧・フッターがすべて1つのコンポーネントに詰め込まれている
  • 「どこを直せば何が変わるか」が分かりにくい
  • 再利用したくても、切り出しが必要になり手間が増える

というところです。

責務ごとにコンポーネントを分けた状態

これを、責務ごとに分割すると次のようになります。

function Header() {
  return (
    <header>
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Progress() {
  return (
    <section>
      <h2>学習進捗</h2>
      <p>完了レッスン：5 / 60（8%）</p>
    </section>
  );
}

function LessonList() {
  return (
    <section>
      <h2>レッスン一覧</h2>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
        <li>DAY 13：JSX</li>
        <li>DAY 14：コンポーネント</li>
        <li>DAY 15：コンポーネント分割</li>
      </ul>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}

function Dashboard() {
  return (
    <div>
      <Header />
      <main>
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </div>
  );
}
JSX

この構成では、

  • Dashboard は「構成」だけを担当
  • 各子コンポーネントは「自分のUIだけ」を担当
  • 責務が分かれているため、修正・再利用がしやすい

という状態になっています。

重要ポイント：

  • 責務が混ざっていると、コードが「なんとなく分かりにくい」状態になります。
  • 責務ごとにコンポーネントを分けることで、「このコンポーネントは何をするのか」が明確になります。

分割の基準を「自分の中のルール」として持つ

分割の基準を言語化しておく

コンポーネント分割の基準を、自分の中のルールとして持っておくと迷いにくくなります。 例えば、次のようなルールです。

  1. 名前が付けられるまとまりはコンポーネント候補
    • 「ヘッダー」「進捗カード」「レッスン一覧」「プロフィールカード」など
    • 名前が付けられるなら、コンポーネントにしてよいサインです。
  2. 別のページでも使いそうなら分割する
    • ヘッダー・フッター・カード・リストなどは再利用されやすいです。
    • 再利用の可能性があるなら、積極的に分割します。
  3. 1コンポーネントが長くなってきたら分割を検討する
    • スクロールしないと全体が見えない
    • 「ここからここまで別の意味のまとまりだな」と感じる部分がある → 分割のタイミングです。
  4. 責務が増えすぎていないかを常に意識する
    • 1つのコンポーネントが、ヘッダーもメインもフッターも担当している → 責務過多なので、分割したほうがよいです。

重要ポイント：

  • 分割の基準は「名前」「再利用」「長さ」「責務」の4つを意識すると判断しやすくなります。
  • 完璧な分割を目指す必要はなく、「少し重いな」と感じたら分割を検討するくらいで十分です。

DAY 15 後半の「コンポーネント分割まとめテンプレート」

最後に、DAY 15 後半の内容をすべて含んだテンプレートを示します。

function Header() {
  return (
    <header className="header">
      <h1>React入門 60日コース</h1>
      <p>こんにちは、受講者さん</p>
    </header>
  );
}

function Progress() {
  return (
    <section className="progress">
      <h2>学習進捗</h2>
      <p>完了レッスン：5 / 60（8%）</p>
    </section>
  );
}

function LessonList() {
  return (
    <section className="lesson-list">
      <h2>レッスン一覧</h2>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
        <li>DAY 13：JSX</li>
        <li>DAY 14：コンポーネント</li>
        <li>DAY 15：コンポーネント分割</li>
      </ul>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}

function CoursePage() {
  return (
    <div className="course-page">
      <Header />
      <main className="course-main">
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </div>
  );
}

function LessonDetailPage() {
  return (
    <div className="lesson-detail-page">
      <Header />
      <main className="lesson-detail-main">
        <h2>DAY 15：コンポーネント分割</h2>
        <p>親コンポーネントと子コンポーネントの関係を学びます。</p>
      </main>
      <Footer />
    </div>
  );
}

export default CoursePage;
JSX

このテンプレートには、

  • 親コンポーネント（CoursePage, LessonDetailPage）
  • 子コンポーネント（Header, Progress, LessonList, Footer）
  • 再利用（Header と Footer を複数の親で使い回し）
  • 責務（それぞれが役割を持っている）
  • 分割の基準（意味のあるまとまりごとに分割されている）

がすべて含まれています。

DAY 15：コンポーネント分割 後半のまとめ

この後半では、

  • 親コンポーネントを「ページの入口」として、構成・レイアウトに集中させる考え方を確認したこと
  • 子コンポーネントを「役割ごとの専門家」として、1つの責務に集中させる設計を体感したこと
  • 再利用の視点から、同じ子コンポーネントを複数の親で使い回せることを具体的なコードで確認したこと
  • 責務が混ざっている悪い例と、責務を分けた良い例を比較しながら、「どこで分割すべきか」の感覚を磨いたこと
  • 分割の基準を「名前」「再利用」「長さ」「責務」の4つのルールとして、自分の中に持てるようになったこと

が大きなポイントになります。

ここまで来た読者のみなさんは、 すでに「コンポーネントをどう分割し、どう組み立てるか」というReactの重要な考え方を身につけています。 次のDAYからは、この親子構成に「データ（props）」や「状態（State）」を流し込んでいきながら、 より柔軟でインタラクティブなUI設計へと進んでいくことになります。

スポンサーリンク
タイトルとURLをコピーしました