JSXと画面表示の仕組み | Next.js基礎：ReactコンポーネントとJSX・Propsの基本 | Next.jsによるWebアプリケーション開発概論

この節で学ぶこと

この節では、JSX が何なのか、そして書いた JSX がどうやって画面に表示されるのかを、React と Next.js の文脈で整理します。

React 公式では、JSX は JavaScript の構文拡張であり、JavaScript ファイルの中に HTML に似たマークアップを書けるようにする仕組みだと説明されています。

また、React では「描画するためのロジック」と「その結果としてのマークアップ」を、同じコンポーネントの中で扱うのが自然だとされています。

この節の到達目標は4つです。

JSX が HTML そのものではなく、JavaScript の中で UI を表現するための書き方だと説明できることです。
JSX の基本ルールとして「単一ルート」「タグを閉じる」「多くの属性は camelCase」を理解することです。
波括弧 {} を使って JavaScript の値や式を JSX に埋め込めると分かることです。
React の「render」と「commit」の流れをざっくり理解し、Next.js の page.tsx に書いた JSX が画面へ表示されるイメージを持てることです。

React 公式は render と commit を明確に分けて説明しており、Next.js 公式は page.tsx が route-unique UI を返すページコンポーネントだと説明しています。

JSX とは何か

HTML に似ているが、HTML そのものではない

React 公式では、JSX は JavaScript の構文拡張であり、HTML に似た見た目でマークアップを書けるようにするものだと説明されています。React と JSX は別物で、JSX はあくまで記法、React は JavaScript ライブラリです。

たとえば、次のようなコードです。

export default function Page() {
  return <h1>こんにちは、React</h1>
}

見た目は HTML の <h1> にそっくりです。

けれど、これは .tsx や .jsx の中に書かれた JSX です。React 公式も、JSX は HTML-like markup だが少し厳密であり、JavaScript ファイル内で動的な情報を表示できると説明しています。

なぜ JavaScript の中にマークアップを書くのか

React 公式では、Web がよりインタラクティブになるにつれて、JavaScript がどの HTML を出すかを決める場面が増え、その結果として React では rendering logic と markup が同じ場所にある方が自然になったと説明しています。

関係のあるものを同じコンポーネントに集めることで、変更しやすくなるという考え方です。

昔の感覚だと、「HTML は HTML ファイル、JavaScript は JS ファイル」と分かれている方が自然に見えるかもしれません。

けれど React では、「このボタンがどんな条件で表示され、どの文字を出すか」は強く結びついています。

だから JSX で見た目と表示ロジックを近くに置く方が、むしろ整理しやすいわけです。

JSX の基本ルール

ルート要素は1つにまとめる

React 公式では、コンポーネントから複数の要素を返すときは、単一の親タグで包む必要があると説明しています。余分な div を入れたくないときは、<>...</> の Fragment を使えます。

たとえば、これはそのままではだめです。

export default function Page() {
  return (
    <h1>見出し</h1>
    <p>説明文</p>
  )
}

代わりに、こう書きます。

export default function Page() {
  return (
    <>
      <h1>見出し</h1>
      <p>説明文</p>
    </>
  )
}

React 公式は、Fragment はブラウザの HTML ツリーに余分な要素を残さずにグループ化できると説明しています。つまり、JSX 上では1つにまとめるが、画面上には余計なタグを増やさないということです。

すべてのタグを閉じる

React 公式では、JSX は HTML より厳密なので、すべてのタグを明示的に閉じる必要があると説明しています。<img> のような self-closing tag も <img /> と書き、<li> なども必ず閉じます。

悪い例です。

export default function Page() {
  return (
    <>
      <img src="/logo.png" alt="logo">
      <ul>
        <li>商品A
        <li>商品B
      </ul>
    </>
  )
}

よい例はこちらです。

export default function Page() {
  return (
    <>
      <img src="/logo.png" alt="logo" />
      <ul>
        <li>商品A</li>
        <li>商品B</li>
      </ul>
    </>
  )
}

このルールは細かく見えますが、慣れるとかなり自然です。React 公式でも、エラーメッセージを読めば直しやすいと案内しています。

React 公式では、JSX の属性は JavaScript オブジェクトのキーになるため、多くの HTML / SVG 属性は camelCase で書くと説明しています。代表例として、class ではなく className、stroke-width ではなく strokeWidth が挙げられています。なお、aria-* と data-* は例外的に HTML と同じくダッシュ付きで書きます。

たとえば、こうです。

export default function Photo() {
  return (
    <img
      src="/photo.png"
      alt="sample"
      className="rounded"
    />
  )
}

ここで class="rounded" と書きたくなるのは自然です。

でも JSX では className を使います。これも初心者が最初にひっかかりやすい点なので、早めに慣れておくと楽です。

JSX に JavaScript を埋め込む

波括弧 `{}` を使う

React 公式では、JSX の中に JavaScript を埋め込みたいときは curly braces を使うと説明しています。これは「JavaScript の窓」のようなものです。タグの中でも、属性値でも使えます。

たとえば、変数を表示できます。

export default function Page() {
  const siteName = 'Prince Academy'

  return <h1>{siteName}</h1>
}

ここで siteName の値が JSX に差し込まれます。

React 公式では、このように JSX の子要素として JavaScript の値を入れる例が示されています。

属性値にも埋め込める

波括弧は、属性値でも使えます。React 公式も、src={avatar} のような形で JavaScript 値を属性へ埋め込む例を示しています。

export default function Avatar() {
  const imageUrl = '/avatar.png'
  const altText = 'プロフィール画像'

  return <img src={imageUrl} alt={altText} />
}

この書き方に慣れると、静的な見た目と動的なデータを同じ JSX の中で自然に扱えるようになります。

式は書けるが、文は書けない

React 公式の説明から分かる重要な点は、波括弧の中には値になるもの、つまり式を入れるということです。関数呼び出しや計算結果は入れられますが、if 文のような文そのものは別の形で扱います。

たとえばこれは大丈夫です。

export default function Price() {
  const amount = 2000

  return <p>税込価格: {amount * 1.1}円</p>
}

このように、JSX の中では「その場で評価される値」を差し込む感覚が基本になります。

JSX と画面表示の関係

JSX はそのままブラウザへ送られるわけではない

React 公式では、JSX は見た目は HTML っぽいが、そのままではなく、JavaScript オブジェクトのような形に変換されると説明しています。複数の JSX タグをラップなしで返せない理由についても、「関数から2つのオブジェクトをそのまま返せないのと同じ」と説明されています。

ここは少し抽象的ですが、とても大事です。

JSX は「ブラウザが直接読む HTML」ではなく、React が理解しやすい形へ変換されるための中間的な書き方です。だから HTML と似ていても、完全に同じルールではありません。

React の render と commit

React 公式では、画面表示の流れを大きく trigger → render → commit の3段階で説明しています。

Trigger: 最初の描画や state 更新などで描画が始まる
Render: React がどの UI にするか計算する
Commit: 計算結果を DOM に反映する

という流れです。初心者向けにかなりやわらかく言うと、こうです。

まず「画面を出して」「画面を変えて」というきっかけがあり、次に React が「次はこういう見た目だ」と設計図を作り、最後にブラウザへ反映します。JSX は、その設計図を書くための言語に近いものと考えると分かりやすいです。

Next.js では JSX がどこで使われるか

`page.tsx` の戻り値が画面になる

Next.js の App Router では、page.tsx が route-unique UI を定義するページコンポーネントです。つまり、app/page.tsx や app/about/page.tsx で return している JSX が、その URL の画面の元になります。

たとえば、こうです。

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <p>この JSX が画面に表示されます。</p>
    </main>
  )
}

この JSX が、React の render / commit の流れを通って、最終的に画面になります。

第2章までで見てきた page.tsx が、ここで「ただのファイル」ではなく、JSX を返す React コンポーネントとしてつながって見えてきます。

`layout.tsx` も JSX を返す

Next.js では layout.tsx は共有 UI を定義するためのコンポーネントです。children を受け取り、その外側に共通のヘッダーやフッターを置けます。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>
        {children}
      </body>
    </html>
  )
}

このコードでも、return しているのは JSX です。

つまり、Next.js のページもレイアウトも、結局は JSX を返す React コンポーネントとして動いています。

JSX を書くときの感覚

HTML を書く感覚に近いが、React の部品として考える

JSX は HTML に似ているので、最初は「HTML を書いているだけ」に見えることがあります。

でも実際には、React のコンポーネントの中で、JavaScript の値や式と結びついた UI を書いています。React 公式も、JavaScript が HTML を決める時代だからこそ、rendering logic と markup を同じ場所に置くと説明しています。

この感覚がつかめると、JSX はかなり扱いやすくなります。

「HTML の完全コピー」を目指すのではなく、JavaScript の中で UI を表現するための React 流の文法と考えるのが自然です。

見た目を書くと同時に、動的表示の準備もしている

たとえば、次のコードです。

export default function Greeting() {
  const userName = '佐藤'
  const currentYear = 2026

  return (
    <section>
      <h1>こんにちは、{userName}さん</h1>
      <p>{currentYear}年の学習を始めましょう。</p>
    </section>
  )
}

ここでは見た目を書いているだけでなく、値の差し込みも同時に行っています。

React 公式の curly braces の説明どおり、JSX は静的なタグの並びではなく、JavaScript の値を受け取りながら画面を構成できます。

初心者がつまずきやすい点

HTML と同じつもりで書くとエラーになる

React 公式でも、HTML をそのままコピペすると JSX では動かないことがあると説明しています。主な理由は、単一ルート、タグの閉じ忘れ、class と className の違いなどです。

つまり、JSX は HTML に似ていますが、そのまま完全互換ではないという意識が必要です。

波括弧を使う場所を迷う

文字列をそのまま書くなら波括弧は不要です。

JavaScript の変数や式を埋め込むときだけ使います。React 公式の curly braces の説明でも、これは JavaScript を JSX に持ち込むための仕組みです。

悪くはないが少し不自然な例です。

export default function Page() {
  return <h1>{'こんにちは'}</h1>
}

より自然なのはこうです。

export default function Page() {
  return <h1>こんにちは</h1>
}

JSX がどうして画面になるのか分からなくなる

この点は、React 公式の render / commit の流れをざっくり押さえるとかなり楽になります。

「JSX は設計図」「React が設計図を計算し」「最後に DOM へ反映する」というイメージでまずは十分です。

練習問題

問1

JSX の説明として最も適切なものはどれですか。

A. CSS 専用の記法

B. JavaScript の構文拡張で、HTML に似たマークアップを書ける

C. データベース接続のための設定ファイル

D. 画像圧縮専用の文法

答え

解説

React 公式では、JSX は JavaScript の syntax extension であり、JavaScript ファイルの中に HTML-like markup を書けるようにする仕組みだと説明されています。

問2

JSX のルールとして正しいものはどれですか。

A. タグは閉じなくてもよい

B. 複数要素を返すときは単一ルートでまとめる

C. class はそのまま class と書く

D. 必ず HTML ファイルに書く

答え

解説

React 公式では、複数要素を返すときは単一の親要素か Fragment で包む必要があると説明しています。また、タグは閉じ、className を使います。

問3

JSX の中で JavaScript の値や式を埋め込むときに使うものはどれですか。

A. 丸括弧 () B. 角括弧 [] C. 波括弧 {} D. 山括弧 <>

答え

解説

React 公式では、JavaScript in JSX with curly braces として、値や式を埋め込むときに {} を使うと説明しています。

問4

React の画面表示の流れとして正しいものはどれですか。

A. render だけで終わる

B. trigger → render → commit

C. compile → publish → deploy

D. save → zip → upload

答え

解説

React 公式では、UI 更新の流れを trigger、render、commit の3段階で説明しています。

問5

Next.js の app/page.tsx について正しいものはどれですか。

A. JSX を返すページコンポーネントとして route-unique UI を定義する

B. CSS だけを書ける特別ファイル

C. 環境変数だけを置くファイル

D. public の画像一覧を管理するファイル

答え

解説

Next.js 公式では、page は route-unique UI を定義するファイルだと説明されています。中身は JSX を返す React コンポーネントです。

まとめ

JSX は、React で UI を記述するための中心的な書き方です。HTML に似ていますが、実体は JavaScript の構文拡張であり、単一ルート、タグの明示的なクローズ、camelCase 属性といった React 流のルールがあります。また、波括弧 {} を使うことで、JavaScript の値や式を画面表示に自然に組み込めます。

そして、書いた JSX はそのまま魔法のように表示されるわけではなく、React の render と commit の流れを通って画面へ反映されます。Next.js の page.tsx や layout.tsx も、その JSX を返す React コンポーネントとして動いています。ここが見えてくると、React と Next.js のつながりがかなり自然に理解できるようになります。

参考文献

React Docs, Writing Markup with JSX
React Docs, JavaScript in JSX with Curly Braces
React Docs, Render and Commit
Next.js Docs, Getting Started: Layouts and Pages

この節で学ぶこと

この節では、JSX が何なのか、そして書いた JSX がどうやって画面に表示されるのかを、React と Next.js の文脈で整理します。

また、React では「描画するためのロジック」と「その結果としてのマークアップ」を、同じコンポーネントの中で扱うのが自然だとされています。

この節の到達目標は4つです。

JSX が HTML そのものではなく、JavaScript の中で UI を表現するための書き方だと説明できることです。
JSX の基本ルールとして「単一ルート」「タグを閉じる」「多くの属性は camelCase」を理解することです。
波括弧 {} を使って JavaScript の値や式を JSX に埋め込めると分かることです。
React の「render」と「commit」の流れをざっくり理解し、Next.js の page.tsx に書いた JSX が画面へ表示されるイメージを持てることです。

React 公式は render と commit を明確に分けて説明しており、Next.js 公式は page.tsx が route-unique UI を返すページコンポーネントだと説明しています。

JSX とは何か

HTML に似ているが、HTML そのものではない

たとえば、次のようなコードです。

export default function Page() {
  return <h1>こんにちは、React</h1>
}

見た目は HTML の <h1> にそっくりです。

なぜ JavaScript の中にマークアップを書くのか

関係のあるものを同じコンポーネントに集めることで、変更しやすくなるという考え方です。

昔の感覚だと、「HTML は HTML ファイル、JavaScript は JS ファイル」と分かれている方が自然に見えるかもしれません。

けれど React では、「このボタンがどんな条件で表示され、どの文字を出すか」は強く結びついています。

だから JSX で見た目と表示ロジックを近くに置く方が、むしろ整理しやすいわけです。

JSX の基本ルール

ルート要素は1つにまとめる

たとえば、これはそのままではだめです。

export default function Page() {
  return (
    <h1>見出し</h1>
    <p>説明文</p>
  )
}

代わりに、こう書きます。

export default function Page() {
  return (
    <>
      <h1>見出し</h1>
      <p>説明文</p>
    </>
  )
}

すべてのタグを閉じる

悪い例です。

export default function Page() {
  return (
    <>
      <img src="/logo.png" alt="logo">
      <ul>
        <li>商品A
        <li>商品B
      </ul>
    </>
  )
}

よい例はこちらです。

export default function Page() {
  return (
    <>
      <img src="/logo.png" alt="logo" />
      <ul>
        <li>商品A</li>
        <li>商品B</li>
      </ul>
    </>
  )
}

このルールは細かく見えますが、慣れるとかなり自然です。React 公式でも、エラーメッセージを読めば直しやすいと案内しています。

多くの属性は camelCase で書く

たとえば、こうです。

export default function Photo() {
  return (
    <img
      src="/photo.png"
      alt="sample"
      className="rounded"
    />
  )
}

ここで class="rounded" と書きたくなるのは自然です。

でも JSX では className を使います。これも初心者が最初にひっかかりやすい点なので、早めに慣れておくと楽です。

JSX に JavaScript を埋め込む

波括弧 `{}` を使う

たとえば、変数を表示できます。

export default function Page() {
  const siteName = 'Prince Academy'

  return <h1>{siteName}</h1>
}

ここで siteName の値が JSX に差し込まれます。

React 公式では、このように JSX の子要素として JavaScript の値を入れる例が示されています。

属性値にも埋め込める

波括弧は、属性値でも使えます。React 公式も、src={avatar} のような形で JavaScript 値を属性へ埋め込む例を示しています。

export default function Avatar() {
  const imageUrl = '/avatar.png'
  const altText = 'プロフィール画像'

  return <img src={imageUrl} alt={altText} />
}

この書き方に慣れると、静的な見た目と動的なデータを同じ JSX の中で自然に扱えるようになります。

式は書けるが、文は書けない

たとえばこれは大丈夫です。

export default function Price() {
  const amount = 2000

  return <p>税込価格: {amount * 1.1}円</p>
}

このように、JSX の中では「その場で評価される値」を差し込む感覚が基本になります。

Trigger: 最初の描画や state 更新などで描画が始まる
Render: React がどの UI にするか計算する
Commit: 計算結果を DOM に反映する

という流れです。初心者向けにかなりやわらかく言うと、こうです。

Next.js では JSX がどこで使われるか

`page.tsx` の戻り値が画面になる

たとえば、こうです。

export default function Page() {
  return (
    <main>
      <h1>トップページ</h1>
      <p>この JSX が画面に表示されます。</p>
    </main>
  )
}

この JSX が、React の render / commit の流れを通って、最終的に画面になります。

第2章までで見てきた page.tsx が、ここで「ただのファイル」ではなく、JSX を返す React コンポーネントとしてつながって見えてきます。

`layout.tsx` も JSX を返す

Next.js では layout.tsx は共有 UI を定義するためのコンポーネントです。children を受け取り、その外側に共通のヘッダーやフッターを置けます。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>
        {children}
      </body>
    </html>
  )
}

このコードでも、return しているのは JSX です。

つまり、Next.js のページもレイアウトも、結局は JSX を返す React コンポーネントとして動いています。

JSX を書くときの感覚

HTML を書く感覚に近いが、React の部品として考える

JSX は HTML に似ているので、最初は「HTML を書いているだけ」に見えることがあります。

この感覚がつかめると、JSX はかなり扱いやすくなります。

「HTML の完全コピー」を目指すのではなく、JavaScript の中で UI を表現するための React 流の文法と考えるのが自然です。

見た目を書くと同時に、動的表示の準備もしている

たとえば、次のコードです。

export default function Greeting() {
  const userName = '佐藤'
  const currentYear = 2026

  return (
    <section>
      <h1>こんにちは、{userName}さん</h1>
      <p>{currentYear}年の学習を始めましょう。</p>
    </section>
  )
}

ここでは見た目を書いているだけでなく、値の差し込みも同時に行っています。

React 公式の curly braces の説明どおり、JSX は静的なタグの並びではなく、JavaScript の値を受け取りながら画面を構成できます。

悪くはないが少し不自然な例です。

export default function Page() {
  return <h1>{'こんにちは'}</h1>
}

より自然なのはこうです。

export default function Page() {
  return <h1>こんにちは</h1>
}

B. JavaScript の構文拡張で、HTML に似たマークアップを書ける

C. データベース接続のための設定ファイル

D. 画像圧縮専用の文法

B. 複数要素を返すときは単一ルートでまとめる

C. class はそのまま class と書く

D. 必ず HTML ファイルに書く

B. trigger → render → commit

C. compile → publish → deploy

D. save → zip → upload

B. CSS だけを書ける特別ファイル

C. 環境変数だけを置くファイル

D. public の画像一覧を管理するファイル

React Docs, Writing Markup with JSX
React Docs, JavaScript in JSX with Curly Braces
React Docs, Render and Commit
Next.js Docs, Getting Started: Layouts and Pages