JSX とは何で、どのように JavaScript になりますか？

Question

Accepted Answer

**JSX** は、JavaScript の中に HTML のような markup を書けるようにする構文拡張です。ブラウザは JSX を**理解しません**。コードが実行される**前に**、compiler（Babel、SWC、esbuild など）が通常の関数呼び出しへ変換します。 ## 何に compile されるのか ```jsx const el =

Hi {name}

; // compiler はこれを次のように変換する（classic runtime）: const el = React.createElement( "h1", // tag / component { className: "title" }, // props "Hi ", name // children ); ``` 結果は UI を*記述する* plain JavaScript object（"React element"）です。これはまだ実 DOM node ではありません。React はその object を読み取り、Virtual DOM を構築します。 ## 重要なルール（と理由） ```jsx function Card({ user }) { return ( <> {/* Fragment: 余分な

なしで root を 1 つにする */}

{user.name}

{/* camelCase: class ではなく className */} {user.isAdmin && } {/* {} は任意の JS expression を埋め込む */} ); } ``` - **単一の root** を返す必要があります（兄弟要素は Fragment で包む）。 - attribute は **camelCase**（`className`, `onClick`）を使います。HTML ではなく JS に対応するためです。 - `{ }` は expression（値、ternary、`.map()`）を埋め込めますが、`if` のような statement は埋め込めません。 ## なぜ重要なのか JSX は `createElement` の syntax sugar にすぎないため、JSX でできることは plain JS でもできます。ただし JSX を使うと、UI code が生成する markup に近い形で読めるため、ネストした関数呼び出しよりはるかに読みやすくなります。