Blog Article

React における「 HTML ライク」とは何か？

2026年02月05日

はじめに

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 is a syntax extension for JavaScript.
出典：https://react.dev/learn/writing-markup-with-jsx

この一文が、HTML ライクの本質を表しています。

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 ライクがないとどう困るか

もし React が HTML ライクな JSX を持っていなかった場合、開発者はすべて React.createElement で UI を書く必要があります。

React.createElement("div", null,
  React.createElement("h1", null, "Title")
)

これでは UI の構造を直感的に把握できません。コンポーネントという考え方も理解しづらくなります。

HTML ライクであることは、React を「書きやすいライブラリ」にしている非常に重要な要素です。

HTML と JSX の違いを整理する

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

項目	HTML	JSX（ HTML ライク）
正体	マークアップ言語	JavaScript の構文
class	class	className
for	for	htmlFor
JavaScript の埋め込み	不可	可能
条件分岐	不可	可能
繰り返し	不可	可能

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

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

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

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

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

いつ HTML ライクの重要性を実感するのか

アプリが大きくなり、状態や条件分岐が増えたときに HTML ライクの恩恵を強く感じます。UI がそのままロジックと結びついているため、コードの流れを自然に追うことができます。

これは、HTML と JavaScript を分離して書いていた従来の開発手法では得られなかった体験です。

まとめ

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

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

ポイント整理

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

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

React

React における「 HTML ライク 」とは何か？