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

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 12：Reactとは 前半 ― 「画面を部品として考える」入り口に立つ
  2. Reactの特徴 ― 「UIを部品として組み立てるためのライブラリ」
    1. Reactは何をするためのものか
    2. Reactの大きな特徴
  3. 宣言的UI ― 「状態に応じた“あるべき姿”をコードで書く」
    1. 命令的UIとの違い
    2. Reactの宣言的な書き方
  4. コンポーネント ― 「画面を部品として分けて考える」
    1. コンポーネントとは何か
    2. 画面を「部品の組み合わせ」として考える
  5. 再利用 ― 「同じ部品を何度でも使える」というReactの強み
    1. 同じコンポーネントを複数箇所で使う
  6. Virtual DOMの基本イメージ ― 「差分だけを賢く更新する」
    1. DOMとは何か
    2. Virtual DOMとは
  7. 画面を Header / Main / Sidebar / Footer の部品として考える練習
  8. DAY 12：Reactとは 前半のまとめ
  9. DAY 12：Reactとは 中盤 ― 「コンポーネントとして画面を分解する」感覚を身につける
  10. Reactの特徴を「画面構成」で体感する
    1. 画面を“1枚の絵”ではなく“部品の集合”として見る
  11. 宣言的UIを「Header〜Footerの構成」で考える
    1. 「こう見えるべき」をコードで書く
  12. コンポーネントとして Header / Main / Sidebar / Footer を定義する
    1. Headerコンポーネント
    2. Mainコンポーネント
    3. Sidebarコンポーネント
    4. Footerコンポーネント
  13. コンポーネントを組み合わせて「レイアウト」を作る
    1. Layoutコンポーネントで Main と Sidebar を並べる
  14. 再利用のイメージを「Header〜Footer」で広げる
    1. 同じHeaderを別ページでも使う
  15. Virtual DOMの基本イメージを「部品の差し替え」で感じる
    1. 状態が変わったとき、Reactは何をしているか
  16. Header / Main / Sidebar / Footer を使った「練習テンプレート」
  17. DAY 12：Reactとは 中盤のまとめ
  18. DAY 12：Reactとは 後半 ― 「React的なものの見方」を自分の中に定着させる
  19. Reactの特徴を「設計の視点」からもう一度整理する
    1. Reactは“画面の設計思想”を変えるライブラリです
  20. 宣言的UIを「状態 × コンポーネント」で考える練習
    1. 状態によってHeaderの見え方を変える
    2. Mainの内容を「今日のレッスン」に応じて変える
  21. コンポーネントの責任分割を「設計図」として意識する
    1. 各コンポーネントの責任を言語化してみる
  22. 再利用を「設計の武器」として意識する
    1. Sidebarを別ページでもそのまま使う
  23. Virtual DOMを「差分更新のイメージ」で定着させる
    1. 状態が変わるとき、Reactは何をしているか
  24. Header / Main / Sidebar / Footer を使った「完成イメージテンプレート」
  25. DAY 12：Reactとは 後半のまとめ

DAY 12：Reactとは 前半 ― 「画面を部品として考える」入り口に立つ

DAY 12では、いよいよ Reactそのものの考え方に入っていきます。 この前半のゴールは、次のキーワードを「ふわっと」ではなく「イメージを持って」理解することです。

  • Reactの特徴
  • 宣言的UI
  • コンポーネント
  • 再利用
  • Virtual DOMの基本イメージ

そして、画面を

  • Header
  • Main
  • Sidebar
  • Footer

のような「部品」として考える練習をしていきます。

Reactの特徴 ― 「UIを部品として組み立てるためのライブラリ」

Reactは何をするためのものか

Reactは、ユーザーインターフェース（UI）を作るためのJavaScriptライブラリです。 「Webアプリの画面」を、

  • 小さな部品（コンポーネント）に分けて
  • 組み合わせて
  • 状態に応じて自動で更新してくれる

というスタイルで作れるようにしてくれます。

Reactの大きな特徴

Reactの特徴を、初心者向けにかみ砕いてまとめると次のようになります。

  • 宣言的UI → 「こういう状態のとき、画面はこう見えるべき」と“結果”をコードで書きます。
  • コンポーネント指向 → 画面を小さな部品（コンポーネント）に分けて、組み合わせて作ります。
  • 再利用性が高い → 一度作ったコンポーネントを、別の画面でも何度でも使えます。
  • Virtual DOM → 画面の差分だけを効率よく更新する仕組みを持っています。

この回では、特に 「宣言的UI」と「コンポーネント」 に意識を向けていきます。

宣言的UI ― 「状態に応じた“あるべき姿”をコードで書く」

命令的UIとの違い

従来のJavaScriptでは、次のような書き方をすることが多かったです。

const titleElement = document.getElementById('title');
titleElement.textContent = 'ログインしてください';

if (isLoggedIn) {
  titleElement.textContent = 'ようこそ！';
}
JavaScript

これは、

  • 「この要素を取ってきて」
  • 「このテキストを入れて」
  • 「条件によって書き換えて」

というように、手順（命令）を細かく書いているスタイルです。 これを「命令的（imperative）」な書き方と言います。

Reactの宣言的な書き方

Reactでは、次のように書きます。

function Header({ isLoggedIn }) {
  return (
    <header>
      <h1>{isLoggedIn ? 'ようこそ！' : 'ログインしてください'}</h1>
    </header>
  );
}
JSX

ここでは、

  • 「isLoggedInがtrueなら『ようこそ！』、falseなら『ログインしてください』を表示する」 という “あるべき姿”をそのままコードで表現しています。

Reactは、

  • 状態（isLoggedIn）が変わったときに
  • 「今の状態に合ったUI」を自動で再描画してくれます。

重要ポイント：

  • 宣言的UIとは、「状態に応じた画面の“結果”をコードで書く」スタイルです。
  • 「どうやってDOMを書き換えるか」ではなく、「状態に応じてどう見えるべきか」を考えます。

コンポーネント ― 「画面を部品として分けて考える」

コンポーネントとは何か

Reactにおける コンポーネントとは、

  • 画面の一部を表す「部品」
  • 入力（props）を受け取り
  • 出力（UI）を返す関数

のような存在です。

たとえば、次のようなコンポーネントがあります。

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

これらは、

  • Header → 画面上部のヘッダー部分
  • Footer → 画面下部のフッター部分

という「部品」を表しています。

画面を「部品の組み合わせ」として考える

Reactでは、画面全体を次のように分けて考えることができます。

  • Header
  • Main
  • Sidebar
  • Footer

それぞれをコンポーネントとして定義し、 最後に「組み合わせる」ことで1つの画面を作ります。

例：

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

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

function Sidebar() {
  return <aside>サイドバーです</aside>;
}

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

function App() {
  return (
    <div>
      <Header />
      <div style={{ display: 'flex' }}>
        <Main />
        <Sidebar />
      </div>
      <Footer />
    </div>
  );
}

export default App;
JSX

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

  1. Header・Main・Sidebar・Footerという「部品」をそれぞれコンポーネントとして定義しています。
  2. Appコンポーネントの中で、それらを組み合わせて1つの画面を作っています。
  3. <Header /> のように書くことで、「Headerコンポーネントをここに差し込む」という意味になります。

重要ポイント：

  • コンポーネントは「画面の部品」です。
  • 画面を「部品の組み合わせ」として考えることで、
    • 見通しが良くなる
    • 再利用しやすくなる
    • 修正しやすくなる

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

再利用 ― 「同じ部品を何度でも使える」というReactの強み

同じコンポーネントを複数箇所で使う

たとえば、次のような「カードコンポーネント」を考えます。

function InfoCard({ title, description }) {
  return (
    <section style={{ border: '1px solid #ccc', padding: '8px', margin: '8px 0' }}>
      <h2>{title}</h2>
      <p>{description}</p>
    </section>
  );
}
JSX

これを、Mainコンポーネントの中で複数回使うことができます。

function Main() {
  return (
    <main>
      <InfoCard
        title="Reactとは？"
        description="UIをコンポーネントとして組み立てるためのライブラリです。"
      />
      <InfoCard
        title="宣言的UIとは？"
        description="状態に応じた“あるべき姿”をコードで表現する考え方です。"
      />
    </main>
  );
}
JSX

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

  1. InfoCardは「タイトル＋説明文」を表示する部品です。
  2. Mainの中で、InfoCardを2回呼び出しています。
  3. titleとdescriptionを変えることで、 同じコンポーネントを別の内容で再利用しています。

重要ポイント：

  • コンポーネントは「同じ形のUIを、違う内容で何度でも使える」部品です。
  • 再利用性が高いほど、コードの重複が減り、保守性が上がります。

Virtual DOMの基本イメージ ― 「差分だけを賢く更新する」

DOMとは何か

DOM（Document Object Model）は、 ブラウザがHTMLを「木構造」として表現したものです。

  • <html>
    • <head>
    • <body>
      • <header>
      • <main>
      • <footer>

のような構造を、ブラウザが内部で管理しています。

Virtual DOMとは

Reactは、Virtual DOMという「仮想的なDOMのコピー」を内部に持っています。

ざっくりしたイメージは次の通りです。

  1. Reactは、コンポーネントから「理想のUI」をVirtual DOMとして作ります。
  2. 画面の状態が変わると、もう一度「新しいVirtual DOM」を作ります。
  3. 「前のVirtual DOM」と「新しいVirtual DOM」を比較して、 変わった部分だけを本物のDOM（ブラウザの画面）に反映します。

これにより、

  • 毎回全部を書き換えるのではなく
  • 差分だけを賢く更新する

ことができるため、パフォーマンスが良くなります。

重要ポイント：

  • Virtual DOMは「Reactが裏側でやってくれている最適化の仕組み」です。
  • 開発者は「コンポーネント」と「宣言的UI」に集中し、 DOMの細かい更新手順を意識しなくてもよくなります。

画面を Header / Main / Sidebar / Footer の部品として考える練習

最後に、この前半のテーマである 「画面を部品として考える」練習をまとめてイメージしてみます。

  1. 画面全体を思い浮かべる。 例：ブログサイト、ダッシュボード、学習サイトなど。
  2. それを次のように分けて考える。
    • 上部 → Header
    • 中央 → Main
    • 右または左 → Sidebar
    • 下部 → Footer
  3. それぞれをコンポーネントとして定義する。
  4. Appコンポーネントの中で、 <Header /> <Main /> <Sidebar /> <Footer /> を組み合わせて1つの画面にする。

この「部品として分けて考える」感覚が、 Reactで挫折しないための 最初の大きな一歩 になります。

DAY 12：Reactとは 前半のまとめ

この前半では、

  • Reactの特徴（宣言的UI・コンポーネント・再利用・Virtual DOM）をイメージで理解したこと
  • 宣言的UIとして「状態に応じた“あるべき姿”をコードで書く」考え方を確認したこと
  • コンポーネントを「画面の部品」として捉え、 Header / Main / Sidebar / Footer のように分けて考える練習をしたこと
  • 再利用性の高いコンポーネント（InfoCardなど）の例を通して、 「同じ部品を何度でも使える」Reactの強みを体感したこと
  • Virtual DOMを「差分だけを賢く更新するための裏方の仕組み」としてイメージしたこと

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

中盤・後半では、 ここで登場したコンポーネントや宣言的UIの考え方を、 実際のコードともう少し具体的な画面構成に落とし込みながら、 「Reactで画面を作る」という感覚をさらに深めていく流れになります。

DAY 12：Reactとは 中盤 ― 「コンポーネントとして画面を分解する」感覚を身につける

DAY 12の中盤では、前半で触れた

  • Reactの特徴
  • 宣言的UI
  • コンポーネント
  • 再利用
  • Virtual DOMの基本イメージ

を、実際の画面構成に落とし込んでいく時間にしていきます。 ここでは特に、画面を

  • Header
  • Main
  • Sidebar
  • Footer

という「部品」に分けて考える練習を、コードとセットで行っていきます。

Reactの特徴を「画面構成」で体感する

画面を“1枚の絵”ではなく“部品の集合”として見る

まず、シンプルなWebページをイメージしてみてください。

  • 上にロゴやタイトルがある
  • 中央にメインコンテンツがある
  • 横にメニューやプロフィールがある
  • 下にコピーライトやリンクがある

これをReact的な視点で見ると、次のように分解できます。

  • Header → ロゴ・タイトル・ナビゲーション
  • Main → メインコンテンツ（記事・ダッシュボードなど）
  • Sidebar → メニュー・プロフィール・補足情報
  • Footer → コピーライト・フッターメニュー

Reactの特徴である「コンポーネント指向」は、 まさにこの “画面を部品として分けて考える” ところから始まります。

宣言的UIを「Header〜Footerの構成」で考える

「こう見えるべき」をコードで書く

Reactの宣言的UIでは、 「この画面はこういう構成であるべき」という“結果”をコードで表現します。

たとえば、次のようなAppコンポーネントを考えます。

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

ここでは、

  • 画面の上にHeader
  • 中央にLayout（中にMainとSidebarを含む）
  • 下にFooter

という “あるべき構成”をそのままコードで書いている だけです。

DOMを直接操作しているわけではなく、 「この状態のとき、画面はこう見えるべき」という宣言をしているイメージです。

コンポーネントとして Header / Main / Sidebar / Footer を定義する

Headerコンポーネント

function Header() {
  return (
    <header style={{ padding: '16px', backgroundColor: '#1e293b', color: '#fff' }}>
      <h1>React入門 60日コース</h1>
      <nav>
        <a href="#home" style={{ marginRight: '8px', color: '#fff' }}>ホーム</a>
        <a href="#lessons" style={{ color: '#fff' }}>レッスン一覧</a>
      </nav>
    </header>
  );
}
JSX
  • 役割：画面上部の「顔」となる部分です。
  • 宣言的UIのポイント： 「ヘッダーはこういう見た目であるべき」という構造とスタイルを、 そのままJSXで表現しています。

Mainコンポーネント

function Main() {
  return (
    <main style={{ flex: 1, padding: '16px' }}>
      <h2>今日のレッスン：Reactとは</h2>
      <p>ReactはUIをコンポーネントとして組み立てるためのライブラリです。</p>
      <p>画面を部品として分けて考えることで、再利用性と保守性が高まります。</p>
    </main>
  );
}
JSX
  • 役割：メインコンテンツを表示する部分です。
  • 宣言的UIのポイント： 「今日のレッスン内容をここに表示する」という“あるべき姿”を、 HTMLに近い形で書いています。

Sidebarコンポーネント

function Sidebar() {
  return (
    <aside style={{ width: '240px', padding: '16px', backgroundColor: '#f1f5f9' }}>
      <h3>メニュー</h3>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
      </ul>

      <h3>プロフィール</h3>
      <p>このコースは、Reactで挫折しないための60日プログラムです。</p>
    </aside>
  );
}
JSX
  • 役割：補助的な情報やメニューを表示する部分です。
  • 再利用のポイント： 別のページでも「メニュー＋プロフィール」という構成をそのまま使い回せます。

Footerコンポーネント

function Footer() {
  return (
    <footer style={{ padding: '16px', backgroundColor: '#0f172a', color: '#fff', marginTop: '16px' }}>
      <p>© 2026 React入門 60日コース</p>
      <p>学習を継続することで、Reactの基礎が確実に身につきます。</p>
    </footer>
  );
}
JSX
  • 役割：画面下部の締めくくり部分です。
  • 宣言的UIのポイント： 「フッターはこういう情報を持つべき」という構造をそのまま書いています。

コンポーネントを組み合わせて「レイアウト」を作る

Layoutコンポーネントで Main と Sidebar を並べる

function Layout() {
  return (
    <div style={{ display: 'flex', minHeight: '60vh' }}>
      <Main />
      <Sidebar />
    </div>
  );
}
JSX

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

  1. Layoutは「画面中央のレイアウト」を担当するコンポーネントです。
  2. display: 'flex' を使って、MainとSidebarを横並びにしています。
  3. Mainはメインコンテンツ、Sidebarは補助情報という役割を持っています。
  4. Layout自体は「どのコンポーネントをどう並べるか」だけを担当し、 中身の詳細は各コンポーネントに任せています。

重要ポイント：

  • コンポーネントは「役割ごとに責任を分ける」ための単位です。
  • レイアウト用コンポーネント（Layout）と、 中身を表示するコンポーネント（Main・Sidebar）を分けることで、 画面構成がとても分かりやすくなります。

再利用のイメージを「Header〜Footer」で広げる

同じHeaderを別ページでも使う

たとえば、次のような別ページを考えます。

function LessonListPage() {
  return (
    <div>
      <Header />
      <main style={{ padding: '16px' }}>
        <h2>レッスン一覧</h2>
        <ul>
          <li>DAY 1：JavaScriptとは</li>
          <li>DAY 2：変数と型</li>
          <li>DAY 3：条件分岐</li>
          {/* ... */}
        </ul>
      </main>
      <Footer />
    </div>
  );
}
JSX

ここでは、

  • HeaderとFooterは、Appと同じものを使っています。
  • 中央のコンテンツだけが違うページになっています。

重要ポイント：

  • コンポーネントを部品として作っておくと、 「ヘッダーとフッターは共通、真ん中だけ変える」という構成が簡単に作れます。
  • 再利用性が高いほど、コードの重複が減り、修正も楽になります。

Virtual DOMの基本イメージを「部品の差し替え」で感じる

状態が変わったとき、Reactは何をしているか

たとえば、Mainコンポーネントの中で「今日のレッスン」を状態として持つとします。

function Main({ currentLesson }) {
  return (
    <main style={{ flex: 1, padding: '16px' }}>
      <h2>今日のレッスン：{currentLesson.title}</h2>
      <p>{currentLesson.description}</p>
    </main>
  );
}
JSX

currentLessonが変わると、

  • Reactは新しいVirtual DOMを作り
  • 前のVirtual DOMと比較し
  • 「タイトルと説明文が変わった」という差分だけを本物のDOMに反映します。

開発者は、

  • 「状態が変わったら、UIはこうあるべき」とコンポーネントで宣言するだけでよく、
  • DOMの細かい更新手順を意識する必要はありません。

重要ポイント：

  • Virtual DOMは「差分だけを賢く更新するための裏方の仕組み」です。
  • コンポーネントを部品として組み立てるほど、 Virtual DOMによる差分更新の恩恵を受けやすくなります。

Header / Main / Sidebar / Footer を使った「練習テンプレート」

最後に、読者のみなさんが実際に試せるテンプレートとして、 Appコンポーネント全体の例をまとめておきます。

function Header() {
  return (
    <header style={{ padding: '16px', backgroundColor: '#1e293b', color: '#fff' }}>
      <h1>React入門 60日コース</h1>
    </header>
  );
}

function Main() {
  return (
    <main style={{ flex: 1, padding: '16px' }}>
      <h2>DAY 12：Reactとは</h2>
      <p>ReactはUIをコンポーネントとして組み立てるためのライブラリです。</p>
      <p>画面を部品として分けて考えることで、再利用性と保守性が高まります。</p>
    </main>
  );
}

function Sidebar() {
  return (
    <aside style={{ width: '240px', padding: '16px', backgroundColor: '#f1f5f9' }}>
      <h3>レッスン一覧</h3>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
      </ul>
    </aside>
  );
}

function Footer() {
  return (
    <footer style={{ padding: '16px', backgroundColor: '#0f172a', color: '#fff', marginTop: '16px' }}>
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}

function Layout() {
  return (
    <div style={{ display: 'flex', minHeight: '60vh' }}>
      <Main />
      <Sidebar />
    </div>
  );
}

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

export default App;
JSX

このテンプレートを実際にApp.jsxに書いてみることで、

  • コンポーネント
  • 宣言的UI
  • 再利用
  • 画面を部品として考える感覚

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

DAY 12：Reactとは 中盤のまとめ

この中盤では、

  • Reactの特徴を「画面構成（Header / Main / Sidebar / Footer）」という具体的な形で捉え直したこと
  • 宣言的UIとして、「画面のあるべき構成」をコンポーネントで表現する練習をしたこと
  • Header / Main / Sidebar / Footer をそれぞれコンポーネントとして定義し、 Appの中で組み合わせる流れを確認したこと
  • 再利用性の高いコンポーネント設計が、 別ページでも同じ部品を使い回せることにつながると理解したこと
  • Virtual DOMの基本イメージを、「状態が変わったときに差分だけを更新する仕組み」として感じ取ったこと

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

後半では、 ここで作ったような画面構成に「状態」や「イベント」を少しずつ絡めていきながら、 Reactが「動くUI」をどのように扱うかを、さらに深く見ていく流れになります。

DAY 12：Reactとは 後半 ― 「React的なものの見方」を自分の中に定着させる

DAY 12の後半では、前半・中盤で触れてきた

  • Reactの特徴
  • 宣言的UI
  • コンポーネント
  • 再利用
  • Virtual DOMの基本イメージ

を、「頭で分かった」から「自分の感覚として持てる」レベルに近づけることを目指します。 特に、画面を

  • Header
  • Main
  • Sidebar
  • Footer

のような部品として考える視点を、もう一段深く定着させていきます。

Reactの特徴を「設計の視点」からもう一度整理する

Reactは“画面の設計思想”を変えるライブラリです

Reactの特徴を、設計の視点から整理すると次のようになります。

  • 宣言的UI → 「状態に応じたUIのあるべき姿」をコードで宣言します。
  • コンポーネント指向 → 画面を部品に分けて、責任を分割します。
  • 再利用性 → 一度作った部品を、別の場所・別の画面でも使い回せます。
  • Virtual DOM → 差分だけを賢く更新することで、パフォーマンスと開発体験を両立します。

ここで大事なのは、 Reactが「ただの便利なライブラリ」ではなく、 「画面をどう捉えるか」を変える存在だということです。

宣言的UIを「状態 × コンポーネント」で考える練習

状態によってHeaderの見え方を変える

たとえば、「ログイン状態」によってヘッダーの表示を変えたいとします。

function Header({ isLoggedIn, userName }) {
  return (
    <header style={{ padding: '16px', backgroundColor: '#1e293b', color: '#fff' }}>
      <h1>React入門 60日コース</h1>
      <div>
        {isLoggedIn ? (
          <span>こんにちは、{userName}さん</span>
        ) : (
          <span>ログインしてください</span>
        )}
      </div>
    </header>
  );
}
JSX

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

  1. Headerコンポーネントは、isLoggedInとuserNameという「状態」を受け取っています。
  2. isLoggedInがtrueなら「こんにちは、◯◯さん」、falseなら「ログインしてください」を表示します。
  3. 「状態に応じたUIのあるべき姿」を、returnの中でそのまま表現しています。

重要ポイント：

  • 宣言的UIでは、「状態がこうなら、UIはこうあるべき」というロジックを、 コンポーネントの中で直接表現します。
  • DOM操作（document.getElementByIdなど）を意識する必要はありません。

Mainの内容を「今日のレッスン」に応じて変える

function Main({ currentLesson }) {
  return (
    <main style={{ flex: 1, padding: '16px' }}>
      <h2>今日のレッスン：{currentLesson.title}</h2>
      <p>{currentLesson.description}</p>
    </main>
  );
}
JSX

currentLessonを次のように渡すとします。

const todayLesson = {
  title: 'Reactとは',
  description: 'ReactはUIをコンポーネントとして組み立てるためのライブラリです。',
};

function App() {
  return (
    <div>
      <Header isLoggedIn={true} userName="受講者" />
      <Layout currentLesson={todayLesson} />
      <Footer />
    </div>
  );
}
JSX

Layout側でMainに渡します。

function Layout({ currentLesson }) {
  return (
    <div style={{ display: 'flex', minHeight: '60vh' }}>
      <Main currentLesson={currentLesson} />
      <Sidebar />
    </div>
  );
}
JSX

ここでのポイントは、

  • 状態（todayLesson）をAppが持ち、
  • それをLayout→Mainへと渡していくことで、
  • 「今日のレッスン」に応じたUIが宣言的に表現されていることです。

コンポーネントの責任分割を「設計図」として意識する

各コンポーネントの責任を言語化してみる

Reactで挫折しないためには、 「コンポーネントごとに何を担当させるか」を意識することがとても重要です。

例として、次のように整理してみます。

  • Header → サイト全体のタイトル・ナビゲーション・ユーザー情報の表示を担当します。
  • Main → そのページの主なコンテンツ（レッスン内容など）を担当します。
  • Sidebar → 補助情報（メニュー・プロフィール・関連リンクなど）を担当します。
  • Footer → コピーライトやフッターメニューなど、ページの締めくくりを担当します。
  • Layout → MainとSidebarの配置（レイアウト）を担当します。
  • App → ページ全体の構成と、状態の入口を担当します。

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

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

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

再利用を「設計の武器」として意識する

Sidebarを別ページでもそのまま使う

たとえば、次のようなSidebarを作っておきます。

function Sidebar() {
  return (
    <aside style={{ width: '240px', padding: '16px', backgroundColor: '#f1f5f9' }}>
      <h3>レッスン一覧</h3>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
      </ul>
    </aside>
  );
}
JSX

これを、別のページコンポーネントでも使えます。

function LessonListPage() {
  return (
    <div>
      <Header isLoggedIn={true} userName="受講者" />
      <div style={{ display: 'flex', minHeight: '60vh' }}>
        <main style={{ flex: 1, padding: '16px' }}>
          <h2>レッスン一覧</h2>
          <ul>
            <li>DAY 1：JavaScriptとは</li>
            <li>DAY 2：変数と型</li>
            <li>DAY 3：条件分岐</li>
            {/* ... */}
          </ul>
        </main>
        <Sidebar />
      </div>
      <Footer />
    </div>
  );
}
JSX

重要ポイント：

  • 再利用性の高いコンポーネントを意識して設計すると、 新しいページを作るときに「部品を組み替えるだけ」で済むようになります。
  • これは、実務でも非常に重要な考え方です。

Virtual DOMを「差分更新のイメージ」で定着させる

状態が変わるとき、Reactは何をしているか

たとえば、currentLessonをボタンで切り替えるとします。

import { useState } from 'react';

const lessons = [
  {
    title: 'Reactとは',
    description: 'ReactはUIをコンポーネントとして組み立てるためのライブラリです。',
  },
  {
    title: '宣言的UI',
    description: '状態に応じたUIのあるべき姿をコードで表現します。',
  },
];

function App() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const currentLesson = lessons[currentIndex];

  return (
    <div>
      <Header isLoggedIn={true} userName="受講者" />
      <Layout currentLesson={currentLesson} />
      <button onClick={() => setCurrentIndex((prev) => (prev + 1) % lessons.length)}>
        次のレッスンへ
      </button>
      <Footer />
    </div>
  );
}
JSX

ここで起きていることを、Virtual DOMのイメージと合わせて整理すると、

  1. setCurrentIndexが呼ばれると、Reactは新しい状態（currentIndex）を使ってコンポーネントを再評価します。
  2. 新しいcurrentLessonに基づいて、新しいVirtual DOMが作られます。
  3. 前のVirtual DOMと新しいVirtual DOMを比較し、 「Mainコンポーネントのタイトルと説明文が変わった」という差分を検出します。
  4. その差分だけを本物のDOMに反映します。

開発者は、

  • 「ボタンが押されたら、次のレッスンを表示する」というロジックだけを書き、
  • DOMの更新手順はReactに任せることができます。

重要ポイント：

  • Virtual DOMは「差分だけを賢く更新するための仕組み」であり、 開発者は「状態とUIの関係」に集中できるようになります。

Header / Main / Sidebar / Footer を使った「完成イメージテンプレート」

最後に、DAY 12の後半のまとめとして、 状態・宣言的UI・コンポーネント・再利用をすべて含んだテンプレートを示します。

import { useState } from 'react';

function Header({ isLoggedIn, userName }) {
  return (
    <header style={{ padding: '16px', backgroundColor: '#1e293b', color: '#fff' }}>
      <h1>React入門 60日コース</h1>
      <div>
        {isLoggedIn ? (
          <span>こんにちは、{userName}さん</span>
        ) : (
          <span>ログインしてください</span>
        )}
      </div>
    </header>
  );
}

function Main({ currentLesson }) {
  return (
    <main style={{ flex: 1, padding: '16px' }}>
      <h2>今日のレッスン：{currentLesson.title}</h2>
      <p>{currentLesson.description}</p>
    </main>
  );
}

function Sidebar() {
  return (
    <aside style={{ width: '240px', padding: '16px', backgroundColor: '#f1f5f9' }}>
      <h3>レッスン一覧</h3>
      <ul>
        <li>DAY 10：JavaScript総合演習</li>
        <li>DAY 11：React開発環境</li>
        <li>DAY 12：Reactとは</li>
      </ul>
    </aside>
  );
}

function Footer() {
  return (
    <footer style={{ padding: '16px', backgroundColor: '#0f172a', color: '#fff', marginTop: '16px' }}>
      <p>© 2026 React入門 60日コース</p>
    </footer>
  );
}

function Layout({ currentLesson }) {
  return (
    <div style={{ display: 'flex', minHeight: '60vh' }}>
      <Main currentLesson={currentLesson} />
      <Sidebar />
    </div>
  );
}

const lessons = [
  {
    title: 'Reactとは',
    description: 'ReactはUIをコンポーネントとして組み立てるためのライブラリです。',
  },
  {
    title: '宣言的UI',
    description: '状態に応じたUIのあるべき姿をコードで表現します。',
  },
];

function App() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const currentLesson = lessons[currentIndex];

  return (
    <div>
      <Header isLoggedIn={true} userName="受講者" />
      <Layout currentLesson={currentLesson} />
      <button
        onClick={() => setCurrentIndex((prev) => (prev + 1) % lessons.length)}
        style={{ margin: '16px' }}
      >
        次のレッスンへ
      </button>
      <Footer />
    </div>
  );
}

export default App;
JSX

このテンプレートを実際に動かしてみることで、

  • Reactの特徴
  • 宣言的UI
  • コンポーネント
  • 再利用
  • Virtual DOMの基本イメージ

を、**「画面として動くもの」として体感できるようになります。

DAY 12：Reactとは 後半のまとめ

この後半では、

  • Reactの特徴を「設計の視点」から捉え直し、 宣言的UI・コンポーネント・再利用・Virtual DOMの関係を整理したこと
  • Header / Main / Sidebar / Footer を使って、 画面を部品として分けるだけでなく、「責任分割」として意識できるようにしたこと
  • 状態（currentLessonやisLoggedIn）とUIの関係を、 宣言的UIとしてコードで表現する練習をしたこと
  • Virtual DOMを「状態が変わったときに差分だけを更新する仕組み」として、 実際のコードの流れと結びつけてイメージできるようにしたこと

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

ここまで来た読者のみなさんは、 すでに「React的なものの見方」を自分の中に持ち始めています。 次のDAYからは、コンポーネント・JSX・props・Stateをさらに深掘りしながら、 より実践的なReactの書き方へと進んでいくことになります。

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