React.jsのJSXとはなんですか？

JSXは、JavaScript XMLの略語であり、Reactによって使用されるHTMLに似た構文です。

この構文はコンポーネント指向の開発に従っており、ECMAScript（ES6）に基づくJavaScriptを拡張し、XML / HTMLに似たテキストをJavaScriptとReactコードと共存できるようにします。

JSXはHTMLに似ていますが、完全に同じではありません。

このため、トランスパイラー（Babelなど）がJavaScriptファイルで見つかったHTMLに似たテキストを解析し、JavaScriptオブジェクトに変換することができます。

簡単に言えば、ブラウザはJSXをネイティブに理解できないため、JSXはHTMLのタグをReact要素として変換し、HTMLをJavaScript内に入れることができます。

これにより、HTMLとJavaScriptをブレンドすることができます。

ただし、JSXは通常のJavaScriptではないことに注意してください。

ブラウザはJSXコードを含むJavaScriptファイルを実行できません。

したがって、Reactを使用する場合は、Babelなどのトランスパイラーをプロジェクトに追加する必要があります。

以上のように、JSXはJavaScriptの拡張であり、HTMLに似た構文を持つReactのコンポーネント指向開発に役立ちます。

Reactでの仮DOMによる、レンダリングはどうなっているのか気になった方は下記を参照下さい。

React 仮想DOM【Virtual DOM】の仕組み - deve.K's Programming Primer - プログラミング初心者のための入門ブログ

なぜJSXなのか？

JSXはReactの核心機能の一つであり、Reactのコンポーネントを作成するために使用されます。

JSXを使用すると、JavaScriptコード内でUIを操作するときに視覚的な補助となります。

また、JSXを使用することで、ネストされた大規模なHTMLドキュメントを簡単に作成できます。

Reactのコミュニティでは、JSXの読みやすさに価値があると考える開発者が多くいます。

Reactでは、JSXを必ず使用する必要性はありませんが、ほとんどの開発者はJSXを使用することを強く推奨しています。

クリーンで明確なコードを書くことができ、保守性が向上し、エラーや警告メッセージもより詳細に表示されます。

また、HTMLコードにReact.jsライブラリを直接インポートすることで、npmなしでJSX構文としてReactアプリを作成することも可能です。

JSXはReactの魅力的な機能の一つであり、Reactアプリケーションの開発を助けるために設計されています。

JSXを使用することで、Reactの強力な機能を最大限に活用できます。

npmを使用せずにReactアプリを作成して実行するために必要な手順は下記で解説しております。

dev-k.hatenablog.com

JSとの違い

Reactでは、JSXを使用してコンポーネントの見た目や構造を記述し、それをJavaScriptコードに変換することができます。

この際に、Babelなどのトランスパイラーを使用することで、JSXをJavaScriptに変換することができます。

しかし、Reactライブラリ自体がJSXを処理するためのランタイムライブラリであり、BabelはReactライブラリをインストールしている必要があるため、Reactライブラリに依存する必要があります。

Reactアプリケーションのエントリポイントファイルは通常、ファイルの拡張子を「.js」にします。

これは、ビルドツールや環境設定がシンプルになるためです。

JSXを使用するReactコンポーネントも、通常は「.js」の拡張子を持ちます。

JSXの構文はBabelなどのトランスパイラを使用してJavaScriptに変換されるため、拡張子が「.jsx」である必要はありません。

したがって、大規模なプロジェクトで全てのReactコンポーネントに「.jsx」拡張子を設定する必要はありませんし、実際には「.js」拡張子を使用することが推奨されています。

公式ドキュメントもこのアプローチをサポートしています。

すべてのJSX構文は通常のJS関数呼び出しに変わります。

つまり最終的にはJavaScriptに変更されます。

Reactコンポーネント内のJSX構文は、トランスパイラーによってReact.createElement()呼び出しに変換されます。

// JSX構文

const App = () => {
    return <div>Hello world!</div>
}

// JS(Babel コンパイル後)
const App = () => {
  return React.createElement(
'div',
 null,
"Hello world!");
};

//クラス
// JS(Babel コンパイル後)
var Foo = React.createClass({
  render() {
    return (
      <div>
        <p>
         Hello world!
        </p>
      </div>
    );
  }
});

これにより、Reactライブラリに依存するJavaScriptコードが生成されます。

クラスコンポーネントでのJSX構文のコードは、React.createClassとしてJSにコンパイルされることがありましたが、React v16.0以降では非推奨となっています。

現在は、クラスコンポーネントを定義する際には、ES6のclass構文を使用することが推奨されています。

下記は、React v16.0以降でクラスコンポーネントを定義する際に、JSXをJavaScriptにコンパイルしたコードの例です。

// JSX構文
class App extends React.Component {
  render() {
    return <div>Hello world!</div>;
  }
}

// コンパイル後のJSコード
class App extends React.Component {
  render() {
    return React.createElement("div", null, "Hello world!");
  }
}