KDOC 524: JSXがどのようにJavaScriptに変換されるかを見る

この文書のステータス

  • 作成
    • 2026-01-11 貴島
  • レビュー
    • <署名>

概要

Reactに対して、いまいち使いこなせていない感覚を感じつづけてきた。その理由の1つは、JSXを理解してないことに見える。明らかにJavaScriptとは違うのだが、混在して存在している。よくわかっていないので、確認することにした。

まず、JavaScriptとJSXの関係すら怪しかった。JSXは拡張構文である。

JSX (JavaScript) - Wikipedia

JSX (JavaScript XML, formally JavaScript Syntax eXtension) は、 JavaScript に XML のような文法が拡張された言語である。

じっさいに変換してみて確認する。 

cat << 'EOF' | npx -y esbuild --loader=jsx --format=cjs 2>&1
/* HTMLタグ */
<div>
  <h1>hello</h1>
</div>;

/* コンポーネント */
<Provider store={store}>
  <App />
</Provider>;

/* JSXとJavaScriptの混在 */
const jsx1 = <Component />;

/* 三項演算子 */
1 ? <p>a</p> : <p>b</p>

/* 比較演算子とJSXが区別される */
1<0>2;

EOF

/* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h1", null, "hello"));
/* @__PURE__ */ React.createElement(Provider, { store }, /* @__PURE__ */ React.createElement(App, null));
const jsx1 = /* @__PURE__ */ React.createElement(Component, null);
1 ? /* @__PURE__ */ React.createElement("p", null, "a") : /* @__PURE__ */ React.createElement("p", null, "b");
1 < 0 > 2;

cat << 'EOF' | npx -y esbuild --format=cjs 2>&1
<h1>hello</h1>

EOF

✘ [ERROR] The JSX syntax extension is not currently enabled

    <stdin>:1:0:
      1 │ <h1>hello</h1>
        ╵ ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "--loader:.js=jsx" to do that.

1 error

関連

なし。