LESSON 02 · 約25分

JSXで、画面の構造を表す

関数からUIを返し、JavaScriptの値と条件を画面へ埋め込みます。

コードを試す前に

01のVite reactテンプレート（JavaScript/JSX）を使います。特記のないApp.jsxは、そのレッスンだけで動く独立した例です。例同士を連結しないでください。

短い学習用の例です。各App.jsxは独立した例で、順に追記して一つの完成品にする形式ではありません。ファイル名、依存関係、未定義部分の前提は注記に記載します。問題内の抜粋や空欄は、そのまま実行するための完成コードではありません。

開発環境の準備を確認する →

このレッスンでわかること

コンポーネントとHTMLタグを区別できる
JSXのルールと条件付き表示を使える

関数がUIの部品になる

Reactコンポーネントは、通常はJSXを返すJavaScript関数として書きます。自分で作る部品はStudyCardのように大文字から始め、<StudyCard />で使います。小文字のbuttonやsectionは組み込みのHTML要素として扱われます。部品の関数は、他の部品の内側で定義せず、ファイルのトップレベルに置きます。

HTMLと似ていて、少し違う

複数の要素を返すときは共通の要素かFragment（<>...</>）で包みます。imgやinputも閉じ、CSSのclassはclassNameと書きます。文字列は引用符、JavaScriptの式は波括弧で渡します。オブジェクトそのものではなく、titleなど表示可能な値を取り出しましょう。

条件もJavaScriptで決める

表示の分岐にはif、三項演算子、&&が使えます。done ? A : Bなら両方の場合を明示できます。件数を条件にする場合はcount > 0 && ...のように真偽値へ変換すると、0が画面に出る落とし穴を避けられます。表示に使う計算は、同じ入力から同じ結果を返すようにします。

学習カードを作る

src/App.jsx

function StudyCard() {
  const topic = 'JSX';
  const done = false;
  return (
    <section className="study-card">
      <h2>{topic}</h2>
      <p>{done ? '学習済み' : 'これから学ぶ'}</p>
    </section>
  );
}

export default function App() {
  return (
    <main>
      <h1>今日の学習</h1>
      <StudyCard />
    </main>
  );
}

CSSなしでも動きます。classNameはクラス名を付けるだけで、スタイルを自動生成しません。

TRY IT YOURSELF

条件で変わるカードを作る

doneをtrueにして文言が変わることを確かめる
残り時間minutesを追加し、JSXの式で「15分」などと表示する
minutes > 0のときだけ「続けよう」を表示する
minutesを0にし、意図しない0が出ないことを確認する

できたらOK：正しい見出し階層のカードが表示され、true・false・0の各条件で期待した文言になる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。