JSX: JavaScript拡張と使い方例

JSXとは何か？

JSX (JavaScript XML) はJavaScriptの構文拡張で、2013年にReactで初めて導入されました。ディベロッパーが宣言的なスタイルでユーザーインターフェースの構造を記述し、マークアップとロジックをひとつのファイルに組み合わせることができます。

JSX以前、ディベロッパーは文字列テンプレート(Mustache, Handlebars)を使用したり、document.createElementを使って手動でDOM要素を作成したりしていました。どちらのアプローチにも缺点がありました: 文字列テンプレートはタイプチェックされず、手動DOM作成は面倒でエラーが発生しやすかったからです。

Reactは別の道を選びました—コードに直接マークアップを埋め込むことです。この決定はコミュニティで議論を呼びましたが、時代が進むにつれて標準になりました。今日、JSXはReactだけでなく、SolidJS, Preact, Qwik、さらにVueでもプラグインを通じて使用されています。

JSXの基本構文

JSX要素はHTMLタグのように見えますが、JavaScriptに直接埋め込まれます。各要素は三つの引数を持つReact.createElement呼出しにトランパイルされます: 要素タイプ、プロップスオブジェクト、コディリ・要素。1つのルート要素は必須ルールです: JSX式は1つの親要素またはフラグメントを返す必要があります。

import React from 'react';

// 基本JSX: 単一ルート要素
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

グルーピングのためのフラグメント

余分なDOMノードが不要な場合は、React.Fragmentまたはショートハンド構文<></>を使用します。フラグメントは実際のDOM要素を作成せず、コディリ・ノードをグループだけします。これは特にテーブルやリストで有用で、余分なラッパーがHTML構造を壊すことがあります。

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

JSXでの式と変数

あらゆるJavaScript式はカーリーブラケット{ }を使ってJSXに埋め込めます。内部では、変数、関数呼出し、三項演算子、配列メソッドを使用できます。条件付きレンダリングは三項演算子または論理的ANDを使って行います。

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

重要な制限として、カーリーブラケット内では式のみ使用でき、文は使用できません。if/else, for, switchは使用できず、三項演算子、論理演算子、配列メソッドのみが使用できます。関数呼出しは許され、アロー関数も含みます。

JSXとHTMLの違い

JSXは見た目がHTMLに似ていますが、根本的な違いがあります。属性はcamelCaseで書きます—classの代わりにclassName、onclickの代わりにonClick、tabindexの代わりにtabIndex。これはJSXがJavaScriptにトランパイルされ、プロパティ名にハイフンが使用できないからです。

もう一つの重要な違いはセルフクロージングタグです。HTMLでは、いくつかのタグ(br, hr, input)は閉じなくてもいい場合がありますが、JSXではすべてのセルフクロージングタグに閉じるスラッシュが必要です: <br />, <input />。SVG属性名もcamelCaseに変換されます: strokeWidth, fillOpacity。

JSXがJavaScriptにトランパイルされる仕組み

ブラウザはJSXを直接理解できません。実行前に、JSXコードはトランパイラ—Babel, TypeScript, esbuildを通過します。各JSX要素はcreateElementまたはjsx/runtime呼出しに変換されます。

Babelによる変換

// 元のJSX
const element = <h1 className="title">Hello</h1>;

// トランパイル後
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

React 17から、Reactのインポートが不要な新しいJSX変換が登場しました。jsx-runtimeの自動インポートにより、import React from ‘react’なしでコンポーネントを書くことができます。BabelとTypeScriptは{"runtime": "automatic"}構成を通じてこの変換をサポートしています。

React以外のJSX: Solid, Preact, Vue

JSXはReactと関連付けられていますが、他のフレームワークも使用しています。SolidJSは仮想DOMなしで実際のDOMノードにコンパイルするJSXを使用します。Preactは完全なJSXサポートを持つReactの軽量アルタナティブです。Vueは@vue/babel-plugin-jsxを通じてJSXをサポートしていますが、主なテンプレートはtemplateです。

主な違いは式のセマンティクスです。Reactでは、JSX式はレンダリングごとに実行されます。SolidJSでは、JSXは一度コンパイルされ、更新はシグナルを通じてトラックされます。これはパフォーマンスに影響します: SolidJSは仮想DOMやレコンシリエーションが不要なため、JSXレンダリングが高速です。

TypeScriptでは、JSXは言語レベルでサポートされています。.tsx拡張子のファイルは自動的にJSX構文を処理します。プロップスの型付けはTypeScript + JSXの主な利点のひとつです: IDEが予港属性、コールバックの型、プロップスの必須性を暗示してくれます。

JSXの最良実践

読みやすく、維持しやすいJSXコードを書きましょう。複雑な式を別の変数または関数に抽出します—これにより可読性が向上し、マークアップから離してロジックをテストできます。不要なdivラッパーの代わりにフラグメントを使用します。

インデントルール—ネスト要素に対してインデントを維持します。各ネストレベルは1つのインデントレベルです。閉じるタグは開くタグと同じレベルにする必要があります。長い属性には改行を使用します。

毎回のレンダリングで作成される場合、プロップス内のインラインアロー関数を避けます。そんな場合は、コールバックをuseCallbackでラップするか、関数をコンポーネントの外に移動します。複雑なコンポーネントはより小さなものに分けます—各コンポーネントはインターフェースの1つの論理ユニットを処理する必要があります。