はじめに

React を学習していると、「 JSX は HTML ライクな記法です 」という説明をよく目にします。実際にコードを書くと、<div> や <h1> といった見慣れたタグが並び、「これは HTML と同じなのでは？」と感じる方も多いのではないでしょうか。

しかし、React における HTML ライクとは、「 HTML と同じ 」という意味ではありません。見た目は似ていても、仕組みも役割も大きく異なります。この違いを正しく理解していないと、なぜ React が JSX を採用しているのか、なぜ属性の書き方が違うのか、なぜ JavaScript の中にタグが書けるのか、といった疑問が解消されません。

この記事では、React における「 HTML ライク 」という言葉の本当の意味を、整理していきます。

参考にしたリンク

https://react.dev/learn/writing-markup-with-jsx

https://react.dev/learn/javascript-in-jsx-with-curly-braces

HTML ライクとは何を指す言葉なのか

React における HTML ライクとは、「 HTML に似た見た目で UI を記述できるが、実体は JavaScript の構文である 」という意味です。

一言で言うなら、HTML の見た目を借りた JavaScript の UI 記述方法です。

React は UI を JavaScript で作るライブラリです。そのため、本来であれば次のような JavaScript の関数呼び出しで UI を書く必要があります。

React.createElement("h1", null, "Hello")

しかしこれでは可読性が低く、HTML を知っている開発者にとっては直感的ではありません。そこで React は、HTML に似た書き方で UI を記述できる JSX を採用しました。

見た目は HTML ですが、内部的には JavaScript に変換されて処理されます。これが HTML ライクと呼ばれる理由です。

なぜ HTML ではなく HTML ライクなのか

React が HTML そのものではなく、HTML ライクな記法を採用している理由は、UI を JavaScript の世界で完結させるためです。

いつ使うかというと、コンポーネントの UI を定義するときです。React では UI もロジックも同じ JavaScript ファイルに書きます。そのため、HTML をそのまま使ってしまうと、JavaScript の変数や関数を柔軟に扱えません。

なぜ必要なのかというと、UI を動的に変化させるためです。React の強みは、state や props に応じて UI が自動的に変化する点にあります。これを実現するには、UI の記述が JavaScript の文脈に存在している必要があります。

もし通常の HTML だった場合、JavaScript と HTML を別々に扱う必要があり、React のコンポーネントという概念が成立しません。

JSX は HTML ではない

見た目が似ているため誤解されがちですが、JSX は HTML ではありません。JSX は JavaScript の拡張構文です。

JSX は最終的に JavaScript の関数呼び出しに変換されます。そのため、次のような違いが生まれます。

属性の書き方が違う

HTML では class を使いますが、JSX では className を使います。

これは、JSX が JavaScript であり、class が JavaScript の予約語だからです。

<div className="box">Hello</div>

HTML ライクですが、JavaScript のルールに従っています。

JavaScript を埋め込める

JSX では {} を使って JavaScript を書けます。

<h1>{title}</h1>

これは HTML では不可能です。UI が JavaScript の文脈にあるからこそ可能な表現です。

HTML ライクであることのメリット

HTML ライクであることの最大のメリットは、可読性と直感性を保ちながら、JavaScript の力を最大限に活かせることです。

なぜ必要なのかというと、UI とロジックを自然に結びつけるためです。React では「 UI は状態の結果である 」という考え方をします。この思想をコードで自然に表現できるのが JSX です。

例えば、条件によって表示を変える場合も、JavaScript の if 文がそのまま使えます。

{isLoggedIn && <p>ログイン中です</p>}

これは HTML では実現できません。

HTML と JSX の違いを整理

具体的な違いを整理すると理解が深まります。

HTML ライクはコンポーネント思想と相性が良い

React の中心的な考え方はコンポーネントです。UI を部品として分割し、それを組み合わせて画面を作ります。

HTML ライクな記法は、この部品の組み合わせを非常にわかりやすく表現できます。

<Header />
<Main />
<Footer />

見た目はタグですが、実際には JavaScript の関数です。これが HTML ライクの強力さです。

まとめ

React における HTML ライクとは、HTML の見た目を持ちながら、JavaScript として UI を記述できる仕組みのことです。

HTML のように書けるが、実体は JavaScript であるという点が最も重要です。

ポイント整理

• JSX は HTML ではなく JavaScript の構文
• HTML に似せることで直感的に書ける
• JavaScript を自由に埋め込める
• コンポーネント思想と非常に相性が良い
• UI とロジックを自然に結びつけられる

HTML ライクという言葉の意味を正しく理解すると、なぜ React が JSX を採用しているのかが明確になり、React の設計思想がより深く理解できるようになります。