Reactで登場するJSXとは
はじめに
を通してReactを学習する中でJSXというものが登場した。
しかし、このJSXがよくわかっていないため自分の理解も兼ねて調べたことを整理する。
JSXって何？
JSXとは「JavaScript XML」の略で、JavaScriptの拡張構文のこと。
JavaScriptファイル内にHTMLのようなコードを記述することができ、Reactコンポーネントを作成するときに、UI構造を視覚的にとらえることができる。
ただし、ブラウザが直接理解できるわけではないため、ビルド時にJavaScriptコードに変換が必要。
たとえば、下記のようにJSXコードを記述すると、単純なh1タグでラップした「Hello world!」を出力するコンポーネントを作成できる。
const element = <h1>Hello, world!</h1>;
JSXのメリット
-
直感的で読みやすい
JSXはHTMLとJavaScriptを組み合わせた宣言的な構文であり、開発者はコンポーネントの見た目を簡潔かつ直感的に記述できる。JSXを用いることで、コードの可読性が大幅に向上・学習コストの低下につながる。 -
JavaScriptの力を活かせる
JSXでは、JavaScriptの式をマークアップ内に直接記述することができる。具体的には中括弧{} を書いて、その中に変数を記述することで動的に値を埋め込むことができる。
const name = "Qoo";
const element = <h1>Hello, {name}!</h1>;
また、下記の例では、{name}のようにJavaScriptの式を使用して、nameの値に基づきコンテンツを動的にレンダリングしている。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Qoo" />;
- エラー検知しやすい
JSXはJavaScriptの構文拡張なので、JavaScriptの構文ルールから外れたコード（例：閉じタグがない、JavaScriptの命名規則に従っていない属性名）を書くと、ビルドツール（WebpackやViteなど）やブラウザのコンソールが構文エラーを検出してくれる。
また、ESLintなどの静的解析ツールを導入することで、JSX構文のエラーだけでなく（TypeScriptを使用している場合は）型エラー、コードスタイルに関する警告などもリアルタイムで検知できます。
Webアプリケーション開発におけるReact JSX
Reactにおいて、JSXは必須ではない（React.createElementとかでも書ける）。しかし、可読性や生産性の観点から、ほぼ全てのReact開発でJSXが今は利用されており、デファクトスタンダードとなっている。また、JSXを取り入れることで、UIそのものを「コンポーネント化」しやすくなり、状態やイベントと結びつけて表現することが容易になる。これにより、開発者はUIデザインにのみ集中できるようになる。
Discussion