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

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 14：コンポーネント 前半 ― 「UIを部品として扱う」感覚を身につける
  2. Function Componentとは ― 「UIを返すただの関数」
    1. Reactのコンポーネントは“関数”です
  3. PascalCase ― 「コンポーネント名のルール」
    1. コンポーネント名は必ず先頭大文字
    2. 小文字との違い
  4. コンポーネント作成 ― 「UIをひとつの関数にまとめる」
    1. 最初のコンポーネントを作るテンプレート
    2. 少し複雑なコンポーネントを作る
  5. コンポーネント呼び出し ― 「部品として使う」
    1. <コンポーネント名 /> で呼び出す
    2. 呼び出しのイメージを「部品の組み立て」として捉える
  6. UIの部品化 ― 「コンポーネントにする意味」を理解する
    1. なぜ部品化するのか
    2. 部品化の具体例
  7. ミニテンプレート：DAY 14 前半の内容をまとめたコンポーネント構成
  8. DAY 14：コンポーネント 前半のまとめ
  9. DAY 14：コンポーネント 中盤 ― 「コンポーネントで画面を組み立てる」感覚を育てる
  10. Function Componentを「画面の設計単位」として捉える
    1. まずは「ページのざっくりした構成」を考える
    2. それぞれをFunction Componentとして定義する
  11. PascalCaseを「コンポーネントの名前付けルール」として定着させる
    1. コンポーネント名は「意味＋PascalCase」で付ける
  12. コンポーネント作成を「分割と整理」の視点で深掘りする
    1. 大きなJSXを「コンポーネントに分割する」練習
    2. コンポーネントに分割して整理する
  13. コンポーネント呼び出しを「部品の組み立て」として理解する
    1. 呼び出しの基本形を再確認する
    2. 呼び出し順が「画面の構造」になる
  14. UIの部品化を「再利用・拡張」の視点で深掘りする
    1. 同じ部品を別のページでも使う
  15. ミニテンプレート：DAY 14 中盤の「コンポーネント構成」例
  16. DAY 14：コンポーネント 中盤のまとめ
  17. DAY 14：コンポーネント 後半 ― 「コンポーネントを“使いこなす感覚”」を身につける
  18. Function Componentを「何度でも呼び出せる部品」として意識する
    1. 同じコンポーネントを複数回使う
  19. PascalCaseを「コンポーネントとタグを見分ける目印」として定着させる
    1. コンポーネントとHTMLタグの違いをコードから読み取る
  20. コンポーネント作成を「パターン化」して覚える
    1. コンポーネント作成の“型”を体に染み込ませる
  21. コンポーネント呼び出しを「画面の設計図」として使う
    1. 呼び出しの並びが「画面の構造」になる
  22. UIの部品化を「変更に強い設計」として捉える
    1. 部品化していると、変更が楽になる
  23. すべてを組み合わせた「DAY 14 コンポーネント総まとめテンプレート」
  24. DAY 14：コンポーネント 後半のまとめ

DAY 14：コンポーネント 前半 ― 「UIを部品として扱う」感覚を身につける

DAY 14は、React入門60日コースの中でも特に重要な回になります。 ここで扱う コンポーネント の考え方は、Reactのすべての土台になるからです。

この前半では、次のキーワードを丁寧に押さえていきます。

  • Function Component
  • PascalCase
  • コンポーネント作成
  • コンポーネント呼び出し
  • UIの部品化

「コンポーネントとは何か」を、 “なんとなく”ではなく“自分で作って呼び出せる”レベルまで持っていくことを目標にします。

Function Componentとは ― 「UIを返すただの関数」

Reactのコンポーネントは“関数”です

Reactのコンポーネントは、基本的に 「UIを返す関数」 です。 これを Function Component（関数コンポーネント） と呼びます。

最もシンプルな例を見てみます。

function Hello() {
  return <h1>Hello React!</h1>;
}
JSX

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

  1. function Hello() は、JavaScriptの通常の関数です。
  2. return <h1>Hello React!</h1>; で、JSX（UIの定義）を返しています。
  3. Reactは、この関数を「コンポーネント」として扱い、 <Hello /> と書かれた場所にこのUIを描画します。

重要ポイント：

  • Function Componentは「UIを返す関数」です。
  • 特別な構文ではなく、JavaScriptの関数にJSXを返させたものだと考えると理解しやすいです。

PascalCase ― 「コンポーネント名のルール」

コンポーネント名は必ず先頭大文字

Reactでは、コンポーネント名を PascalCase（先頭を含め、単語ごとに大文字で始める）で書くルールがあります。

例：

  • Hello
  • Header
  • UserProfile
  • LessonCard

なぜかというと、

  • JSXの中で <Hello /> のように書いたとき、 先頭が大文字なら「これはコンポーネントだ」とReactが判断するからです。
  • 逆に、先頭が小文字だと、<div> や <span> のような HTMLタグとして扱われる からです。

小文字との違い

function header() {
  return <h1>これは動いてほしくない例です</h1>;
}

function Header() {
  return <h1>これは正しいコンポーネントです</h1>;
}

function App() {
  return (
    <div>
      {/* これはHTMLタグとして扱われる可能性がある */}
      <header />

      {/* これはReactコンポーネントとして扱われる */}
      <Header />
    </div>
  );
}
JSX

重要ポイント：

  • コンポーネント名は必ず PascalCase で書きます。
  • 先頭小文字は「HTMLタグ」、先頭大文字は「Reactコンポーネント」として扱われる、という違いがあります。

コンポーネント作成 ― 「UIをひとつの関数にまとめる」

最初のコンポーネントを作るテンプレート

コンポーネント作成の基本形は、次のようになります。

function ComponentName() {
  return (
    <タグ>
      {/* JSXでUIを書く */}
    </タグ>
  );
}
JSX

具体的な例として、コースのタイトルを表示するコンポーネントを作ってみます。

function CourseTitle() {
  return <h1>React入門 60日コース</h1>;
}
JSX

これで、

  • CourseTitle という名前のコンポーネントができました。
  • このコンポーネントは、呼び出されると <h1>React入門 60日コース</h1> を表示します。

少し複雑なコンポーネントを作る

次に、プロフィールカードをコンポーネントとして作ってみます。

function ProfileCard() {
  return (
    <div>
      <h2>受講者さんのプロフィール</h2>
      <p>React入門 60日コースを受講中です。</p>
    </div>
  );
}
JSX

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

  1. function ProfileCard() でコンポーネントを定義しています。
  2. return (...) の中に、複数の要素を含んだJSXを書いています。
  3. ProfileCardは「プロフィールカードというUIの部品」を表すコンポーネントになっています。

重要ポイント：

  • コンポーネントは「UIのひとまとまり」を表す関数です。
  • 「この部分はひとつの意味を持っている」と感じたら、それをコンポーネントに切り出すイメージを持つとよいです。

コンポーネント呼び出し ― 「部品として使う」

<コンポーネント名 /> で呼び出す

作ったコンポーネントは、JSXの中で タグのように書いて呼び出します。

function App() {
  return (
    <div>
      <CourseTitle />
      <ProfileCard />
    </div>
  );
}
JSX

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

  1. Appコンポーネントは、画面全体を表す「親コンポーネント」です。
  2. Appの中で <CourseTitle /> と <ProfileCard /> を呼び出しています。
  3. Reactは、CourseTitle と ProfileCard をそれぞれ実行し、 返されたJSXを画面に描画します。

重要ポイント：

  • コンポーネントは「タグのように呼び出す」ことで使います。
  • <CourseTitle /> のように書くことで、「ここにこの部品を差し込む」という意味になります。

呼び出しのイメージを「部品の組み立て」として捉える

コンポーネント呼び出しは、 UIを「部品として組み立てる」行為だと考えると分かりやすいです。

例として、次のような構成を考えます。

function Header() {
  return <header>ヘッダーです</header>;
}

function Main() {
  return <main>メインコンテンツです</main>;
}

function Footer() {
  return <footer>フッターです</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}
JSX

ここでは、

  • Header・Main・Footerという「部品」を作り
  • Appの中でそれらを組み合わせて、1つの画面を作っています。

重要ポイント：

  • コンポーネント呼び出しは「部品を組み立てる」イメージです。
  • 大きな画面を、小さなコンポーネントの組み合わせとして考えることで、見通しが良くなります。

UIの部品化 ― 「コンポーネントにする意味」を理解する

なぜ部品化するのか

UIをコンポーネントとして部品化するメリットは、次のように整理できます。

  • 再利用できる → 同じUIを別の場所でも使い回せる。
  • 修正が楽になる → コンポーネントを1箇所直せば、使っているすべての場所に反映される。
  • 責任が分かれる → 「ヘッダーはHeader」「プロフィールはProfileCard」のように、役割ごとにコードを分けられる。
  • 読みやすくなる → 大きなJSXをそのまま書くより、コンポーネントに分けたほうが構造が理解しやすい。

部品化の具体例

たとえば、次のような「レッスンカード」を考えます。

function LessonCard() {
  return (
    <div>
      <h3>DAY 14：コンポーネント</h3>
      <p>Function ComponentでUIを部品化します。</p>
    </div>
  );
}
JSX

これを、Appの中で複数回使うことができます。

function App() {
  return (
    <div>
      <CourseTitle />
      <LessonCard />
      <LessonCard />
      <LessonCard />
    </div>
  );
}
JSX

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

  1. LessonCardは「レッスン情報を表示する部品」です。
  2. Appの中で、同じLessonCardを何度も呼び出しています。
  3. 将来、LessonCardの見た目を変えたくなったときは、 LessonCardコンポーネントだけを修正すれば、すべての場所に反映されます。

重要ポイント：

  • UIの部品化は、「同じ構造を何度も書かないための工夫」です。
  • コンポーネントとして切り出すことで、再利用性・保守性・読みやすさが大きく向上します。

ミニテンプレート：DAY 14 前半の内容をまとめたコンポーネント構成

最後に、DAY 14 前半の学習項目をすべて含んだミニテンプレートを示します。

function CourseTitle() {
  return <h1>React入門 60日コース</h1>;
}

function ProfileCard() {
  return (
    <div>
      <h2>受講者さんのプロフィール</h2>
      <p>このコースでReactコンポーネントの基礎を学びます。</p>
    </div>
  );
}

function LessonCard() {
  return (
    <div>
      <h3>DAY 14：コンポーネント</h3>
      <p>Function ComponentでUIを部品化します。</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <CourseTitle />
      <ProfileCard />
      <LessonCard />
    </div>
  );
}

export default App;
JSX

このコードには、

  • Function Component
  • PascalCase（CourseTitle, ProfileCard, LessonCard, App）
  • コンポーネント作成（function ...）
  • コンポーネント呼び出し（<CourseTitle /> など）
  • UIの部品化（タイトル・プロフィール・レッスンカードを分割）

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

DAY 14：コンポーネント 前半のまとめ

この前半では、

  • Reactのコンポーネントが「UIを返す関数（Function Component）」であること
  • コンポーネント名をPascalCaseで書くことで、Reactがそれを「コンポーネント」と認識すること
  • コンポーネント作成の基本形（function コンポーネント名() { return JSX; }）を確認したこと
  • <コンポーネント名 /> という形で呼び出し、部品として画面に組み込む流れを理解したこと
  • UIの部品化によって、再利用性・保守性・読みやすさが向上すること

をステップバイステップで整理しました。

中盤・後半では、 ここで作ったコンポーネントに「データ（props）」や「状態（State）」を持たせていきながら、 より実践的なコンポーネント設計へと進んでいくことになります。

DAY 14：コンポーネント 中盤 ― 「コンポーネントで画面を組み立てる」感覚を育てる

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

  • Function Component
  • PascalCase
  • コンポーネント作成
  • コンポーネント呼び出し
  • UIの部品化

を、もう一歩踏み込んで「画面全体をコンポーネントで設計する」練習をしていきます。 ここでは、1つの小さなページを題材にして、コンポーネントを分割・命名・呼び出しする流れをステップバイステップで確認します。

Function Componentを「画面の設計単位」として捉える

まずは「ページのざっくりした構成」を考える

Reactで画面を作るときは、いきなりコードを書くのではなく、 次のように「ざっくりした構成」をイメージすると設計しやすくなります。

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

  • 上部：コースタイトル＋ユーザー名 → Header
  • 中央左：進捗表示 → Progress
  • 中央右：レッスン一覧 → LessonList
  • 下部：コピーライト → Footer

この「役割ごとのまとまり」が、そのまま Function Component になります。

それぞれをFunction Componentとして定義する

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

ここでのポイントは、

  • どれも「UIを返す関数」＝Function Componentであること
  • 役割ごとに関数を分けることで、画面の構造がはっきり見えること

です。

重要ポイント：

  • Function Componentは「画面の役割ごとのまとまり」を表す単位です。
  • 設計の段階で「どんな部品に分けるか」を意識すると、コードが整理されやすくなります。

PascalCaseを「コンポーネントの名前付けルール」として定着させる

コンポーネント名は「意味＋PascalCase」で付ける

コンポーネント名は、次の2つを満たすと読みやすくなります。

  • 意味が分かる名前（何をするコンポーネントかが伝わる）
  • PascalCase（先頭を含め、単語ごとに大文字で始める）

例：

  • Header → 画面上部のヘッダー
  • Progress → 進捗表示
  • LessonList → レッスン一覧
  • Footer → フッター

逆に、次のような名前は避けたほうがよいです。

  • Comp1, TestComponent → 何をするか分からない
  • header, lessonlist → 先頭小文字で、HTMLタグと紛らわしい

重要ポイント：

  • コンポーネント名は「意味が分かるPascalCase」で付けます。
  • これは、チーム開発でも個人開発でも通用する基本的なルールです。

コンポーネント作成を「分割と整理」の視点で深掘りする

大きなJSXを「コンポーネントに分割する」練習

次のような「1つのコンポーネントに全部詰め込んだ例」を考えてみます。

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

      <main>
        <section>
          <h2>学習進捗</h2>
          <p>完了レッスン：5 / 60</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>
          </ul>
        </section>
      </main>

      <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</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>
  );
}

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

このように分割すると、

  • Headerはヘッダーだけ
  • Progressは進捗だけ
  • LessonListはレッスン一覧だけ
  • Footerはフッターだけ

というように、責任がはっきり分かれます。

重要ポイント：

  • コンポーネント作成は「大きなUIを意味ごとに分割する」作業です。
  • 分割すればするほど、読みやすさ・修正のしやすさが向上します。

コンポーネント呼び出しを「部品の組み立て」として理解する

呼び出しの基本形を再確認する

コンポーネント呼び出しの基本形は、とてもシンプルです。

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

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

  1. Appは「ページ全体」を表すコンポーネントです。
  2. Appの中で <Header /> などを呼び出しています。
  3. Reactは、Header・Progress・LessonList・Footerをそれぞれ実行し、 返されたJSXを組み合わせて1つの画面にします。

呼び出し順が「画面の構造」になる

コンポーネント呼び出しの順番は、そのまま画面の構造になります。

  • 上にHeader
  • 中央にProgressとLessonList
  • 下にFooter

というように、コードを読むだけで画面の構成がイメージできるようになります。

重要ポイント：

  • コンポーネント呼び出しは「画面の設計図」を書く行為です。
  • <Header /> のような呼び出しを並べることで、「このページはこういう構成です」と宣言できます。

UIの部品化を「再利用・拡張」の視点で深掘りする

同じ部品を別のページでも使う

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

別のページでもそのまま使えます。

function LessonPage() {
  return (
    <div>
      <Header />
      <main>
        <h2>DAY 14：コンポーネント</h2>
        <p>Function ComponentでUIを部品化します。</p>
      </main>
      <Footer />
    </div>
  );
}
JSX

重要ポイント：

  • UIの部品化は「同じ見た目・同じ役割を持つ部分」をコンポーネントとして切り出すことです。
  • 一度作った部品を、別の画面でも何度でも使えるようになるのが、Reactの大きな強みです。

ミニテンプレート：DAY 14 中盤の「コンポーネント構成」例

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

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>
  );
}

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

export default App;
JSX

この構成を実際に書いて動かしてみることで、

  • Function Component
  • PascalCase
  • コンポーネント作成
  • コンポーネント呼び出し
  • UIの部品化

を、コードと画面の両方で体感できるようになります。

DAY 14：コンポーネント 中盤のまとめ

この中盤では、

  • Function Componentを「画面の役割ごとのまとまり」として捉え直したこと
  • PascalCaseで意味のあるコンポーネント名を付けることで、構造が分かりやすくなること
  • 大きなJSXをコンポーネントに分割し、「責任の分離」と「読みやすさ」を両立させる練習をしたこと
  • <コンポーネント名 /> の呼び出しが「画面の設計図」になることを確認したこと
  • UIの部品化によって、別ページでも同じコンポーネントを再利用できるイメージを持てたこと

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

後半では、 ここで作ったコンポーネントに「データ（props）」を渡しながら、 同じコンポーネントを違う内容で使い回す、より実践的な部品化へと進んでいきます。

DAY 14：コンポーネント 後半 ― 「コンポーネントを“使いこなす感覚”」を身につける

DAY 14の後半では、これまでに学んだ

  • Function Component
  • PascalCase
  • コンポーネント作成
  • コンポーネント呼び出し
  • UIの部品化

を、「知っている」から「自然に使える」に近づけることを目標にします。 ここでは、同じコンポーネントを複数パターンで使い回すことを意識しながら、 Reactらしい画面の組み立て方をステップバイステップで確認していきます。

Function Componentを「何度でも呼び出せる部品」として意識する

同じコンポーネントを複数回使う

まず、「レッスンカード」を1つのFunction Componentとして定義します。

function LessonCard() {
  return (
    <div>
      <h3>DAY 14：コンポーネント</h3>
      <p>Function ComponentでUIを部品化します。</p>
    </div>
  );
}
JSX

これを、Appの中で複数回呼び出してみます。

function App() {
  return (
    <div>
      <h1>React入門 60日コース</h1>

      <LessonCard />
      <LessonCard />
      <LessonCard />
    </div>
  );
}
JSX

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

  1. LessonCardは「レッスン情報を表示するUIの部品」です。
  2. Appの中で <LessonCard /> を3回呼び出しています。
  3. Reactは、LessonCardを3回実行し、それぞれの場所に同じUIを描画します。

重要ポイント：

  • Function Componentは「何度でも呼び出せる部品」です。
  • 一度定義したコンポーネントを、必要なだけ繰り返し使えるのがReactの強みです。

PascalCaseを「コンポーネントとタグを見分ける目印」として定着させる

コンポーネントとHTMLタグの違いをコードから読み取る

次のコードを見てみます。

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

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>ここにメインコンテンツが入ります。</p>
      </main>
      <footer>© 2026 React入門 60日コース</footer>
    </div>
  );
}
JSX

ここでのポイントは、

  • <Header /> → 先頭大文字 → Reactコンポーネント
  • <header> → 先頭小文字 → HTMLタグ
  • <footer> → HTMLタグ

というように、PascalCaseかどうかで「コンポーネントかタグか」が一目で分かることです。

重要ポイント：

  • コンポーネント名はPascalCaseで書くことで、「これはReactコンポーネントです」と宣言していることになります。
  • コードを読むときも、「大文字ならコンポーネント、小文字ならタグ」という目印として機能します。

コンポーネント作成を「パターン化」して覚える

コンポーネント作成の“型”を体に染み込ませる

コンポーネント作成の基本パターンは、次のように覚えておくと便利です。

function コンポーネント名() {
  return (
    // JSX（UIの定義）
  );
}
JSX

これを、いくつかの例で確認してみます。

function CourseTitle() {
  return <h1>React入門 60日コース</h1>;
}

function ProfileCard() {
  return (
    <div>
      <h2>受講者さんのプロフィール</h2>
      <p>このコースでReactコンポーネントの基礎を学びます。</p>
    </div>
  );
}

function LessonCard() {
  return (
    <div>
      <h3>DAY 14：コンポーネント</h3>
      <p>Function ComponentでUIを部品化します。</p>
    </div>
  );
}
JSX

重要ポイント：

  • 「function＋PascalCase名＋return JSX」という形を、手が勝手に書けるレベルまで繰り返すと、挫折しにくくなります。
  • コンポーネント作成は、特別なことではなく「UIを返す関数を書く」だけだと捉えると気が楽になります。

コンポーネント呼び出しを「画面の設計図」として使う

呼び出しの並びが「画面の構造」になる

次のようなAppコンポーネントを考えてみます。

function App() {
  return (
    <div>
      <CourseTitle />
      <ProfileCard />

      <section>
        <h2>今日のレッスン</h2>
        <LessonCard />
      </section>
    </div>
  );
}
JSX

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

  1. CourseTitle → 画面のタイトル部分
  2. ProfileCard → プロフィール部分
  3. LessonCard → 今日のレッスンの説明部分

というように、コンポーネント呼び出しの並びが、そのまま画面の構造になっています。

重要ポイント：

  • <コンポーネント名 /> の並びは、「このページはこういう部品で構成されています」という宣言です。
  • 呼び出し方を見れば、画面の設計がイメージできるようになるのが理想です。

UIの部品化を「変更に強い設計」として捉える

部品化していると、変更が楽になる

たとえば、LessonCardの見た目を少し変えたくなったとします。

function LessonCard() {
  return (
    <div>
      <h3>DAY 14：コンポーネント</h3>
      <p>Function ComponentでUIを部品化します。</p>
    </div>
  );
}
JSX

これを、次のように変更します。

function LessonCard() {
  return (
    <div>
      <h3>DAY 14：コンポーネント</h3>
      <p>Function ComponentでUIを部品化します。</p>
      <p>このレッスンは特に重要です。</p>
    </div>
  );
}
JSX

App側はそのままでも、すべての<LessonCard />呼び出しに変更が反映されます。

function App() {
  return (
    <div>
      <CourseTitle />
      <ProfileCard />

      <section>
        <h2>今日のレッスン</h2>
        <LessonCard />
      </section>
    </div>
  );
}
JSX

重要ポイント：

  • UIを部品化しておくと、「1箇所直せば全部に効く」状態になります。
  • これは、実務でも非常に重要な考え方であり、Reactが好まれる理由のひとつです。

すべてを組み合わせた「DAY 14 コンポーネント総まとめテンプレート」

最後に、DAY 14の学習項目をすべて含んだテンプレートを示します。

function CourseTitle() {
  return <h1>React入門 60日コース</h1>;
}

function ProfileCard() {
  return (
    <div>
      <h2>受講者さんのプロフィール</h2>
      <p>このコースでReactコンポーネントの基礎を学びます。</p>
    </div>
  );
}

function LessonCard() {
  return (
    <div>
      <h3>DAY 14：コンポーネント</h3>
      <p>Function ComponentでUIを部品化します。</p>
      <p>このレッスンは特に重要です。</p>
    </div>
  );
}

function App() {
  return (
    <div>
      {/* コースタイトル */}
      <CourseTitle />

      {/* プロフィール */}
      <ProfileCard />

      {/* 今日のレッスン */}
      <section>
        <h2>今日のレッスン</h2>
        <LessonCard />
      </section>
    </div>
  );
}

export default App;
JSX

このコードには、

  • Function Component（CourseTitle, ProfileCard, LessonCard, App）
  • PascalCaseでの命名
  • コンポーネント作成（function コンポーネント名() { return JSX; }）
  • コンポーネント呼び出し（<CourseTitle /> など）
  • UIの部品化（タイトル・プロフィール・レッスンカードを分割）

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

DAY 14：コンポーネント 後半のまとめ

この後半では、

  • Function Componentを「何度でも呼び出せるUIの部品」として捉え直したこと
  • PascalCaseが「コンポーネントとHTMLタグを見分ける目印」であることを、コードレベルで確認したこと
  • コンポーネント作成の型（function＋PascalCase＋return JSX）をパターンとして定着させたこと
  • コンポーネント呼び出しの並びが、そのまま画面の設計図になることを体感したこと
  • UIの部品化によって、「1箇所の変更が全体に効く」変更に強い設計になることを理解したこと

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

ここまで来た読者のみなさんは、 すでに「コンポーネントで画面を組み立てる」というReactの根本的な考え方を身につけています。 次のDAYからは、このコンポーネントに「データ（props）」や「状態（State）」を持たせていきながら、 より動的でインタラクティブなUIへと進んでいくことになります。

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