Zenn
✨

JSXはブラウザが理解できないと言う話。

2024/12/14に公開
JavaScript
Next.js
React
JSX
tech

Reactを学び始めたばかりの開発者でもJSXが直接ブラウザで動作しないということが理解できないエンジニアも多いと思います。

JSXはReactアプリケーションでUIを記述するための非常に便利な構文ですが、ブラウザはこの構文をそのまま解釈することができません。本記事では、その理由と、JSXをブラウザで動作可能な形式に変換する仕組みについて解説します。

JSXとは何か？

JSX (JavaScript XML) は、Reactで使用される特殊な構文で、JavaScriptの中にHTMLのようなコードを記述できます。例えば以下のコードは、JSXの一例です。

const element = <h1 className="greeting">Hello, world!</h1>;

JSXはHTMLに似ていますが、JavaScriptの一部として扱われます。この構文は視覚的に直感的で、UIコンポーネントを記述する際に非常に便利です。

ブラウザが理解できない理由

ブラウザは、JavaScriptの標準仕様であるECMAScript (ES) に基づいてコードを実行します。しかし、JSXは標準的なJavaScript構文ではありません。実際、ブラウザはJSXコードを見るとエラーを出してしまいます。以下はその理由です。

  1. JavaScript構文に準拠していない
    JSXはHTMLライクな構文を持ちますが、JavaScriptではそのまま解釈できない特殊な記述です。

  2. トランスパイルが必要
    JSXコードはブラウザが理解できる純粋なJavaScriptコードに変換する必要があります。これを行うのがBabelやTypeScriptのようなツールです。

  3. ブラウザの標準仕様外
    JSXはReact固有の構文であり、Web標準の一部ではありません。そのため、Reactを利用しないプロジェクトでは使用することができません。

JSXの変換プロセス

JSXをそのままではブラウザが理解できないため、トランスパイルというプロセスを経て、JavaScriptコードに変換する必要があります。この変換プロセスを担当するのが、主にBabelというツールです。

以下のようなJSXコードを見てみましょう。

const element = <h1 className="greeting">Hello, world!</h1>;

は、Babelを使って次のような純粋なJavaScriptコードに変換されます:

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

この変換により、ブラウザはコードを問題なく解釈して実行できます。

なぜJSXを使うのか？

JSXがブラウザで直接動作しないのに、なぜReact開発者の多くがJSXを採用するのでしょうか？その理由は次の通りです。

  1. 可読性の向上
    JSXはHTMLに近い構文を持つため、UIを記述する際に直感的で読みやすいです。

  2. エラーの検出が容易
    JSXは構文エラーを簡単に特定でき、デバッグがしやすくなります。

  3. Reactエコシステムとの親和性
    JSXはReactの公式な推奨スタイルであり、ほとんどのReact関連ツールやライブラリがJSXを前提に設計されています。

トランスパイルの実装方法

ReactプロジェクトでJSXを使う際、トランスパイルは通常自動的に行われます。例えば、Create React App (CRA) を使ってプロジェクトを作成すると、Babelが既にセットアップされています。これにより、開発者はJSXをそのまま記述でき、トランスパイルを意識する必要がありません。

しかし、手動でセットアップする場合は、以下の手順を行います:

  1. Babelのインストール

    npm install --save-dev @babel/core @babel/preset-react

  2. Babel設定ファイルの作成

    プロジェクトのルートに.babelrcまたはbabel.config.jsを作成し、次のように設定します。

    {
  "presets": ["@babel/preset-react"]
}

  3. トランスパイルの実行

    コマンドラインで以下を実行し、JSXコードをJavaScriptコードに変換します。

    npx babel src --out-dir dist

まとめ

JSXはそのままではブラウザが理解できませんが、トランスパイルツールを使用することでその問題を解決できます。その結果、開発者は可読性が高く効率的なコードを書けるようになります。

Discussion