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

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 13：JSX 前半 ― 「Reactの見た目を作る言語」を理解する入口に立つ
  2. JSXとは ― 「JavaScriptの中で書く“HTMLっぽい記法”」
    1. JSXの正体
    2. なぜJSXを使うのか
  3. HTMLとの違い ― 「似ているけれど、完全に同じではない」
    1. 基本的な見た目はHTMLと同じ
    2. しかし「JavaScriptとしてのルール」がある
  4. {} の意味 ― 「ここにJavaScriptを差し込む」という合図
    1. JSXの中で {} が出てきたら「JavaScriptの出番」
    2. 式も書ける
  5. JavaScriptの埋め込み ― 「ロジックとUIをつなぐ橋」
    1. 条件分岐を埋め込む
    2. 配列を埋め込んでリストを表示する
  6. className ― 「HTMLのclassとJSXの違い」
    1. なぜ class ではなく className なのか
  7. JSXコメント ― 「コードの中にメモを書く方法」
    1. JSXの中でのコメントの書き方
  8. Fragment ― 「余計なdivを増やさずに複数要素を返すための仕組み」
    1. JSXでは「1つの親要素」が必要
    2. Fragmentで「見た目に余計なタグを増やさずに包む」
  9. DAY 13：JSX 前半のまとめ
  10. DAY 13：JSX 中盤 ― 「手を動かしてJSXの感覚をつかむ」
  11. JSXとHTMLの違いを「ミニ画面」で体感する
    1. シンプルなコンポーネントを書いてみる
    2. HTMLとの違いを意識するポイント
  12. {} と JavaScriptの埋め込みを「プロフィールカード」で練習する
    1. 変数を埋め込む
    2. 式を埋め込む
  13. className と JSXコメントを「見た目＋メモ」で練習する
    1. classNameでスタイルを当てる
    2. JSXコメントで「意図」を残す
  14. Fragmentを「余計なdivを増やさないための道具」として使う
    1. 複数要素を返したいときの問題
    2. Fragmentで解決する
  15. ミニテンプレート：JSXの要素を全部盛りにしたコンポーネント
  16. DAY 13：JSX 中盤のまとめ
  17. DAY 13：JSX 後半 ― 「JSXでReactらしいUIを書く」感覚を定着させる
  18. JSXと宣言的UIを結びつける ― 「状態に応じたUI」をJSXで書く
    1. 状態によって表示を切り替えるコンポーネント
  19. HTMLとの違いを「細かいルール」として整理する
    1. 属性名と書き方の違い
  20. {} とJavaScriptの埋め込みを「動くUI」で深掘りする
    1. リスト表示と条件分岐を組み合わせる
  21. className と JSXコメントを「読みやすさ・保守性」のために使う
    1. セマンティックなクラス名とコメントで意図を残す
  22. Fragmentを「レイアウトの自由度」を高めるために使う
    1. 余計なラッパーを増やさずに構造を保つ
  23. すべてを組み合わせた「JSX総まとめテンプレート」
  24. DAY 13：JSX 後半のまとめ

DAY 13：JSX 前半 ― 「Reactの見た目を作る言語」を理解する入口に立つ

DAY 13では、Reactで画面を作るときに必ず登場する JSX について学んでいきます。 この前半のゴールは、次のキーワードを「なんとなく」ではなく「手を動かせるレベル」で理解することです。

  • JSXとは
  • HTMLとの違い
  • {} の意味
  • JavaScriptの埋め込み
  • className
  • JSXコメント
  • Fragment

Reactのコンポーネントは、ほぼすべてJSXで書かれますので、 ここを押さえておくと、この先の学習が一気に楽になります。

JSXとは ― 「JavaScriptの中で書く“HTMLっぽい記法”」

JSXの正体

JSXは、JavaScriptの中でUIを表現するための拡張記法です。

見た目はHTMLにとてもよく似ていますが、 実際には JavaScriptのコードとして解釈される という点が重要です。

例として、次のコンポーネントを見てみます。

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

この <h1>Hello React!</h1> がJSXです。

  • 見た目はHTMLの<h1>タグ
  • 中身は「Reactのコンポーネントが返すUIの定義」

というイメージです。

なぜJSXを使うのか

JSXを使うことで、

  • UIの構造をHTMLに近い形で書ける
  • JavaScriptのロジックとUIを、1つのコンポーネントの中にまとめられる
  • 宣言的UIの考え方を、そのままコードに落とし込める

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

重要ポイント：

  • JSXは「HTMLっぽく見えるJavaScript」です。
  • Reactコンポーネントのreturnの中で使われるのが基本です。

HTMLとの違い ― 「似ているけれど、完全に同じではない」

基本的な見た目はHTMLと同じ

JSXでは、次のような書き方ができます。

function App() {
  return (
    <div>
      <h1>React入門 60日コース</h1>
      <p>これはJSXで書かれたコンポーネントです。</p>
    </div>
  );
}
JSX
  • <div>
  • <h1>
  • <p>

といったタグは、HTMLとほぼ同じように書けます。

しかし「JavaScriptとしてのルール」がある

JSXはJavaScriptの一部として扱われるため、 HTMLとは違うルールもいくつか存在します。

代表的な違いは次の通りです。

  • 属性名が違うものがある（例：classではなくclassName）
  • 1つのコンポーネントのreturnでは、1つの親要素しか返せない
  • {} を使ってJavaScriptの値や式を埋め込める

これらの違いを理解しておくと、 「HTMLのつもりで書いたらエラーになった」という戸惑いを減らせます。

{} の意味 ― 「ここにJavaScriptを差し込む」という合図

JSXの中で {} が出てきたら「JavaScriptの出番」

JSXの中で {} を使うと、 その中に JavaScriptの値や式を埋め込むことができます。

例：

const userName = '受講者';

function Header() {
  return <h1>こんにちは、{userName}さん</h1>;
}
JSX

ここでは、

  • userName はJavaScriptの変数
  • {userName} は「この場所に変数の値を差し込む」という意味

になります。

式も書ける

単なる変数だけでなく、式も書けます。

function LessonCount({ count }) {
  return <p>受講中のレッスン数：{count * 2}件</p>;
}
JSX
  • {count * 2} の部分は、JavaScriptの式です。
  • JSXは「この式を評価して、その結果を文字列として表示する」という動きをします。

重要ポイント：

  • {} は「ここからここまでがJavaScriptです」という境界線です。
  • JSXの中で動的な値を表示したいときは、必ず {} を使います。

JavaScriptの埋め込み ― 「ロジックとUIをつなぐ橋」

条件分岐を埋め込む

JSXの中で、条件によって表示を変えたいときにも {} を使います。

function LoginStatus({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? 'ログイン済みです' : 'ログインしてください'}
    </p>
  );
}
JSX

ここでは、

  • {isLoggedIn ? 'ログイン済みです' : 'ログインしてください'} という三項演算子を使って、表示内容を切り替えています。

配列を埋め込んでリストを表示する

const lessons = ['DAY 10：JavaScript総合演習', 'DAY 11：React開発環境', 'DAY 12：Reactとは'];

function LessonList() {
  return (
    <ul>
      {lessons.map((lesson) => (
        <li key={lesson}>{lesson}</li>
      ))}
    </ul>
  );
}
JSX

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

  1. lessonsはJavaScriptの配列です。
  2. lessons.map(...) は、配列をもとに<li>要素の配列を作っています。
  3. {lessons.map(...)} によって、その配列をJSXの中に埋め込んでいます。
  4. Reactは、その配列を展開して<li>要素として表示します。

重要ポイント：

  • JSXの中で {} を使うことで、 JavaScriptのロジック（条件分岐・配列処理など）とUIを自然につなげることができます。

className ― 「HTMLのclassとJSXの違い」

なぜ class ではなく className なのか

HTMLでは、要素にCSSクラスを付けるときに class 属性を使います。

<div class="container"></div>

しかし、JSXでは class ではなく className を使います。

function Box() {
  return <div className="container">ボックスです</div>;
}
JSX

理由は、

  • class はJavaScriptの予約語（クラス構文）である
  • JSXはJavaScriptの一部として解釈されるため、classをそのまま使うと紛らわしい

という背景があります。

重要ポイント：

  • JSXでCSSクラスを指定するときは、必ず className を使います。
  • これはReactを書くうえでの「お作法」として覚えてしまうのが楽です。

JSXコメント ― 「コードの中にメモを書く方法」

JSXの中でのコメントの書き方

JavaScriptの通常のコメントは、次のように書きます。

// これはJavaScriptのコメントです
/* これもJavaScriptのコメントです */
JavaScript

しかし、JSXの中でコメントを書くときは、 {/* ... */} の形を使います。

function App() {
  return (
    <div>
      {/* ここはJSXのコメントです */}
      <h1>React入門 60日コース</h1>
      <p>JSXのコメントは、画面には表示されません。</p>
    </div>
  );
}
JSX

ここでのポイントは、

  • JSXの中では {} の中にJavaScriptを書くルールがある
  • コメントも「JavaScriptの一部」として {/* ... */} の形で書く

ということです。

重要ポイント：

  • JSXコメントは {/* コメント内容 */} の形で書きます。
  • HTMLの <!-- --> はJSXでは使えないので注意が必要です。

Fragment ― 「余計なdivを増やさずに複数要素を返すための仕組み」

JSXでは「1つの親要素」が必要

Reactコンポーネントのreturnでは、 必ず1つの親要素を返す必要があります。

次のようなコードはエラーになります。

function BadComponent() {
  return (
    <h1>タイトル</h1>
    <p>説明文です</p>
  );
}
JSX

理由は、

  • returnの中に、兄弟要素が2つ並んでいる
  • JSXは「1つの親要素で包まれた構造」を期待している

ためです。

Fragmentで「見た目に余計なタグを増やさずに包む」

この問題を解決するために使うのが Fragment です。

import { Fragment } from 'react';

function GoodComponent() {
  return (
    <Fragment>
      <h1>タイトル</h1>
      <p>説明文です</p>
    </Fragment>
  );
}
JSX

または、短縮記法として <>...</> を使うこともできます。

function GoodComponent() {
  return (
    <>
      <h1>タイトル</h1>
      <p>説明文です</p>
    </>
  );
}
JSX

Fragmentのポイントは、

  • JSXのルールである「1つの親要素」を満たしつつ
  • 実際のDOMには余計なタグ（<div>など）を増やさない

というところです。

重要ポイント：

  • Fragmentは「見た目に影響を与えないラッパー」です。
  • レイアウト上、余計なdivを増やしたくないときにとても便利です。

DAY 13：JSX 前半のまとめ

この前半では、

  • JSXが「HTMLっぽく見えるJavaScript」であり、ReactコンポーネントのUIを表現するための記法であること
  • HTMLとの違いとして、classNameや「1つの親要素が必要」というルールがあること
  • {} が「ここにJavaScriptを埋め込む」という合図であり、 変数・式・配列処理などをUIに自然に組み込めること
  • JSXコメントを {/* ... */} の形で書くこと
  • Fragment（<Fragment> / <>...</>）を使うことで、 余計なタグを増やさずに複数要素を返せること

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

中盤・後半では、

  • 実際にJSXを使ってコンポーネントを作りながら、 {} の使い方や条件分岐・リスト表示をさらに深掘りし、
  • JSXが「Reactの宣言的UIを支える土台」であることを、 実践的なコードとともに体感していく流れになります。

DAY 13：JSX 中盤 ― 「手を動かしてJSXの感覚をつかむ」

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

  • JSXとは
  • HTMLとの違い
  • {} の意味
  • JavaScriptの埋め込み
  • className
  • JSXコメント
  • Fragment

を、実際のコード例を通して 「書ける・読める」レベル に近づけていきます。 ここでは、1つの小さな画面を題材にして、JSXの各ポイントをステップバイステップで確認していきます。

JSXとHTMLの違いを「ミニ画面」で体感する

シンプルなコンポーネントを書いてみる

まずは、JSXの基本形をもう一度確認します。

function App() {
  return (
    <div>
      <h1>React入門 60日コース</h1>
      <p>これはJSXで書かれたコンポーネントです。</p>
    </div>
  );
}

export default App;
JSX

見た目はHTMLに近いですが、これは JavaScriptの関数がJSXを返している という点が重要です。

  • function App() → コンポーネント
  • return (...) → UIの定義（JSX）

この形がReactコンポーネントの基本テンプレートになります。

HTMLとの違いを意識するポイント

同じような構造をHTMLで書くとこうなります。

<div>
  <h1>React入門 60日コース</h1>
  <p>これはHTMLで書かれたページです。</p>
</div>

JSXとの違いは次のような点です。

  • JSXは「JavaScriptの中に書く」
  • コンポーネントのreturnの中に書く
  • JavaScriptのルールに従う（className、1つの親要素など）

この違いを意識しながら、次のステップに進んでいきます。

{} と JavaScriptの埋め込みを「プロフィールカード」で練習する

変数を埋め込む

次に、ユーザーのプロフィールカードをJSXで作ってみます。

const userName = '受講者';
const courseName = 'React入門 60日コース';

function ProfileCard() {
  return (
    <div>
      <h2>{userName}さんのプロフィール</h2>
      <p>受講中のコース：{courseName}</p>
    </div>
  );
}
JSX

ここでのポイントは、

  • userName と courseName はJavaScriptの変数
  • {userName} や {courseName} は「この場所に変数の値を差し込む」という意味

です。

重要ポイント：

  • JSXの中で動的な値を表示したいときは、必ず {} を使います。
  • {} の中は「ふつうのJavaScript」として書けます。

式を埋め込む

次に、受講中のレッスン数を計算して表示してみます。

const completedLessons = 5;
const totalLessons = 60;

function Progress() {
  return (
    <p>
      学習進捗：{completedLessons} / {totalLessons}（
      {Math.round((completedLessons / totalLessons) * 100)}%）
    </p>
  );
}
JSX

ここでは、

  • {completedLessons} → 変数
  • {Math.round((completedLessons / totalLessons) * 100)} → 式

というように、JSXの中でJavaScriptのロジックを自然に使っています。

重要ポイント：

  • JSXは「見た目」と「ロジック」をつなぐ橋」です。
  • {} の中に式を書けることで、状態に応じたUIを柔軟に表現できます。

className と JSXコメントを「見た目＋メモ」で練習する

classNameでスタイルを当てる

次に、CSSクラスを使って見た目を整えてみます。

function StyledProfileCard() {
  return (
    <div className="profile-card">
      <h2 className="profile-title">受講者さんのプロフィール</h2>
      <p className="profile-text">React入門 60日コースを受講中です。</p>
    </div>
  );
}
JSX

ここでのポイントは、

  • HTMLでは class だが、JSXでは className を使う
  • className="profile-card" のように、文字列としてCSSクラス名を書く

という点です。

重要ポイント：

  • JSXでCSSクラスを指定するときは、必ず className を使います。
  • これはReactを書くうえでの「お作法」として覚えてしまうと楽です。

JSXコメントで「意図」を残す

JSXの中でコメントを書きたいときは、次のようにします。

function StyledProfileCard() {
  return (
    <div className="profile-card">
      {/* タイトル部分 */}
      <h2 className="profile-title">受講者さんのプロフィール</h2>

      {/* 説明文部分 */}
      <p className="profile-text">React入門 60日コースを受講中です。</p>
    </div>
  );
}
JSX
  • {/* コメント内容 */} の形で書く
  • 画面には表示されず、コードの中だけに残る

重要ポイント：

  • JSXコメントは {/* ... */} で書きます。
  • HTMLの <!-- --> はJSXでは使えないので注意が必要です。

Fragmentを「余計なdivを増やさないための道具」として使う

複数要素を返したいときの問題

次のようなコンポーネントは、JSXではエラーになります。

function BadComponent() {
  return (
    <h2>タイトル</h2>
    <p>説明文です</p>
  );
}
JSX

理由は、

  • returnの中に兄弟要素が2つ並んでいる
  • JSXは「1つの親要素で包まれた構造」を期待している

ためです。

Fragmentで解決する

この問題を解決するために、Fragmentを使います。

import { Fragment } from 'react';

function GoodComponent() {
  return (
    <Fragment>
      <h2>タイトル</h2>
      <p>説明文です</p>
    </Fragment>
  );
}
JSX

または、短縮記法を使うこともできます。

function GoodComponent() {
  return (
    <>
      <h2>タイトル</h2>
      <p>説明文です</p>
    </>
  );
}
JSX

重要ポイント：

  • Fragmentは「見た目に影響を与えないラッパー」です。
  • DOMに余計なdivを増やしたくないときに、とても便利です。

ミニテンプレート：JSXの要素を全部盛りにしたコンポーネント

最後に、ここまでの内容を1つのコンポーネントにまとめたテンプレートを示します。

import { Fragment } from 'react';

const userName = '受講者';
const courseName = 'React入門 60日コース';
const completedLessons = 5;
const totalLessons = 60;

function App() {
  const progressPercent = Math.round((completedLessons / totalLessons) * 100);

  return (
    <Fragment>
      {/* ヘッダー部分 */}
      <header className="header">
        <h1>{courseName}</h1>
        <p>こんにちは、{userName}さん</p>
      </header>

      {/* メインコンテンツ */}
      <main className="main">
        <section className="profile-card">
          <h2 className="profile-title">プロフィール</h2>
          <p className="profile-text">
            学習進捗：{completedLessons} / {totalLessons}（{progressPercent}%）
          </p>
        </section>

        <section className="lesson-list">
          <h2>レッスン一覧</h2>
          <ul>
            {['DAY 11：React開発環境', 'DAY 12：Reactとは', 'DAY 13：JSX'].map((lesson) => (
              <li key={lesson}>{lesson}</li>
            ))}
          </ul>
        </section>
      </main>
    </Fragment>
  );
}

export default App;
JSX

このコンポーネントには、

  • JSX
  • {} とJavaScriptの埋め込み
  • className
  • JSXコメント
  • Fragment

がすべて含まれています。 実際に書いて動かしてみることで、JSXの感覚がぐっとつかみやすくなります。

DAY 13：JSX 中盤のまとめ

この中盤では、

  • JSXとHTMLの違いを、コンポーネントの形で具体的に確認したこと
  • {} を使って、変数・式・配列処理をUIに埋め込む練習をしたこと
  • className と JSXコメントを使って、「見た目」と「意図」をコードに残す方法を体感したこと
  • Fragment（<Fragment> / <>...</>）を使って、余計なdivを増やさずに複数要素を返すパターンを学んだこと
  • それらを1つのミニテンプレートにまとめて、「JSXで画面を作る」感覚を育てたこと

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

後半では、 JSXとReactの「宣言的UI」「コンポーネント」「再利用」の考え方をさらに結びつけながら、 より実践的なコンポーネント設計へと進んでいく流れになります。

DAY 13：JSX 後半 ― 「JSXでReactらしいUIを書く」感覚を定着させる

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

  • JSXとは
  • HTMLとの違い
  • {} の意味
  • JavaScriptの埋め込み
  • className
  • JSXコメント
  • Fragment

を、「知っている」から「自然に使える」に近づけることを目標にします。 ここでは、少しだけ複雑な画面を題材にして、JSXの各要素を組み合わせていきます。

JSXと宣言的UIを結びつける ― 「状態に応じたUI」をJSXで書く

状態によって表示を切り替えるコンポーネント

まず、「ログイン状態」によって表示を変えるヘッダーをJSXで書いてみます。

function Header({ isLoggedIn, userName }) {
  return (
    <header className="header">
      <h1>React入門 60日コース</h1>
      <div className="header-status">
        {isLoggedIn ? (
          <span>こんにちは、{userName}さん</span>
        ) : (
          <span>ログインしてください</span>
        )}
      </div>
    </header>
  );
}
JSX

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

  1. HeaderはReactコンポーネントで、JSXを返しています。
  2. className="header" のように、CSSクラスをJSXのルールに従って指定しています。
  3. {isLoggedIn ? (...) : (...)} の部分で、JavaScriptの三項演算子を使って表示内容を切り替えています。
  4. {userName} で、JavaScriptの変数をJSXの中に埋め込んでいます。

重要ポイント：

  • JSXは「状態に応じたUIのあるべき姿」を、そのままコードで表現するための器です。
  • {} の中にJavaScriptを埋め込むことで、宣言的UIの考え方を実現しやすくなります。

HTMLとの違いを「細かいルール」として整理する

属性名と書き方の違い

JSXでは、HTMLと似ているけれど違う点がいくつかあります。 代表的なものを、コードとともに整理します。

function Button() {
  return (
    <button
      type="button"          // HTMLと同じ
      className="primary"    // JSXでは className
      onClick={() => alert('クリックされました')} // イベントはキャメルケース
    >
      クリック
    </button>
  );
}
JSX
  • class → className
  • onclick → onClick（キャメルケース）
  • イベントハンドラには、JavaScriptの関数を渡す

重要ポイント：

  • JSXは「HTMLっぽい見た目」ですが、中身はJavaScriptです。
  • そのため、属性名やイベントの書き方がJavaScriptのルールに寄っています。

{} とJavaScriptの埋め込みを「動くUI」で深掘りする

リスト表示と条件分岐を組み合わせる

次に、レッスン一覧を表示するコンポーネントを作り、 「完了済みかどうか」で表示を変えてみます。

const lessons = [
  { title: 'DAY 11：React開発環境', completed: true },
  { title: 'DAY 12：Reactとは', completed: true },
  { title: 'DAY 13：JSX', completed: false },
];

function LessonList() {
  return (
    <section className="lesson-list">
      <h2>レッスン一覧</h2>
      <ul>
        {lessons.map((lesson) => (
          <li key={lesson.title}>
            {lesson.title}
            {' '}
            {lesson.completed ? '✅ 完了' : '⏳ 受講中'}
          </li>
        ))}
      </ul>
    </section>
  );
}
JSX

ここでのポイントは、

  • {lessons.map(...)} で、配列をJSXに埋め込んでいること
  • lesson.completed ? '✅ 完了' : '⏳ 受講中' という条件分岐を、JSXの中で自然に使っていること
  • key={lesson.title} で、Reactがリストを効率よく扱うためのキーを指定していること

重要ポイント：

  • JSXの中で {} を使うことで、配列処理・条件分岐などのロジックをUIに直接結びつけられます。
  • 「ロジックはJavaScript、見た目はJSX」という役割分担を意識すると、コードが整理しやすくなります。

className と JSXコメントを「読みやすさ・保守性」のために使う

セマンティックなクラス名とコメントで意図を残す

JSXは、ただ動けばいいだけでなく、 「あとから読んだ人が意図を理解しやすいか」も重要です。

function Dashboard() {
  return (
    <div className="dashboard">
      {/* ヘッダー：コースタイトルとユーザー情報 */}
      <Header isLoggedIn={true} userName="受講者" />

      {/* メイン：進捗とレッスン一覧 */}
      <main className="dashboard-main">
        <Progress />
        <LessonList />
      </main>
    </div>
  );
}
JSX

ここでのポイントは、

  • className="dashboard" のように、意味のあるクラス名を付けていること
  • {/* ... */} で、「この部分は何をしているか」をコメントとして残していること

重要ポイント：

  • セキュリティや保守性の観点からも、「意図が分かるコード」は非常に重要です。
  • JSXコメントは、UIの構造や役割を説明するための有効な手段になります。

Fragmentを「レイアウトの自由度」を高めるために使う

余計なラッパーを増やさずに構造を保つ

複数のセクションを返したいが、 <div>で包みたくない場合にFragmentが役立ちます。

import { Fragment } from 'react';

function Page() {
  return (
    <Fragment>
      <Header isLoggedIn={true} userName="受講者" />
      <main className="page-main">
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </Fragment>
  );
}
JSX

または、短縮記法を使うこともできます。

function Page() {
  return (
    <>
      <Header isLoggedIn={true} userName="受講者" />
      <main className="page-main">
        <Progress />
        <LessonList />
      </main>
      <Footer />
    </>
  );
}
JSX

重要ポイント：

  • Fragmentは「DOMに余計なタグを増やさずに、JSXのルール（1つの親要素）を満たす」ための仕組みです。
  • レイアウトやCSS設計をきれいに保ちたいときに、とても役立ちます。

すべてを組み合わせた「JSX総まとめテンプレート」

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

import { Fragment } from 'react';

const lessons = [
  { title: 'DAY 11：React開発環境', completed: true },
  { title: 'DAY 12：Reactとは', completed: true },
  { title: 'DAY 13：JSX', completed: false },
];

const completedLessons = lessons.filter((l) => l.completed).length;
const totalLessons = 60;

function Header({ isLoggedIn, userName }) {
  return (
    <header className="header">
      <h1>React入門 60日コース</h1>
      <div className="header-status">
        {isLoggedIn ? (
          <span>こんにちは、{userName}さん</span>
        ) : (
          <span>ログインしてください</span>
        )}
      </div>
    </header>
  );
}

function Progress() {
  const progressPercent = Math.round((completedLessons / totalLessons) * 100);

  return (
    <section className="progress">
      <h2>学習進捗</h2>
      <p>
        完了レッスン：{completedLessons} / {totalLessons}（{progressPercent}%）
      </p>
    </section>
  );
}

function LessonList() {
  return (
    <section className="lesson-list">
      <h2>レッスン一覧</h2>
      <ul>
        {lessons.map((lesson) => (
          <li key={lesson.title}>
            {lesson.title}
            {' '}
            {lesson.completed ? '✅ 完了' : '⏳ 受講中'}
          </li>
        ))}
      </ul>
    </section>
  );
}

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

function App() {
  return (
    <Fragment>
      {/* ヘッダー：コースタイトルとユーザー情報 */}
      <Header isLoggedIn={true} userName="受講者" />

      {/* メイン：進捗とレッスン一覧 */}
      <main className="dashboard-main">
        <Progress />
        <LessonList />
      </main>

      {/* フッター */}
      <Footer />
    </Fragment>
  );
}

export default App;
JSX

このテンプレートには、

  • JSX
  • HTMLとの違い（className、イベントなど）
  • {} とJavaScriptの埋め込み（変数・式・配列処理・条件分岐）
  • JSXコメント
  • Fragment

がすべて含まれています。 実際に書いて動かしてみることで、JSXが「ReactのUIを支える土台」であることを、 画面とコードの両方から実感できるはずです。

DAY 13：JSX 後半のまとめ

この後半では、

  • JSXを「宣言的UIを実現するための具体的な記法」として捉え直したこと
  • HTMLとの違い（classNameやイベントの書き方など）を、実際のコンポーネントで確認したこと
  • {} を使ったJavaScriptの埋め込み（変数・式・配列・条件分岐）を、動くUIとして体感したこと
  • JSXコメントと意味のあるclassNameで、読みやすく保守しやすいコードを書く視点を持ったこと
  • Fragmentを使って、DOM構造をきれいに保ちながらJSXのルールを満たす方法を理解したこと

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

ここまで来た読者のみなさんは、 すでに「JSXでReactのUIを書くための基礎」をしっかり身につけています。 次のDAYからは、propsやStateと組み合わせながら、 より動的でインタラクティブなコンポーネントへと進んでいくことになります。

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